"Robotics HARUN PEHLİVAN"
Bootstrap 4.1.1 Snippet by harunpehlivan

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"> <title>Robotics HARUN PEHLİVAN </title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="banner"> <div class="left-box"> <div class="wrapper"> <div class="logo"> HARUN PEHLIVAN Robotics </div> <div class="search-box"> <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1601759658/search_pxgutr.png" alt=""> <input type="text" placeholder="search"> </div> <div class="vertical-line"></div> <ul> <li><a href="#">Production</a></li> <li><a href="#">Facility</a></li> <li><a href="#">Mechanism</a></li> <li><a href="#">Our Team</a></li> <li><a href="#">Our Ideas</a></li> </ul> </div> </div> <div class="right-box"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Technology</a></li> <li><a href="#">Products</a></li> </ul> </nav> <h2>The Next <br> Generation</h2> <div class="robot"> <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1601759632/robo_dij3xd.png" alt=""> <h1>Robotics</h1> <div class="features"> <div> <small>Watch Preview</small> <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1601759627/play_m6t81s.png" alt=""> </div> <div> <small>The Making</small> <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1601759658/settings_iy2bv6.png" alt=""> </div> <div> <small>Download PDF</small> <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1601759644/download_rn6ufh.png" alt=""> </div> </div> </div> <div class="circle"></div> <div class="pagination"> <ul> <li class="active"><a href="">01</a></li> <li><a href="">02</a></li> <li><a href="">03</a></li> <li><a href="">04</a></li> <li><a href="">05</a></li> </ul> </div> <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1601759658/volume_ytvjtt.png" alt="" class="volume"> </div> </div> <div class="smallCursor"></div> <div class="largeCursor"></div> <script> var smallCursor = document.querySelector(".smallCursor"); var largeCursor = document.querySelector(".largeCursor"); document.onmousemove = function(e){ smallCursor.style.left = (e.pageX - 5) + "px"; smallCursor.style.top = (e.pageY - 5) + "px"; smallCursor.style.display = "block"; largeCursor.style.left = (e.pageX - 22) + "px"; largeCursor.style.top = (e.pageY - 22) + "px"; largeCursor.style.display = "block"; } </script> </body> </html>
* { padding: 0; margin: 0; } body { background: #000; color: #fff; font-family: sans-serif; overflow: hidden; cursor: none; } .banner { width: 100%; height: 100vh; display: flex; } .left-box { flex-basis: 20%; background: #002e52; } .right-box { flex-basis: 80%; position: relative; } .logo { width: 150px; margin: 60px 0; } .wrapper { width: 80%; margin: auto; } .search-box{ display: flex; background: #fff; padding: 10px 7px; border-radius: 20px; } .search-box img{ width: 18px; margin: auto 5px; } .search-box input { width: 80%; border: 0; outline: none; background: transparent; z-index: 2; } .vertical-line { width: 1px; height: 40vh; background: #797979; margin: 30px 0 10px; } .wrapper ul li { list-style: none; margin: 10px 0; } .wrapper ul li a { color: #797979; font-size: 13px; text-decoration: none; } nav { margin-top: 60px; margin-left: 60px; } nav ul { display: flex; } nav ul li { list-style: none; margin-right: 70px; } nav ul li a{ color: #fff; font-size: 13px; text-decoration: none; } .right-box h2{ text-transform: uppercase; margin-top: 5%; margin-left: 60px; font-size: 60px; letter-spacing: 3px; } .robot { position: absolute; bottom: 0; right: 6%; height: 93%; } .robot img { height: 100%; } .robot h1 { position: absolute; top: 100px; right: -30px; font-size: 130px; color: #e2e2e2; opacity: 0.1; z-index: -1; } .features { position: absolute; bottom: 17%; left: -220px; } .features img { width: 50px; margin-left: 40px; } .features div{ display: flex; align-items: center; margin-bottom: 30px; } .features div:nth-child(2){ margin-left: 35px; } .features div:nth-child(3){ margin-left: 38px; } .circle { position: absolute; width: 180px; height: 180px; border: 40px solid rgba(255,255,255,0.1); border-radius: 50%; top: 38%; left: -130px; } .pagination ul{ display: flex; align-items: flex-end; } .pagination ul li{ list-style: none; margin-right: 20px; } .pagination ul li a{ text-decoration: none; color: #ccc; font-size: 12px; padding: 10px; border-bottom: 2px solid #fff; } .pagination{ position: absolute; left: 60px; bottom: 5%; } .pagination ul li.active a{ font-size: 22px; border-bottom: 5px solid #fff; } .volume{ width: 25px; position: absolute; right: 4%; bottom: 4%; } .smallCursor{ height: 10px; width: 10px; background: #3fc9f5; border-radius: 50%; position: absolute; z-index: 1; display: none; } .largeCursor{ height: 40px; width: 40px; border : 2px solid #3fc9f5; border-radius: 50%; position: absolute; z-index: 1; display: none; transition-duration: 500ms; transition-timing-function: ease-out; } a { position: relative; z-index: 2; }

Related: See More

BLK• Design System

Questions / Comments: