Skip to content

Instantly share code, notes, and snippets.

@rohanjai777

rohanjai777/Product.html

Last active June 15, 2019 23:07
Show Gist options
  • Save rohanjai777/a663fd7d7fc26ca26f826540a9ef1554 to your computer and use it in GitHub Desktop.
Save rohanjai777/a663fd7d7fc26ca26f826540a9ef1554 to your computer and use it in GitHub Desktop.
Download ZIP
CBR Group
Raw
Product.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Product Landing Page</title>
<link rel="stylesheet" href="product.css">
</head>
<body>
<header id="header" class="first">
<div class="logo">
<img src="images.jpg" alt="cbr" id="header-img">
</div>
<div class="third">
<nav class="nav-link">
<ul style="list-style: none;">
<li class="disp"><a href="#">Features</a></li>
<li class="disp"><a href="#">How it Works</a></li>
<li class="disp"><a href="#">Pricing</a></li>
</ul>
</nav>
</div>
</header>
<main class="fourth">
<div class="fifth">
<h2 id="head">Handcrafted, home-made masterpieces</h2>
<form class="fifth" action="" method="post">
<input type="email"id="tf" name="e-mail" placeholder="Enter your email address"><br>
<button type="submit" name="button" id="button">GET STARTED</button>
</form>
</div>
<div class="row1">
<div class="img">
<img id="img1"src="images.png" alt="icon">
</div>
<div class="text">
<h3>Premium Materials</h3>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="row1">
<div class="img">
<img id="img2" src="images (1).png" alt="icon">
</div>
<div class="text">
<h3>Quality Assurance</h3>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
</div>
</div>
<div class="row1">
<div class="img">
<img id="img3" src="images (2).png" alt="icon">
</div>
<div class="text">
<h3>Fast Shipping</h3>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</div>
</div>
<div class="sixth">
<iframe
id="video"
height="315"
width="500"
src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0"
frameborder="0"
allowfullscreen
></iframe>
</div>
<section class="sec1">
<div class="row">
<div class="head">
TENOR TROMBONE
</div>
<h3>$600</h3>
<ul class="ul1" style="list-style: none;">
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
</ul>
<button class="btn">Select</button>
</div>
<div class="row">
<div class="head">
BASS TROMBONE
</div>
<h3>$900</h3>
<ul class="ul1" style="list-style: none;">
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
</ul>
<button class="btn">Select</button>
</div>
<div class="row">
<div class="head">
VALVE TROMBONE
</div>
<h3>$900</h3>
<ul class="ul1" style="list-style: none;">
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
</ul>
<button class="btn">Select</button>
</div>
</section>
<footer>
<ul style="list-style: none;">
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Contact</a></li>
</ul>
<span>Copyright 2019, We CBR Group</span>
</footer>
</main>
</body>
</html>
Raw
style.css
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500&display=swap');
html, body{
font-family: 'Montserrat', sans-serif;
text-align: center;
min-width: 320px;
position: relative;
background-color: #eee;
}
main {
background-color: #eee;
padding: 10px;
width: 70%;
margin: auto;
position: relative;
top: 100px;
z-index: 1;
}
a {
color: #000;
text-decoration: none;
}
#tf{
width: 300px;
height: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
#button{
margin: 10px;
background-color: #0ff;
border: 0px;
height: 30px;
width: 200px;
border-radius: 4px;
margin-top: 20px;
font-size: 1em;
}
.img {
display: inline-block;
text-align: right;
width: 20%;
padding: 5px;
vertical-align: top;
margin-top: 10px;
margin-right: 30px;
}
.text{
display: inline-block;
text-align: left;
width: 68%;
vertical-align: middle;
}
#img1, #img2, #img3{
width:70px;
heigth:70px;
}
.sixth {
margin: 40px;
}
.row{
display: inline-block;
border: 1px solid #000;
padding-bottom: 10px;
margin: 10px;
}
.head{
background-color: #eee;
width: auto;
height: 25px;
vertical-align: middle;
}
.ul1{
text-align: center;
margin-right: 25px;
}
.btn{
margin: 10px;
background-color: #0ff;
border: 0px;
height: 30px;
width: 200px;
border-radius: 4px;
margin-top: 20px;
font-size: 1em;
}
#header-img{
width: 50px;
height: 50px;
}
.logo{
display: inline-block;
text-align: left;
width: 20%;
padding: 5px;
vertical-align: top;
margin-top: 10px;
margin-right: 30px;
}
.third{
display: inline-block;
text-align: right;
width: 70%;
vertical-align: middle;
}
header {
background-color: #eee;
position: fixed;
height: aoto;
width:100%;
top:0px;
left: 0px;
z-index: 2;
}
nav {
font-weight: 400;
}
nav > ul {
width: 50%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
@media (max-width: 650px) {
.logo {
margin-top: 15px;
width: 100%;
position: relative;
}
}
.logo > img {
width: 100%;
height: 100%;
max-width: 300px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-left: 20px;
}
@media (max-width: 650px) {
.logo > img {
margin: 0 auto;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment