Building a Web page
A Pen by Subodh Khadka on CodePen.
<id="mainpage"> | |
<header id="header"> | |
<div class="logo"> | |
<img id="header-img" | |
src="https://dcassetcdn.com/design_img/3625266/152860/152860_20015194_3625266_62412a45_image.jpg" | |
alt="digital flame logo"/> | |
</div> | |
<nav id="nav-bar"> | |
<ul> | |
<li><a class="nav-link" href=#items>items</a></li> | |
<li><a class="nav-link" href=#price>Pricing</a></li> | |
<li><a class="nav-link" href=#setup>Setting up digital products</a></li> | |
<li><a class="nav-link" href=#Contactus> Contact us</a></li> | |
</nav> | |
</header> | |
</div> | |
<div class="container"></div> | |
<section id="description"> | |
<h2>Latest digital products on sale</h2> | |
<form id="form" action="https://www.freecodecamp.com/email-submit"> | |
<input | |
name="email" | |
id="email" | |
type="email" | |
placeholder="Enter your e-mail here" | |
required/> | |
<input | |
name="submit" | |
id="submit" | |
type="button" | |
value="Get started" | |
class="btn"/> | |
</form> | |
</section> | |
<div class="container"> | |
<section id="items"> | |
<div class="grid"> | |
<div class="icon"><i class="fas fa-battery-half"></i></div> | |
<div class="info"> | |
<h2>Best digital products</h2> | |
<p> | |
Our main goal is to provide best price for available products. The item we sell are distributed by authorized delearship.</p> | |
</div> | |
</div> | |
<div class="grid"> | |
<div class="icon"><i class="fas fa-battery-half"></i> | |
</div> | |
<div class="info"> | |
<h2>Fast shipping</h2> | |
<p> We assure to deliver your items as soon as you order. Normally we deliever within 7 days. Shipping might differ in public holiday days. Thank you for shopping with us.</p> | |
</div> | |
</div> | |
<div class="grid"> | |
<div class="icon"><i class="fas fa-battery-full"></i> | |
</div> | |
<div class="info"> | |
<h2> Used products</h2> | |
<p> Used products in best possible price.</p> | |
</div> | |
</div> | |
</section> | |
<section id="setup"> | |
<iframe width="560" | |
height="315" src="https://www.youtube.com/embed/QKHyTjspO6o" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" | |
allowfullscreen> | |
</iframe> | |
</section> | |
<section id="price"> | |
<div class="product" id="camera"> | |
<div class="digital_products">Camera</div> | |
<h2>Under $200</h2> | |
<ol> | |
<li>Canon PowerShot ELPH 180 20 MP Digital Camera</li> | |
<li>Sony - DSC-H300 20.1-Megapixel Digital Camera - Black</li> | |
<li>Canon - PowerShot ELPH 360 20.2-Megapixel Digital Camera - Black</li> | |
<li>Canon - PowerShot ELPH 360 20.2-Megapixel Digital Camera - Purple</li> | |
</ol> | |
<button class="btn">Select</button> | |
</div> | |
<div class="product" id="Mobile"> | |
<div class="digital_products">Mobile</div> | |
<h2>New and Used mobile phones.</h2> | |
<ol> | |
<li>Samsung galaxy</li> | |
<li>iphone</li> | |
<li>Nokia</li> | |
<li>Motorola</li> | |
</ol> | |
<button class="btn">Select</button> | |
</div> | |
<div class="product" id="watch"> | |
<div class="digital_products">Samrt watch</div> | |
<h2>Samsung and apple samrt watch only</h2> | |
<ol> | |
<li> Samsung smart watch</li> | |
<li>Apple smart watch</li> | |
</ol> | |
<button class="btn">Select</button> | |
</div> | |
</section> | |
<footer id="Contactus"> | |
<div> | |
<ul> | |
<li><a href="#">Privacy</a></li> | |
<li><a href="#">Shipping information</a></li> | |
<li><a href="#"> Contact number: -------</a></li> | |
</ul> | |
<span>Thanks for shopping.</span> | |
</div> | |
</footer> | |
</div> | |
</div> | |
Building a Web page
A Pen by Subodh Khadka on CodePen.
body { | |
background-color: #eee; | |
font-family: 'Baloo Bhaina 2', cursive; | |
} | |
#mainpage{ | |
position: relative; | |
} | |
li{ | |
list-style: none; | |
} | |
a{ | |
color: black; | |
text-decoration: none; | |
} | |
.container{ | |
max-width: 1000px; | |
width: 100%; | |
margin: 0 auto; | |
} | |
.btn{ | |
background-color: #4CAF50; /* Green */ | |
border: none; | |
color: white; | |
padding: 3px 25px; | |
text-align: center; | |
text-decoration: none; | |
display: inline-block; | |
font-size: 16px; | |
} | |
.grid{ | |
display: flex; | |
} | |
header{ | |
position: fixed; | |
display: flex; | |
top: 0; | |
min-height: 75px; | |
} | |
@media (max-width: 600px){ | |
header{ | |
flex-wrap: wrap; | |
} | |
} | |
.logo{ | |
width: 60vw; | |
boader-radius: 50%; | |
} | |
@media (max-width:650px){ | |
.logo{ | |
margin-top: 15px; | |
width: 100%; | |
position: relative; | |
} | |
} | |
.logo > img { | |
width: 100%; | |
heigth: 100%; | |
max-width: 200px; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
text-align: center; | |
margin-left: 20px; | |
} | |
@media (max-width: 650px){ | |
.logo > img { | |
margin: 0 auto; | |
} | |
} | |
nav { | |
font-weight: 400; | |
} | |
@media (max-width: 650px) { | |
nav { | |
margin-top: 10px; | |
width: 100%; | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
text-align: center; | |
padding: 0 50px; | |
} | |
nav li { | |
padding-bottom: 5px; | |
} | |
} | |
nav > ul { | |
width: 35vw; | |
display: flex; | |
flex-direction: row; | |
justify-content: space-around; | |
} | |
@media (max-width: 650px) { | |
nav > ul { | |
flex-direction: column; | |
} | |
} | |
#description{ | |
display: flex; | |
text-align: right; | |
flex-direction: column; | |
justify-content: center; | |
align-items: left; | |
height: 175px; | |
margin-top: 25px; | |
} | |
#description > h2 { | |
margin-bottom: 25px; | |
} | |
#description input[type="email"]{ | |
width: 100%; | |
max-width: 150px; | |
} | |
#items{ | |
margin-top: 30px; | |
} | |
#price{ | |
margin-top: 60px; | |
display: flex; | |
flex-direction: row; | |
justify-content: center; | |
} | |
.product{ | |
flex-direction: column; | |
align-items: center; | |
text-align: center; | |
width: calc(100% / 3); | |
margin: 10px; | |
border: 1px solid #000; | |
border-radius: 3px;} | |
.product > .level { | |
background-color: #ddd; | |
color: black; | |
padding: 15px 0; | |
width: 100%; | |
text-transform: uppercase; | |
font-weight: 700; | |
} | |
.product > h2 { | |
margin-top: 15px; | |
} | |
.product > ol { | |
margin: 15px 0; | |
} | |
.product > ol > li { | |
padding: 5px 0; | |
} | |
.product > button { | |
border: 0; | |
margin: 15px 0; | |
background-color: #f1c40f; | |
font-weight: 400; | |
} | |
.product > button:hover { | |
background-color: orange; | |
transition: background-color 1s; | |
} | |
@media (max-width: 800px) { | |
#pricing { | |
flex-direction: column; | |
} | |
.product { | |
max-width: 300px; | |
width: 100%; | |
margin: 0 auto; | |
margin-bottom: 10px; | |
} | |
} | |
footer { | |
margin-top: 30px; | |
background-color: #ddd; | |
padding: 20px; | |
} | |
footer > ul { | |
display: flex; | |
justify-content: flex-end; | |
} | |
footer > ul > li { | |
padding: 0 10px; | |
} | |
footer > span { | |
margin-top: 5px; | |
display: flex; | |
justify-content: flex-end; | |
font-size: 0.9em; | |
color: #444; | |
} |