Created
May 20, 2023 06:47
-
-
Save viviproje/7ece55684ef3fa3979a0b36b1c589476 to your computer and use it in GitHub Desktop.
Codecademy Practice – Website Style Guide
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>EARTHY – Website Style</title> | |
<link rel="stylesheet" href="styles.css" type="text/css"> | |
</head> | |
<body> | |
<header><h1>Earthy – Website Style Guide</h1></header> | |
<br> | |
<div class="container"> | |
<div class="section-name">Colors</div><br> | |
<div class="section-content"> | |
<ul class="colors-list"> | |
<li id="warm-light">Warm Light<br>#FFF2CC</li> | |
<li id="golden">Golden<br>#FFD966</li> | |
<li id="deep-sunset">Deep Sunset<br>#F4B183</li> | |
<li id="earth">Earth<br>#DFA67B</li> | |
</ul> | |
</div> | |
</div><br> | |
<div class="container"></section> | |
<div class="section-name">Fonts</div><br> | |
<div class="section-content"> | |
<ul> | |
<li class="font-name" id="berkshire-swash">Berkshire Swash</li> | |
<li class="font-example" id="berkshire-swash">Get ready to ignite your imagination.</li><br> | |
<li class="font-name" id="lato">Lato</li> | |
<li class="font-example" id="lato-1">Get ready to ignite your imagination.</li> | |
<li class="font-example" id="lato-2">Get ready to ignite your imagination.</li> | |
<li class="font-example" id="lato-3">Get ready to ignite your imagination.</li><br> | |
<li class="font-name" id="quicksand">Quicksand</li> | |
<li class="font-example" id="quicksand">Get ready to ignite your imagination.</li> | |
</ul> | |
</div> | |
</div><br> | |
<div class="container"></section> | |
<div class="section-name">Text Styles</div><br> | |
<div class="section-content"> | |
<ul> | |
<li><h1 id="h1-main-page-heading">H1: Main page heading</h1> | |
<li class="li-style-circle">Font-weight: 400 (regular)</li> | |
<li class="li-style-circle">Font-size: 30px</li> | |
<li class="li-style-circle">Font-family: Berkshire Swash</li> | |
</li><br> | |
<li><h2 id="h2-subheading">H2: Subheading</h2> | |
<li class="li-style-circle">Font-weight: 100 (thin), 400 (regular), 700 (bold)</li> | |
<li class="li-style-circle">Font-size: 24px</li> | |
<li class="li-style-circle">Font-family: Berkshire Swash</li> | |
</li><br> | |
<li><p id="p-paragraph-text">P: Paragraph text</p> | |
<li class="li-style-circle">Font-weight: 400 (regular)</li> | |
<li class="li-style-circle">Font-size: 18px</li> | |
<li class="li-style-circle">Font-family: Berkshire Swash</li> | |
</li> | |
</ul> | |
</div> | |
</div><br><br> | |
<hr> | |
<footer> | |
<h2 id="letsconnect"><em>Let's connect!</em></h2> | |
<ul class="social-media-list"> | |
<li><a href="#">Instagram</a></li> | |
<li><a href="#">Facebook</a></li> | |
<li><a href="#">LinkedIn</a></li> | |
<li><a href="#">Website</a></li> | |
</ul> | |
<br><br> | |
<p id="copyright">© ViviProje</p> | |
</footer><br><br> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* fonts */ | |
@import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap'); | |
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap'); | |
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); | |
/* fonts */ | |
body { | |
background-color: #FFF2CC; | |
margin: 0 10%; | |
padding-left: 50px; | |
padding-top: 50px; | |
line-height: 30px; | |
} | |
header { | |
font-family: "Berkshire Swash", serif; | |
font-size: 26px; | |
color: black; | |
letter-spacing: 1px; | |
padding-left: 30px; | |
} | |
li { | |
list-style: none; | |
font-family: "Quicksand", sans-serif; | |
font-size: 18px; | |
letter-spacing: 2px; | |
} | |
h1 { | |
font-size: 30px; | |
} | |
h2 { | |
font-size: 24px; | |
} | |
p { | |
font-size: 18px; | |
} | |
.container { | |
border: 1px solid black; | |
border-radius: 5px; | |
padding: 30px; | |
margin: 10px auto; | |
} | |
.li-style-circle { | |
list-style: circle; | |
} | |
.colors-list { | |
display: flex; | |
gap: 30px; | |
} | |
#warm-light { | |
box-sizing: border-box; | |
border-radius: 5px; | |
width: 150px; | |
height: 150px; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
text-align: center; | |
border: 1px solid #000; | |
background-color: #FFF2CC; | |
} | |
#golden { | |
box-sizing: border-box; | |
border-radius: 5px; | |
width: 150px; | |
height: 150px; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
text-align: center; | |
border: 1px solid #000; | |
background-color: #FFD966; | |
} | |
#deep-sunset { | |
box-sizing: border-box; | |
border-radius: 5px; | |
width: 150px; | |
height: 150px; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
text-align: center; | |
border: 1px solid #000; | |
background-color: #F4B183; | |
} | |
#earth { | |
box-sizing: border-box; | |
border-radius: 5px; | |
width: 150px; | |
height: 150px; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
text-align: center; | |
border: 1px solid #000; | |
background-color: #DFA67B; | |
} | |
.section-name { | |
background-color: #DFA67B; | |
color: black; | |
display: inline-block; | |
border-radius: 5px; | |
font-family: "Lato", sans-serif; | |
font-size: 20px; | |
text-transform: uppercase; | |
letter-spacing: 3px; | |
padding: 5px 10px; | |
box-shadow: 5px 5px 0px black; | |
} | |
.section-name:hover { | |
background-color: black; | |
color: #DFA67B; | |
box-shadow: 5px 5px 0px #DFA67B; | |
} | |
.section-content { | |
padding: 15px 0; | |
} | |
.font-name { | |
text-decoration: underline; | |
font-size: 24px; | |
letter-spacing: 2px; | |
} | |
.font-example { | |
font-size: 18px; | |
letter-spacing: 2px; | |
} | |
#berkshire-swash { | |
font-family: "Berkshire Swash", serif; | |
} | |
#lato { | |
font-family: "Lato", sans-sarif; | |
} | |
#lato-1 { | |
font-family: "Lato", sans-serif; | |
font-weight: 100; | |
} | |
#lato-2 { | |
font-family: "Lato", sans-serif; | |
font-weight: 400; | |
} | |
#lato-3 { | |
font-family: "Lato", sans-serif; | |
font-weight: 700; | |
} | |
.span { | |
font-size: 20px; | |
} | |
#h1-main-page-heading { | |
font-family: 'Berkshire Swash', serif; | |
} | |
#h2-subheading { | |
font-family: 'Lato', sans-serif; | |
} | |
#h3-paragraph-text { | |
font-family: 'quicksand', sans-serif; | |
} | |
/* footer */ | |
hr { | |
stroke-opacity: 50; | |
border-style: dotted; | |
} | |
footer { | |
font-family: "Quicksand", sans-serif; | |
letter-spacing: 1px; | |
background-color: rgba(0,0,0,0.8); | |
padding: 30px; | |
border-radius: 5px; | |
} | |
#letsconnect { | |
text-decoration: underline; | |
color: #DFA67B; | |
text-transform: uppercase; | |
letter-spacing: 2px; | |
font-family: "Lato", sans-serif; | |
font-weight: bolder; | |
} | |
.social-media-list { | |
display: inline-flex; | |
gap: 18px; | |
box-sizing: border-box; | |
} | |
.social-media-list a { | |
text-decoration: none; | |
color: #FFF2CC; | |
background-color:#DFA67B; | |
border-radius: 5px; | |
padding: 5px 10px; | |
text-align: center; | |
box-shadow: 5px 5px 0px #FFF2CC; | |
} | |
.social-media-list a:hover { | |
background-color: rgba(0,0,0,0.8); | |
color: #FFF2CC; | |
} | |
#copyright { | |
color: #FFF2CC; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment