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!”
Cat Painting
September 10, 2024
No Comments
Course (learn intermediate css by building a cat painting) on the freeCodeCamp website
CSS
* {
box-sizing: border-box;
}
body {
background-color: #c9d2fc;
}
.cat-head {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto;
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
width: 205px;
height: 180px;
border: 1px solid #000;
border-radius: 46%;
}
.cat-left-ear {
position: absolute;
top: -26px;
left: -31px;
z-index: 1;
border-top-left-radius: 90px;
border-top-right-radius: 10px;
transform: rotate(-45deg);
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-bottom: 70px solid #5e5e5e;
}
.cat-right-ear {
position: absolute;
top: -26px;
left: 163px;
z-index: 1;
transform: rotate(45deg);
border-top-left-radius: 90px;
border-top-right-radius: 10px;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-bottom: 70px solid #5e5e5e;
}
.cat-left-inner-ear {
position: absolute;
top: 22px;
left: -20px;
border-top-left-radius: 90px;
border-top-right-radius: 10px;
border-bottom-right-radius: 40%;
border-bottom-left-radius: 40%;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 40px solid #3b3b4f;
}
.cat-right-inner-ear {
position: absolute;
top: 22px;
left: -20px;
border-top-left-radius: 90px;
border-top-right-radius: 10px;
border-bottom-right-radius: 40%;
border-bottom-left-radius: 40%;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 40px solid #3b3b4f;
}
.cat-left-eye {
position: absolute;
top: 54px;
left: 39px;
border-radius: 60%;
transform: rotate(25deg);
width: 30px;
height: 40px;
background-color: #000;
}
.cat-right-eye {
position: absolute;
top: 54px;
left: 134px;
border-radius: 60%;
transform: rotate(-25deg);
width: 30px;
height: 40px;
background-color: #000;
}
.cat-left-inner-eye {
position: absolute;
top: 8px;
left: 2px;
width: 10px;
height: 20px;
transform: rotate(10deg);
background-color: #fff;
border-radius: 60%;
}
.cat-right-inner-eye {
position: absolute;
top: 8px;
left: 18px;
transform: rotate(-5deg);
width: 10px;
height: 20px;
background-color: #fff;
border-radius: 60%;
}
.cat-nose {
position: absolute;
top: 108px;
left: 85px;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
transform: rotate(180deg);
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 20px solid #442c2c;
}
.cat-mouth div {
width: 30px;
height: 50px;
border: 2px solid #000;
border-radius: 190%/190px 150px 0 0;
border-color: black transparent transparent transparent;
}
.cat-mouth-line-left {
position: absolute;
top: 88px;
left: 74px;
transform: rotate(170deg);
}
.cat-mouth-line-right {
position: absolute;
top: 88px;
left: 91px;
transform: rotate(165deg);
}
.cat-whiskers-left div {
width: 40px;
height: 1px;
background-color: #000;
}
.cat-whiskers-right div {
width: 40px;
height: 1px;
background-color: #000;
}
.cat-whisker-left-top {
position: absolute;
top: 120px;
left: 52px;
transform: rotate(10deg);
}
.cat-whisker-left-middle {
position: absolute;
top: 127px;
left: 52px;
transform: rotate(3deg);
}
.cat-whisker-left-bottom {
position: absolute;
top: 134px;
left: 52px;
transform: rotate(-3deg);
}
.cat-whisker-right-top {
position: absolute;
top: 120px;
left: 109px;
transform: rotate(-10deg);
}
.cat-whisker-right-middle {
position: absolute;
top: 127px;
left: 109px;
transform: rotate(-3deg);
}
.cat-whisker-right-bottom {
position: absolute;
top: 134px;
left: 109px;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>fCC Cat Painting</title>
<link rel="stylesheet" href="./styles.css"/>
</head>
<body>
<main>
<div class="cat-head">
<div class="cat-ears">
<div class="cat-left-ear">
<div class="cat-left-inner-ear"></div>
</div>
<div class="cat-right-ear">
<div class="cat-right-inner-ear"></div>
</div>
</div>
<div class="cat-eyes">
<div class="cat-left-eye">
<div class="cat-left-inner-eye"></div>
</div>
<div class="cat-right-eye">
<div class="cat-right-inner-eye"></div>
</div>
</div>
<div class="cat-nose"></div>
<div class="cat-mouth">
<div class="cat-mouth-line-left"></div>
<div class="cat-mouth-line-right"></div>
</div>
<div class="cat-whiskers">
<div class="cat-whiskers-left">
<div class="cat-whisker-left-top"></div>
<div class="cat-whisker-left-middle"></div>
<div class="cat-whisker-left-bottom"></div>
</div>
<div class="cat-whiskers-right">
<div class="cat-whisker-right-top"></div>
<div class="cat-whisker-right-middle"></div>
<div class="cat-whisker-right-bottom"></div>
</div>
</div>
</div>
</main>
</body>
</html>
Balance Sheet
September 10, 2024
No Comments
Course (learn more about css pseudo selectors by building a balance sheet) on the freeCodeCamp website
CSS
span[class~="sr-only"] {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
clip-path: inset(50%) !important;
height: 1px !important;
width: 1px !important;
position: absolute !important;
overflow: hidden !important;
white-space: nowrap !important;
padding: 0 !important;
margin: -1px !important;
}
html {
box-sizing: border-box;
}
body {
font-family: sans-serif;
color: #0a0a23;
}
h1 {
max-width: 37.25rem;
margin: 0 auto;
padding: 1.5rem 1.25rem;
}
h1 .flex {
display: flex;
flex-direction: column-reverse;
gap: 1rem;
}
h1 .flex span:first-of-type {
font-size: 0.7em;
}
h1 .flex span:last-of-type {
font-size: 1.2em;
}
section {
max-width: 40rem;
margin: 0 auto;
border: 2px solid #d0d0d5;
}
#years {
display: flex;
justify-content: flex-end;
position: sticky;
z-index: 999;
top: 0;
background: #0a0a23;
color: #fff;
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
margin: 0 -2px;
}
#years span[class] {
font-weight: bold;
width: 4.5rem;
text-align: right;
}
.table-wrap {
padding: 0 0.75rem 1.5rem 0.75rem;
}
table {
border-collapse: collapse;
border: 0;
width: 100%;
position: relative;
margin-top: 3rem;
}
table caption {
color: #356eaf;
font-size: 1.3em;
font-weight: normal;
position: absolute;
top: -2.25rem;
left: 0.5rem;
}
tbody td {
width: 100vw;
min-width: 4rem;
max-width: 4rem;
}
tbody th {
width: calc(100% - 12rem);
}
tr[class="total"] {
border-bottom: 4px double #0a0a23;
font-weight: bold;
}
tr[class="total"] th {
text-align: left;
padding: 0.5rem 0 0.25rem 0.5rem;
}
tr.total td {
text-align: right;
padding: 0 0.25rem;
}
tr.total td:nth-of-type(3) {
padding-right: 0.5rem;
}
tr.total:hover {
background-color: #99c9ff;
}
td.current {
font-style: italic;
}
tr.data {
background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
}
tr.data th {
text-align: left;
padding-top: 0.3rem;
padding-left: 0.5rem;
}
tr.data th .description {
display: block;
font-weight: normal;
font-style: italic;
padding: 1rem 0 0.75rem;
margin-right: -13.5rem;
}
tr.data td {
vertical-align: top;
padding: 0.3rem 0.25rem 0;
text-align: right;
}
tr.data td:last-of-type{
padding-right: 0.5rem;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Balance Sheet</title>
<link rel="stylesheet" href="./styles.css"/>
</head>
<body>
<main>
<section>
<h1>
<span class="flex">
<span>AcmeWidgetCorp</span>
<span>Balance Sheet</span>
</span>
</h1>
<div id="years" aria-hidden="true">
<span class="year">2019</span>
<span class="year">2020</span>
<span class="year">2021</span>
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<thead>
<tr>
<td></td>
<th><span class="sr-only year">2019</span></th>
<th><span class="sr-only year">2020</span></th>
<th class="current"><span class="sr-only year">2021</span></th>
</tr>
</thead>
<tbody>
<tr class="data">
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
<td>$25</td>
<td>$30</td>
<td class="current">$28</td>
</tr>
<tr class="data">
<th>Checking <span class="description">Our primary transactional account.</span></th>
<td>$54</td>
<td>$56</td>
<td class="current">$53</td>
</tr>
<tr class="data">
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
<td>$500</td>
<td>$650</td>
<td class="current">$728</td>
</tr>
<tr class="total">
<th>Total <span class="sr-only">Assets</span></th>
<td>$579</td>
<td>$736</td>
<td class="current">$809</td>
</tr>
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<thead>
<tr>
<td></td>
<th><span class="sr-only">2019</span></th>
<th><span class="sr-only">2020</span></th>
<th><span class="sr-only">2021</span></th>
</tr>
</thead>
<tbody>
<tr class="data">
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
<td>$500</td>
<td>$250</td>
<td class="current">$0</td>
</tr>
<tr class="data">
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
<td>$200</td>
<td>$300</td>
<td class="current">$400</td>
</tr>
<tr class="data">
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
<td>$50</td>
<td>$50</td>
<td class="current">$75</td>
</tr>
<tr class="total">
<th>Total <span class="sr-only">Liabilities</span></th>
<td>$750</td>
<td>$600</td>
<td class="current">$475</td>
</tr>
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<thead>
<tr>
<td></td>
<th><span class="sr-only">2019</span></th>
<th><span class="sr-only">2020</span></th>
<th><span class="sr-only">2021</span></th>
</tr>
</thead>
<tbody>
<tr class="total">
<th>Total <span class="sr-only">Net Worth</span></th>
<td>$-171</td>
<td>$136</td>
<td class="current">$334</td>
</tr>
</tbody>
</table>
</div>
</section>
</main>
</body>
</html>
Tribute Page
September 10, 2024
No Comments
Course (Tribute Page) on the freeCodeCamp website
CSS
body{
font-family: tahoma;
font-size: 18;
color: #FFFFFF;
background-color: #ffffff
text-align: center;
line-height: 1.7;
}
h1{
font-size: 70;
margin: 10 0 -8 0;
}
#main {
margin: 30px 8px;
padding: 15px;
border-radius: 15px;
background: #5A5859;
text-align: center;
}
@media (max-width: 350px) {
#main {
margin: 0;
}
}
img {
max-width: 100%;
display: block;
height: auto;
margin: 0 auto;
border-radius: 15px;
}
figure{
background-color: white;
padding: 10;
border-radius: 15px;
color: #5A5859;
}
a{
color: red;
}
#section-header{
font-size: 35;
margin: 50 0 5 0;
}
ul {
text-align: left;
}
p{
text-align: center
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css"/>
<title>MOON</title>
</head>
<body>
<main id="main">
<h1 id="title">MOON AND MAN</h1>
<p>Operations performed on the moon</p>
<figure id="img-div">
<img decoding="async" src="https://airandspace.si.edu/sites/default/files/styles/callout_half/public/images/editoral-stories/thumbnails/FirstImageoftheMoon.jpg?h=341a1f3b&itok=Se0Pb4Ek" alt="FirstPhotoFromMoon" id="image" title="Tribute Page 4"/>
<figcaption id="img-caption">The first photo taken of the surface of the moon</figcaption>
</figure>
<section id="tribute-info">
<h3 id="section-header">- Apollo Missions -</h3>
<ul>
<li>
<strong>Apollo 1</strong>
<p>Before any Apollo mission flew, NASA dealt with a major tragedy on Jan. 27, 1967. As the first Apollo crew – Gus Grissom, Ed White and Roger Chaffee – were conducting a simulation on the launch pad in Florida, a flash fire broke out in their capsule. In the 100 percent oxygen atmosphere NASA was then using, the fire spread quickly and killed all three. The disaster caused NASA to re-examine all aspects of the program and rework many of the spacecraft’s systems. That spring, the mission for which the crew had been training was officially named Apollo 1.</p>
</li>
<li>
<strong>Apollo 7</strong>
<p>The first Apollo mission to get to space was Apollo 7. During the 11-day flight, the crew conducted a number of tests on the spacecraft systems and conducted the first live TV program from an American spacecraft. All three crewmembers – Wally Schirra, Walt Cunningham and Donn Eisele – developed bad head colds during the mission. Despite the discomfort, the astronauts completed their mission objectives, demonstrating the resilience and adaptability needed by humans in space.</p>
</li>
<li>
<strong>Apollo 8</strong>
<p>The success of earlier flights, problems in the development of the lunar module and concerns that the Soviet Union might be ready to launch astronauts around the Moon led NASA to change the flight plan for the next Saturn V mission. NASA ultimately changed from an unpiloted, Earth-orbiting mission to a crewed flight around the Moon. Frank Borman, Jim Lovell and Bill Anders were the first crew to fly atop the powerful Saturn V booster, ultimately spending 20 hours orbiting the Moon. On Christmas Eve, 1968, the crew gave a memorable reading from the Book of Genesis, and while in orbit Anders took the iconic "Earthrise" photo.</p>
</li>
<li>
<strong>Apollo 9</strong>
<p>With a trip around the Moon completed, it was time for NASA to start seriously planning to land astronauts there. The next step was the Apollo 9 mission, the first to carry a lunar module into orbit. Though the mission stayed in Earth orbit, Commander James McDivitt and Lunar Module Pilot Rusty Schweickart separated the lunar module from the command module and flew independently for six hours, testing the lunar module’s systems. Schweickart conducted a spacewalk on the lunar module’s “porch” to test the spacesuit astronauts would wear on the Moon.</p>
</li>
<li>
<strong>Apollo 10</strong>
<p>The next test of the lunar module was conducted above the Moon. Apollo 10 was a full dress rehearsal for the first lunar landing. The crew tested all aspects of the mission, even showing the initial docking with the lunar module on the first color television transmission from space. Commander Thomas Stafford and Lunar Module Pilot Eugene Cernan flew the lunar module for eight hours, coming within 10 miles of the lunar surface and passing over the Sea of Tranquility, where Apollo 11 would land.</p>
</li>
<li>
<strong>Apollo 11</strong>
<p>On July 20, 1969, humans walked on another world for the first time in history, achieving the goal that President John F. Kennedy had set in 1961, before Americans had even orbited the Earth. After a landing that included dodging a lunar crater and boulder field just before touchdown, Neil Armstrong and Buzz Aldrin explored the area around their lunar landing site for more than two hours. They collected soil and rock samples, set up experiments, planted an American flag, and left behind medallions honoring the Apollo 1 crew and a plaque saying, “We came in peace for all mankind.”</p>
</li>
<li>
<strong>Apollo 12</strong>
<p>Among the many mission objectives for Apollo 12 was to recover pieces of Surveyor III, a robotic lander that had been on the Moon for more than two years. Scientists wanted to study the effects of the lunar environment on the spacecraft. After a pinpoint landing that gave the crew easy access to Surveyor, they also deployed an experiments package that included a seismometer. Before leaving lunar orbit, they jettisoned the lunar module’s ascent stage so it crashed onto the surface, providing a controlled experiment to assess the seismometers.</p>
</li>
<li>
<strong>Apollo 13</strong>
<p>Apollo 13 has been called a “successful failure,” because the crew never landed on the Moon, but they made it home safely after an explosion crippled their ship. A switch and insulation, which should have been modified during an upgrade to one oxygen tank, were damaged during a test of that tank during construction. When the associated heater was turned on during flight, the tank exploded, depleting almost all of the power from the command module and forcing the crew to use the lunar module as a lifeboat. Jim Lovell, Fred Haise and Jack Swigert came home safely thanks to the mission control team’s improvised procedures and their own ability to implement them.</p>
</li>
<li>
<strong>Apollo 14</strong>
<p>Notable for the return of America’s first astronaut, Alan Shepard, to space, Apollo 14 also was probably the smoothest lunar landing to that point. The crew spent more than nine hours outside the lunar module and set up a number of experiments. Shepard set a new distance record by walking more than 9,000 feet on the lunar surface, pulling a hand cart to carry their tools and samples.</p>
</li>
<li>
<strong>Apollo 15</strong>
<p>For the first time, humans drove a car on the Moon. The first of the Apollo “J” missions – designed for longer stays on the Moon – the mission carried a lunar rover, which Commander David Scott and Lunar Module Pilot James Irwin used while they were on the surface for more than 18 hours. The traveled more than 17 miles in the rover, setting up experiments and collecting 170 pounds of samples. Before leaving the lunar surface, Scott conducted an experiment to test Galileo’s theory that objects in vacuum, without air resistance, would fall at the same rate. He dropped a geological hammer and a feather, which hit the ground at the same time, proving Galileo right.</p>
</li>
<li>
<strong>Apollo 16</strong>
<p>Apollo 16 also took advantage of having a lunar rover, as Commander John Young and Lunar Module Pilot Charles Duke drove more than 16 miles over three moonwalks, collecting 209 pounds of samples. Problems forced mission controllers to cut the flight short by a day, but the return trip included a spacewalk by Command Module Pilot Ken Mattingly to retrieve film from a camera in the service module.</p>
</li>
<li>
<strong>Apollo 17</strong>
<p>The last Apollo mission featured the most extensive lunar exploration of the program, with three moonwalks that each lasted more than seven hours while the crew stayed on the Moon for more than three days. Commander Gene Cernan and Lunar Module Pilot Harrison Schmitt – the first scientist-astronaut to reach the Moon – collected 243 pounds of material. These samples, and those from the previous missions, continue to reveal more about the Moon as new tools and techniques are developed and applied.</p>
</li>
</ul>
<h3>
If you have time, you should read more about Operations carried out on the moon by
<a id="tribute-link" href="https://www.nasa.gov/specials/apollo50th/missions.html" target="_blank" rel="noopener">NASA</a>.
</h3>
</section>
</main>
</body>
</html>
HTML-CSS-QUIZ
September 10, 2024
No Comments
Course (learn accessibility by Building a Quiz) on the freeCodeCamp website
CSS
@media (prefers-reduced-motion: no-preference) {
* {
scroll-behavior: smooth;
}
}
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
}
#logo {
width: max(10rem, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
text-align: center;
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
align-items: center;
padding-inline-start: 0;
margin-block: 0;
height: 100%;
}
nav > ul > li {
color: #dfdfe2;
margin: 0 0.2rem;
padding: 0.2rem;
display: block;
}
nav > ul > li:hover {
background-color: #dfdfe2;
color: #1b1b32;
cursor: pointer;
}
li > a {
color: inherit;
text-decoration: none;
}
main {
padding-top: 50px;
}
section {
width: 80%;
margin: 0 auto 10px auto;
max-width: 600px;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
margin-top: 0px;
padding-top: 60px;
}
.info {
padding: 10px 0 0 5px;
}
.formrow {
margin-top: 30px;
padding: 0px 15px;
}
input {
font-size: 16px;
}
.info label, .info input {
display: inline-block;
}
.info input {
width: 50%;
text-align: left;
}
.info label {
width: 10%;
min-width: 55px;
text-align: right;
}
.question-block {
text-align: left;
display: block;
width: 100%;
margin-top: 20px;
padding-top: 5px;
}
h3 {
margin-top: 5px;
padding-left: 15px;
font-size: 20px;
}
h3::before {
content: "Question #";
}
.question {
border: none;
padding-bottom: 0;
}
.answers-list {
list-style: none;
padding: 0;
}
button {
display: block;
margin: 40px auto;
width: 40%;
padding: 15px;
font-size: 23px;
background: #d0d0d5;
border: 3px solid #3b3b4f;
}
footer {
background-color: #2a2a40;
display: flex;
justify-content: center;
}
footer,
footer a {
color: #dfdfe2;
}
address {
text-align: center;
padding: 0.3em;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img decoding="async" id="logo" alt="freeCodeCamp" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" title="HTML-CSS-QUIZ 6"/>
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info" accesskey="i">INFO</a></li>
<li><a href="#html-questions" accesskey="h">HTML</a></li>
<li><a href="#css-questions" accesskey="c">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="selector">Can the CSS margin property accept negative values?</label>
</div>
<div class="answer">
<select name="selector" id="selector" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-textarea" name="css-questions" rows="5" cols="24"></textarea>
</div>
</div>
</section>
<button type="submit">Send</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org" target="_blank" rel="noopener">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
Nutrition Lable
August 27, 2024
No Comments
Course (learn HTML form by building a Nutrition Lable) on the freeCodeCamp website
CSS
* {
box-sizing: border-box;
}
html {
font-size: 16px;
}
body {
font-family: 'Open Sans', sans-serif;
}
.label {
border: 2px solid black;
width: 270px;
margin: 20px auto;
padding: 0 7px;
}
header h1 {
text-align: center;
margin: -4px 0;
letter-spacing: 0.15px
}
p {
margin: 0;
display: flex;
justify-content: space-between;
}
.divider {
border-bottom: 1px solid #888989;
margin: 2px 0;
}
.bold {
font-weight: 800;
}
.large {
height: 10px;
}
.large, .medium {
background-color: black;
border: 0;
}
.medium {
height: 5px;
}
.small-text {
font-size: 0.85rem;
}
.calories-info {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.calories-info h2 {
margin: 0;
}
.left-container p {
margin: -5px -2px;
font-size: 2em;
font-weight: 700;
}
.calories-info span {
margin: -7px -2px;
font-size: 2.4em;
font-weight: 700;
}
.right {
justify-content: flex-end;
}
.indent {
margin-left: 1em;
}
.double-indent {
margin-left: 2em;
}
.daily-value p:not(.no-divider) {
border-bottom: 1px solid #888989;
}
.note {
font-size: 0.6rem;
margin: 5px 0;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Nutrition Label</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet"/>
<link href="./styles.css" rel="stylesheet"/>
</head>
<body>
<div class="label">
<header>
<h1 class="bold">Nutrition Facts</h1>
<div class="divider"></div>
<p>8 servings per container</p>
<p class="bold">Serving size <span>2/3 cup (55g)</span></p>
</header>
<div class="divider large"></div>
<div class="calories-info">
<div class="left-container">
<h2 class="bold small-text">Amount per serving</h2>
<p>Calories</p>
</div>
<span>230</span>
</div>
<div class="divider medium"></div>
<div class="daily-value small-text">
<p class="bold right no-divider">% Daily Value *</p>
<div class="divider"></div>
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
<p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
<div class="divider"></div>
<p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
<div class="divider"></div>
<p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
<p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
<p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
<p class="indent no-divider">Dietary Fiber 4g</p>
<div class="divider"></div>
<p class="indent no-divider">Total Sugars 12g</p>
<div class="divider double-indent"></div>
<p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
<div class="divider"></div>
<p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
<div class="divider large"></div>
<p>Vitamin D 2mcg <span>10%</span></p>
<p>Calcium 260mg <span>20%</span></p>
<p>Iron 8mg <span>45%</span></p>
<p class="no-divider">Potassium 235mg <span>6%</span></p>
</div>
<div class="divider medium"></div>
<p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily
diet. 2,000 calories a day is used for general nutrition advice.</p>
</div>
</body>
</html>