Favorite Stores Page | CCBP Static Website Coding Assignment 1 Solution

Hi CCBP Learners, to help you in solving your Assignment 1 of Static Website. Here in this article i am posting my Code of the Favorite Stores Page This code has passed all the test cases. You can get an idea on how to solve it by seeing this solution.

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
    <div class="bgcontainer">
        <div class="d-flex flex-row">
            <h1 class="topheading">Shop in your favorite stores</h1>
            <div>
                <img src="https://assets.ccbp.in/frontend/static-website/stores-img.png" class="imagetop" alt="" />
            </div>
        </div>
        <div class="bottom-card">
            <h1 class="bottomheading">Select your store with one click</h1>
            <div class="d-flex flex-row">
                <img src="https://assets.ccbp.in/frontend/static-website/amazon-logo-img.png" class="cardimage" alt="" />
                <div>
                    <h1 class="bottombox-heading">Amazon</h1>
                    <p class="bottombox-desc">Online Shopping Free Shipping & Cash on Delivery ...</p>
                </div>
            </div>
            <div class="d-flex flex-row">
                <img src="https://assets.ccbp.in/frontend/static-website/ikea-logo-img.png" class="cardimage" alt="" />
                <div>
                    <h1 class="bottombox-heading">IKEA</h1>
                    <p class="bottombox-desc">Explore our furniture & home furnishing range. IKEA is a global leader ...</p>
                </div>
            </div>
            <div class="d-flex flex-row">
                <img src="https://assets.ccbp.in/frontend/static-website/bewakoof-logo-img.png" class="cardimage" alt="" />
                <div>
                    <h1 class="bottombox-heading">Bewakoof</h1>
                    <p class="bottombox-desc">A Lifestyle Fashion Brand That Offers Creative and Distinctive Fashion ...</p>
                </div>
            </div>
            <div class="d-flex flex-row">
                <img src="https://assets.ccbp.in/frontend/static-website/flipkart-logo-img.png" class="cardimage" alt="" />
                <div>
                    <h1 class="bottombox-heading">Flipkart</h1>
                    <p class="bottombox-desc">Wide Range of Genuine Products, Easy Returns, Cash on Delivery, Browse Now ...</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS

.bgcontainer {
    background-color: #894bca;
    font-family: bree Serif;
}

.imagetop {
    height: 200px;
}

.topheading {
    color: #ffffff;
    font-size: 28px;
    margin-top: 20px;
    padding: 20px;
}

.bottomheading {
    color: #f780c3;
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.bottom-card {
    background-color: #ffffff;
    padding: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.cardimage {
    height: 50px;
    margin-right: 20px;
}

.bottombox-desc {
    color: #7b8794;
    font-size: 14px;
}

.bottombox-heading {
    color: #323f4b;
    font-size: 18px;
}

Related Posts

CCBP Static Website Coding Assignment 2 Solution | Yoga Page

Hi CCBP Learners, I have added my code for the Yoga Page here in this post to help you in solving your assignment question. In this assignment,…

CCBP Static Website Coding Assignment 1 Solution | Foundations Page

Hi CCBP friends, Are you are facing problem in solving your assignment 1 of Static Website. I here to help you, I have added my code below….

Responsive Navbar & Banner Section | HTML CSS Coding Practices | Web Development

Responsive Navbar & Banner Section with Source Code I have built a Responsive Navbar & Banner Section by applying the bootstrap concepts which i have learned till…

Leave a Reply

Your email address will not be published.