Skip to content

Instantly share code, notes, and snippets.

@shajib126

shajib126/index.html

Last active October 20, 2018 06:47
Show Gist options
  • Save shajib126/d0e8376d3e21a6212451c1ee44223824 to your computer and use it in GitHub Desktop.
Save shajib126/d0e8376d3e21a6212451c1ee44223824 to your computer and use it in GitHub Desktop.
Download ZIP
zmjzvr
Raw
index.html
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
</head>
<body>
<div id="page-wrapper">
<header id="header">
<div class="logo">
<img id="header-img" src="https://www.tailorbrands.com/wp-content/uploads/2017/07/logo8.png">
</div>
<nav id="nav-bar">
<ul>
<li>
<a class="nav-link" href="">product</a>
</li>
<li><a class="nav-link" href="">BUY</a></li>
<li><a class="nav-link" href="">Payment</a></li>
</ul>
</nav>
</header>
<div class="container"></div>
<section id="hero">
<h2>handcraft, cotton t-shirt, mens-wear</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" name="emial" type="email" placeholder="enter your email address">
<input id="submit" type="submit" class="btn" value="Lets Shop">
</form>
</section>
<div class="container">
<section id="buy">
<iframe id="video" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0" allowfullscreen="" height="315" frameborder="0"></iframe>
</section>
</div>
</div>
</body>
Raw
style.css
body{background-color:#eee;font-family: 'Lato', sans-serif;}
#page-wrapper{position:relative;}
header{position:fixed;top:0; min-height:75px;padding:0px 20px;display:flex;justify-content:space-around;align-items:center;background-color:#eee;}
.logo{width:60vw;}
.logo img{width:20%; height:100%;max-width:300px;display:flex; justify-content:center;align-items:center;text-align:center;margin-left:20px;}
nav{font-weight:400;}
nav ul{width:35vw;display:flex; flex-direction:row;justify-content:space-around;}
nav ul li{list-style:none;}
a{text-decoration:none; color:#000;}
.container{max-width:1000px;width:100%;margin:0 auto;}
#hero{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:200px;margin-top:50px;}
#hero input[type="email"]{max-width:275px; width:100%; padding:5px;}
#hero input[type="submit"]{max-width:150px; width:100%;background-color:lightblue;border:0;}
#buy{margin-top:50px;display:flex;justify-content:center;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment