8 project

 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="a">
        <div class="a1">
            <div class="a12">
                <img src="/assests/content_item_img.jpg" alt="">
            </div>
            <div class="a11">
                <div class="a111">
                    <img src="/assests/home.png" alt="">
                    <img src="/assests/heart.png" alt="">
                    <img src="/assests/setting.png" alt="">
                </div>
                <div class="a111">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div class="a111">
                    <img id="save" src="/assests/save_instagram.png" alt="">
                </div>
            </div>
        </div>
        <div class="a1">
            <div class="a12">
                <img src="/assests/content_item_img.jpg" alt="">
            </div>
            <div class="a11">
                <div class="a111">
                    <img src="/assests/home.png" alt="">
                    <img src="/assests/heart.png" alt="">
                    <img src="/assests/setting.png" alt="">
                </div>
                <div class="a111">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div class="a111">
                    <img id="save" src="/assests/save_instagram.png" alt="">
                </div>
            </div>
        </div>
        <div class="a1">
            <div class="a12">
                <img src="/assests/content_item_img.jpg" alt="">
            </div>
            <div class="a11">
                <div class="a111">
                    <img src="/assests/home.png" alt="">
                    <img src="/assests/heart.png" alt="">
                    <img src="/assests/setting.png" alt="">
                </div>
                <div class="a111">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div class="a111">
                    <img id="save" src="/assests/save_instagram.png" alt="">

                </div>
            </div>
        </div>
    </div>
    <div class="b">
        <div class="b1"></div>
        <div class="b2"></div>
        <div class="b3"></div>
    </div>
</body>
</html>

style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body{
    width: 100%;
    height: 100%;
    background-color: rgb(215, 215, 215);
}
.a{
    width: 100%;
    height: 45%;
    /* background-color: aqua; */
    margin-top: 1%;
    display: flex;
}
.a .a1{
    width: 25%;
    height: 100%;
    /* background-color: rgb(107, 49, 49); */
    box-shadow: 0 0 10px black;
    margin-left: 1%;
    position: relative;
}
.a12{
    width: 95%;
    height: 88%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-55%);
    /* background-color: black; */
}
.a12 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.a11{
    width: 95%;
    left: 2.4%;
    height: 10%;
    /* background-color: brown; */
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.a111{
    width: 20%;
    height: 100%;
    /* background-color: cadetblue; */
    justify-content: space-around;
    display: flex;
    align-items: center;
}
.a111 img{
    width: 20px;
    height: 20px;
    justify-content: space-between;
    align-items: center;
}
.a111 #save{
    position: absolute;
    right: 10px;

}
.a111 div{
    width: 5px;
    height: 5px;
    background-color: rgb(0, 3, 3);
    border-radius: 50%;
}
.b{
    width: 100%;
    height: 45%;
    background-color: black;
    margin-top: 1%;
    position: relative;
    display: flex;
}
.b .b1{
    position: absolute;
    width: 25%;
    right: 1%;
    height: 100%;
    background-color: blueviolet;
}.b .b2{
    position: absolute;
    width: 25%;
    right: 30%;
    height: 100%;
    background-color: blueviolet;
}.b .b3{
    position: absolute;
    width: 25%;
    right: 59%;
    height: 100%;
    background-color: blueviolet;
}

output : -





إرسال تعليق

Post a Comment (0)

أحدث أقدم