"Untitled"
Bootstrap 4.1.1 Snippet by Hoss

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 ----------> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>NASA Industries • Index page</title> <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/product/"> <link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link rel="apple-touch-icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> <link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png"> <link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png"> <link rel="manifest" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/manifest.json"> <link rel="mask-icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3"> <link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon.ico"> <meta name="theme-color" content="#7952b3"> <link href="https://getbootstrap.com/docs/5.0/examples/product/product.css" rel="stylesheet"> </head> <body> <header class="site-header sticky-top py-1"> <nav class="container d-flex flex-column flex-md-row justify-content-between"> <a class="py-2" href="#" aria-label="Product"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mx-auto" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg> </a> <a class="py-2 d-none d-md-inline-block" href="index.html">Acasa</a> <a class="py-2 d-none d-md-inline-block" href="all.html">Produse</a> <a class="py-2 d-none d-md-inline-block" href="photos.html">Galerie</a> <a class="py-2 d-none d-md-inline-block" href="about.html">Despre noi</a> </nav> </header> <main> <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 header" > <div class="col-md-5 p-lg-5 mx-auto my-5"> <h1 class="display-4 fw-normal">NASA Industries</h1> <p class="lead fw-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum cursus neque, vitae sagittis nisl condimentum in. </p> <a class="btn btn-warning" href="#">In curand</a> </div> </div> <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3"> <div class="bg-dark me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden"> <div class="my-3 py-3"> <h2 class="display-5">Canon</h2> <a href="canon.html"><button class="btn btn btn-secondary">Vezi mai multe.</button></a> </div> <div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"> <a href="canon.html"><img src="https://andrew-lazarev.com/wp-content/uploads/2019/05/canon-rf-85mm-f12l-usm-header.png" class="img-fluid"></a> </div> </div> <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> <div class="my-3 p-3"> <h2 class="display-5">Sony</h2> <a href="sony.html"><button class="btn btn btn-secondary">Vezi mai multe.</button></a> </div> <div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"> <a href="sony.html"><img src="https://i.ibb.co/1dPBmrd/kisspng-sony-6000-sony-e-mount-wide-angle-lens-sony-wide-sel-5b474bc5d8bf37-4849565615313991098878.png" class="img-fluid"></a> </div> </div> </div> <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3"> <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> <div class="my-3 p-3"> <h2 class="display-5">Fujifilm</h2> <a href="fujifilm.html"><button class="btn btn btn-secondary">Vezi mai multe.</button></a> </div> <div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"> <a href="fujifilm.html"><img src="https://static-sl.insales.ru/images/products/1/3493/287247781/T-kit.ru_Fujifilm_XF_16-55mm_f2.8_R_LM_WR_X-Mount.png" class="img-fluid"></a> </div> </div> <div class="bg-dark me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden"> <div class="my-3 py-3"> <h2 class="display-5">Blackmagic Pocket Cinema</h2> <a href="bpc.html"><button class="btn btn btn-secondary">Vezi mai multe.</button></a> </div> <div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"> <a href="bpc.html"><img src="https://www.ixbt.com/img/x780x600/n1/news/2020/11/2/VZ65pdtshot-r1_large.jpg" class="img-fluid"></a> </div> </div> </div> </main> <footer class="container py-5"> <div class="row"> <div class="col-12 col-md"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mb-2" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg> <small class="d-block mb-3 text-muted">© 2021 CIHCahul</small> </div> <div class="col-6 col-md"> <h5>Produse</h5> <ul class="list-unstyled text-small"> <li><a class="link-secondary" href="canon.html">Canon</a></li> <li><a class="link-secondary" href="sony.html">Sony</a></li> <li><a class="link-secondary" href="fujifilm.html">Fujifilm</a></li> <li><a class="link-secondary" href="bpc.html">Blackmagic Pocket Cinema</a></li> </ul> </div> <div class="col-6 col-md"> <a href="photos.html"><h5 style='color:black'>Galeria</h5></a> </div> <div class="col-6 col-md"> <h5>Unde ne gasiti</h5> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4772.857637179586!2d28.19241485895974!3d45.88838105740915!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b65c87aa8b8c59%3A0xed199321915a2ea8!2sColegiul%20Iulia%20Ha%C8%99deu%20din%20Cahul!5e0!3m2!1sru!2s!4v1622052029987!5m2!1sru!2s" width="400" height="250" style="border:0;" allowfullscreen="" loading="lazy"></iframe> </div> </div> </footer> <script src="https://getbootstrap.com/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>
.container { max-width: 960px; } a, a:link { text-decoration:none; color:gray; } .header { background-image:url('https://storge.pic2.me/upload/413/5f7e5352227cc9.16536487.jpg'); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; text-align:center; } .site-header { background-color: rgba(0, 0, 0, .85); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } .site-header a { color: #8e8e8e; transition: color .15s ease-in-out; } .site-header a:hover { color: #fff; text-decoration: none; } .product-device { position: absolute; right: 10%; bottom: -30%; width: 300px; height: 540px; background-color: #333; border-radius: 21px; transform: rotate(30deg); } .product-device::before { position: absolute; top: 10%; right: 10px; bottom: 10%; left: 10px; content: ""; background-color: rgba(255, 255, 255, .1); border-radius: 5px; } .product-device-2 { top: -25%; right: auto; bottom: 0; left: 5%; background-color: #e5e5e5; } .flex-equal > * { flex: 1; } @media (min-width: 768px) { .flex-md-equal > * { flex: 1; } } .bd-placeholder-img { font-size: 1.125rem; text-anchor: middle; -webkit-user-select: none; -moz-user-select: none; user-select: none; } @media (min-width: 768px) { .bd-placeholder-img-lg { font-size: 3.5rem; } }

Related: See More

Paper Kit 2

Questions / Comments: