Get in Touch
I’m eagerly looking forward to working with you! If you are interested in collaborating or have any questions, please contact me through the form beside. I will contact you as soon as possible. I gladly welcome any suggestions, ideas, or requests for collaboration, and am ready to offer you the best services.
“Let’s build successful and unique projects together!”
100Days css #1
September 10, 2024
No Comments
CSS
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
overflow: hidden;
background: linear-gradient(to top right, #7054d4 20%, #aaf007 80%);
color: #333;
font-family: "Courier New", "Courier", sans-serif;;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.center {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%,-50%);
}
.box{
position: relative;
width: 100px;
height: 200px;
margin: 120px 0 -60px 20px;
}
.one {
position: absolute;
top: 0;
border-radius: 4px;
background: #fff;
box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.2);
}
.one-one {
width: 20px;
height: 40px;
transform: rotate(0.14turn);
z-index: 2;
left: -16px;
}
.one-two {
width: 24px;
height: 100px;
z-index: 8;
}
.zero {
box-sizing: border-box;
position: absolute;
top: 0;
width: 100px;
height: 100px;
border-radius: 50%;
border: 24px solid #fff;
box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.2);
}
.zero-one {
z-index: 4;
left: 70px;
}
.zero-two {
right: 0;
z-index: 6;
}
span {
display: block;
text-transform: uppercase;
color: #fff;
font-weight: 700;
}
.middle {
font-size: 5.2em;
line-height: 72px;
}
.last {
font-size: 1.55em;
line-height: 18px;
letter-spacing: 0.01em;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="styles.css"/>
</head>
<div class="frame">
<div class="center">
<div class="box">
<div class="one one-one"></div>
<div class="one one-two"></div>
<div class="zero zero-one"></div>
<div class="zero zero-two"></div>
</div>
<span class="middle">days </span>
<span class="last">css challenge</span>
</div>
</div>
</html>
Magazine
September 10, 2024
No Comments
Course (learn css grid by building a magazine) on the freeCodeCamp website
CSS
*,
::before,
::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: 'Baskervville', serif;
color: linen;
background-color: rgb(20, 30, 40);
}
h1 {
font-family: 'Anton', sans-serif;
}
h2, h3, h4, h5, h6 {
font-family: 'Raleway', sans-serif;
}
a {
text-decoration: none;
color: linen;
}
main {
display: grid;
grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
row-gap: 3rem;
}
img {
width: 100%;
object-fit: cover;
}
hr {
margin: 1.5rem 0;
border: 1px solid rgba(120, 120, 120, 0.6);
}
.heading {
grid-column: 2 / 3;
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 1.5rem;
}
.text {
grid-column: 2 / 3;
font-size: 1.8rem;
letter-spacing: 0.6px;
column-width: 25rem;
text-align: justify;
}
.hero {
grid-column: 1 / -1;
position: relative;
}
.hero-title {
text-align: center;
color: orangered;
font-size: 8rem;
}
.hero-subtitle {
font-size: 2.4rem;
color: orangered;
text-align: center;
}
.author {
font-size: 2rem;
font-family: "Raleway", sans-serif;
}
.author-name a:hover {
background-color: #306203;
}
.publish-date {
color: rgba(255, 255, 255, 0.5);
}
.social-icons {
display: grid;
font-size: 3rem;
grid-template-columns: repeat(5, 1fr);
grid-auto-flow: column;
grid-auto-columns: 1fr;
align-items: center;
}
.first-paragraph::first-letter {
font-size: 6rem;
color: orangered;
float: left;
margin-right: 1rem;
}
.quote {
color: #00beef;
font-size: 2.4rem;
text-align: center;
font-family: "Raleway", sans-serif;
}
.quote::before {
content: '" ';
}
.quote::after {
content: ' "';
}
.text-with-images {
display: grid;
grid-template-columns: 1fr 2fr;
column-gap: 3rem;
margin-bottom: 3rem;
}
.lists {
list-style-type: none;
margin-top: 2rem;
}
.lists li {
margin-bottom: 1.5rem;
}
.list-title, .list-subtitle {
color: #00beef;
}
.image-wrapper {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: repeat(3, min-content);
gap: 2rem;
place-items: center;
}
.image-1, .image-3 {
grid-column: 1 / -1;
}
@media only screen and (max-width: 720px) {
.image-wrapper {
grid-template-columns: 1fr;
}
}
@media only screen and (max-width: 600px) {
.text-with-images {
grid-template-columns: 1fr;
}
}
@media only screen and (max-width: 550px) {
.hero-title {
font-size: 6rem;
}
.hero-subtitle,
.author,
.quote,
.list-title {
font-size: 1.8rem;
}
.social-icons {
font-size: 2rem;
}
.text {
font-size: 1.6rem;
}
}
@media only screen and (max-width: 420px){
.hero-title{
font-size: 4.5rem;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Magazine</title>
<link href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<section class="heading">
<header class="hero">
<img decoding="async" src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png" alt="freecodecamp logo" loading="lazy" class="hero-img" title="Web design 8">
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
<p class="hero-subtitle">
Our efforts to restructure our curriculum with a more project-based
focus
</p>
</header>
<div class="author">
<p class="author-name">
By
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer noopener">freeCodeCamp</a>
</p>
<p class="publish-date">March 7, 2019</p>
</div>
<div class="social-icons">
<a href="https://www.facebook.com/freecodecamp/" target="_blank" rel="noopener">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://twitter.com/freecodecamp/" target="_blank" rel="noopener">
<i class="fab fa-twitter"></i>
</a>
<a href="https://instagram.com/freecodecamp" target="_blank" rel="noopener">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.linkedin.com/school/free-code-camp/" target="_blank" rel="noopener">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="https://www.youtube.com/freecodecamp" target="_blank" rel="noopener">
<i class="fab fa-youtube"></i>
</a>
</div>
</section>
<section class="text">
<p class="first-paragraph">
Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
</p>
<p>
After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
</p>
<p>
It wasn't as dramatic as Doc's revelation in Back to the Future. It
just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
</p>
<blockquote>
<hr />
<p class="quote">
The entire curriculum should be a series of projects
</p>
<hr />
</blockquote>
<p>
No more walls of explanatory text. No more walls of tests. Just one
test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
</p>
<p>
The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
</p>
<p>
Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
</p>
</section>
<section class="text text-with-images">
<article class="brief-history">
<h3 class="list-title">A Brief History</h3>
<p>Of the Curriculum</p>
<ul class="lists">
<li>
<h4 class="list-subtitle">V1 - 2014</h4>
<p>
We launched freeCodeCamp with a simple list of 15 resources,
including Harvard's CS50 and Stanford's Database Class.
</p>
</li>
<li>
<h4 class="list-subtitle">V2 - 2015</h4>
<p>We added interactive algorithm challenges.</p>
</li>
<li>
<h4 class="list-subtitle">V3 - 2015</h4>
<p>
We added our own HTML+CSS challenges (before we'd been relying on
General Assembly's Dash course for these).
</p>
</li>
<li>
<h4 class="list-subtitle">V4 - 2016</h4>
<p>
We expanded the curriculum to 3 certifications, including Front
End, Back End, and Data Visualization. They each had 10 required
projects, but only the Front End section had its own challenges.
For the other certs, we were still using external resources like
Node School.
</p>
</li>
<li>
<h4 class="list-subtitle">V5 - 2017</h4>
<p>We added the back end and data visualization challenges.</p>
</li>
<li>
<h4 class="list-subtitle">V6 - 2018</h4>
<p>
We launched 6 new certifications to replace our old ones. This was
the biggest curriculum improvement to date.
</p>
</li>
</ul>
</article>
<aside class="image-wrapper">
<img loading="lazy" loading="lazy" decoding="async" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png" alt="image of the quote machine project" class="image-1" width="600" height="400" title="Web design 9">
<img loading="lazy" loading="lazy" decoding="async" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png" alt="image of a calculator project" class="image-2" width="400" height="400" title="Web design 10">
<blockquote class="image-quote">
<hr />
<p class="quote">
The millions of people who are learning to code through freeCodeCamp
will have an even better resource to help them learn these
fundamentals.
</p>
<hr />
</blockquote>
<img loading="lazy" loading="lazy" decoding="async" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg" alt="four people working on code" class="image-3" width="600" height="400" title="Web design 11">
</aside>
</section>
</main>
</body>
</html>
City Skyline
September 10, 2024
No Comments
Course (learn css variables by building a city skyline) on the freeCodeCamp website
CSS
:root {
--building-color1: #aa80ff;
--building-color2: #66cc99;
--building-color3: #cc6699;
--building-color4: #538cc6;
--window-color1: #bb99ff;
--window-color2: #8cd9b3;
--window-color3: #d98cb3;
--window-color4: #8cb3d9;
}
* {
box-sizing: border-box;
}
body {
height: 100vh;
margin: 0;
overflow: hidden;
}
.background-buildings, .foreground-buildings {
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: space-evenly;
position: absolute;
top: 0;
}
.building-wrap {
display: flex;
flex-direction: column;
align-items: center;
}
.window-wrap {
display: flex;
align-items: center;
justify-content: space-evenly;
}
.sky {
background: radial-gradient(
closest-corner circle at 15% 15%,
#ffcf33,
#ffcf33 20%,
#ffff66 21%,
#bbeeff 100%
);
}
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
.bb1 {
width: 10%;
height: 70%;
}
.bb1a {
width: 70%;
}
.bb1b {
width: 80%;
}
.bb1c {
width: 90%;
}
.bb1d {
width: 100%;
height: 70%;
background: linear-gradient(
var(--building-color1) 50%,
var(--window-color1)
);
}
.bb1-window {
height: 10%;
background: linear-gradient(
var(--building-color1),
var(--window-color1)
);
}
.bb2 {
width: 10%;
height: 50%;
}
.bb2a {
border-bottom: 5vh solid var(--building-color2);
border-left: 5vw solid transparent;
border-right: 5vw solid transparent;
}
.bb2b {
width: 100%;
height: 100%;
background: repeating-linear-gradient(
var(--building-color2),
var(--building-color2) 6%,
var(--window-color2) 6%,
var(--window-color2) 9%
);
}
.bb3 {
width: 10%;
height: 55%;
background: repeating-linear-gradient(
90deg,
var(--building-color3),
var(--building-color3),
var(--window-color3) 15%
);
}
.bb4 {
width: 11%;
height: 58%;
}
.bb4a {
width: 3%;
height: 10%;
background-color: var(--building-color4);
}
.bb4b {
width: 80%;
height: 5%;
background-color: var(--building-color4);
}
.bb4c {
width: 100%;
height: 85%;
background-color: var(--building-color4);
}
.bb4-window {
width: 18%;
height: 90%;
background-color: var(--window-color4);
}
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
.fb1 {
width: 10%;
height: 60%;
}
.fb1a {
border-bottom: 7vh solid var(--building-color4);
border-left: 2vw solid transparent;
border-right: 2vw solid transparent;
}
.fb1b {
width: 60%;
height: 10%;
background-color: var(--building-color4);
}
.fb1c {
width: 100%;
height: 80%;
background: repeating-linear-gradient(
90deg,
var(--building-color4),
var(--building-color4) 10%,
transparent 10%,
transparent 15%
),
repeating-linear-gradient(
var(--building-color4),
var(--building-color4) 10%,
var(--window-color4) 10%,
var(--window-color4) 90%
);
}
.fb2 {
width: 10%;
height: 40%;
}
.fb2a {
width: 100%;
border-bottom: 10vh solid var(--building-color3);
border-left: 1vw solid transparent;
border-right: 1vw solid transparent;
}
.fb2b {
width: 100%;
height: 75%;
background-color: var(--building-color3);
}
.fb2-window {
width: 22%;
height: 100%;
background-color: var(--window-color3);
}
.fb3 {
width: 10%;
height: 35%;
}
.fb3a {
width: 80%;
height: 15%;
background-color: var(--building-color1);
}
.fb3b {
width: 100%;
height: 35%;
background-color: var(--building-color1);
}
.fb3-window {
width: 25%;
height: 80%;
background-color: var(--window-color1);
}
.fb4 {
width: 8%;
height: 45%;
position: relative;
left: 10%;
}
.fb4a {
border-top: 5vh solid transparent;
border-left: 8vw solid var(--building-color1);
}
.fb4b {
width: 100%;
height: 89%;
background-color: var(--building-color1);
display: flex;
flex-wrap: wrap;
}
.fb4-window {
width: 30%;
height: 10%;
border-radius: 50%;
background-color: var(--window-color1);
margin: 10%;
}
.fb5 {
width: 10%;
height: 33%;
position: relative;
right: 10%;
background: repeating-linear-gradient(
var(--building-color2),
var(--building-color2) 5%,
transparent 5%,
transparent 10%
),
repeating-linear-gradient(
90deg,
var(--building-color2),
var(--building-color2) 12%,
var(--window-color2) 12%,
var(--window-color2) 44%
);
}
.fb6 {
width: 9%;
height: 38%;
background: repeating-linear-gradient(
90deg,
var(--building-color3),
var(--building-color3) 10%,
transparent 10%,
transparent 30%
),
repeating-linear-gradient(
var(--building-color3),
var(--building-color3) 10%,
var(--window-color3) 10%,
var(--window-color3) 30%
);
}
@media (max-width: 1000px) {
:root {
--building-color1: #000;
--building-color2: #000;
--building-color3: #000;
--building-color4: #000;
--window-color1: #777;
--window-color2: #777;
--window-color3: #777;
--window-color4: #777;
}
.sky {
background: radial-gradient(
closest-corner circle at 15% 15%,
#ccc,
#ccc 20%,
#445 21%,
#223 100%
);
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>City Skyline</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<div class="background-buildings sky">
<div></div>
<div></div>
<div class="bb1 building-wrap">
<div class="bb1a bb1-window"></div>
<div class="bb1b bb1-window"></div>
<div class="bb1c bb1-window"></div>
<div class="bb1d"></div>
</div>
<div class="bb2">
<div class="bb2a"></div>
<div class="bb2b"></div>
</div>
<div class="bb3"></div>
<div></div>
<div class="bb4 building-wrap">
<div class="bb4a"></div>
<div class="bb4b"></div>
<div class="bb4c window-wrap">
<div class="bb4-window"></div>
<div class="bb4-window"></div>
<div class="bb4-window"></div>
<div class="bb4-window"></div>
</div>
</div>
<div></div>
<div></div>
</div>
<div class="foreground-buildings">
<div></div>
<div></div>
<div class="fb1 building-wrap">
<div class="fb1a"></div>
<div class="fb1b"></div>
<div class="fb1c"></div>
</div>
<div class="fb2">
<div class="fb2a"></div>
<div class="fb2b window-wrap">
<div class="fb2-window"></div>
<div class="fb2-window"></div>
<div class="fb2-window"></div>
</div>
</div>
<div></div>
<div class="fb3 building-wrap">
<div class="fb3a window-wrap">
<div class="fb3-window"></div>
<div class="fb3-window"></div>
<div class="fb3-window"></div>
</div>
<div class="fb3b"></div>
<div class="fb3a"></div>
<div class="fb3b"></div>
</div>
<div class="fb4">
<div class="fb4a"></div>
<div class="fb4b">
<div class="fb4-window"></div>
<div class="fb4-window"></div>
<div class="fb4-window"></div>
<div class="fb4-window"></div>
<div class="fb4-window"></div>
<div class="fb4-window"></div>
</div>
</div>
<div class="fb5"></div>
<div class="fb6"></div>
<div></div>
<div></div>
</div>
</body>
</html>
Technical Documentation Page
September 10, 2024
No Comments
Course (Technical Documentation Page) on the freeCodeCamp website
CSS
/* General Styles */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
display: flex;
min-height: 100vh;
}
/* Navbar */
#navbar {
position: fixed;
top: 0;
left: 0;
width: 250px;
background-color: #636262;
color: white;
padding: 20px;
height: 100vh;
overflow: auto;
}
#navbar header {
font-size: 20px;
margin-bottom: 20px;
font-weight: bold;
text-align: center;
}
.nav-link {
display: block;
padding: 10px;
color: white;
text-decoration: none;
margin-bottom: 10px;
border-left: 4px solid transparent;
}
.nav-link:hover {
background-color: #555;
border-left: 4px solid #f39c12;
}
.main-section {
margin-left: 280px;
padding: 20px;
border-bottom: 2px solid #ccc;
}
header {
font-size: 24px;
margin-bottom: 10px;
}
code {
display: block;
background-color: #f4f4f4;
padding: 10px;
margin: 10px 0;
border-left: 3px solid #333;
}
ul {
margin: 10px 0;
padding-left: 20px;
}
li {
margin-bottom: 5px;
}
/* Media Queries */
@media (max-width: 800px) {
#navbar {
width: 100%;
height: auto;
position: relative;
}
.main-section {
margin-left: 0;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Technical Documentation</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<!-- Navbar Section -->
<nav id="navbar">
<header>Technical Documentation</header>
<a class="nav-link" href="#Introduction">Introduction</a>
<a class="nav-link" href="#Getting_Started">Getting Started</a>
<a class="nav-link" href="#Variables">Variables</a>
<a class="nav-link" href="#Functions">Functions</a>
<a class="nav-link" href="#Loops">Loops</a>
</nav>
<!-- Main Content Section -->
<main id="main-doc">
<!-- Section 1 -->
<section class="main-section" id="Introduction">
<header>Introduction</header>
<p>This section introduces you to the basic concepts.</p>
<p>We will cover topics such as syntax, data types, and more.</p>
<code>let x = 10;</code>
<ul>
<li>Understand basics</li>
<li>Key concepts</li>
</ul>
</section>
<!-- Section 2 -->
<section class="main-section" id="Getting_Started">
<header>Getting Started</header>
<p>To begin, you need a proper environment setup.</p>
<p>This guide walks you through the steps.</p>
<code>npm install</code>
<ul>
<li>Install necessary packages</li>
<li>Configure IDE</li>
</ul>
</section>
<!-- Section 3 -->
<section class="main-section" id="Variables">
<header>Variables</header>
<p>Variables are containers for storing data values.</p>
<p>Different programming languages have different ways of declaring variables.</p>
<code>var x = 5;</code>
<ul>
<li>Declare variables</li>
<li>Initialize variables</li>
</ul>
</section>
<!-- Section 4 -->
<section class="main-section" id="Functions">
<header>Functions</header>
<p>A function is a block of code designed to perform a particular task.</p>
<p>Functions are reusable and can be called with different inputs.</p>
<code>function greet() { console.log("Hello!"); }</code>
<ul>
<li>Function declaration</li>
<li>Function invocation</li>
</ul>
</section>
<!-- Section 5 -->
<section class="main-section" id="Loops">
<header>Loops</header>
<p>Loops are used to run the same block of code multiple times.</p>
<p>They are an essential part of any programming language.</p>
<code>for (let i = 0; i < 5; i++) { console.log(i); }</code>
<ul>
<li>For loops</li>
<li>While loops</li>
</ul>
</section>
</main>
</body>
</html>
Building Piano
September 10, 2024
No Comments
Course (learn responsive web design by building a piano) on the freeCodeCamp website
CSS
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
padding: 90px 20px 0 20px;
position: relative;
border-radius: 10px;
}
.keys {
background-color: #040404;
width: 949px;
height: 180px;
padding-left: 2px;
overflow: hidden;
}
.key {
background-color: #ffffff;
position: relative;
width: 41px;
height: 175px;
margin: 2px;
float: left;
border-radius: 0 0 3px 3px;
}
.key.black--key::after {
background-color: #1d1e22;
content: "";
position: absolute;
left: -18px;
width: 32px;
height: 100px;
border-radius: 0 0 3px 3px;
}
.logo {
width: 200px;
position: absolute;
top: 23px;
}
@media (max-width: 768px) {
#piano {
width: 358px;
}
.keys {
width: 318px;
}
.logo {
width: 150px;
}
}
@media (max-width: 1199px) and (min-width: 769px) {
#piano{
width: 675px;
}
.keys{
width: 633px;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css"/>
</head>
<body>
<div id="piano">
<img decoding="async" class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" title="Building Piano 7"/>
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>