fix(curriculum): add missing solutions to last step of practice projects (#44544)
This commit is contained in:
Tom
GitHub
@ -167,3 +167,138 @@ assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.
|
|||||||
}
|
}
|
||||||
--fcc-editable-region--
|
--fcc-editable-region--
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title> Learn CSS Animations by Building a Ferris Wheel</title>
|
||||||
|
<link rel="stylesheet" href="./styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="wheel">
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
|
||||||
|
<div class="cabin"></div>
|
||||||
|
<div class="cabin"></div>
|
||||||
|
<div class="cabin"></div>
|
||||||
|
<div class="cabin"></div>
|
||||||
|
<div class="cabin"></div>
|
||||||
|
<div class="cabin"></div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
.wheel {
|
||||||
|
border: 2px solid black;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-left: 50px;
|
||||||
|
position: absolute;
|
||||||
|
height: 55vw;
|
||||||
|
width: 55vw;
|
||||||
|
max-width: 500px;
|
||||||
|
max-height: 500px;
|
||||||
|
animation-name: wheel;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
background-color: black;
|
||||||
|
width: 50%;
|
||||||
|
height: 2px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform-origin: 0% 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line:nth-of-type(2) {
|
||||||
|
transform: rotate(60deg);
|
||||||
|
}
|
||||||
|
.line:nth-of-type(3) {
|
||||||
|
transform: rotate(120deg);
|
||||||
|
}
|
||||||
|
.line:nth-of-type(4) {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
.line:nth-of-type(5) {
|
||||||
|
transform: rotate(240deg);
|
||||||
|
}
|
||||||
|
.line:nth-of-type(6) {
|
||||||
|
transform: rotate(300deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cabin {
|
||||||
|
background-color: red;
|
||||||
|
width: 20%;
|
||||||
|
height: 20%;
|
||||||
|
position: absolute;
|
||||||
|
border: 2px solid;
|
||||||
|
transform-origin: 50% 0%;
|
||||||
|
animation: cabins 10s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cabin:nth-of-type(1) {
|
||||||
|
right: -8.5%;
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
.cabin:nth-of-type(2) {
|
||||||
|
right: 17%;
|
||||||
|
top: 93.5%;
|
||||||
|
}
|
||||||
|
.cabin:nth-of-type(3) {
|
||||||
|
right: 67%;
|
||||||
|
top: 93.5%;
|
||||||
|
}
|
||||||
|
.cabin:nth-of-type(4) {
|
||||||
|
left: -8.5%;
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
.cabin:nth-of-type(5) {
|
||||||
|
left: 17%;
|
||||||
|
top: 7%;
|
||||||
|
}
|
||||||
|
.cabin:nth-of-type(6) {
|
||||||
|
right: 17%;
|
||||||
|
top: 7%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes wheel {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes cabins {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-color: purple;
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(-360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|||||||
@ -125,3 +125,81 @@ body {
|
|||||||
|
|
||||||
--fcc-editable-region--
|
--fcc-editable-region--
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>CSS Flexbox Photo Gallery</title>
|
||||||
|
<link rel="stylesheet" href="./styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||||
|
</div>
|
||||||
|
<div id="gallery">
|
||||||
|
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||||
|
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||||
|
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||||
|
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||||
|
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||||
|
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||||
|
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||||
|
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||||
|
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||||
|
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: Arial;
|
||||||
|
background: #EBE7E7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
text-align: center;
|
||||||
|
padding: 32px;
|
||||||
|
background: #E0DDDD;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gallery {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gallery img {
|
||||||
|
width: 25%;
|
||||||
|
height: 300px;
|
||||||
|
object-fit: cover;
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 0 4px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
#gallery img {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
#gallery img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|||||||
@ -403,3 +403,377 @@ hr {
|
|||||||
|
|
||||||
--fcc-editable-region--
|
--fcc-editable-region--
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>CSS Grid Magazine</title>
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||||
|
/>
|
||||||
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<section class="heading">
|
||||||
|
<header class="hero">
|
||||||
|
<img
|
||||||
|
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||||
|
alt="freecodecamp logo"
|
||||||
|
loading="lazy"
|
||||||
|
class="hero-img"
|
||||||
|
/>
|
||||||
|
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||||
|
<p class="hero-subtitle">
|
||||||
|
Our efforts to restructure our curriculum with a more project-based
|
||||||
|
focus
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
<div class="author">
|
||||||
|
<p class="author-name">
|
||||||
|
By
|
||||||
|
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||||
|
>freeCodeCamp</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
<p class="publish-date">March 7, 2019</p>
|
||||||
|
</div>
|
||||||
|
<div class="social-icons">
|
||||||
|
<a href="https://www.facebook.com/freecodecamp/">
|
||||||
|
<i class="fab fa-facebook-f"></i>
|
||||||
|
</a>
|
||||||
|
<a href="https://twitter.com/freecodecamp/">
|
||||||
|
<i class="fab fa-twitter"></i>
|
||||||
|
</a>
|
||||||
|
<a href="https://instagram.com/freecodecamp">
|
||||||
|
<i class="fab fa-instagram"></i>
|
||||||
|
</a>
|
||||||
|
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||||
|
<i class="fab fa-linkedin-in"></i>
|
||||||
|
</a>
|
||||||
|
<a href="https://www.youtube.com/freecodecamp">
|
||||||
|
<i class="fab fa-youtube"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="text">
|
||||||
|
<p class="first-paragraph">
|
||||||
|
Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
It wasn't as dramatic as Doc's revelation in Back to the Future. It
|
||||||
|
just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
|
||||||
|
</p>
|
||||||
|
<blockquote>
|
||||||
|
<hr />
|
||||||
|
<p class="quote">
|
||||||
|
The entire curriculum should be a series of projects
|
||||||
|
</p>
|
||||||
|
<hr />
|
||||||
|
</blockquote>
|
||||||
|
<p>
|
||||||
|
No more walls of explanatory text. No more walls of tests. Just one
|
||||||
|
test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<section class="text text-with-images">
|
||||||
|
<article class="brief-history">
|
||||||
|
<h3 class="list-title">A Brief History</h3>
|
||||||
|
<p>Of the Curriculum</p>
|
||||||
|
<ul class="lists">
|
||||||
|
<li>
|
||||||
|
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||||
|
<p>
|
||||||
|
We launched freeCodeCamp with a simple list of 15 resources,
|
||||||
|
including Harvard's CS50 and Stanford's Database Class.
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||||
|
<p>We added interactive algorithm challenges.</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||||
|
<p>
|
||||||
|
We added our own HTML+CSS challenges (before we'd been relying on
|
||||||
|
General Assembly's Dash course for these).
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||||
|
<p>
|
||||||
|
We expanded the curriculum to 3 certifications, including Front
|
||||||
|
End, Back End, and Data Visualization. They each had 10 required
|
||||||
|
projects, but only the Front End section had its own challenges.
|
||||||
|
For the other certs, we were still using external resources like
|
||||||
|
Node School.
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||||
|
<p>We added the back end and data visualization challenges.</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||||
|
<p>
|
||||||
|
We launched 6 new certifications to replace our old ones. This was
|
||||||
|
the biggest curriculum improvement to date.
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</article>
|
||||||
|
<aside class="image-wrapper">
|
||||||
|
<img
|
||||||
|
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
|
||||||
|
alt="image of the quote machine project"
|
||||||
|
loading="lazy"
|
||||||
|
class="image-1"
|
||||||
|
width="600"
|
||||||
|
height="400"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
|
||||||
|
alt="image of a calculator project"
|
||||||
|
loading="lazy"
|
||||||
|
class="image-2"
|
||||||
|
width="400"
|
||||||
|
height="400"
|
||||||
|
/>
|
||||||
|
<blockquote class="image-quote">
|
||||||
|
<hr />
|
||||||
|
<p class="quote">
|
||||||
|
The millions of people who are learning to code through freeCodeCamp
|
||||||
|
will have an even better resource to help them learn these
|
||||||
|
fundamentals.
|
||||||
|
</p>
|
||||||
|
<hr />
|
||||||
|
</blockquote>
|
||||||
|
<img
|
||||||
|
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
|
||||||
|
alt="four people working on code"
|
||||||
|
loading="lazy"
|
||||||
|
class="image-3"
|
||||||
|
width="600"
|
||||||
|
height="400"
|
||||||
|
/>
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
*,
|
||||||
|
::before,
|
||||||
|
::after {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 62.5%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Baskervville', serif;
|
||||||
|
color: linen;
|
||||||
|
background-color: rgb(20, 30, 40);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: 'Anton', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2, h3, h4, h5, h6 {
|
||||||
|
font-family: 'Raleway', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: linen;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
|
||||||
|
row-gap: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
margin: 1.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading {
|
||||||
|
grid-column: 2 / 3;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
row-gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
grid-column: 2 / 3;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
letter-spacing: 0.6px;
|
||||||
|
column-width: 25rem;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
text-align: center;
|
||||||
|
color: orangered;
|
||||||
|
font-size: 8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-subtitle {
|
||||||
|
font-size: 2.4rem;
|
||||||
|
color: orangered;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-family: "Raleway", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author-name a:hover {
|
||||||
|
background-color: #306203;
|
||||||
|
}
|
||||||
|
|
||||||
|
.publish-date {
|
||||||
|
color: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons {
|
||||||
|
display: grid;
|
||||||
|
font-size: 3rem;
|
||||||
|
grid-template-columns: repeat(5, 1fr);
|
||||||
|
grid-auto-flow: column;
|
||||||
|
grid-auto-columns: 1fr;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-paragraph::first-letter {
|
||||||
|
font-size: 6rem;
|
||||||
|
color: orangered;
|
||||||
|
float: left;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote {
|
||||||
|
color: #00beef;
|
||||||
|
font-size: 2.4rem;
|
||||||
|
text-align: center;
|
||||||
|
font-family: "Raleway", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote::before {
|
||||||
|
content: '" ';
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote::after {
|
||||||
|
content: ' "';
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-with-images {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 2fr;
|
||||||
|
column-gap: 3rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lists {
|
||||||
|
list-style-type: none;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lists li {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-title, .list-subtitle {
|
||||||
|
color: #00beef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-wrapper {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 2fr 1fr;
|
||||||
|
grid-template-rows: repeat(3, min-content);
|
||||||
|
gap: 2rem;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-1, .image-3 {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 720px) {
|
||||||
|
.image-wrapper {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
.text-with-images {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 550px) {
|
||||||
|
.hero-title {
|
||||||
|
font-size: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-subtitle,
|
||||||
|
.author,
|
||||||
|
.quote,
|
||||||
|
.list-header {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 420px) {
|
||||||
|
.hero-title {
|
||||||
|
max-width: 420px;
|
||||||
|
font-size: 4.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|||||||
@ -154,3 +154,131 @@ input[type="file"] {
|
|||||||
--fcc-editable-region--
|
--fcc-editable-region--
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>freeCodeCamp Registration Form Project</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Registration Form</h1>
|
||||||
|
<p>Please fill out this form with the required information</p>
|
||||||
|
<form action='https://fcc-registration-form.com'>
|
||||||
|
<fieldset>
|
||||||
|
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||||
|
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||||
|
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||||
|
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||||
|
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||||
|
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||||
|
</label>
|
||||||
|
<label>How did you hear about us?
|
||||||
|
<select name="referrer">
|
||||||
|
<option value="">(select one)</option>
|
||||||
|
<option value="1">freeCodeCamp News</option>
|
||||||
|
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||||
|
<option value="3">freeCodeCamp Forum</option>
|
||||||
|
<option value="4">Other</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label>Provide a bio:
|
||||||
|
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
<input type="submit" value="Submit" />
|
||||||
|
</form>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
background-color: #1b1b32;
|
||||||
|
color: #f5f6f7;
|
||||||
|
font-family: Tahoma;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, p {
|
||||||
|
margin: 1em auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
width: 60vw;
|
||||||
|
max-width: 500px;
|
||||||
|
min-width: 300px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-bottom: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
border: none;
|
||||||
|
padding: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset:not(:last-of-type) {
|
||||||
|
border-bottom: 3px solid #3b3b4f;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
textarea,
|
||||||
|
select {
|
||||||
|
margin: 10px 0 0 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, textarea {
|
||||||
|
background-color: #0a0a23;
|
||||||
|
border: 1px solid #0a0a23;
|
||||||
|
color: #ffffff;
|
||||||
|
min-height: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline {
|
||||||
|
width: unset;
|
||||||
|
margin: 0 0.5em 0 0;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="submit"] {
|
||||||
|
display: block;
|
||||||
|
width: 60%;
|
||||||
|
margin: 1em auto;
|
||||||
|
height: 2em;
|
||||||
|
font-size: 1.1em;
|
||||||
|
background-color: #3b3b4f;
|
||||||
|
border-color: white;
|
||||||
|
min-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="file"] {
|
||||||
|
padding: 1px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #dfdfe2;
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|||||||
@ -381,3 +381,357 @@ body {
|
|||||||
--fcc-editable-region--
|
--fcc-editable-region--
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>freeCodeCamp Picasso Painting</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||||
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="back-wall"></div>
|
||||||
|
<div class="characters">
|
||||||
|
<div id="offwhite-character">
|
||||||
|
<div id="white-hat"></div>
|
||||||
|
<div id="black-mask">
|
||||||
|
<div class="eyes left"></div>
|
||||||
|
<div class="eyes right"></div>
|
||||||
|
</div>
|
||||||
|
<div id="gray-instrument">
|
||||||
|
<div class="black-dot"></div>
|
||||||
|
<div class="black-dot"></div>
|
||||||
|
<div class="black-dot"></div>
|
||||||
|
<div class="black-dot"></div>
|
||||||
|
<div class="black-dot"></div>
|
||||||
|
</div>
|
||||||
|
<div id="tan-table"></div>
|
||||||
|
</div>
|
||||||
|
<div id="black-character">
|
||||||
|
<div id="black-hat"></div>
|
||||||
|
<div id="gray-mask">
|
||||||
|
<div class="eyes left"></div>
|
||||||
|
<div class="eyes right"></div>
|
||||||
|
</div>
|
||||||
|
<div id="white-paper">
|
||||||
|
<i class="fas fa-music"></i>
|
||||||
|
<i class="fas fa-music"></i>
|
||||||
|
<i class="fas fa-music"></i>
|
||||||
|
<i class="fas fa-music"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="blue" id="blue-left"></div>
|
||||||
|
<div class="blue" id="blue-right"></div>
|
||||||
|
<div id="orange-character">
|
||||||
|
<div id="black-round-hat"></div>
|
||||||
|
<div id="eyes-div">
|
||||||
|
<div class="eyes left"></div>
|
||||||
|
<div class="eyes right"></div>
|
||||||
|
</div>
|
||||||
|
<div id="triangles">
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="triangle"></div>
|
||||||
|
</div>
|
||||||
|
<div id="guitar">
|
||||||
|
<div class="guitar" id="guitar-left">
|
||||||
|
<i class="fas fa-bars"></i>
|
||||||
|
</div>
|
||||||
|
<div class="guitar" id="guitar-right">
|
||||||
|
<i class="fas fa-bars"></i>
|
||||||
|
</div>
|
||||||
|
<div id="guitar-neck"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
body {
|
||||||
|
background-color: rgb(184, 132, 46);
|
||||||
|
}
|
||||||
|
|
||||||
|
#back-wall {
|
||||||
|
background-color: #8B4513;
|
||||||
|
width: 100%;
|
||||||
|
height: 60%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#offwhite-character {
|
||||||
|
width: 300px;
|
||||||
|
height: 550px;
|
||||||
|
background-color: GhostWhite;
|
||||||
|
position: absolute;
|
||||||
|
top: 20%;
|
||||||
|
left: 17.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#white-hat {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0 120px 140px 180px;
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: GhostWhite;
|
||||||
|
border-left-color: transparent;
|
||||||
|
position: absolute;
|
||||||
|
top: -140px;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#black-mask {
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
background-color: rgb(45, 31, 19);
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gray-instrument {
|
||||||
|
width: 15%;
|
||||||
|
height: 40%;
|
||||||
|
background-color: rgb(167, 162, 117);
|
||||||
|
position: absolute;
|
||||||
|
top: 50px;
|
||||||
|
left: 125px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.black-dot {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background-color: rgb(45, 31, 19);
|
||||||
|
display: block;
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 65%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tan-table {
|
||||||
|
width: 450px;
|
||||||
|
height: 140px;
|
||||||
|
background-color: #D2691E;
|
||||||
|
position: absolute;
|
||||||
|
top: 275px;
|
||||||
|
left: 15px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#black-character {
|
||||||
|
width: 300px;
|
||||||
|
height: 500px;
|
||||||
|
background-color: rgb(45, 31, 19);
|
||||||
|
position: absolute;
|
||||||
|
top: 30%;
|
||||||
|
left: 59%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#black-hat {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 150px 0 0 300px;
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: rgb(45, 31, 19);
|
||||||
|
position: absolute;
|
||||||
|
top: -150px;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gray-mask {
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
background-color: rgb(167, 162, 117);
|
||||||
|
position: absolute;
|
||||||
|
top: -10px;
|
||||||
|
left: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#white-paper {
|
||||||
|
width: 400px;
|
||||||
|
height: 100px;
|
||||||
|
background-color: GhostWhite;
|
||||||
|
position: absolute;
|
||||||
|
top: 250px;
|
||||||
|
left: -150px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-music {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 8%;
|
||||||
|
margin-left: 13%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue {
|
||||||
|
background-color: #1E90FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
#blue-left {
|
||||||
|
width: 500px;
|
||||||
|
height: 300px;
|
||||||
|
position: absolute;
|
||||||
|
top: 20%;
|
||||||
|
left: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#blue-right {
|
||||||
|
width: 400px;
|
||||||
|
height: 300px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#orange-character {
|
||||||
|
width: 250px;
|
||||||
|
height: 550px;
|
||||||
|
background-color: rgb(240, 78, 42);
|
||||||
|
position: absolute;
|
||||||
|
top: 25%;
|
||||||
|
left: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#black-round-hat {
|
||||||
|
width: 180px;
|
||||||
|
height: 150px;
|
||||||
|
background-color: rgb(45, 31, 19);
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: -100px;
|
||||||
|
left: 5px;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#eyes-div {
|
||||||
|
width: 180px;
|
||||||
|
height: 50px;
|
||||||
|
position: absolute;
|
||||||
|
top: -40px;
|
||||||
|
left: 20px;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
#triangles {
|
||||||
|
width: 250px;
|
||||||
|
height: 550px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.triangle {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 42px 45px 45px 0;
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: Gold; /* yellow */
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: transparent;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#guitar {
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
position: absolute;
|
||||||
|
top: 120px;
|
||||||
|
left: 0px;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guitar {
|
||||||
|
width: 150px;
|
||||||
|
height: 120px;
|
||||||
|
background-color: Goldenrod;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#guitar-left {
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#guitar-right {
|
||||||
|
position: absolute;
|
||||||
|
left: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-bars {
|
||||||
|
display: block;
|
||||||
|
margin-top: 30%;
|
||||||
|
margin-left: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#guitar-neck {
|
||||||
|
width: 200px;
|
||||||
|
height: 30px;
|
||||||
|
background-color: #D2691E;
|
||||||
|
position: absolute;
|
||||||
|
top: 45px;
|
||||||
|
left: 200px;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyes {
|
||||||
|
width: 35px;
|
||||||
|
height: 20px;
|
||||||
|
background-color: #8B4513;
|
||||||
|
border-radius: 20px 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fas {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|||||||
@ -164,3 +164,125 @@ html {
|
|||||||
}
|
}
|
||||||
--fcc-editable-region--
|
--fcc-editable-region--
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>Responsive Web Design Piano</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="stylesheet" href="./styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="piano">
|
||||||
|
<img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||||
|
<div class="keys">
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key black--key"></div>
|
||||||
|
<div class="key black--key"></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key black--key"></div>
|
||||||
|
<div class="key black--key"></div>
|
||||||
|
<div class="key black--key"></div>
|
||||||
|
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key black--key"></div>
|
||||||
|
<div class="key black--key"></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key black--key"></div>
|
||||||
|
<div class="key black--key"></div>
|
||||||
|
<div class="key black--key"></div>
|
||||||
|
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key black--key"></div>
|
||||||
|
<div class="key black--key"></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key black--key"></div>
|
||||||
|
<div class="key black--key"></div>
|
||||||
|
<div class="key black--key"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
html {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
*, *::before, *::after {
|
||||||
|
box-sizing: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
#piano {
|
||||||
|
background-color: #00471b;
|
||||||
|
width: 992px;
|
||||||
|
height: 290px;
|
||||||
|
margin: 80px auto;
|
||||||
|
padding: 90px 20px 0 20px;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.keys {
|
||||||
|
background-color: #040404;
|
||||||
|
width: 949px;
|
||||||
|
height: 180px;
|
||||||
|
padding-left: 2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.key {
|
||||||
|
background-color: #ffffff;
|
||||||
|
position: relative;
|
||||||
|
width: 41px;
|
||||||
|
height: 175px;
|
||||||
|
margin: 2px;
|
||||||
|
float: left;
|
||||||
|
border-radius: 0 0 3px 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.key.black--key::after {
|
||||||
|
background-color: #1d1e22;
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: -18px;
|
||||||
|
width: 32px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 0 0 3px 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 200px;
|
||||||
|
position: absolute;
|
||||||
|
top: 23px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
#piano {
|
||||||
|
width: 335px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.keys {
|
||||||
|
width: 318px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1199px) and (min-width: 769px) {
|
||||||
|
#piano {
|
||||||
|
width: 675px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.keys {
|
||||||
|
width: 633px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|||||||
@ -173,3 +173,150 @@ p {
|
|||||||
}
|
}
|
||||||
--fcc-editable-region--
|
--fcc-editable-region--
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
<p class="right bold no-divider">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Total Fat</span> 8g <span class="bold right">10%</span></p>
|
||||||
|
<p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider"><i>Trans</i> Fat 0g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
|
||||||
|
<p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
|
||||||
|
<p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
|
||||||
|
<p class="indent no-divider">Dietary Fiber 4g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider">Total Sugars 12g</p>
|
||||||
|
<div class="divider dbl-indent"></div>
|
||||||
|
<p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="no-divider"><span class="bold">Protein</span> 3g</p>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<p>Vitamin D 2mcg <span class="right">10%</span></p>
|
||||||
|
<p>Calcium 260mg <span class="right">20%</span></p>
|
||||||
|
<p>Iron 8mg <span class="right">45%</span></p>
|
||||||
|
<p class="no-divider">Potassium 235mg <span class="right">6%</span></p>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indent {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dbl-indent {
|
||||||
|
margin-left: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.daily-value p:not(.no-divider) {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note {
|
||||||
|
font-size: 0.6rem;
|
||||||
|
margin: 5px 0;
|
||||||
|
padding: 0 8px;
|
||||||
|
text-indent: -8px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|||||||
Reference in New Issue
Block a user