Week #10
*CHECK HOMEWORK*
Talk about Student Pages:
https://ryansmithart.com/fa2022/students.html
*talk about Project #1 Grades
*Review:
Responsive Web Design (W3)
- What are SVG files?
- How to make a square image a circle
.circular-square { border-radius: 50%; }
<img class="circular-square" src="chakras/Third-Eye-Chakra-1.jpg" width="100" height="100" alt="chakra">
BOOTSTRAP
getBootStrap.com
Beginners Guide (video)
youtube.com/watch?v=WpzT-pTImyo
Bootstrap Grid (video)
youtube.com/watch?v=ceNe37KIjPY (12 columns)
getbootstrap.com/docs/5.1/examples/jumbotron/
getbootstrap.com/docs/5.1/examples/carousel/
MORE LINKS:
Dropdown Menu (W3)
Dropdown Images (W3)
Responsive Navbar with Dropdown
(W3)
The Container Class (W3)
- First Try...
(rS)
* Download: try1.zip
- Try #2 with Bootstrap/carousel
*Download:
carousel.zip
class="img-fluid mx-auto"
/* added CSS style: */
.navbar{
background-color:teal;
}
https://www.pexels.com/search/space/
/* added CSS style: */
.overlay-image{
position:absolute;
bottom:0;
left:0;
right:0;
top:0;
background-position: center;
background-size:cover;
opacity:1;
}
<div class="carousel-item active">
<!--
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
-->
<!-- image size: 1000 x 500px -->
<div class="overlay-image" style="background-image:url(bg1.jpg);"></div>
<div class="container">
<div class="carousel-caption text-start">
<h1>Slide #1</h1>
<p>Some representative placeholder content for the first slide of the carousel.</p>
<p>Blah Blah Blah </p>
</div>
</div>
</div> <!-- end slide #1 -->
Autoplay Embedded Youtube Videos...
What's a favicon?
http://www.photoshopsupport.com/tutorials/jennifer/favicon.html
More info:
https://seranking.com/blog/what-is-a-favicon/
<link rel="icon" href="favicon.jpg" type="image/jpg">
Or:
ryansmithart.com/favicon.ico
Talk about Project #2
Open: SPACE! w/Bootstrap (project2/index.html)
PROJECT__2.ZIP (8.2MB)
HOMEWORK:
Finish Project #2
Required materials for this class:
(1) a flash drive or hard drive: 2GB or more
(some external device to store your work on)
(2) *Personal Web Space (Towson user accounts are fine)
(3) a sketchbook, something not too big, about 8x10 inches
(for notes and sketches)
(4) something to write & make drawings with