Scribd
Upload
18 views19 pages

Café Menu

Uploaded by

shivkanya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
18 views19 pages

Café Menu

Uploaded by

shivkanya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 19

CAFÉ MENU:

WEBPAGE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
<title>Cafe Menu</title>
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div class="menu">
<main>
<h1>CAMPER CAFE</h1>
<p class="established">Est. 2020</p>
<hr>
<section>
<h2>Coffee</h2>
<img src="https://cdn.freecodecamp.org/
curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
<article class="item">
<p class="flavor">French Vanilla</p><p clas
s="price">3.00</p>
</article>
<article class="item">
<p class="flavor">Caramel Macchiato</p><p c
lass="price">3.75</p>
</article>
<article class="item">
<p class="flavor">Pumpkin Spice</p><p clas
s="price">3.50</p>
</article>
<article class="item">
<p class="flavor">Hazelnut</p><p clas
s="price">4.00</p>
</article>
<article class="item">
<p class="flavor">Mocha</p><p clas
s="price">4.50</p>
</article>
</section>
<section>
<h2>Desserts</h2>
<img src="https://cdn.freecodecamp.org/
curriculum/css-cafe/pie.jpg" alt="pie icon"/>
<article class="item">
<p class="dessert">Donut</p><p clas
s="price">1.50</p>
</article>
<article class="item">
<p class="dessert">Cherry Pie</p><p clas
s="price">2.75</p>
</article>
<article class="item">
<p class="dessert">Cheesecake</p><p clas
s="price">3.00</p>
</article>
<article class="item">
<p class="dessert">Cinnamon Roll</p><p clas
s="price">2.50</p>
</article>
</section>
</main>
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" targe
t="_blank">Visit our website</a>
</p>
<p class="address">123 Free Code Camp Drive</p>
</footer>
</div>
</body>
</html>
CSS:

body {
background-image: url(https://cdn.freecodecamp.org/
curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}

h1 {
font-size: 40px;
margin-top: 0;
margin-bottom: 15px;
}

h2 {
font-size: 30px;
}

.established {
font-style: italic;
}

h1, h2, p {
text-align: center;
}

.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width: 500px;
}

img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -25px
}

hr {
height: 2px;
background-color: brown;
border-color: brown;
}

.bottom-line {
margin-top: 25px;
}

h1, h2 {
font-family: Impact, serif;
}

.item p {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
font-size: 18px;
}

.flavor, .dessert {
text-align: left;
width: 75%;
}

.price {
text-align: right;
width: 25%;
}

/* FOOTER */
footer {
font-size: 14px;
}

.address {
margin-bottom: 5px;
}

a {
color: black;
}

a:visited {
color: black;
}

a:hover {
color: brown;
}

a:active {
color: brown;
}
Registration Form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Registration Form</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Registration Form</h1>
<p>Please fill out this form with the required info
rmation</p>
<form method="post" action='https://register-
demo.freecodecamp.org'>
<fieldset>
<label for="first-name">Enter Your First Name:
<input id="first-name" name="first-name" type="text" re
quired /></label>
<label for="last-name">Enter Your Last Name:
<input id="last-name" name="last-name" type="text" requ
ired /></label>
<label for="email">Enter Your Email: <input id=
"email" name="email" type="email" required /></label>
<label for="new-password">Create a New Password
: <input id="new-password" name="new-password" typ
e="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<legend>Account type (required)</legend>
<label for="personal-account"><input i
d="personal-account" type="radio" name="account-type" c
lass="inline" checked /> Personal</label>
<label for="business-account"><input i
d="business-account" type="radio" name="account-type" c
lass="inline" /> Business</label>
</fieldset>
<fieldset>
<label for="profile-picture">Upload a profile p
icture: <input id="profile-picture" type="file" nam
e="file" /></label>
<label for="age">Input your age (years): <input
id="age" type="number" name="age" min="13" max="120" /
></label>
<label for="referrer">How did you hear about us
?
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</
option>
<option value="2">freeCodeCamp YouTube Chan
nel</option>
<option value="3">freeCodeCamp Forum</
option>
<option value="4">Other</option>
</select>
</label>
<label for="bio">Provide a bio:
<textarea id="bio" name="bio" rows="3" cols="
30" placeholder="I like coding on the beach..."></
textarea>
</label>
</fieldset>
<label for="terms-and-conditions">
<input class="inline" id="terms-and-conditions"
type="checkbox" required name="terms-and-conditions" />
I accept the <a href="https://www.freecodecamp.org/
news/terms-of-service/">terms and conditions</a>
</label>
<input type="submit" value="Submit" />
</form>
</body>
</html>

CSS
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
font-family: Tahoma;
font-size: 16px;
}

h1, p {
margin: 1em auto;
text-align: center;
}

form {
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
}

fieldset {
border: none;
padding: 2rem 0;
border-bottom: 3px solid #3b3b4f;
}

fieldset:last-of-type {
border-bottom: none;
}

label {
display: block;
margin: 0.5rem 0;
}
input,
textarea,
select {
margin: 10px 0 0 0;
width: 100%;
min-height: 2em;
}

input, textarea {
background-color: #0a0a23;
border: 1px solid #0a0a23;
color: #ffffff;
}

.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
}

input[type="submit"] {
display: block;
width: 60%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
background-color: #3b3b4f;
border-color: white;
min-width: 300px;
}

input[type="file"] {
padding: 1px 2px;
}

.inline{
display: inline;
}
a{color:#dfdfe2; }

CSS BOX MODEL

QUIZ:
<!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 Acce
ssibility Quiz practice project" />
<title>Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://
cdn.freecodecamp.org/platform/universal/
fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">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" i
d="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" i
d="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span clas
s="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" i
d="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-
questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<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" nam
e="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" nam
e="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-
question-two">
<legend>
A label element nesting an input elemen
t is required to have a
for attribute with the same value as th
e input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" nam
e="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" nam
e="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="customer">Are you a frontend
developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" req
uired>
<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" placeholder="Who is flexb
ox..."></textarea>
</div>
</div>
</section>
<button type="submit">Send</button>
</form>
</main>
<footer>
<address>
<a href="https://
freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>

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(100px, 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;
}

p {
margin-top: 5px;
padding-left: 15px;
font-size: 20px;
}

p::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;
}

You might also like