*{ margin: 0; padding: 0; } header{ background-image:linear-gradient(rgba(0,0,0.5),rgba(0,0,0,0.5)), url('img/taj.jpg'); height: 100vh; background-size:cover; background-position:center; } ul{ float: right; list-style-type: none; margin-top: 25px; } ul li{ display:inline-block; } ul li a{ text-decoration:none; color: #fff; padding:5px 20px; border:1px solid transparent; transition:0.6s ease; } ul li a:hover{ background-color:#fff; color: #000; } ul li.active a{ background-color:#fff; color: #000; } .logo h4{ flood:left; color:#fff; height:10px; height-top:25px; } .main{ max-width:1200px; margin:auto; } .title{ position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); } .title h1{ color:#fff; font-size: 70px; } .button{ position: absolute; top:60%; left: 50%; transform: translate(-50%,-50%); } .btn{ color: #fff; text-decoration:none; padding: 10px 30px; border: 1px solid #fff; transition: 0.6s ease; } .btn:hover{ background-color:#fff; color: #000; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter