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. This Code passed all the test cases. have a look at it and then get an idea on how to solve.

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="bg-image d-flex flex-column justify-content-end">

        <div class="cardcontainer">
            <h1 class="mainheading">Foundations</h1>
            <p class="desc">Learn Cources that will help you move forward in your career.</p>
            <div class="d-flex flex-row flexbox">
                <div class="boxcard">
                    <img src="https://assets.ccbp.in/frontend/static-website/foundations-python-img.png" class="cardimage" alt="" />
                    <h6>Python</h6>
                </div>
                <div class="boxcard">
                    <img src="https://assets.ccbp.in/frontend/static-website/foundations-python-img.png" class="cardimage" alt="" />
                    <h6>Python</h6>
                </div>
            </div>
            <div class="d-flex flex-row flexbox">
                <div class="boxcard">
                    <img src="https://assets.ccbp.in/frontend/static-website/foundations-python-img.png" class="cardimage" alt="" />
                    <h6>Python</h6>
                </div>
                <div class="boxcard">
                    <img src="https://assets.ccbp.in/frontend/static-website/foundations-python-img.png" class="cardimage" alt="" />
                    <h6>Python</h6>
                </div>
            </div>

        </div>
    </div>

</body>

</html>

CSS

.bg-image {
    height: 100vh;
    background-size: cover;
    background-image: url('https://assets.ccbp.in/frontend/static-website/foundations-bg.png');
}

.mainheading {
    font-size: 26px;
    font-weight: bold;
    font-family: Roboto;
    color: #323f4b;
}

.desc {
    font-size: 13px;
    font-family: Roboto;
    color: #7b8794;
}

.cardcontainer {
    background-color: #ffffff;
    border-radius: 20px;
    width: 100vw;
    height: 80vh;
    padding: 10px;

}

.boxcard {
    padding: 10px;
    text-align: center;
    height: 100px;
    width: 120px;
    border-radius: 20px;
    border-color: #323f4b;
    border-style: outset;
    margin-right: 20px;
    margin-bottom: 20px;
}

.cardimage {
    height: 50px;
    width: 50px;
}

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,…

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…

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.