"product"
Bootstrap 4.1.1 Snippet by 26tn

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <title> product </title> </head> <body> <header id="header"> </header> <div class ="logo"> <a herf ="#header-img"><img id="header-img" src="https://upload.wikimedia.org/wikipedia/fr/thumb/3/33/Logo_federation_tunisienne_de_football.svg/1024px-Logo_federation_tunisienne_de_football.svg.png" alt="tunisia"></a> </div> <nav> <ul> <li><a class="nav-link" href="#goals">Video</a></li> <li><a class="nav-link" href="#mailbox">Subscribe</a></li> <li><a class="nav-link" href="#header">Home</a></li> </ul> </nav> <section id="mailbox"> <h2>Get National Team T-shirt for 2018 WorldCup</h2> <form id="form" action="https://www.freecodecamp.com/email-submit"> <input name="email" id="email" type="email" placeholder="Enter your email address" required/> <br><input id="submit" type="submit" value="Order Now" > </form> </section> <div> <div id="text"> <h1>Best of Russia 2018 Goals</h1> <div id="goals" class="wrapper"><iframe width="100px" height="315" src="https://www.youtube.com/embed/BDX6J-YYB2Y"> </iframe> </div> </div> </div> </body> </html>
body{margin:0; padding:0; background:white;} nav { width:100%; background:white; overflow:auto;} ul {padding:0; margin: 0 0 0 150px; list-style:none; } li{float:right;} .logo img { width:84px; position:absolute; margin-top:0px; margin-left:10px; } nav a{width:100px; display:block; padding: 30px 15px; text-decoration:none; font-family:Arial; color:black; text-align:center;} nav a:hover { background:red; transition:0.5s; text-transform:uppercase;} #mailbox { background-color:grey; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 200px; margin-top: 0px; margin-bottom:20px; } h2 { color:black;} input[type="submit"] { max-width: 150px; width: 100%; height: 30px; margin: 15px 0; border: 0; background-color: white; } #submit:hover { background-color: red; transition: background-color 1s; } h1 { text-align: center; } #goals { margin-top: 50px; display: flex; justify-content: center; } iframe { max-width: 560px; width: 100%; }

Related: See More

Paper Bootstrap Wizard
Bootstrap 4 and CCS3 Product Cards with Transition
eCommerce Product Detail
Product Detail Page - Ecommerce

Questions / Comments: