Skip to main content

Car garage web page design with full source code


 

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>car website design</title>

    <link rel="stylesheet" href="style.css">

    <link href="https://fonts.googleapis.com/css2?

    family=Roboto:wght@300;400;900&display=swap" rel="stylesheet">

</head>


<body>

 <div class="container">

     <nav>

         <img src="images/menu.png">

         <ul>

             <li><img src="images/car_icon.png" </li>

             <li>Engines</li>

             <li>Tyres</li>

             <li>Break</li>

             <li>Gear box</li>

             <li>Cooling</li>

         </ul>

     </nav>

     <div class="content">

         <h1>Accelerating The future.</h1>

         <p>sport lamborghini sint amet. Officiis, incidunt! Perferendis!

            Ipsum neque ipsam, anumquam totam, ut eius deleniti deserunt nostrum ab

            quibusdam sint amet. Officiis, incidunt! Perferendis!

         Ipsum neque ipsam, anumquam totam, ut eius deleniti deserunt nostrum ab,</p>

         <button type="button">Data Sheet</button>

     </div> 

    <img src="images/car.png" class="car-image">

    <div class="bottom-menu">

        <div>

            <img src="images/icon1.png"><p>252 mph</p>

        </div>

        <div>

            <img src="images/icon2.png"><p>1001 HP</p>

        </div>

        <div>

            <img src="images/icon3.png"><p>922 lbf.ft</p>

        </div>

        <div>

            <img src="images/icon4.png"><p>1.7 Million</p>

        </div>

    </div>

 


</div>    

</body>

</html>



CSS:

 *{ margin:0 ;

    padding:0 ;

    font-family: "Roboto",sans-serif;

}

.container{

    width: 100%;

    height: 100vh;

    background: linear-gradient(#fff,#f9ffd6);

    position: relative;

    padding-left: 8%;

    padding-right: 8%;

    box-sizing: border-box;

}

nav{

    display: flex;

    align-items: center;

    height: 80px;

    position: relative;

}

nav img{

    width: 30px;

    cursor: pointer;

}

nav ul{

    position: absolute;

    top: 40px;

    right: 0;

}

nav ul li{

    list-style: none;

    color: #alalal;

    font-size: 12px;

    margin-bottom: 15px;

    cursor: pointer;

}

nav ul::after{

    content: '';

    width: 1px;

    height: 130px;

    background: #d0d0d0;

    position: absolute;

    top: 20px;

    left: -10px;

}

.content{

    max-width: 600px;

    margin-top: 100px;

}

.content h1{

    font-size: 60px;


}

.content p{

    max-width:450px;

    color: #alalal;

    font-size: 15px;

    font-weight: 300;

    line-height: 22px;

    margin: 40px 0;

}

.content button{

    width: 160px;

    padding: 10px 0;

    border: none;

    outline: none;

    font-size: 16px;

    font-weight: 300;

    background: #ffff70;

    box-shadow: 0 3px 6px rgba(0,0,0,0.16);

    cursor: pointer;

}

.car-image{

    width: 55%;

    position: absolute;

    right: 70px;

    bottom: 60px;

    animation: run 2s linear 1;

}

.bottom-menu{

 display: flex;

 position: absolute;

 bottom: 50px;

}

.bottom-menu div{

    display: flex;

    align-items: center;

    font size: 14px;

    margin-right: 50px;

}

.bottom-menu img{

    width: 25px;

    margin-right: 15px;

}

@keyframes run{

    0%{

        transform: transelate(-100px,-100px) ;

    }

    100%{

        transform: translate(0px,0px);

    }

}

                                                             


                        Download Sourcecode


Labels:

Comments

Post a Comment

Popular posts from this blog

Eduford HTML and CSS dynamic website template free with source code

               For more templates please subscribe the blog and share it             For more templates please subscribe the blog and share it                    For more templates please subscribe the blog and share it           For more templates please subscribe the blog and share it           For more templates please subscribe the blog and share it                                       DOWNLOAD TEMPLATE
Post a Comment
Read more

Why do front-end developer need a CSS framework?

  CSS frameworks have their downsides. So you would like to know whether you would like one or not. Here are a couple of strong arguments for using the frameworks: To build a website/web application faster You can save time by having a solid foundation that you simply can believe . CSS frameworks give web developers something that they're going to use and customize (if required). And for people who have limited coding skills, employing a CSS framework is that the sole because of create a solid product. To validate the planning hypothesis You can build an answer and test it together with your users. it's much faster and easier to make a prototype or wireframe with a framework instead of roll in the hay from scratch. PS：Designers also can create prototypes/wireframes employing a rapid prototyping tool. CSS frameworks works as per your needs There are tons of great frameworks you'll choose between . such as: Bootstrap Materialize Bulma Semantic ui Foundation
Post a Comment
Read more

Best phones under 2000/-

    Realme 7 pro(64Gb ROM / 6Gb RAM) 18499/- OS Android RAM 6 GB Product Dimensions 16.23 x 7.54 x 0.94 cm; 196.5 Grams Batteries 1 Lithium Polymer batteries required. (included) Item model number RMX2151 Connectivity technologies 4G Special features 6 GB RAM | 64 GB ROM | Expandable Upto 256 GB, 64MP + 8MP + 2MP + 2MP | 16MP Front Camera, MediaTek Helio G95 Processor, 5000 mAh Lithium-ion Battery, 16.51 cm (6.5 inch) Full HD+ Display Samsung Galaxy M31s (6Gb RAM / 128Gb ROM) 19499/- Quad camera setup - 64MP (F1.8) main camera + 12MP (F2.2) ultra wide camera + 5MP (F2.4) depth camera + 5MP (F2.4) macro camera | 32MP (F2.2) front camera 16.4 centimeters (6.5-inch) super Amoled - Infinity-O display, FHD+ capacitive multi-touch touchscreen with 1080 x 2400 pixels resolution, 407 ppi pixel density and Contrast Ratio: 78960:1 Memory, Storage & SIM: 6GB RAM, 128GB internal memory expandable up to 512GB | Dual SIM (nano+nano) dual-standby (4G+4G) Android v10.0 operating system wi...
Post a Comment
Read more