thanks for your observation… done
Hi everyone,
I’m 15% along on my Front-End Engineer Path. This project was a bit more difficult for me for some reason. Any feedback is appreciated!
Hello All,
I used flex to position the content of the page.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" ><link>
<meta charset="UTF-8" />
<title>Style Guide</title>
</head>
<body>
<!-- header-->
<h1 class="header">Style Guide</h1>
<!-- color box-->
<div class="color">
<h2>Color Palette</h2>
<div class="color-container">
<div class="color-scheme color1">
<h5>Crispy Apple Red</h5>
<h6>rgb(165, 4, 4)</h6>
</div>
<div class="color-scheme color2">
<h5>Raspberry Sorbet</h5>
<h6>rgb(195, 91, 91)</h6>
</div>
<div class="color-scheme color3">
<h5>Blossom Pink</h5>
<h6>rgb(235, 175, 175)</h6>
</div>
<div class="color-scheme color4">
<h5>Aqua marine Blue</h5>
<h6>rgb(82, 140, 167)</h6>
</div>
<div class="color-scheme color5">
<h5>Purple Rain</h5>
<h6>rgb(179, 68, 184)</h6>
</div>
<div class="color-scheme color6">
<h5>Gold Rush</h5>
<h6>rgb(238, 184, 36)</h6>
</div>
</div>
</div>
<!-- end color box ------>
<!--//> Fonts----->
<div class="fonts">
<h2>Fonts</h2>
<div class="fonts-container">
<div class="font-family1">
<h3 class="font-family font1">Raleway</h3>
<p>The quick brown fox jumps over the lazy dog.</p>
<p class="bold">The quick brown fox jumps over the lazy dog.</p>
<p class="italic">The quick brown fox jumps over the lazy dog.</p>
</div>
<div class="font-family2">
<h3 class="font-family font2">Noto Sans</h3>
<p>The quick brown fox jumps over the lazy dog.</p>
<p class="bold">The quick brown fox jumps over the lazy dog.</p>
<p class="italic">The quick brown fox jumps over the lazy dog.</p>
</div>
<div class="font-family3">
<h3 class="font-family font3">Quicksand</h3>
<p>The quick brown fox jumps over the lazy dog.</p>
<p class="bold">The quick brown fox jumps over the lazy dog.</p>
<p class="italic">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
</div>
<!--//> end fonts-->
<!--Text Style----->
<div class="text">
<h2>Text Styles</h2>
<div class="text-container">
<div class="font-family1">
<h1> H1: Main page heading</h1>
<ul class="font-weight-700">
<li>Font-weight 700 (bold)</li>
<li>Font-size: 26px</li>
<li>Font-family: Raleway</li>
</ul>
</div>
<div class="font-family2">
<h2> H2: Subheading</h2>
<ul class="font-weight-500">
<li>Font-weight 500</li>
<li>Font-size: 18px</li>
<li>Font-family: Noto Sans</li>
</ul>
</div>
<div class="font-family3">
<p> P: Paragraph text</p>
<ul class="font-weight-400">
<li>Font-weight 400 (regular)</li>
<li>Font-size: 14px</li>
<li>Font-family: Quicksand</li>
</ul>
</div>
</div>
</div>
<!-------end text -->
</html>
// css
My demo of this project. I used flex to position the page
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,700;1,400&display=swap');
.color, .fonts, .text{
border: 3px solid #ccc;
}
.color-container, .fonts-container, .text-container{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.color-scheme{
width: 200px;
text-align: center;
padding: 10px;
margin: 20px;
font-size: 20px;
}
.color1{
background: rgb(165, 4, 4);
}
.color2{
background: rgb(195, 91, 91);
}
.color3{
background: rgb(235, 175, 175);
}
.color4{
background: rgb(82, 140, 167);
}
.color5{
background: rgb(179, 68, 184);
}
.color6{
background: rgb(238, 184, 36);
}
.header, .color, .fonts, .text{
margin: 15px;
padding:20px;
}
.font-family{
text-decoration:underline;
}
.bold{
font-weight: bold;
}
.italic{
font-style: italic;
}
.font-weight-700{
font-size: 26px;
font-weight: 700;
}
.font-weight-500{
font-size: 18px;
font-weight: 500;
}
.font-weight-400{
font-size: 14px;
font-weight: 400;
}
.font-family1{
font-family: 'Raleway', sans-serif;
}
.font-family2{
font-family: 'Noto Sans', sans-serif;
}
.font-family3{
font-family: 'Quicksand', sans-serif;
}
Azure Style Guide
This is the 2nd iteration of this project. I thought I needed to review the basics of design before proceeding to the more advanced stuff.
Anyway, this style guide was made in a bit of a rush. I just wanted to squeeze this project in my schedule.
Live Site: Azure Style Guide
Repository: GitHub - daniellabrador/codecademy-fs-design_system_2
Live site intentionally not made responsive.
My favorite font! Looks awesome nice job. Some of the text is not legible though
Hi everyone!
My Website Style Guide Project:
Website: My Website Style Guide
Source Code: GitHub - Merthynz/My-Website-Style-Guide
Nice and clean especially the big hero image. LOL I think you meant Poppins not Poopins.
Thank you so much, I’ll correct that
This was a good learning experience. I look forward to receiving feedback. Thanks for looking.
Here is the link to my style guide:
https://mrjreal.github.io/style-guide
I like this one, your colours look like swatches you get from a paint store!
Hii, I approached this project with a simple aesthetic that’s easy on the eyes in mind
Check it out here: Qis’ Website Style Guide
Feedback is much appreciated!
Hello all,
I kind of just worked off the visualization and layout of the example page and figured out how to make it my own. Check it out if you’d like: Lovejoy’s Website Style Guide
Hi, please have a look at my style guide via my GitHub