From db0c028dd7d5030ed1597851b00f432519d67968 Mon Sep 17 00:00:00 2001 From: Timmy Nguyen Date: Tue, 3 Nov 2020 00:19:08 -0800 Subject: [PATCH] first commit --- css.css | 315 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 58 ++++++++++ 2 files changed, 373 insertions(+) diff --git a/css.css b/css.css index e69de29..4a52767 100644 --- a/css.css +++ b/css.css @@ -0,0 +1,315 @@ +@import url('https://fonts.googleapis.com/css2?family=Itim&family=Roboto&display=swap'); + + +/* +font-family: 'Itim', cursive; +font-family: 'Roboto', sans-serif; + +//Holding this for reference// */ + +@font-face{ + font-family:jungle; + src:url(jungle.ttf); +} /* this is a way to import external fonts that you've dl and can be added in css */ + + +/* Universal Style Section */ +*{ + max-width: 100%;/* doesnt allow divs to go rogue */ + box-sizing: border-box; +} + +/* Header */ + +header{ + display: flex; + justify-content: space-between; + width: 100%; + height: 140px; + padding: 20px; + background: rgba(115,167,136,.8); + margin-bottom: 20px;/* for the space between the header and the next box*/ +} + +header a{ + text-decoration: none; /*gets rid of the underline for links*/ +} +.logo{ + background:url(images/logo.png) no-repeat; + background-size:100px; + font-family: jungle; + font-size: 3rem; + color:#135e46; + padding-left: 100px;/* to move the logo over to the left to get away from the text */ + text-shadow: 3px 3px black; /* helps the text be readable and gives depth */ + transition: .3s; /* animates the logo */ +} + +.logo:hover{ + transform: translate(10px); + color: white; +} +nav{ /* flexbox inside flexbox */ + display: flex; + width: 40%; + justify-content: space-around; + align-items: center; +} +nav a{ /* stylizing the a tags inside nav*/ + font-family: jungle; + color: #b67b65; + font-size: 1.8rem; + text-shadow: 2px 2px black; + transition: .3s; +} + +nav a:hover{ /* for the mouse to interact */ + color: white; + transform: scale(1.3); +} + +/* Banner Style Section*/ + +.banner{ + display: flex; + width: 100%; + height: 60vh; + background: url(images/slothStare.jpg) no-repeat; + background-position: center; + background-size: cover; /*using bg-pos and bg-size will help stylize the image*/ + align-items: center; + margin-bottom: 20px; +} + +.banner:hover .slothText{ + opacity: 1; +} +.slothText{ + width:30%; + height: auto; + opacity: 0; + background: rgba(115,167,136,.8); + border-radius: 10px; + color:white; + padding: 15px; + margin-right: 20px; + text-shadow: 1px 1px black; + font-family:'Roboto', sans-serif; + font-size: 1.1rem; + transition: .5s; +} + +/* Sloths Style Section*/ + +.meetSloths{ + height: 50vh; + width: 100%; + background: rgba(115,167,136,.8); +} + +.sloths{ + width: 100%; + display: flex; + justify-content: space-evenly; +} + +h1{ + font-family: 'Roboto', sans-serif; + font-size: 1.7rem; + color: white; + text-shadow: 2px 2px black; + margin: 0 0 40px 30px; + padding-top: 40px; +} + +.sloths div{ + width: 25%; + height: 30vh; + border: 5px solid white; + border-radius: 20px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-position: center; + background-size: cover; +} + +.sloth1{ + background:url(images/slothHanging.jpg) no-repeat; +} +.sloth2{ + background:url(images/slothClimbing.jpg) no-repeat; +} +.sloth3{ + background:url(images/slothChilling.jpg) no-repeat; +} + +.sloths div div{ + width: 70%; + height: auto; + background: rgba(115,167,136,.8); + border-radius: 10px; + padding:15px; + font-size: 1rem; + color:white; + text-shadow: 1px 1px black; + font-family:'Roboto', sans-serif; + text-align: center; + opacity: 0; + transition: .5s; +} + +.sloths div:hover div{ + display: flex; + height: 10vh; + width: 100%; + justify-content: space-evenly; + align-items: center; + opacity: 1; +} + +/* Footer Styling */ + + +footer{ + display: flex; + width:100%; + height: 15vh; + justify-content: space-evenly; + align-items: center; +} + +footer img{ + width: 50px; +} +footer img:hover{ + transition: 1s; + transform: scale(1.5); +} + +footer span{ + font-family:'Roboto', sans-serif; +} +footer span:hover{ + color:#135e46; + transition: 1s; + transform: scale(1.5); +} +footer a{ + text-decoration: none; + font-family: 'Roboto', sans-serif; + color: black; + font-size: 1rem; + transition:.3s; +} +footer a:hover{ + color:#135e46; + transform: scale(1.3); + transition:1s; +} + +/* ******* MEDIA STYLES ******* */ + +@media(max-width:800px){/* anything less than 800px will inherit the styles*/ + + + /* Header */ + + header{ + display: flex; + justify-content: space-around; + flex-direction: column; + height: 180px; + padding: 10px; + align-items: center; + margin-bottom: 10px; + } + .logo{ + background-size:80px; + font-size: 2.3rem; + padding-left: 80px; + } + nav{ + display: flex; + width: 100%; + justify-content: space-evenly; + } + nav a{ + font-size: 1.5rem; + } + + /* Banner Style Section*/ + + .banner{ + display: flex; + width: 100%; + height: 40vh; + align-items: center; + margin-bottom: 20px; + } + + .slothText{ + width:100%; + height: auto; + margin-right: 20px; + opacity: 1; + padding: 10px; + font-size: .9rem; + position: relative; + top: 30%; + + } + + /* Sloths Style Section*/ + + .meetSloths{ + height: auto; + width: 100%; + text-align: center; + } + .meetSloths h1:hover{ + color:#135e46; + transform:scale(1.3); + transition:1s; + } + .sloths{ + width: 100%; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + } + + h1{ + font-size: 1.5rem; + } + + .sloths div{ + width: 90%; + height: 35vh; + margin-bottom: 20px; + } + + .sloth div div{ + width: 90%; + height: auto; + padding:10px; + font-size: 1rem; + text-align: center; + opacity: 1; + position: relative; + top: 35%; + } + footer{ + display: flex; + flex-direction: column; + height: 15vh; + } + + footer img{ + display: none; + } + + +} /* closing media query bracket */ \ No newline at end of file diff --git a/index.html b/index.html index ee2ca15..5a91afd 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,67 @@ + + + + Sloth Sanctum - Enjoying Life in the Slow Lane +
+ + + + +
+ + +
+

Come Meet Our Friendly Sloths!

+
+
+
+ Flash + He's the fastest sloth ever recorded +
+
+ +
+
+ Pricilla + She works with Flash, she's his main lover. +
+
+ +
+
+ Sid + He's been around since the ice age, hates acorns for some reason. +
+
+
+ +
+ + + + + \ No newline at end of file