chakra
ART 466
section #1 section #2 section #3





# WEEK 10


(Wednesday) April 6

Weather forecast Towson
Partly Cloudy, "Drizzles" 58°F - 46°F 


Talk About Student Pages:
ryansmithart.com/2022/466/students

(Review) UPLOADING?


REVIEW: CSS POSITIONING & OTHER FUN STUFF



Center divs using CSS:

#wrap{
  text-align:left;
  max-width:1000px;
  min-width:600px;
  margin-left:auto;
  margin-right:auto;
  width:60%;
  background-color:white;
  padding:10px;
}


WIDTH="100%"

<div id="chakra">

<img src="../4_72_chakra.gif" width="100%" alt="chakra"/>

</div><!-- end chakra -->











hot dog menu...

Open: HOTDOG.HTML

DOWNLOAD: HOTDOG.ZIP

 








Smooth Scroll...


<!-- HTML FOR <BODY> SECTION -->

<div class="main" id="section1">
<h2>Section 1</h2>
<p>Click on the link to see the "smooth" scrolling effect.</p>
<a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
<p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>

<div class="main" id="section2">
<h2>Section 2</h2>
<a href="#section1">Click Me to Smooth Scroll to Section 1 Above</a>
</div>

/*CSS FOR SMOOTH SCROLL */

<style>
#section1 {
height: 600px;
background-color: pink;
}

#section2 {
height: 600px;
background-color: yellow;
}
</style>


//JAVASCRIPT & JQUERY:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {

// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();

// Store hash
var hash = this.hash;

// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){

// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>






Gif animations?

Photoshop > window > timeline > animation...

file > export > save for web...

OPEN: 4_72_chakra.psd.zip (5.2mb)

https://www.chakras.info







helpful links:


Make a Div 100% Height of Browser Window


clockTab.com

****changing the background with CSS 


w3schools.com/howto/howto_js_lightbox

* Google fonts * 

CSS OPACITY AND TRANSPARENCY

* Towson OTS


** Full screen video backgrounds **

MORE LINKS : )

blindTextGenerator.com/Lorem-Ipsum

lokeshdhakar.com/projects/LightBox2/


tiffzhang.com

tiffzhang.com/startup/index.html...


w3schools.com/howto_css_Smooth_Scroll

w3schools.com/HowTo/_css_Smooth_Scroll






talk about Project #2




HOMEWORK:



Keep working on "PROJECT #2