...

Instructions

  1. Review the HTML tab in the Codepen. Find the class names and read the code structure.
  2. Scroll down below this box and see what you will be making and what you need for each exercise.
  3. Go back to the Codepen box, click on the ‘CSS’ tab of the box and start styling and typing your CSS here!
  4. You can see the results in real time in the ‘Result’ box to the right.
  5. If you get stuck, review the ‘Solution’ code to fix your CSS, or simply copy and paste the whole solved code into the ‘CSS’ tab to see the result!

CSS Exercises

Scroll down and start solving the exercises for each module! 

Module 1: Text

Exercise 1 (scroll down to see what you need for this exercise)

See the Pen Mod.1-Ex.1 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Blue heading color: #4361ee
Grey text color: #808080
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .text-content{
	padding: 25px;
	font-family: 'Outfit', sans-serif;
}

.text-content p{
	font-size: 16px;
	line-height: 21px;
	margin-bottom: 25px;
	color: #808080;
}

.text-content h3{
	font-size: 28px;
  	letter-spacing: -0.4px;
	line-height: 24px;
	color: #4361ee;
	margin-bottom: 16px;
}

Exercise 2 (scroll down to see what you need for this exercise)

See the Pen Mod.1-Ex.2 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Grey text color: #808080
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .text-content {
	padding: 25px;
}

.text-content p{
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	line-height: 21px;
	margin-bottom: 20px;
	color: #808080;
}

.text-content a{
	color: red;
	text-decoration: none;
}

.text-content a:hover{
	opacity: 0.7;
}

Exercise 3 (scroll down to see what you need for this exercise)

See the Pen Mod.1-Ex.3 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Blue button color: #0000cc
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .button a{
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  text-decoration: none;
  background-color: #0000cc;
  padding: 15px 25px;
  border-radius: 6px;
  display: inline-block;
}

.button{
  text-align: center;
  margin-top: 60px;
}

Exercise 4 (scroll down to see what you need for this exercise)

See the Pen Mod.1-Ex.4 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Labels background color: #C5EAFA
Blue button color: #4361ee
Blue button color on hover: #2b35af
Grey text color: #808080
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .text-content{
	padding: 25px;
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	line-height: 21px;
	color: #808080;
}

.text-content p{
	margin-bottom: 30px;
}

.labels{
	margin-bottom: 20px;
}

.labels span{
	background-color: #C5EAFA;
	color: #42526e;
	font-weight: 600;
	padding: 4px 10px;
	margin-right: 4px;
	border-radius: 4px;
	font-size: 13px;
}

.text-content a{
	background-color: #4361ee;
	color: #ffffff;
	padding: 10px 15px;
	border-radius: 4px;
	text-decoration: none;
}

.text-content a:hover{
	background-color: #2b35af;
}

Exercise 5 (scroll down to see what you need for this exercise)

See the Pen Mod.1-Ex.5 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Grey text color: #808080
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .text-content {
	padding: 25px;
}

.text-content p{
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	line-height: 21px;
	margin-bottom: 20px;
	color: #808080;
}

.two-column-text p{
	column-count: 2;
	column-gap: 25px;
}

Exercise 6 (scroll down to see what you need for this exercise)

See the Pen Mod.1-Ex.6 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font (regular text): Outfit
Font (script font): Brush Script MT
Grey text color: #808080
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .quote{
	font-family: 'Outfit', sans-serif;
	font-size: 20px;
	padding: 30px;
	line-height: 1.4;
	color: grey;
}

.quote span{
	font-weight: 300;
	color: red;
	font-size: 40px;
	font-family: 'Brush Script MT';
}

Exercise 7 (scroll down to see what you need for this exercise)

See the Pen Mod.1-Ex.7 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Blue heading color: #4361ee
Grey text color: #808080
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .text-content{
	padding: 25px;
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	line-height: 21px;
	color: #808080;
}

.text-content p{
	font-size: 16px;
	line-height: 21px;
	margin-bottom: 25px;
}

.text-content h3{
	font-size: 24px;
	line-height: 24px;
	color: #4361ee;
	margin-bottom: 16px;
}

.text-content ul{
	padding-left: 1em;
	list-style-position: outside;
}

.text-content ul li{
	padding-left: 4px;
	margin-bottom: 10px;
}

Exercise 8 (scroll down to see what you need for this exercise)

See the Pen Mod.1-Ex.8 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Blue heading color: #4361ee
Grey text color: #808080
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .text-content{
	padding: 25px;
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	line-height: 21px;
	color: #808080;
}

.text-content p{
	font-size: 16px;
	line-height: 21px;
	margin-bottom: 25px;
}

.text-content h3{
	font-size: 24px;
	line-height: 24px;
	color: #4361ee;
	margin-bottom: 16px;
}

.text-content ol{
	padding-left: 1em;
	list-style-position: outside;
}

.text-content ol li{
	padding-left: 4px;
	margin-bottom: 10px;
}

Module 2

Exercise 1 (scroll down to see what you need for this exercise)

See the Pen Mod.2-Ex.1 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Image width: 300px
Image height: 180px
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .content{
	padding: 20px;
	text-align: center;
}

.content img{
	width: 300px;
	height: 180px;
	object-fit: cover;
	border-radius: 20px;
}

Exercise 2 (scroll down to see what you need for this exercise)

See the Pen Mod.2-Ex.2 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Image width: 300px
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .content{
	padding: 20px;
	text-align: center;
}

.content img{
	width: 300px;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
}

Exercise 3 (scroll down to see what you need for this exercise)

