Answer to Question #299863 in HTML/JavaScript Web Application for Kamal

Question

Answer to Question #299863 in HTML/JavaScript Web Application for Kamal

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #299863

Design a web page using HTML and CSS for a Music store. Add suitable background image.

1. Add links which can take to some description about song.

2. At the bottom mention the links for shopping, store, career and contact details

Expert's answer

<!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">
    <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=Montserrat:wght@100;400;900&display=swap" rel="stylesheet"> 
    <title>Site</title>
</head>
<body>
    <style>
        * {
            font-family: 'Montserrat', sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .bg-img {
            position: absolute;
            height: 100%;
            width: 100%;
            background: url('https://journalcrimea.ru/wp-content/uploads/2021/12/Ave-mariya.jpg');
            background-size: cover;
            background-blend-mode:color;
            opacity: 0.5;
        }
        body {
            position: relative;
            height: 100vh;
            background-color: black;
        }
        .wrap-body {
            display: flex;
            justify-content: center;
        }
        .wrapper {
            position: relative;
            width: 900px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
        }
        .footer {
            width: 100%;
            position: absolute;
            bottom: 0;
            height: 70px;
            background: white;
            display: flex;
            justify-content: center;
        }
        a {
            color: black;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
        .song {
            display: flex;
            color: white;
            margin-top: 20px;
        }
        .description {
            width: 200px;
            padding: 10px;
            background: rgb(37, 44, 39);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: column;
            padding-bottom: 20px;
        }
        .description > a {
            color: #ffffff80;
            font-size: 15px;
            font-style: italic;
        }
        .logo {
            height: 200px;
        }
        .title-song {
            font-size: 22px;
        }
        .name {
            font-size: 20px;
            color: rgb(235, 235, 235);
        }
        .price {
            font-size: 25px;
            color: #e9e9e9;
        }


    </style>
    <div class="bg-img"></div>
    <div class="wrap-body">
        <div class="wrapper">
            <div class="song">
                <img src="https://cdn.max-song.ru/thumbnails/6412c76c4dc2374062a07b062c2c792d.jpg" alt="" class="logo">
                <div class="description">
                    <div class="title-song">Cool song</div>
                    <div class="name">Name</div>
                    <div class="price">20 000 $</div>
                    <a href="#">Description</a>
                </div>
            </div>
            <div class="song">
                <img src="https://cdn.max-song.ru/thumbnails/6412c76c4dc2374062a07b062c2c792d.jpg" alt="" class="logo">
                <div class="description">
                    <div class="title-song">Cool song</div>
                    <div class="name">Name</div>
                    <div class="price">20 000 $</div>
                    <a href="#">Description</a>
                </div>
            </div>
            <div class="song">
                <img src="https://cdn.max-song.ru/thumbnails/6412c76c4dc2374062a07b062c2c792d.jpg" alt="" class="logo">
                <div class="description">
                    <div class="title-song">Cool song</div>
                    <div class="name">Name</div>
                    <div class="price">20 000 $</div>
                    <a href="#">Description</a>
                </div>
            </div>
            <div class="song">
                <img src="https://cdn.max-song.ru/thumbnails/6412c76c4dc2374062a07b062c2c792d.jpg" alt="" class="logo">
                <div class="description">
                    <div class="title-song">Cool song</div>
                    <div class="name">Name</div>
                    <div class="price">20 000 $</div>
                    <a href="#">Description</a>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="wrapper">
            <a href="#">Shopping</a>
            <a href="#">Store</a>
            <a href="#">Career</a>
            <a href="#">Contact</a>
        </div>
    </div>
</body>
</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #299863 in HTML/JavaScript Web Application for Kamal

Comments

Leave a comment

Related Questions