Week #11
Talk about Student Pages:
https://ryansmithart.com/2023/students.html
talk about Project #1 & GRADES
- talk about Project #2
examples:
- example_1
- example_2
- example_3
*Review:
Responsive Web Design (W3)
- What are SVG files?
- How to make a square image a circle
<style>
.circular{border-radius:50%;}
</style>
<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 -->
HOMEWORK:
*Keep working on Project #2
(Due April 26th)
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