See the Pen Mod.2-Ex.3 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Image width: 300px
Image height: 180px
Border color: #bcd2e8
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .content{
	padding: 20px;
	text-align: center;
}

.content img{
	width: 300px;
	height: 180px;
	object-fit: cover;
	border-radius: 20px;
	border: 8px solid #bcd2e8;
	filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.4));
}

Exercise 4 (scroll down to see what you need for this exercise)

See the Pen Mod.2-Ex.4 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Image width: 300px
Image height: 180px
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .content{
	padding: 20px;
	text-align: center;
}

.content img{
	width: 300px;
	height: 180px;
	object-fit: cover;
	opacity: 0.5;
}

Exercise 5 (scroll down to see what you need for this exercise)

See the Pen Mod.2-Ex.5 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Background image URL: https://templio.net/wp-content/uploads/2021/10/antelope-canyon-canyon-freestone-colorful-50686.jpeg
Font: Outfit
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .content{
	padding: 20px;
	text-align: center;
	background-image: url('https://www.cssgamelab.com/wp-content/uploads/2024/06/antelope-canyon-canyon-freestone-colorful-50686.jpeg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	color: #ffffff;
	padding: 100px 20px;
	font-family: 'Outfit', sans-serif;
}

.content h3{
	color: #ffffff;
	font-size: 30px;
	margin-bottom: 0px;
}

Exercise 6 (scroll down to see what you need for this exercise)

See the Pen Mod.2-Ex.6 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Background gradient rgba colors: 2,0,36,1; 9,9,121,1 and 0,212,255,1
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .bg-box{
  font-family: 'Outfit', sans-serif;
  padding: 100px 20px;
  text-align: center;
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
  color: #ffffff;
}

Exercise 7 (scroll down to see what you need for this exercise)

See the Pen Mod.2-Ex.7 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Image width: 400px
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .image{
	text-align: center;
	padding-top: 30px;
}

.image img{
	width: 400px;
	mask-image: linear-gradient(180deg,black 60%,transparent 100%);
	-webkit-mask-image: linear-gradient(180deg,black 60%,transparent 100%);
}

Exercise 8 (scroll down to see what you need for this exercise)

See the Pen Mod.2-Ex.8 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Background color: #efefef
Font: Outfit
Content width: 400px
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .body{
	background-color: #efefef;
	padding-top: 40px;
	padding-bottom: 40px;
}

.container{
	font-family: 'Outfit', sans-serif;
	width: 400px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.container img{
	width: 100%;
}

Module 3

Exercise 1 (scroll down to see what you need for this exercise)

See the Pen Mod.3-Ex.1 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Background color: #00b4d8
Font: Outfit
Button color: #023e8a
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .content{
	background-color: #00b4d8;
	font-family: 'Outfit', sans-serif;
	color: #ffffff;
	display: flex;
	flex-direction: column;
	text-align: center;
	justify-content: center;
	align-items: center;
	min-height: 400px;
	padding: 30px 60px;
}

.content a{
	font-family: 'Outfit', sans-serif;
 	text-decoration: none;
	background-color: #023e8a;
    font-size: 16px;
	color: #ffffff;
	border: 0px;
	padding: 10px 20px;
	border-radius: 4px;
	font-weight: 600;
}

.content h3{
	margin-bottom: 0px;
    font-size: 24px;
}

Exercise 10 (scroll down to see what you need for this exercise)

See the Pen Mod.3-Ex.10 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Background image URL: https://www.cssgamelab.com/wp-content/uploads/2024/06/pexels-photo-286763.jpeg
Font: Outfit
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .bg-banner{
	position: relative;
	background-image: url('https://www.cssgamelab.com/wp-content/uploads/2024/06/pexels-photo-286763.jpeg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: -5;
	text-align: center;
	padding: 100px 
}

.bg-banner::after{
	content: '';
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index:-3;
}

.bg-banner h1{
	color: white;
 	z-index: 5;
 	font-family: 'Outfit', sans-serif;
}

Exercise 11 (scroll down to see what you need for this exercise)

See the Pen Mod.3-Ex.11 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Image width: 400px
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .image{
	width: 400px;
	position: relative;
	height: 300px;
}

.image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.image::after{
	content: '';
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Exercise 2 (scroll down to see what you need for this exercise)

See the Pen Mod.3-Ex.2 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Image height: 90px
Font: Outfit
Grid with three equal columns
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .image-container img{
	width: 100%;
	height: 90px;
	object-fit: cover;
	border-radius: 4px;
}

.image-boxes{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 40px;
	grid-row-gap: 40px;
	font-family: 'Outfit', sans-serif;
	padding: 20px;
}

.image-boxes p{
	font-size: 12px;
}

Exercise 3 (scroll down to see what you need for this exercise)

See the Pen Mod.3-Ex.3 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Image height: 90px
Font: Outfit
Grid with three columns Middle column is twice the width of the other two columns
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .image-container img{
	width: 100%;
	height: 90px;
	object-fit: cover;
	border-radius: 4px;
}

.image-boxes{
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	grid-column-gap: 40px;
	grid-row-gap: 40px;
	font-family: 'Outfit', sans-serif;
	padding: 20px;
}

.image-boxes p{
	font-size: 12px;
}

Exercise 4 (scroll down to see what you need for this exercise)

See the Pen Mod.3-Ex.4 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Image height: 160px
Button color: #002D62
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .image-container{
	font-family: 'Outfit', sans-serif;
	padding: 20px;
}

.image-container img{
	width: 100%;
	height: 160px;
	object-fit: cover;
}

.button {
	display: inline-block;
	background-color: #00308F;
	padding: 10px 20px;
	border-radius: 4px;
	margin-right: 10px;
}

.button a{
	text-decoration: none;
	color: #ffffff;
}

.button:hover{
	background-color: #002D62;
}

Exercise 5 (scroll down to see what you need for this exercise)

See the Pen Mod.3-Ex.5 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Image size: 300px x 240px
Text box color: #f8eb93
Body copy font size: 14px
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .main-box{
  display: flex;
  width: 100%;
}

.image-box img{
  width: 300px;
  height: 240px;
  object-fit: cover;
}

h1{
  font-size: 36px;
  letter-spacing: -1px;
  margin-bottom: 20px;
}

.text-content{
  background-color: #f8eb93;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  margin-left: -50px;
  margin-top: 80px;
  padding: 20px 30px 30px 80px;
  z-index: -1;
}

Exercise 6 (scroll down to see what you need for this exercise)

See the Pen Mod.3-Ex.6 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Background color: #ADD8E6
Arrow image width: 60px
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .text-content{
  position: relative;
  background-color: #ADD8E6;
  margin-top: 30px;
  padding: 40px 100px 140px 60px;
}

.text-content p{
  font-family: 'Outfit', sans-serif;
}

h1{
  font-size: 60px;
  font-family: 'Outfit', sans-serif;
  letter-spacing: -1px;
  margin-bottom: 30px;
  margin-top: 0px;
}

.arrow-box img{
  width: 60px;
  object-fit: contain;
  padding-left: 15px; 
  padding-top: 4px;
}

.arrow-box p{
  font-weight: 600;
}

.arrow-box{
  display: flex;
  position: absolute;
  bottom: 10px;
  right: 30px;
}

Exercise 7 (scroll down to see what you need for this exercise)

See the Pen Mod.3-Ex.7 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Chat icon size: 60px
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .text-content{
  position: relative;
  margin-top: 30px;
  padding: 40px 100px 140px 60px;
}

.text-content p{
  font-family: 'Outfit', sans-serif;
}

h1{
  font-size: 60px;
  font-family: 'Outfit', sans-serif;
  letter-spacing: -1px;
  margin-bottom: 30px;
  margin-top: 0px;
}

.arrow-box img{
  width: 60px;
  object-fit: contain;
}

.arrow-box p{
  font-weight: 600;
}

.arrow-box{
  padding-top: 40px;
}

.chat-icon img{
  width: 60px;
}

.chat-icon{
  position: fixed;
  bottom: 20px;
  right: 20px;
}

Exercise 8 (scroll down to see what you need for this exercise)

See the Pen Mod.3-Ex.8 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Image width: 300px
Subtitle background color: #FFD7CD
Text link color: #FF7A59
Button color: #FF7A59
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .text-content img{
  width: 300px;
  border-radius: 10px;
}

h1{
  font-size: 60px;
  font-family: 'Outfit', sans-serif;
  letter-spacing: -1px;
  margin-bottom: 30px;
  margin-top: 20px;
}

h4{
  background-color: #FFD7CD;
  padding: 20px;
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  position: sticky;
  top: 0;
}

.text-content{
  margin-top: 30px;
  padding: 40px 60px 140px 60px;
}

.text-content p{
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
}

.text-content a{
  color: #FF7A59;
  font-size: 16px;
}

.link-box{
  padding-top: 20px;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
}

.button a{
  background-color: #FF7A59;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  padding: 20px;
  border-radius: 10px;
  display: inline-block;
}

Exercise 9 (scroll down to see what you need for this exercise)

See the Pen Mod.3-Ex.9 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Background color: #ADD8E6
Portrait image width: 380px
Move the image to the right to go 80px out from the screen
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .bg-box{
  font-family: 'Outfit', sans-serif;
  background-color: #ADD8E6;
  padding: 80px 140px 80px 30px;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.bg-box img{
  width: 380px;
  position: absolute;
  bottom: 0;
  right: -80px;
}

Module 4

Exercise 1 (scroll down to see what you need for this exercise)

See the Pen Mod.4-Ex.1 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Icon circle color: #f6faff
Circle outline color: #daecff
Icon size: 40px
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .content{
	text-align: center;
	padding: 40px;
	font-family: 'Outfit', sans-serif;
	color: black;
}

.icon-box{
	display: inline-block;
	padding: 30px;
	border-radius: 50%;
	fill: blue;
	background-color: #f6faff;
	border: 1px solid #daecff;
}

.icon-box svg{
	width: 40px;
	height: 40px;
}

Exercise 2 (scroll down to see what you need for this exercise)

See the Pen Mod.4-Ex.2 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Border color: #beddfe
Icon box width: 100px
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .icon-box{
	font-family: 'Outfit', sans-serif;
	text-align: center;
	padding: 40px 20px;
}

.icon-box img{
	border: 1px solid #beddfe;
	border-radius: 8px;
	width: 100px;
	padding: 20px;
	margin-bottom: 0px;
}

h3{
	font-size: 30px;
	margin-bottom: 0px;
}

Exercise 3 (scroll down to see what you need for this exercise)

See the Pen Mod.4-Ex.3 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Grey background color: #d5d5d5
Circle width: 30px
Icon size: 20px
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .sm-icons .fa{
	color: #ffffff;
	background-color: #000000;
	width: 30px;
	height: 30px;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	text-decoration: none;
}

.sm-icons {
	display: flex;
  	flex-direction: row;
	justify-content: center;
	padding: 30px;
	background-color: #d5d5d5;
	column-gap: 10px;
}

Exercise 4 (scroll down to see what you need for this exercise)

See the Pen Mod.4-Ex.4 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Label background color: #D4F1F4
Text and icon color: #000080
Use ::before pseudoelements to add icons for each label
Icon font for ::before content: FontAwesome
Free icon unicode: \f02b
International icon unicode: \f0ac
Non-profit icon unicode: \f004
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .labels{
	font-size: 16px;
	font-family: 'Outfit', sans-serif;
	color: #000080;
	padding: 30px;
}

.labels span{
	margin-right: 6px;
	background-color: #D4F1F4;
	padding: 5px 10px;
	border-radius: 4px;
}

.labels span::before{
	margin-right: 6px;
}

.free::before{
	content: '\f02b';
	font-family: 'FontAwesome';
}

.international::before{
	content: '\f0ac';
	font-family: 'FontAwesome';
}

.donation::before{
	content: '\f004';
	font-family: 'FontAwesome';
}

Exercise 5 (scroll down to see what you need for this exercise)

See the Pen Mod.4-Ex.5 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Text and button color: #05445E
Button hover color: #152238
Use ::before pseudoelement to add the icon for the button
Icon font for ::before content: FontAwesome
Free icon unicode: \f019
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .content{
	font-family: 'Outfit', sans-serif;
	padding: 20px;
}

.content p{
	color: #05445E;
	margin-bottom: 30px;
}

.button{
	text-decoration: none;
	background-color: #05445E;
	padding: 10px 20px;
	border-radius: 4px;
	color: #ffffff;
	font-weight: 600;
}

.button:hover{
	background-color: #152238;
}

.button::before{
	content:'\f019';
	font-family: 'FontAwesome';
	margin-right: 10px;
	font-weight: 400;
}

Exercise 6 (scroll down to see what you need for this exercise)

See the Pen Mod.4-Ex.6 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Text and button color: #05445E
Button hover color: #152238
Use ::before pseudoelement to add the icon for the button
Background image for the ::before pseudoelement: https://www.cssgamelab.com/wp-content/uploads/2024/06/upload-icon-custom-white-20px-01.svg
Icon size: 20px
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .content{
	font-family: 'Outfit', sans-serif;
	padding: 20px;
}

.content p{
	color: #05445E;
	margin-bottom: 30px;
}

.button{
	text-decoration: none;
	background-color: #05445E;
	padding: 10px 20px 10px 45px;
	border-radius: 4px;
	color: #ffffff;
	font-weight: 600;
}

.button:hover{
	background-color: #152238;
}

.button::before{
	content:'';
	background-image: url('https://www.cssgamelab.com/wp-content/uploads/2024/06/upload-icon-custom-white-20px-01.svg');
	background-repeat: no-repeat;
	background-size: contain;
	width: 20px;
	height: 20px;
	position: absolute;
	margin-right: 10px;
	left: 42px;
}

Module 5

Exercise 1 (scroll down to see what you need for this exercise)

See the Pen Mod.5-Ex.1 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Box background color: #f5f5f5
Outline color: #7CB9E8
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .content{
  display: flex;
  align-items: center;
  column-gap: 20px;
  padding: 30px;
  font-family: 'Outfit', sans-serif;
}

.content p{
  font-size: 14px;
}

.price-box{
  text-align: center;
  background-color: #f5f5f5;
  padding: 60px 30px;
  border-radius: 8px;
  width: 100%;
}

.price-box img{
  width: 20px;
}

.price-box h4{
  margin-top: 10px;
}

.price-box:nth-child(2){
  background-color: #ffffff;
  border: 1px solid #7CB9E8;
}

.price-box:nth-child(2) h4{
  font-size: 30px;
  margin-bottom: 0px;
  margin-top: 10px;
}

.price-box:nth-child(2) img{
  width: 40px;
}

Exercise 10 (scroll down to see what you need for this exercise)

See the Pen Mod.5-Ex.10 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Block background color: #E6E6FA
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .text-content{
	font-family: 'Outfit', sans-serif;
	padding: 30px;
}

.text-content ol{
	list-style-position: inside;
	padding-left: 0px;
	margin-left: 0px;
}

.text-content li{
	background-color: #E6E6FA;
	text-indent: -1em;
	padding: 1em 2.2em;
	margin-bottom: 10px;
	border-radius: 4px;
}

Exercise 11 (scroll down to see what you need for this exercise)

See the Pen Mod.5-Ex.11 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Text color: #808080
Heading color: #4361ee
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .text-content{
	padding: 25px;
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	line-height: 21px;
	color: #808080;
}

.text-content p{
	font-size: 16px;
	line-height: 21px;
	margin-bottom: 25px;
}

.text-content h3{
	font-size: 24px;
	line-height: 24px;
	color: #4361ee;
	margin-bottom: 16px;
}

.text-content ol{
	padding-left: 0;
	list-style-position: inside;
}

.text-content ol li{
	margin-bottom: 10px;
	counter-increment: li;
}

.text-content ol li::marker{
	content: 'Step ' counter(li) ': ';
	font-weight: 600;
}

Exercise 12 (scroll down to see what you need for this exercise)

See the Pen Mod.5-Ex.12 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Text color: #808080
Heading color: #4361ee
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .text-content{
	padding: 25px;
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	line-height: 21px;
	color: #808080;
}

.text-content p{
	font-size: 16px;
	line-height: 21px;
	margin-bottom: 25px;
}

.text-content h3{
	font-size: 24px;
	line-height: 24px;
	color: #4361ee;
	margin-bottom: 16px;
}

.text-content ol{
	padding-left: 0;
	list-style-position: inside;
	list-style-type: none;
}

.text-content ol li{
	margin-bottom: 10px;
	counter-increment: li;
}

.text-content ol li::before{
	content: 'Step ' counter(li) ': ';
	font-weight: 600;
	display: block;
}

Exercise 13 (scroll down to see what you need for this exercise)

See the Pen Mod.5-Ex.13 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Background image: https://www.cssgamelab.com/wp-content/uploads/2024/06/antelope-canyon-canyon-freestone-colorful-50686.jpeg
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .bg-box{
	font-family: 'Outfit', sans-serif;
	padding: 80px 100px;
	text-align: center;
	position: relative;
}

.bg-box::before{
	content: '';
	background-image: url('https://www.cssgamelab.com/wp-content/uploads/2024/06/antelope-canyon-canyon-freestone-colorful-50686.jpeg');
	position: absolute;
	top: 0px;
	left: 0px;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100%;
	z-index: -1;
	opacity: 0.3;
}

Exercise 14 (scroll down to see what you need for this exercise)

See the Pen Mod.5-Ex.14 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .container{
	font-family: 'Outfit', sans-serif;
	text-align: center;
}

.container h2{
	font-size: 50px;
}

.container h2 span{
	font-size: 28px;
}

.container h2 span:nth-child(2){
	visibility: hidden;
}

Exercise 15 (scroll down to see what you need for this exercise)

See the Pen Mod.5-Ex.15 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Image width: 400px
Heading size: 60px
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .image-box img{
	width: 400px;
}

.image-box {
	position: relative;
}

.image-box:nth-child(2){
	margin-top: -120px;
	margin-left: 100px;
	z-index: -1;
}

.image-box:nth-child(1){
	z-index: 2;
}

.my-text h1{
	font-size: 60px;
	font-family: 'Outfit', sans-serif;
	letter-spacing: -1px;
	margin-top: -30px;
	padding-left: 20px;
	z-index: -3;
	position: relative;
}

Exercise 2 (scroll down to see what you need for this exercise)

See the Pen Mod.5-Ex.2 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Background color: #00308F
Button color: #7CB9E8
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .menu-items{
  font-family: 'Outfit', sans-serif;
}

.menu-items ul{
  list-style-type: none;
  padding-left: 0px;
  text-align: center;
  background-color: #00308F;
  padding: 20px;
}

.menu-items ul li{
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 12px;
  color: #ffffff;
  margin-right: 15px;
}

.menu-items ul li:nth-last-child(1) a{
  text-decoration: none;
  color: #ffffff;
  background-color: #7CB9E8;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 600;
}

Exercise 3 (scroll down to see what you need for this exercise)

See the Pen Mod.5-Ex.3 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Highlighter color: #F7D8BA
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .quote p{
	font-family: 'Outfit', sans-serif;
	font-size: 20px;
	padding: 30px;
	line-height: 1.4;
	color: grey;
}

.quote span{
	font-weight: 700;
	color: black;
	background: linear-gradient(180deg, transparent 0%, transparent 50%, #F7D8BA 50%, #F7D8BA 90%, transparent 90%, transparent 100%);
	padding: 0px 4px;
}

Exercise 4 (scroll down to see what you need for this exercise)

See the Pen Mod.5-Ex.4 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Wave image: https://www.cssgamelab.com/wp-content/uploads/2024/06/Wave-dark-blue.svg
Wave size: 50px x 20px
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .content{
	padding: 10px 40px;
}

.content h1{
	font-family: 'Outfit', sans-serif;
	position: relative;
}

.content h1::before{
	content: '';
	background-image: url('https://www.cssgamelab.com/wp-content/uploads/2024/06/Wave-dark-blue.svg');
	position: absolute;
	width: 50px;
	height: 20px;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	margin-top: -20px;
	margin-left: -10px;
}

Exercise 5 (scroll down to see what you need for this exercise)

See the Pen Mod.5-Ex.5 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Line color: #8C8CD7
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .heading h2{
	font-family: 'Outfit', sans-serif;
	position: relative;
}

.heading{
	padding: 20px;
}

.heading h2::before{
	content: '';
	border-bottom: solid #8C8CD7 6px;
	width: 40px;
	position: absolute;
	margin-top: -6px;
}

Exercise 6 (scroll down to see what you need for this exercise)

See the Pen Mod.5-Ex.6 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Use background image on a list item
Font: Outfit
Bullet image: https://www.cssgamelab.com/wp-content/uploads/2024/06/Wave-dark-blue.svg
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .text-content{
	font-family: 'Outfit', sans-serif;
}

.text-content ul{
  padding-left: 0px;
  list-style-type: none;
}

.text-content ul li{
	background: url('https://www.cssgamelab.com/wp-content/uploads/2024/06/Wave-dark-blue.svg') no-repeat 0 0.45em;
	background-size: 1em;
	padding-left: 1.5em;
	margin-bottom: 10px;
}

Exercise 7 (scroll down to see what you need for this exercise)

See the Pen Mod.5-Ex.7 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Use background image on a BEFORE pseudoelement of a list item
Font: Outfit
Bullet image: https://www.cssgamelab.com/wp-content/uploads/2024/06/Wave-dark-blue.svg
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .text-content{
	font-family: 'Outfit', sans-serif;
}

.text-content ul{
  padding-left: 0px;
  list-style-type: none;
}

.text-content li{
	padding-left: 2em;
	margin-bottom: 10px;
	position: relative;
}

.text-content li::before{
	content: '';
	background: url('https://www.cssgamelab.com/wp-content/uploads/2024/06/Wave-dark-blue.svg') no-repeat;
	background-size: contain;
	background-position: center center;
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
}

Exercise 8 (scroll down to see what you need for this exercise)

See the Pen Mod.5-Ex.8 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Icon Unicode: f019
Icon font: FontAwesome
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .text-content{
	font-family: 'Outfit', sans-serif;
}

.text-content ul{
	padding-left: 0px;
	list-style-type: none;
}

.text-content li{
	margin-bottom: 10px;
}

.text-content li::before{
	content: '\f019';
	font-family: 'FontAwesome';
	margin-right: 10px;
}

Exercise 9 (scroll down to see what you need for this exercise)

See the Pen Mod.5-Ex.9 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Text color: #808080
Circle color: #8C8CD7
Circle size: 1.8em
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .text-content{
	padding: 25px;
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	line-height: 21px;
	color: #808080;
}

.text-content ol{
	padding-left: 1em;
	
}

.text-content ol li{
	padding-left: 10px;
	margin-bottom: 20px;
	position: relative;
}

.text-content ol li::before{
	content: '';
	background-color: #8C8CD7;
	position: absolute;
	width: 1.8em;
	height: 1.8em;
	display: inline-block;
	border-radius: 50%;
	z-index: -1;
	top: -0.25em;
	left: -1.7em;
}

.text-content li::marker{
	color: #ffffff;
}

Module 6

Exercise 1 (scroll down to see what you need for this exercise)

See the Pen Mod.6-Ex.1 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Use :root and variables for all the values you can Font: Outfit
Accent color: #FF7A59
Hover color: #ef6948
Subtitle box color: #FFD7CD
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  :root{
  --border-radius-global: 10px;
  --font-family-global: 'Outfit', sans-serif;
  --body-copy-font-size: 16px;
  --accent-color-global: #FF7A59;
  --hover-color: #ef6948;
  --padding-global: 20px;
  --text-semibold: 600;
}

.text-content img{
  width: 300px;
  border-radius: var(--border-radius-global);
}

.text-content h1{
  font-size: 50px;
  font-family: var(--font-family-global);
  letter-spacing: -1px;
  margin-bottom: 30px;
  margin-top: 20px;
}

.text-content h4{
  background-color: #FFD7CD;
  padding: var(--padding-global);
  border-radius: var(--border-radius-global);
  font-family: var(--font-family-global);
  font-weight: var(--text-semibold);
}

.text-content{
  padding: 40px;
}

.text-content p{
  font-family: var(--font-family-global);
  font-size: var(--body-copy-font-size);
}

.link-box a{
  color: var(--accent-color-global);
  font-size: var(--body-copy-font-size);
}

.link-box a:hover{
  color: var(--hover-color);
}

.link-box{
  margin-top: 20px;
  font-family: var(--font-family-global);
  font-size: var(--body-copy-font-size);
}

.button a{
  background-color: var(--accent-color-global);
  color: #ffffff;
  font-family: var(--font-family-global);
  font-size: var(--body-copy-font-size);
  font-weight: var(--text-semibold);
  text-decoration: none;
  padding: var(--padding-global);
  border-radius: var(--border-radius-global);
  display: inline-block;
}

.button a:hover{
  background-color: var(--hover-color);
}

Exercise 2 (scroll down to see what you need for this exercise)

See the Pen Mod.6-Ex.2 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Use :root and variables for all the values you can
Use defined rgb variable and rgba values for the box background color
Font: Outfit
Accent color rgb: 255,83,73
Hover color rgb: 252, 70, 57
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  :root{
  --accent-color: 255,83,73;
  --hover-color: 252, 70, 57;
}

.bg-box{
  	font-family: 'Outfit', sans-serif;
  	background-color: rgba(var(--accent-color), 0.2);
  	padding: 30px 80px;
  	text-align: center;
}

.bg-box h1{
  	color: rgb(var(--accent-color));
}

.bg-box a{
	text-decoration: none;
	color: white;
	background-color: rgb(var(--accent-color));
	padding: 10px 25px;
	display: inline-block;
	border-radius: 6px;
}

.bg-box a:hover{
	background-color: rgb(var(--hover-color));
}

.sm-icons .fa{
	color: #ffffff;
	background-color: rgba(var(--accent-color), 0.5);
	width: 30px;
	height: 30px;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	text-decoration: none;
}

.sm-icons .fa:hover{
	background-color: rgba(var(--hover-color), 0.5);
}

.sm-icons {
	display: flex;
	justify-content: center;
	padding: 30px;
	gap: 10px;
}

Exercise 3 (scroll down to see what you need for this exercise)

See the Pen Mod.6-Ex.3 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Make the main container with the heading fit the screen height without the nav menu height
Use the overlay filter on the background image
Header height: 80px
Button color: #7CB9E8
Background image URL: https://www.cssgamelab.com/wp-content/uploads/2024/06/pexels-photo-254770.jpeg
Background color: #00308F
Font: Outfit
Accent color rgb: 255,83,73
Hover color rgb: 252, 70, 57
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .menu-items ul{
  font-family: 'Outfit', sans-serif;
  list-style-type: none;
  padding-left: 0px;
  background-color: #00308F;
  display: flex;
  column-gap: 15px;
  align-items: center;
  height: 60px;
  padding: 0px 20px;
  margin: 0px;
}

.menu-items ul li{
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 12px;
  color: #ffffff;
}

.menu-items ul li:nth-last-child(1) a{
  text-decoration: none;
  color: #ffffff;
  background-color: #7CB9E8;
  padding: 10px 16px;
  border-radius: 4px;
  font-weight: 600;
  display: inline-block;
}

.menu-items ul li:nth-last-child(1){
  margin-left: auto;
}

.main-box{
  height: calc(100vh - 60px);
  background-color: #00308F;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: -2;
}

.main-box::before{
  content: '';
  background-image: url('https://www.cssgamelab.com/wp-content/uploads/2024/06/pexels-photo-254770.jpeg');
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  mix-blend-mode: overlay;
  filter: grayscale(100%);
  opacity: 0.6;
  z-index: -1;
}

.main-box h1{
  margin: 0px;
  font-family: 'Outfit', sans-serif;
  color: #ffffff;
  font-size: 60px;
}

Exercise 4 (scroll down to see what you need for this exercise)

See the Pen Mod.6-Ex.4 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Use em values instead of px values for icon circle size, button padding, image size, line height etc.
Use the !important tag for FontAwesome icon size and display properties
Font: Outfit
Accent color: #FF5349
Hover color: #FC4639
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .bg-box{
  font-family: 'Outfit', sans-serif;
  padding: 30px 80px;
  text-align: center;
}

.bg-box img{
  width: 20em;
  height: 12em;
  font-size: 16px;
  object-fit: cover;
  border-radius: 0.8em;
}

.bg-box p{
  font-size: 16px;
  line-height: 1.6em;
}

.bg-box h1{
  color: #FF5349;
}

.bg-box a{
  text-decoration: none;
  color: white;
  font-size: 16px;
  background-color: #FF5349;
  padding: 0.6em 1.5em;
  display: inline-block;
  border-radius: 6px;
}

.bg-box a:hover{
	background-color: #FC4639;
}

.sm-icons .fa{
	color: #ffffff;
	background-color: #FF5349;
	width: 2em;
	height: 2em;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	text-decoration: none;
}

.sm-icons .fa:hover{
	background-color: #FC4639;
}

.sm-icons {
	display: flex;
	justify-content: center;
	padding: 0px 30px 30px 30px;
	gap: 10px;
}

Exercise 5 (scroll down to see what you need for this exercise)

See the Pen Mod.6-Ex.5 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Use display: grid and column spans
Light blue background color: #96d8eb
Footer background color: #00465a
Font: Outfit
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .container{
  background-color: #96d8eb;
}

.container ul{
  font-family: 'Outfit', sans-serif;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  list-style-type: none;
  padding-left: 0px;
  padding-top: 30px;
  margin: 0px;
}

.container ul li:first-child,
.container ul li:last-child{
  grid-column: span 3;
  text-align: center;
}

.container ul li{
  padding: 10px 40px;
}

.container ul li:first-child{
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 700;
}

.container ul li:last-child{
  margin-top: 40px;
  background-color: #00465a;
  color: #ffffff;
  font-size: 14px;
}

Exams

Exam 1 (scroll down to see what you need for this exercise)

See the Pen Exam 1 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Top background image: https://www.cssgamelab.com/wp-content/uploads/2024/06/bled-2608425.jpg
Button color: #24a0ed
Hover color: #1692df
Quote box color: #f5f5f5
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .content{
	font-family: 'Outfit', sans-serif;
}

.hero-banner{
	min-height: 100px;
	background-image: url('https://www.cssgamelab.com/wp-content/uploads/2024/06/bled-2608425.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center -100px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-banner h1{
	color: #ffffff;
}

.text-content{
	padding: 30px;
}

.text-content p{
	color: grey;
	font-size: 15px;
	line-height: 1.5;
}

.text-content a{
	background-color: #24a0ed;
	color: white;
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 16px;
	border-radius: 4px;
	display: inline-block;
	text-decoration: none;
	border: 0px;
	padding: 8px 16px;
	margin-bottom: 40px;
}

.text-content a:hover{
	background-color: #1692df; 
}

.image-box img{
	width: 200px;
	height: 300px;
	object-fit: cover;
	margin-right: 30px;
}

.image-box{
	display: flex;
}

.quote{
	background-color: #f5f5f5;
	padding: 20px 30px;
	text-align: center;
	border-radius: 10px;
	font-style: italic;
}

Exam 2 (scroll down to see what you need for this exercise)

See the Pen Exam 2 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Image size: 120px
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .content{
	padding: 25px;
	font-family: 'Outfit', sans-serif;
}

.image-container img{
	width: 120px;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 10px;
}

.image-container p{
	font-size: 12px;
}

.image-container h3{
	font-size: 15px;
	margin-bottom: 0px;
}

.image-boxes{
	display: flex;
	column-gap: 20px;
	flex-direction: row;
}

Exam 3 (scroll down to see what you need for this exercise)

See the Pen Exam 3 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Font: Outfit
Background image: https://www.cssgamelab.com/wp-content/uploads/2024/06/beach-832346.jpg
Tags and icon box color: #E6E6FA
Button color: #4B0082
Hover color: #1d1160
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .container{
	font-family: 'Outfit', sans-serif;
}

.hero-banner{
	background-image: url('https://www.cssgamelab.com/wp-content/uploads/2024/06/beach-832346.jpg');
	min-height: 200px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-banner h2{
	color: #ffffff;
	font-size: 32px;
}

.content{
	padding: 30px;
}

.content ul{
	list-style-type: none;
	padding-left: 0px;
}

.content li{
	display: inline-block;
	background-color: #E6E6FA;
	padding: 6px 12px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 13px;
	margin-right: 4px;
}

.content a{
	background-color: #4B0082;
	color: #ffffff;
	text-decoration: none;
	padding: 10px 20px;
	display: block;
	border-radius: 4px;
	text-align: center;
}

.content a:hover{
	background-color: #1d1160;
}

.icon-boxes{
	display: flex;
	margin-top: 30px;
	column-gap: 20px;
}

.icon-box-single{
	text-align: center;
	padding: 60px 30px;
	background-color: #E6E6FA;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.icon-box-single h4{
	margin-bottom: 0px;
}

.icon-box-single-image img{
	width: 80px;
}

.icon-box-single-image{
	background-color: #ffffff;
	height: 100px;
	width: 100px;
	display: flex;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
}

Exam 4 (scroll down to see what you need for this exercise)

See the Pen Exam 4 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Use spans with defined visibility to center the numeric part of the price in the price box
Font: Outfit
Price box color: #daf0ff
Middle box border: #5be2ff
Best seller ribbon color: #1870de
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .pricing{
  font-family: 'Outfit', sans-serif;
  display: flex;
  column-gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}

.pricing p{
  font-size: 13px;
}

.price-box{
  background-color: #daf0ff;
  width: 120px;
  padding: 80px 20px;
  position: relative;
  text-align: center;
  border-radius: 10px;
  min-height: 240px;
}

.price-box:nth-child(2){
  border: 1px solid #5be2ff;
  background-color: #ffffff;
}

.price-box h2{
  text-transform: uppercase;
  letter-spacing: 6px;
  margin-bottom: 40px;
  font-size: 14px;
}

.price-box h3{
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  padding: 8px 0px;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 12px;
  background-color: #1870de;
  color: #ffffff;
}

.price-box h4{
  font-size: 40px;
  margin-bottom: 0px;
  position: absolute;
  bottom: 40px;
  left: 0px;
  width: 100%;
}

.price-box h4 span{
  font-size: 26px;
}

.price-box h4 span:nth-child(2){
  visibility: hidden;
}

Exam 5 (scroll down to see what you need for this exercise)

See the Pen Exam 5 by Anait (@velvetmade) on CodePen.

This is what you will be making (try to get the same result in the 'Result' tab above):
This is what you need for this exercise:
Make the menu sticky when scrolling
Font: Outfit
Button and squares color: #FF5349
Hover color: #e8392f
Background image: https://www.cssgamelab.com/wp-content/uploads/2024/06/antelope-canyon-canyon-freestone-colorful-50686.jpeg
The solution (you can copy this code and paste it in the 'CSS' tab to see the result):
  .main-container{
  font-family: 'Outfit', sans-serif;
}

.menu{
  display: flex;
  background-color: #ffffff;
  filter: drop-shadow(0px 8px 32px rgba(0,0,0,0.1));
  padding: 0px 20px;
  height: 80px;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

.menu-header{
  width: 20%;
}

.menu-header h1{
  font-size: 20px;
}

.menu-links{
  display: flex;
  justify-content: end;
  align-items: center;
  width: 75%;
}

.menu-links ul{
  list-style-type: none;
  display: flex;
}

.menu-links li{
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 2px;
  margin-right: 20px;
}

.menu-links a{
  text-decoration: none;
  background-color: #FF5349;
  color: #ffffff;
  padding: 8px 20px;
  border-radius: 6px;
}

.menu-links a:hover{
  background-color: #e8392f;
}

.content{
  text-align: center;
  margin-top: 80px;
}

.main-body{
  padding: 0px 30px;
  margin-top: 40px;
}

.hero{
  background-image: url('https://www.cssgamelab.com/wp-content/uploads/2024/06/antelope-canyon-canyon-freestone-colorful-50686.jpeg');
  background-size: cover;
  text-align: center;
  padding: 120px 0px;
  position: relative;
}

.hero::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, transparent 30%, white 100%);
}

.hero h1{
  color: #ffffff;
}

.squares{
  display: flex;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  margin: 40px 0px;
}

.number{
  width: 60px;
  aspect-ratio: 1;
  background-color: #FF5349;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
  border-radius: 8px;
}

.number h1{
  margin: 0px;
  line-height: 1;
}
Youtube

Contact us at: support@cssgamelab.com

© 2025 CSSgameLab. All Rights Reserved.

General Instructions

Step One: What I will be making

First click on the green ‘What I will be making’ button. This is how your end result should look like.

Step Two: What I need

Next, click on the ‘What I need’ button to get some basic parameters to use in the code. Such as the font family, colors, image URLs etc. These are just recommendations. Use your own judgement for the rest of the values, such as paddings, margins, spacing and size.

Step Three: Read the given HTML code

You don’t need to know how to write HTML for these exercises. However, you WILL need to take a look at the ‘HTML’ code in the exercise. You can switch from HTML to CSS tab in the Codepen screen. Then read the built HTML code for each exercise to understand the structure and find the classes that are defined for the elements that you will be editing. Use those predefined classes to style them in CSS.

Step Four: Click on the ‘CSS’ tab and start coding

Click on the ‘CSS’ tab in the Codepen screen and start typing your CSS code here, just below the ‘Write CSS code here’ comment. You can also delete this comment if you wish.

For example, if a ‘div’ has a class “text-content” in HTML, you can then style this class in CSS tab. Just don’t forget to add a dot before calling a class out (.text-content)

You should see a live preview of the CSS code that you are editing in the ‘Result’ tab to the right of the Codepen screen.

Step Five: Check the solution with the CSS code

If you are stuck, click on the ‘Show me the code’ button. This will reveal the code that you can also completely copy and paste in the CSS tab of the exercise to see the result.

Or you can just go back to the lessons and watch them again.

Have fun and feel free to reach out!

Seraphinite AcceleratorOptimized by Seraphinite Accelerator
Turns on site high speed to be attractive for people and search engines.