# Recreating a frontend design 'Abstract' My experience building or recreating a design we were asked to recreate in class at BLOCKFUSE LABs was quite interesting. It was'nt as hard as the previous designs i have created in the past weeks because i am getting familiar with some CSS syntax. Building the'Abstract' was easy because i have had series of coding practices in the past weeks. Below is my HTML structure for this project 'Abstract'. <``!DOCTYPE html``> <``html lang="en"``> <``head``> <``meta charset="UTF-8"``> <``meta name="viewport" content="width=device-width, initial-scale=1.0"``> <``link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'``> <``link rel="stylesheet" href="/style.css"``> <``link rel="preconnect" href="https://fonts.googleapis.com"``> <``link rel="preconnect" href="https://fonts.gstatic.com" crossorigin``> <``link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"``> <``title>com-code</title``> <``/head``> <``body``> <``header``> <``div class="nav-area"``> <``img src="image/logo.svg" width: 20px; alt="logo"``> <span> | Help Center</span> <div class="btn"> <button class="btn-1">Submit a request</button> <button class="btn-2">Sign in</button> </div> </div> </header> <div class="color"> <h1>How can we help?</h1> <div class="center"> <input type="search" placeholder="Search"> <i class='bx bx-right-arrow-alt'></i> </div> </div> <div class="container"> <div class="card"> <img src="image/nut.png " width="100px"> <div class="text"> <h3>Using Abstract</h3> <p>Abstract lets you manage, version,<br>and document your designs in one<br> place.</p> <a href="#">Learn More &rarr;</a> </div> </div> <div class="card"> <img src="image/head.png" width="100px"> <div class="text"> <h3>Manage your account</h3> <p>Configure your account setting,<br>such as email, profile details<br>and password</p> <a href="#">Learn More &rarr;</a> </div> </div> <div class="card"> <img src="image/puzzle.png" width="100px"> <div class="text"> <h3>Manage organizations, teams,<br>and projects</h3> <p>Use Abstract organizations, teams,<br>and projects to organize your<br> people and your work.</p> <a href="#">Learn More &rarr;</a> </div> </div> <div class="card"> <img src="image/dollar.png" width="100px"> <div class="text"> <h3>Manage billing</h3> <p>Change subscriptions and<br>payment details.</p> <a href="#">Learn More &rarr;</a> </div> </div> <div class="card"> <img src="image/key.png" width="100px"> <div class="text"> <h3>Authenticate to abstract</h3> <p>Set up and configure SSO, SCIM,<br>and just-in-time provisioning</p> <a href="#">learn More &rarr;</a> </div> </div> <div class="card"> <img src="image/comment.png" width="100px"> <div class="text"> <h3>Abstract support</h3> <p>Get in touch with a human</p> <a href="#">Learn More &rarr;</a> </div> </div> </div> <footer> <div class="last"> <div class="born"> <h3>Abstract</h3> <p>Start</p> <p>Pricing</p> <p>Download</p> </div> <div class="born"> <h3>Resources</h3> <p>Blog</p> <p>Help Center</p> <p>Release Notes</p> <p>Status</p> </div> <div class="born"> <h3>Community</h3> <p>Twitter</p> <p>Linkedln</p> <p>Facebook</p> <p>Dribble</p> <p>Podcast</p> </div> <div class="born"> <h3>Company</h3> <p>About Us</p> <p>Careers</p> <p>Legal</p><br> <h3>Contact Us</h3> <p>info@abstract.com</p> </div> <div class="copy"> <img src=""> <p class="one">©Copyright 2025</p> <p>Abstract Studio Design.inc.</p> <p class="all">All rights reserved</p> </div> </div> <``/footer``> <``/body``> <``/html``> Below is the CSS styling ``*{`` ``padding: 0;`` ``margin: 0;`` ``box-sizing: border-box;`` ``font-family: Arial, sans-serif;`` ``}`` ``header{`` ``display: flex;`` ``justify-content: space-evenly;`` ``background-color: black;`` ``align-items: center;`` ``font-size: 30px;`` ``color: white;`` ``}`` ``.nav-area img{`` ``width: 150px;`` ``height: 50;`` ``padding: 5px;`` } ``.btn{`` ``display: flex;`` ``justify-content: space-between;`` ``margin-left: 500px;`` ``gap: 10px;`` ``}`` ``.btn-1{`` ``padding: 10px 30px;`` ``border: 1px solid white;`` ``background-color: #000000;`` ``color: white;`` ``border-radius: 5px;`` ``font-size: 20px;`` ``}`` ``.btn-2{`` ``border: none;`` ``padding: 10px 30px;`` ``border-radius: 5px;`` ``background-color: #4C5FD5;`` ``font-size: 20px;`` ``color: white;`` ``}`` ``.btn-2:hover{`` ``background-color: white;`` ``}`` ``.nav-area{`` ``align-items: center;`` ``display: flex;`` ``padding: 20px;`` ``}`` ``.color{`` ``height: 400px;`` ``align-items: center;`` ``display: flex;`` ``flex-direction: column;`` ``background-color: #dadbf1;`` ``margin: auto;`` ``padding: 80px;`` ``gap: 20px;`` ``}`` ``.color h1{`` ``font-size: 75px;`` ``font-weight: 300;`` ``padding-top: 30px;`` ``}`` ``input{`` ``width: 750px;`` ``height: 65px;`` ``padding: 10px;`` ``font-size: 20px;`` ``font-weight: 50;`` ``}`` ``i{`` ``position: relative;`` ``right: 30px;`` ``}`` ``.container{`` ``display: grid;`` ``grid-template-columns: auto 1fr;`` ``gap: 100px;`` ``margin: auto;`` ``padding-top: 150px;`` ``padding-left: 100px;`` ``padding-right: 100px`` ``color: #fff;`` ``align-items: center;`` ``}`` ``.card{`` ``display: flex;`` ``flex-direction: row;`` ``align-items: center;`` ``gap: 30px;`` ``line-height: 30px;`` ``font-family: Arial, Helvetica, sans-serif;`` ``}`` ``.card h3{`` ``font-size: 25px;`` ``color: #333;`` ``margin-bottom: 10px;`` ``}`` ``.card p{`` ``font-size: 20px;`` ``color: #000;`` ``margin-bottom: 10px;`` ``line-height: 30px;`` ``word-spacing: 3px;`` ``}`` ``.card a{`` ``color: #4C5FD5;`` ``text-decoration: none;`` ``}`` ``.card a:hover{`` ``text-decoration: underline;`` ``color: #4C5FD5;`` ``}`` ``.text{`` ``padding-top: 40px;`` ``}`` ``footer{`` ``display: flex;`` ``flex-direction: column;`` ``padding-top: 200px;`` ``}`` ``.last{`` ``display: flex;`` ``justify-content: space-between;`` ``background-color: black;`` ``padding-top: 50px;`` ``padding-bottom: 100px;`` ``color: white;`` ``padding-right: 500px;`` ``padding-left: 100px;`` ``}`` ``.born{`` ``flex-direction: column;`` ``justify-content: center;`` ``line-height: 30px;`` ``gap: 200px;`` ``}`` ``.born p{`` ``font-size: 20px;`` ``}`` ``.last h3{`` ``padding-bottom: 25px;`` ``font-size: 30px;`` ``}`` ``.copy{`` ``text-align: right;`` ``position: absolute;`` ``right: 0;`` ``padding-top: 250px;`` ``padding-right: 150px;`` ``font-size: 20px;`` ``}`` ``.one{`` ``padding-right: 75px;`` ``line-height: 20px;`` ``}`` ``.all{`` ``padding-right: 70px;`` ``}`` Coding gets easier with constant practice. I will document my journey as i progress, and hopefully, master coding.