gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(curriculum): Add solutions to Applied Visual Design challenges (#35815)

Browse Source 
* fix: add solutions to Applied Visual Design challenges

* fix: remove extra opening style tag
This commit is contained in:
Huyen Nguyen
2019-04-29 01:13:38 +07:00
committed by Tom
parent c8d39b6658
commit 5b32e98c4a
50 changed files with 1479 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.english.md
View File

@ -103,8 +103,51 @@ tests:
<section id='solution'> <section id='solution'>
```js ```html
var code = "#thumbnail {box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}" <style>
h4 {
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size: 27px;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
}
#thumbnail {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
</style>
<div class="fullCard" id="thumbnail">
<div class="cardContent">
<div class="cardText">
<h4>Alphabet</h4>
<hr>
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
``` ```
</section> </section>

43
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.english.md
View File

@ -93,7 +93,46 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h4 {
text-align: center;
padding: 10px;
background-color: rgba(45, 45, 45, 0.1);
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
</style>
<div class="fullCard">
<div class="cardContent">
<div class="cardText">
<h4>Alphabet</h4>
<hr>
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
``` ```
</section> </section>

41
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.english.md
View File

@ -88,7 +88,44 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
body {
background-color: white;
}
header {
background-color: #09A7A1;
color: white;
padding: 0.25em;
}
h2 {
color: #09A7A1;
}
button {
background-color: #FF790E;
}
footer {
background-color: #09A7A1;
color: white;
padding: 0.5em;
}
</style>
<header>
<h1>Cooking with FCC!</h1>
</header>
<main>
<article>
<h2>Machine Learning in the Kitchen</h2>
<p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>
<button>Sign Up</button>
</article>
<article>
<h2>Bisection Vegetable Chopping</h2>
<p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>
<button>Sign Up</button>
</article>
</main>
<br>
<footer>&copy; 2018 FCC Kitchen</footer>
``` ```
</section> </section>

3
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.english.md
View File

@ -65,9 +65,6 @@ tests:
a:hover { a:hover {
color: rgba(0,0,255,1); color: rgba(0,0,255,1);
} }
</style> </style>
<a href="http://freecatphotoapp.com/" target="_blank">CatPhotoApp</a> <a href="http://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
``` ```

29
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.english.md
View File

@ -86,7 +86,32 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
body {
background-color: #FFFFFF;
}
.green {
background-color: hsl(120, 100%, 50%);
}
.cyan {
background-color: hsl(180, 100%, 50%);
}
.blue {
background-color: hsl(240, 100%, 50%);
}
div {
display: inline-block;
height: 100px;
width: 100px;
}
</style>
<div class="green"></div>
<div class="cyan"></div>
<div class="blue"></div>
``` ```
</section> </section>

44
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.english.md
View File

@ -85,7 +85,47 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h4 {
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size: 27px;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
</style>
<div class="fullCard">
<div class="cardContent">
<div class="cardText">
<h4>Alphabet</h4>
<hr>
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
``` ```
</section> </section>

43
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.english.md
View File

@ -86,8 +86,47 @@ tests:
<section id='solution'> <section id='solution'>
```js ```html
var code = "nav {background-color: hsl(180, 80%, 25%);}" <style>
header {
background-color: hsl(180, 90%, 35%);
color: #FFFFFF;
}
nav {
background-color: hsl(180, 80%, 25%);
}
h1 {
text-indent: 10px;
padding-top: 10px;
}
nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;
}
nav li {
display: inline;
margin-right: 20px;
}
a {
text-decoration: none;
color: inherit;
}
</style>
<header>
<h1>Cooking with FCC!</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Classes</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
``` ```
</section> </section>

55
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.english.md
View File

@ -98,8 +98,59 @@ tests:
<section id='solution'> <section id='solution'>
```js ```html
var code = "@keyframes twinkle-1 {50% {transform: scale(0.5); opacity: 0.5;}}" <style>
.stars {
background-color: white;
height: 30px;
width: 30px;
border-radius: 50%;
animation-iteration-count: infinite;
}
.star-1 {
margin-top: 15%;
margin-left: 60%;
animation-name: twinkle-1;
animation-duration: 1s;
}
.star-2 {
margin-top: 25%;
margin-left: 25%;
animation-name: twinkle-2;
animation-duration: 1s;
}
@keyframes twinkle-1 {
50% {
transform: scale(0.5);
opacity: 0.5;
}
}
@keyframes twinkle-2 {
20% {
transform: scale(0.5);
opacity: 0.5;
}
}
#back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
}
</style>
<div id="back"></div>
<div class="star-1 stars"></div>
<div class="star-2 stars"></div>
``` ```
</section> </section>

35
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.english.md
View File

@ -79,7 +79,38 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
#ball {
width: 100px;
height: 100px;
margin: 50px auto;
position: relative;
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes bounce{
0% {
top: 0px;
}
50% {
top: 249px;
width: 130px;
height: 70px;
}
100% {
top: 0px;
}
}
</style>
<div id="ball"></div>
``` ```
</section> </section>

55
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.english.md
View File

@ -102,7 +102,58 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
.stars {
background-color: white;
height: 30px;
width: 30px;
border-radius: 50%;
animation-iteration-count: infinite;
}
.star-1 {
margin-top: 15%;
margin-left: 60%;
animation-duration: 1s;
animation-name: twinkle;
}
.star-2 {
margin-top: 25%;
margin-left: 25%;
animation-duration: 0.9s;
animation-name: twinkle;
}
.star-3 {
margin-top: 10%;
margin-left: 50%;
animation-duration: 1.1s;
animation-name: twinkle;
}
@keyframes twinkle {
20% {
transform: scale(0.5);
opacity: 0.5;
}
}
#back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
}
</style>
<div id="back"></div>
<div class="star-1 stars"></div>
<div class="star-2 stars"></div>
<div class="star-3 stars"></div>
``` ```
</section> </section>

12
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.english.md
View File

@ -55,8 +55,16 @@ tests:
<section id='solution'> <section id='solution'>
```js ```html
var code = "div {background-color: blue; height: 100px; width: 100px; margin: auto;}" <style>
div {
background-color: blue;
height: 100px;
width: 100px;
margin: auto;
}
</style>
<div></div>
``` ```
</section> </section>

14
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.english.md
View File

@ -61,7 +61,17 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h2 {
position: relative;
top: 15px;
}
</style>
<body>
<h1>On Being Well-Positioned</h1>
<h2>Move me!</h2>
<p>I still think the h2 is where it normally sits.</p>
</body>
``` ```
</section> </section>

39
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.english.md
View File

@ -86,7 +86,42 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
.balls {
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
position: fixed;
width: 50px;
height: 50px;
margin-top: 50px;
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#ball1 {
left:27%;
animation-timing-function: linear;
}
#ball2 {
left:56%;
animation-timing-function: ease-out;
}
@keyframes bounce {
0% {
top: 0px;
}
100% {
top: 249px;
}
}
</style>
<div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>
``` ```
</section> </section>

25
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.english.md
View File

@ -67,7 +67,28 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
div {
width: 60%;
height: 200px;
margin-top: 20px;
}
.first {
background-color: red;
position: absolute;
z-index: 2;
}
.second {
background-color: blue;
position: absolute;
left: 40px;
top: 50px;
z-index: 1;
}
</style>
<div class="first"></div>
<div class="second"></div>
``` ```
</section> </section>

15
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.english.md
View File

