---
# System prepended metadata

title: Recreating a frontend design 'Abstract'

---

# 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. 
