<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Your Website Title</title> <style> @import url('https://fonts.googleapis.com/css2?family=OpenSans:wght@400;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: OpenSans, sans-serif; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #354150; display: flex; flex-direction: column; } .about-me { padding: 2.5rem; color: white; } .wrapper { background-image: url('https://images.unsplash.com/photo-1689703400849-4befa701d0e8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1934&q=80'); background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; width: 100%; min-height: 100vh; padding: 20px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-content: center; justify-content: center; gap: 24px; } .card { padding: 0.5rem; aspect-ratio: 4 / 1; background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border-radius: 10px; transition: transform 0.2s ease-in-out; display: flex; flex-direction: row; justify-content: center; align-items: center; } .card:hover { transform: scale(1.02); cursor: pointer; } .logo { display: block; margin: 0 auto; aspect-ratio: 1 / 1; height: 100%; min-width: 6.5rem; padding-left: 0.5rem; padding-right: 0.5rem; } .description { font-weight: 700; width: 100%; text-align: center; height: 30%; font-size: 18px; color: white; mix-blend-mode: difference; } </style> </head> <body> <div class="wrapper"> <div class="card"> <img src="https://git.myco.systems/assets/img/logo.svg" alt="Logo" class="logo"> <p class="description">Git with a cup of tea</p> </div> <div class="card"> <img src="https://raw.githubusercontent.com/NX211/homer-icons/fbf21fb653358f1cf55fe45cd569d757ebc283aa/svg/adguardhome.svg" alt="Logo" class="logo"> <p class="description">AdGuard home</p> </div> <div class="card"> <img src="https://raw.githubusercontent.com/NX211/homer-icons/fbf21fb653358f1cf55fe45cd569d757ebc283aa/svg/filerun.svg" alt="Logo" class="logo"> <p class="description">FileRun</p> </div> </div> <section class="about-me"> <h1>About</h1> <p>This is a brief description about...</p> </section> </body> </html>