@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,200;1,300;1,500&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Montserrat', sans-serif; background-color: black; position: relative; color: white; } header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; } nav { text-align: left; margin: auto; font-family: cursive; } nav ul { list-style: none; display: flex; font-size: 24px; } nav ul li :hover{ transition: 1.1s; color: red; -webkit-text-stroke: 1px #ffffff81; } nav li { margin: 10px 20px; } nav a { text-decoration: none; color: white; } button { margin-right: 20px; color: red; border: none; font-size: 30px; cursor: pointer; background-color: transparent; font-weight: 800; -webkit-text-stroke: 2px black; } button:hover { color: red; -webkit-text-stroke: 1px rgb(255, 0, 0); transition: 1s; } main { height: 110vh; } img { background-position: center; background-repeat: no-repeat; background-size: cover; height: 110vh; width: 100%; position: absolute; filter: blur(9px); } h1 { text-align: center; justify-content: center; -webkit-text-stroke: 1px #ffffff7a; align-items: center; font-size: 5rem; color: rgb(61, 6, 6); position: absolute; top: 14%; font-family: cursive; left: 29%; font-weight: 600; line-height: 100px; border: 10px solid rgba(155, 1, 1, 0.521); padding: 40px 100px; backdrop-filter: blur(15px) saturate(70%); } .main2 { height: 100vh; background-color: rgba(5, 0, 0, 0.836); border-top: 2px solid rgba(92, 3, 3, 0.589); border-bottom: 2px solid rgba(92, 3, 3, 0.589); } .main3 { height: 100vh; background-color: rgb(0, 0, 0); }
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