@ -38,7 +38,6 @@ tests:
```html ```html
<style> <style>
div { div {
border-radius: 20px; border-radius: 20px;
width: 70%; width: 70%;
@ -61,9 +60,17 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```html
```js <style>
var code = "<style> div{border-radius: 20px; width: 70%; height: 400px; margin: 50px auto; background: linear-gradient(35deg, #cff, #fcc);}</style><div></div>" div {
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50px auto;
background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
}
</style>
<div></div>
``` ```
</section> </section>

23
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.english.md
View File

@ -41,8 +41,7 @@ tests:
```html ```html
<style> <style>
.center .center {
{
position: absolute; position: absolute;
margin: auto; margin: auto;
top: 0; top: 0;
@ -70,8 +69,24 @@ tests:
<section id='solution'> <section id='solution'>
```js ```html
var code = ".center {background-color: transparent; border-radius: 50%; box-shadow: 25px 10px 0px 0 blue;}" <style>
.center {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background-color: transparent;
border-radius: 50%;
box-shadow: 25px 10px 0 0 blue;
}
</style>
<div class="center"></div>
``` ```
</section> </section>

42
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.english.md
View File

@ -86,7 +86,45 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h4 {
text-align: center;
height: 25px;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
</style>
<div class="fullCard">
<div class="cardContent">
<div class="cardText">
<h4><s>Google</s>Alphabet</h4>
<hr>
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
``` ```
</section> </section>

37
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.english.md
View File

@ -86,8 +86,41 @@ tests:
<section id='solution'> <section id='solution'>
```js ```html
var code = "@keyframes rainbow {0% {background-color: blue; top: 0px; left: 0px;} 50% {background-color: green; top: 50px; left: 25px;} 100% {background-color: yellow; top: 0px; left:-25px;}}" <style>
div {
height: 40px;
width: 70%;
background: black;
margin: 50px auto;
border-radius: 5px;
position: relative;
}
#rect {
animation-name: rainbow;
animation-duration: 4s;
}
@keyframes rainbow {
0% {
background-color: blue;
top: 0px;
left: 0px;
}
50% {
background-color: green;
top: 50px;
left: 25px;
}
100% {
background-color: yellow;
top: 0px;
left: -25px;
}
}
</style>
<div id="rect"></div>
``` ```
</section> </section>

9
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.english.md
View File

@ -49,9 +49,12 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```html
```js <style>
var code = "body {background: url('https://i.imgur.com/MJAkxbh.png')}" body {
background: url("https://i.imgur.com/MJAkxbh.png");
}
</style>
``` ```
</section> </section>

36
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.english.md
View File

@ -84,7 +84,39 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h4 {
text-align: center;
}
p {
text-align: justify;
}
.links {
margin-right: 20px;
}
.fullCard {
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
</style>
<div class="fullCard">
<div class="cardContent">
<div class="cardText">
<h4>Google</h4>
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
``` ```
</section> </section>

28
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.english.md
View File

@ -74,8 +74,32 @@ tests:
<section id='solution'> <section id='solution'>
```js ```html
var code = "@keyframes fade {50% { left: 60%; opacity: 0.1;}}" <style>
#ball {
width: 70px;
height: 70px;
margin: 50px auto;
position: fixed;
left: 20%;
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
animation-name: fade;
animation-duration: 3s;
}
@keyframes fade {
50% {
left: 60%;
opacity: 0.1;
}
}
</style>
<div id="ball"></div>
``` ```
</section> </section>

1
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.english.md
View File

@ -123,7 +123,6 @@ tests:
.cardText { .cardText {
margin-bottom: 30px; margin-bottom: 30px;
} }
</style> </style>
<div class="fullCard" id="thumbnail"> <div class="fullCard" id="thumbnail">
<div class="cardContent"> <div class="cardContent">

21
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.english.md
View File

@ -70,7 +70,24 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
body {
background-color: #FFFFFF;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
div {
display: inline-block;
height: 100px;
width: 100px;
}
</style>
<div class="blue"></div>
<div class="yellow"></div>
``` ```
</section> </section>

29
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.english.md
View File

@ -81,7 +81,32 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
body {
background-color: #FFFFFF;
}
.orange {
background-color: #FF7F00;
}
.cyan {
background-color: #00FFFF;
}
.raspberry {
background-color: #FF007F;
}
div {
height: 100px;
width: 100px;
margin-bottom: 5px;
}
</style>
<div class="orange"></div>
<div class="cyan"></div>
<div class="raspberry"></div>
``` ```
</section> </section>

40
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.english.md
View File

@ -89,7 +89,43 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
.balls{
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
position: fixed;
width: 50px;
height: 50px;
margin-top: 50px;
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#ball1 {
left: 27%;
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
}
#ball2 {
left: 56%;
animation-timing-function: ease-out;
}
@keyframes bounce {
0% {
top: 0px;
}
100% {
top: 249px;
}
}
</style>
<div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>
``` ```
</section> </section>

30
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.english.md
View File

@ -78,7 +78,33 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
div {
height: 40px;
width: 70%;
background: black;
margin: 50px auto;
border-radius: 5px;
}
#rect {
animation-name: rainbow;
animation-duration: 4s;
}
@keyframes rainbow {
0% {
background-color: blue;
}
50% {
background-color: green;
}
100% {
background-color: yellow;
}
}
</style>
<div id="rect"></div>
``` ```
</section> </section>

23
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.english.md
View File

@ -69,7 +69,26 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
#searchbar {
position: absolute;
top: 50px;
right: 50px;
}
section {
position: relative;
}
</style>
<body>
<h1>Welcome!</h1>
<section>
<form id="searchbar">
<label for="search">Search:</label>
<input type="search" id="search" name="search">
<input type="submit" name="submit" value="Go!">
</form>
</section>
</body>
``` ```
</section> </section>

35
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.english.md
View File

@ -81,7 +81,38 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
#navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #767676;
}
nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;
}
nav li {
display: inline;
margin-right: 20px;
}
a {
text-decoration: none;
}
</style>
<body>
<header>
<h1>Welcome!</h1>
<nav id="navbar">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</header>
<p>I shift up when the #navbar is fixed to the browser window.</p>
</body>
``` ```
</section> </section>

71
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.english.md
View File

@ -116,7 +116,74 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
.back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
animation-name: backdiv;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
animation-name: beat;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.heart:after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart:before {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
@keyframes backdiv {
50% {
background: #ffe6f2;
}
}
@keyframes beat {
0% {
transform: scale(1) rotate(-45deg);
}
50% {
transform: scale(0.6) rotate(-45deg);
}
}
</style>
<div class="back"></div>
<div class="heart"></div>
``` ```
</section> </section>

39
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.english.md
View File

@ -84,7 +84,42 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
.balls {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 60%;
animation-name: jump;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#red {
background: red;
left: 25%;
animation-timing-function: linear;
}
#blue {
background: blue;
left: 50%;
animation-timing-function: ease-out;
}
#green {
background: green;
left: 75%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump {
50% {
top: 10%;
}
}
</style>
<div class="balls" id="red"></div>
<div class="balls" id="blue"></div>
<div class="balls" id="green"></div>
``` ```
</section> </section>

22
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.english.md
View File

@ -68,8 +68,26 @@ tests:
<section id='solution'> <section id='solution'>
```js ```html
var code = "button:hover {animation-name: background-color; animation-duration: 500ms; animation-fill-mode: forwards;}" <style>
button {
border-radius: 5px;
color: white;
background-color: #0F5897;
padding: 5px 10px 8px 10px;
}
button:hover {
animation-name: background-color;
animation-duration: 500ms;
animation-fill-mode: forwards;
}
@keyframes background-color {
100% {
background-color: #4791d0;
}
}
</style>
<button>Register</button>
``` ```
</section> </section>

17
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.english.md
View File

@ -61,7 +61,20 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <head>
<style>
h2 {
position: relative;
left: 15px;
bottom: 10px;
}
</style>
</head>
<body>
<h1>On Being Well-Positioned</h1>
<h2>Move me!</h2>
<p>I still think the h2 is where it normally sits.</p>
</body>
``` ```
</section> </section>

32
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.english.md
View File

@ -75,7 +75,35 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <head>
<style>
#left {
float: left;
width: 50%;
}
#right {
float: right;
width: 40%;
}
aside, section {
padding: 2px;
background-color: #ccc;
}
</style>
</head>
<body>
<header>
<h1>Welcome!</h1>
</header>
<section id="left">
<h2>Content</h2>
<p>Good stuff</p>
</section>
<aside id="right">
<h2>Sidebar</h2>
<p>Links</p>
</aside>
</body>
``` ```
</section> </section>

29
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.english.md
View File

@ -68,7 +68,32 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h1 {
font-size: 68px;
}
h2 {
font-size: 52px;
}
h3 {
font-size: 40px;
}
h4 {
font-size: 32px;
}
h5 {
font-size: 21px;
}
h6 {
font-size: 14px;
}
</style>
<h1>This is h1 text</h1>
<h2>This is h2 text</h2>
<h3>This is h3 text</h3>
<h4>This is h4 text</h4>
<h5>This is h5 text</h5>
<h6>This is h6 text</h6>
``` ```
</section> </section>

11
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.english.md
View File

@ -52,7 +52,14 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
p {
font-size: 16px;
}
</style>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
``` ```
</section> </section>

35
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.english.md
View File

@ -87,7 +87,38 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h1 {
font-size: 68px;
font-weight: 800;
}
h2 {
font-size: 52px;
font-weight: 600;
}
h3 {
font-size: 40px;
font-weight: 500;
}
h4 {
font-size: 32px;
font-weight: 400;
}
h5 {
font-size: 21px;
font-weight: 300;
}
h6 {
font-size: 14px;
font-weight: 200;
}
</style>
<h1>This is h1 text</h1>
<h2>This is h2 text</h2>
<h3>This is h3 text</h3>
<h4>This is h4 text</h4>
<h5>This is h5 text</h5>
<h6>This is h6 text</h6>
``` ```
</section> </section>

12
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.english.md
View File

@ -53,7 +53,15 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
p {
font-size: 16px;
line-height: 25px;
}
</style>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
``` ```
</section> </section>

35
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.english.md
View File

@ -83,7 +83,38 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
.balls{
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
margin-top: 50px;
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#red {
background: red;
left: 27%;
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
}
#blue {
background: blue;
left: 56%;
animation-timing-function: ease-out;
}
@keyframes bounce {
0% {
top: 0px;
}
100% {
top: 249px;
}
}
</style>
<div class="balls" id= "red"></div>
<div class="balls" id= "blue"></div>
``` ```
</section> </section>

19
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.english.md
View File

@ -79,8 +79,23 @@ tests:
<section id='solution'> <section id='solution'>
```js ```html
var code = "background: repeating-linear-gradient(45deg, yellow 0px, yellow 40px, black 40px, black 80px);" <style>
div{
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50 auto;
background: repeating-linear-gradient(
45deg,
yellow 0px,
yellow 40px,
black 40px,
black 80px
);
}
</style>
<div></div>
``` ```
</section> </section>

23
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.english.md
View File

@ -66,7 +66,26 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
button {
border-radius: 5px;
color: white;
background-color: #0F5897;
padding: 5px 10px 8px 10px;
}
button:hover {
animation-name: background-color;
animation-duration: 500ms;
}
@keyframes background-color {
100% {
background-color: #4791d0;
}
}
</style>
<button>Register</button>
``` ```
</section> </section>

20
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.english.md
View File

@ -63,9 +63,23 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```html
```js <style>
var code = "#bottom {background-color: blue; transform: skewX(24deg);}" div {
width: 70%;
height: 100px;
margin: 50px auto;
}
#top {
background-color: red;
}
#bottom {
background-color: blue;
transform: skewX(24deg);
}
</style>
<div id="top"></div>
<div id="bottom"></div>
``` ```
</section> </section>

20
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis.english.md
View File

@ -63,8 +63,24 @@ tests:
<section id='solution'> <section id='solution'>
```js ```html
var code = "#top {background-color: red; transform: skewY(-10deg);}" <style>
div {
width: 70%;
height: 100px;
margin: 50px auto;
}
#top {
background-color: red;
transform: skewY(-10deg);
}
#bottom {
background-color: blue;
transform: skewX(24deg);
}
</style>
<div id="top"></div>
<div id="bottom"></div>
``` ```
</section> </section>

26
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.english.md
View File

@ -72,8 +72,30 @@ tests:
<section id='solution'> <section id='solution'>
```js ```html
var code = "#ball2 {left: 65%; transform: scale(1.5);}" <style>
.ball {
width: 40px;
height: 40px;
margin: 50 auto;
position: fixed;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
border-radius: 50%;
}
#ball1 {
left: 20%;
}
#ball2 {
left: 65%;
transform: scale(1.5);
}
</style>
<div class="ball" id= "ball1"></div>
<div class="ball" id= "ball2"></div>
``` ```
</section> </section>

20
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.english.md
View File

@ -66,8 +66,24 @@ tests:
<section id='solution'> <section id='solution'>
```js ```html
var code = "div:hover {transform: scale(1.1);}" <style>
div {
width: 70%;
height: 100px;
margin: 50px auto;
background: linear-gradient(
53deg,
#ccfffc,
#ffcccf
);
}
div:hover {
transform: scale(1.1);
}
</style>
<div></div>
``` ```
</section> </section>

41
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.english.md
View File

@ -84,7 +84,44 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h4 {
text-align: center;
height: 25px;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
</style>
<div class="fullCard">
<div class="cardContent">
<div class="cardText">
<h4>Google</h4>
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
``` ```
</section> </section>

41
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.english.md
View File

@ -86,7 +86,44 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h4 {
text-align: center;
height: 25px;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
</style>
<div class="fullCard">
<div class="cardContent">
<div class="cardText">
<h4>Google</h4>
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
``` ```
</section> </section>

49
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.english.md
View File

@ -94,7 +94,52 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h4 {
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size: 27px;
text-transform: uppercase;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
opacity: 0.7;
}
#thumbnail {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
</style>
<div class="fullCard" id="thumbnail">
<div class="cardContent">
<div class="cardText">
<h4>Alphabet</h4>
<hr>
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
``` ```
</section> </section>

41
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.english.md
View File

@ -85,7 +85,44 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h4 {
text-align: center;
height: 25px;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
</style>
<div class="fullCard">
<div class="cardContent">
<div class="cardText">
<h4>Google</h4>
<p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
``` ```
</section> </section>