Skip to content

Instantly share code, notes, and snippets.

@GioAceto

GioAceto/index.html

Created November 1, 2019 21:49
Show Gist options
  • Save GioAceto/e083b6bf67459e021400ff183d8ab466 to your computer and use it in GitHub Desktop.
Save GioAceto/e083b6bf67459e021400ff183d8ab466 to your computer and use it in GitHub Desktop.
Download ZIP
Product Landing Page
Raw
index.html
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<header id="header">
<nav id="nav-bar">
<ul id="navflex">
<li><img id="header-img" src="https://i.ibb.co/2PxNxSk/lilly2.png"</li>
<li><a class="nav-link" href="#msgt">Massage Techniques<a></li>
<li><a class="nav-link" href="#rates">Rates<a></li>
<li><a class="nav-link" href="#appointment">Book Online<a></li>
<li><a class="nav-link" href="#therapist">Our Therapists<a></li>
</ul>
</nav>
</header>
<main id="main">
<section id="section">
<div id="sectionbubble">
<h1>About Lilly Massage</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</section>
<aside id="aside">
<iframe id="video" width="540" height="360" src="https://www.youtube.com/embed/lWSce3VftOw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
</aside>
<section id="msgt">
<div id="msgbubble">
<h2>Massage Techniques</h2>
<p>Our therapists are trained in a variety massage techniques and specialties.</p>
<ul>
<li>Swedish</li>
<li>Deep Tissue</li>
<li>Hot Stone</li>
<li>Ashiatsu</li>
<li>Prenatal</li>
<li>Sports</li>
</ul>
</div>
</section>
<section id="rates">
<div id="ratesbubble">
<h2>Rates</h2>
<p>30 minutes - $60</p>
<p>60 minutes - $90</p>
<p>90 minutes - $115</p>
<p>*Tips are appreciated*</p>
<article>
<h2>Become a Member Today</h2>
<p>Earn points every visit that can be redeemed for a free massage or discounts on store merchandise!</p>
<h2>Membership Details:</h2>
<p>As a member at Lilly Massage, you will earn points every time you visit us for a massage and on every purchase over $5 at the gift shop.</p>
<p>Membership Fee - $15/month<p>
</article>
</div>
</section>
<secttion id="appointment">
<div id="formbubble">
<form id="form" method="post" action="https://www.freecodecamp.com/email-submithttps://www.freecodecamp.com/email-submit">
<h2>Book an Appointment</h2>
<label for="name1" id="namelabel1">First Name:<label>
<input type="text" name="name1" placeholder="First Name">
<br>
<label for="name2" id="namelabel2">Last Name:<label>
<input type="text" name="name2" placeholder="Last Name">
<br>
<label for="email" id="emaillabel">Email:<label>
<input type="email" name="email" id="email" placeholder="Email Address">
<br>
<label for="mg" id="mglabel">Massage Type:</label>
<select id="mg">
<option value="mg0" selected disabled>Massage Type</option>
<option value="mg1">Swedish Massage</option>
<option value="mg2">Deep Tissue Massage</option>
<option value="mg3">Hot Stone Massage</option>
<option value="mg4">Ashiatsu (Barefoot Massage)</option>
<option value="mg5">Prenatal Massage</option>
<option value="mg6">Sports Massage</option>
</select>
<br>
<label for="dr" id="drlabel">Session Duration:</label>
<select id="dr">
<option value="dr0" selected disabled>Session Duration</option>
<option value="dr1">30 Minutes</option>
<option value="dr2">60 Minutes</option>
<option value="dr3">90 Minutes</option>
</select>
<br>
<label for="th" id="thlabel">Therapist Preference:</label>
<select id="th">
<option value="th0" selected>No Preference</option>
<option value="th1">Chelsea Myers</option>
<option value="th2">Tia Yeung</option>
<option value="th3">Thomas Schneider</option>
<option value="th3">Mia Rodriguez</option>
<option value="th3">Emelio Lopez </option>
<option value="th3">Sarah Hann </option>
</select>
<br>
<label for="date" id="datelabel">Date:</label>
<input type="date" name="date" id="date">
<br>
<input type="submit" id="submit" value="submit">
</form>
</div>
</section>
<section id="therapist">
<div id="thbubble">
<h2>Meet Our Therapists</h2>
<ul>
<li>Chelsea Myers</li>
<li>Tia Yeung</li>
<li>Thomas Schneider</li>
<li>Mia Rodriguez</li>
<li>Emelio Lopez</li>
<li>Sarah Hann</li>
</ul>
</div>
</section>
</main>
</body>
<footer>
</footer>
</html>
Raw
product-landing-page.markdown
Raw
style.css
* {
padding: 0;
margin: 0;
}
html {
background-color: #E0E3E1;
}
header img {
float: left;
width: 200px;
bottom: 10px;
}
#header {
padding-left: 2.5em;
box-shadow: 5px 5px 5px grey;
margin-right: 1em;
background-color: #fdfdfd;
position: fixed;
width: 96%;
}
nav ul {
list-style: none;
}
a {
text-decoration: none;
font-family: candara;
color: #566550;
font-size: 1.1em;
}
#navflex {
display: flex;
flex-direction: row;
justify-content: space-around;
height: 85px;
align-items: center;
}
iframe {
display: block;
padding-left: 6em;
padding-top: 7em;
}
#mainlogo {
display: block;
margin: auto;
}
#main {
width: 100%;
display: flex;
flex-direaction: row;
align-items: center;
align-items: space-between;
flex-wrap: wrap;
}
#sectionbubble {
display: block;
margin-left: 50px;
margin-top: 7em;
padding: 50px;
width: 400px;
}
#aside {
padding: 0;
}
h1 {
padding-bottom: 1em;
}
p {
font-size: 1.2em;
}
#form {
margin-top: 7em;
}
form h2 {
margin-top: 1.5em;
margin-bottom: 1em;
margin-left: 3.7em;
}
input[type=text] {
width: 20%;
padding: 12px 20px;
margin: 8px 0 0 90px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=email] {
width: 20%;
padding: 12px 20px;
margin: 8px 0 0 130px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
#mg {
width: 20%;
padding: 12px 20px;
margin: 8px 0 0 65px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
#dr {
width: 20%;
padding: 12px 20px;
margin: 8px 0 0 45px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
#th {
width: 20%;
padding: 12px 20px;
margin: 8px 0 0 14px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=date] {
width: 20%;
padding: 12px 30px;
margin: 8px 0 0 134px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 20%;
padding: 12px 20px;
margin: 8px 0 0 277px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
#form {
width: 1000px;
}
#namelabel1 {
margin-left: 100px;
}
#namelabel2 {
margin-left: 100px;
}
#emaillabel {
margin-left: 100px;
}
#mglabel {
margin-left: 100px;
}
#drlabel {
margin-left: 100px;
}
#thlabel {
margin-left: 100px;
}
#datelabel {
margin-left: 100px;
}
#ratesbubble {
display: block;
margin-left: 25%;
margin-right: 25%;
margin-top: 8em;
}
#ratesbubble h2, p {
text-align: center;
}
article p {
text-align: left;
}
#ratesbubble h2 {
margin-top: 1em;
margin-bottom: 0.4em;
}
#msgbubble h2 {
margin-top: 1em;
margin-bottom: 0.4em;
}
#msgbubble {
display: block;
width: 100%;
margin-left: 50%;
margin-top: 10em;
margin-bottom: 11em;
}
#msgbubble h2, li {
text-align: center;
}
ul {
list-style: none;
}
#thbubble {
display: block;
margin-left: 25%;
margin-bottom: 17em;
}
#thbubble h2 {
text-align: center;
margin-top: 7em;
}
@media (max-width: 500px) {
#video {
width:
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment