Answer to Question #233477 in HTML/JavaScript Web Application for nani

Question

Answer to Question #233477 in HTML/JavaScript Web Application for nani

Question #233477

Yoga Page

In this assignment, let's build a Yoga page by applying the concepts we learned till now. You can use the Bootstrap concepts and CCBP UI Kit as well.

Resources

Use the image URLs given below.

Home Page Background Image

https://assets.ccbp.in/frontend/static-website/yoga-bg.png

Home Page Girl Image

https://assets.ccbp.in/frontend/static-website/yoga-girl-with-headphones-img.png

Types of Yoga Page Images

https://assets.ccbp.in/frontend/static-website/yoga-girl-without-headphones-img.png
https://assets.ccbp.in/frontend/static-website/yoga-card1-img.png
https://assets.ccbp.in/frontend/static-website/yoga-card2-img.png
https://assets.ccbp.in/frontend/static-website/yoga-card3-img.png
https://assets.ccbp.in/frontend/static-website/yoga-card4-img.png

CSS Colors used:

Background color Hex Code values:

#ffedcb

#132d84

#ffe2ab

Text color Hex Code values:

#323f4b

#fad693

#132d84

#253263

CSS Font families used:

Roboto

Expert's answer

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


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
    <style>
        html {
            box-sizing: border-box;
        }


        *,
        *::after,
        *::before {
            box-sizing: inherit;
            margin: 0;
            padding: 0;
        }



        body {
            font-family: 'Bree Serif', serif;
        }


        .container {
            min-width: 100vw;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            justify-content: center;
            background-color: #0E0E0E;
        }


        .wrapper {
            width: 320px;
            height: 100vh;
            background-color: #fff;
        }


        .header {
            background-color: #894bca;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0 20px 25px;
        }


        .header h1 {
            width: 120px;
            color: #fff;
            font-size: 22px;
            font-weight: normal;
        }


        .header img {
            width: 150px;
            display: block;
        }


        .main {
            padding: 40px 0 0 15px;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            position: relative;
            background-color: #fff;
            top: -15px;
        }


        .main h2 {
            font-size: 18px;
            font-weight: normal;
            color: #f780c3;
        }


        .store-list {
            list-style-type: none;
        }


        .store-item {
            margin-top: 30px;
        }


        .store-link {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            text-decoration: none;
        }


        .store-link img {
            display: block;
        }


        .content {
            display: block;
            width: 78%;
        }


        .content h3 {
            color: #323f4b;
            margin-bottom: 5px;
            margin: 0;
            padding: 0;
        }


        .content p {
            font-size: 13px;
            color: #7b8794;
        }
    </style>
</head>


<body>
    <div class="container">
        <div class="wrapper">
            <header class="header">
                <h1>Shop in your favourite stores</h1>
                <img src="https://assets.ccbp.in/frontend/static-website/stores-img.png" alt="picture">
            </header>
            <main class="main">
                <h2>Select your store with one click</h2>
                <ul class="store-list">
                    <li class="store-item">
                        <a href="#" class="store-link">
                            <img src="https://assets.ccbp.in/frontend/static-website/amazon-logo-img.png"
                                alt="store-img" width="50px">
                            <span class="content">
                                <h3>Amazon</h3>
                                <p>Online shopping Free shipping & Cash on delivery ...</p>
                            </span>
                        </a>
                    </li>
                    <li class="store-item">
                        <a href="#" class="store-link">
                            <img src="https://assets.ccbp.in/frontend/static-website/ikea-logo-img.png" alt="store-img"
                                width="50px">
                            <span class="content">
                                <h3>IKEA</h3>
                                <p>Explore our furniture & home furnishing range. IKEA is a global leader...</p>
                            </span>
                        </a>
                    </li>
                    <li class="store-item">
                        <a href="#" class="store-link">
                            <img src="https://assets.ccbp.in/frontend/static-website/bewakoof-logo-img.png"
                                alt="store-img" width="50px">
                            <span class="content">
                                <h3>Bewakoof</h3>
                                <p>A Lifystyle Fashion Brand That Offers Creative and Distinctive Fashion...</p>
                            </span>
                        </a>
                    </li>
                    <li class="store-item">
                        <a href="#" class="store-link">
                            <img src="https://assets.ccbp.in/frontend/static-website/flipkart-logo-img.png"
                                alt="store-img" width="50px">
                            <span class="content">
                                <h3>Flipkart</h3>
                                <p>Wide Range of Genious Products, Easy Returns, Cash on Delivary, Browse Now...</p>
                            </span>
                        </a>
                    </li>
                </ul>
            </main>
        </div>
    </div>
</body>


</html>

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

Comments

No comments. Be the first!

Answer to Question #233477 in HTML/JavaScript Web Application for nani

Resources

Comments

Leave a comment

Related Questions