I Create Simple Layout With Html & Css

Only One Shohaib August 23, 2020 0

I Create Simple Layout With Html & Css

Css Code...

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    background-image:url("bg-c-3.png") ;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    font-family: 'Ubuntu', sans-serif;
}

.container{
    border: 2px solid black;
    border-radius: 20px;
    background-image:url("bg-c-6.jpg") ;
    background-size: cover;
    width: 80%;
    height: 82%;
    position: relative;
    margin: 10% auto;


}

.title{
    border: 3px solid #23ff20;
    border-radius: 18px;
    text-align: center;
    background-image:url("bg-c-7.jpg") ;
    background-size: cover;
    width: 53%;
    position: absolute;
    top: 10px;
    left: 24%;
}

.iphone{
    background-image:url("bgc-8.jpg");
    background-size: cover;
    text-align: center;
    color: #fff;
    border: 4px solid #29ff2f;
    width: 48%;
    border-radius: 20px;
    position: absolute;
    top: 76px;
    left: 10px;
}
.Android{
    background-image:url("bg-c-5.jpg");
    background-size: cover;
    text-align: center;
    color: #fff;
    border: 4px solid #29ff2f;
    width: 48%;
    border-radius: 20px;
    position: absolute;
    top: 76px;
    right: 10px;
}
.Mi{
    background-image:url("bg-c-4.png");
    background-size: cover;
    text-align: center;
    color: #fff;
    border: 4px solid #29ff2f;
    width: 48%;
    border-radius: 20px;
    position: absolute;
    top: 241px;
    left: 10px;
}
.Windows{
    background-image:url("bg-c-2.jpg");
    background-size: cover;
    text-align: center;
    color: #fff;
    border: 4px solid #29ff2f;
    width: 48%;
    border-radius: 20px;
    position: absolute;
    top: 241px;
    right: 10px;
}

.Sumsong{
    background-image:url("btt-1.jpg");
    background-size: cover;
    text-align: center;
  color: #fff;
    border: 4px solid #29ff2f;
    width: 98%;
    border-radius: 20px;
    position: absolute;
    top: 396px;
    left: 10px;
    right: 10px;
}

Html Code...

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,500;0,700;1,300;1,700&display=swap" rel="stylesheet">
    <title>Layout</title>
</head>

<body>
    <div class="container">
        <div class="title">
            <h1>Mobile&Laptop</h1>
        </div>

        <div class="iphone">
            <u>
                <h1>Iphone</h1>
            </u>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum veniam deleniti eius odio totam assumenda
                voluptate consequuntur illum dicta reiciendis recusandae quisquam eum natus at similique, veritatis
                laboriosam. Accusantium, eum.</p>
        </div>
        <div class="Android">
            <u>
                <h1>Android</h1>
            </u>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum veniam deleniti eius odio totam assumenda
                voluptate consequuntur illum dicta reiciendis recusandae quisquam eum natus at similique, veritatis
                laboriosam. Accusantium, eum.</p>
        </div>
        <div class="Mi">
            <u>
                <h1>Mi</h1>
            </u>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum veniam deleniti eius odio totam assumenda
                voluptate consequuntur illum dicta reiciendis recusandae quisquam eum natus at similique, veritatis
                laboriosam. Accusantium, eum.</p>
        </div>
        <div class="Windows">
            <u>
                <h1>Windows</h1>
            </u>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum veniam deleniti eius odio totam assumenda
                voluptate consequuntur illum dicta reiciendis recusandae quisquam eum natus at similique, veritatis
                laboriosam. Accusantium, eum.</p>
        </div>
        <div class="Sumsong">
            <u>
                <h1>Sumsong</h1>
            </u>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum veniam deleniti eius odio totam assumenda
                voluptate consequuntur illum dicta reiciendis recusandae quisquam eum natus at similique, veritatis
                laboriosam. Accusantium, eum.</p>
        </div>

    </div>
</body

No comments

Subscribe to: Post Comments ( Atom )