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, we have to build a Yoga page by applying the concepts we learned till now. We can use the Bootstrap concepts and CCBP UI Kit as well.

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 id=sectionMainPage class="bgcontainer">
        <div class="text-center">
            <h1 class="text-center main-heading">Discover the yogi life on the Yoga experience platform</h1>
            <img src="https://assets.ccbp.in/frontend/static-website/yoga-girl-with-headphones-img.png" class="topgirlimage" alt="" />
            <p class="main-description text-center">Yoga poses strengthen and open tight areas of the body.</p>
            <button onclick="display('sectionTypesPage')" class="button">Get Started</button>
        </div>
    </div>
    <div id="sectionTypesPage" class="bg-yogatypespage">
        <div class="text-center">
            <div class="boxtop">
                <img src="https://assets.ccbp.in/frontend/static-website/yoga-girl-without-headphones-img.png
" class="girlimage" alt="" />
            </div>
        </div>
        <div>
            <h1 class="text-center yogaPage-heading">Types of Yoga</h1>
        </div>
        <div class="d-flex flex-row yogabox">
            <img src="https://assets.ccbp.in/frontend/static-website/yoga-card1-img.png" class="smallboximage" alt="" />
            <div>
                <h1 class="boxheading">Acro Yoga</h1>
                <p class="boxdesc">Acro Yoga is a form of partner yoga which brings together yoga, acrobatics and Thai massage.</p>
            </div>
        </div>
        <div class="d-flex flex-row yogabox">
            <img src="https://assets.ccbp.in/frontend/static-website/yoga-card2-img.png" class="smallboximage" alt="" />
            <div>
                <h1 class="boxheading">Acro Yoga</h1>
                <p class="boxdesc">Acro Yoga is a form of partner yoga which brings together yoga, acrobatics and Thai massage.</p>
            </div>
        </div>
        <div class="d-flex flex-row yogabox">
            <img src="https://assets.ccbp.in/frontend/static-website/yoga-card3-img.png" class="smallboximage" alt="" />
            <div>
                <h1 class="boxheading">Acro Yoga</h1>
                <p class="boxdesc">Acro Yoga is a form of partner yoga which brings together yoga, acrobatics and Thai massage.</p>
            </div>
        </div>
        <div class="d-flex flex-row yogabox">
            <img src="https://assets.ccbp.in/frontend/static-website/yoga-card4-img.png" class="smallboximage" alt="" />
            <div>
                <h1 class="boxheading">Acro Yoga</h1>
                <p class="boxdesc">Acro Yoga is a form of partner yoga which brings together yoga, acrobatics and Thai massage.</p>
            </div>
        </div>
        <div>
            <button onclick="display('sectionMainPage')" class="button">Back</button>
        </div>
    </div>
    <script type="text/javascript" src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/js/ccbp-ui-kit.js"></script>
</body>
</html>

CSS

.bgcontainer {
    padding: 20px;

    background-image: url('https://assets.ccbp.in/frontend/static-website/yoga-bg.png');
    background-size: cover;
}

.main-heading {
    color: #132d84;
    font-size: 20px;
    font-weight: bold;
    font-family: Roboto;
    padding: 20px;
}

.yogaPage-heading {
    color: #132d84;
    font-size: 25px;
    font-family: Roboto;
}

.main-description {
    color: #323f4b;
    font-family: Roboto;
    font-size: 15px;
}

.topgirlimage {
    height: 300px;
    margin-top: 50px;
}

.girlimage {
    height: 300px;
    padding: 20px;
}

.button {
    color: white;
    background-color: #132d84;
    border-radius: 20px;
    border-style: none;
    height: 40px;
    width: 100px;
    font-size: 12px;
}

.bg-yogatypespage {
    background-color: #ffe2ab;
    padding: 20px;
}

.yogabox {
    border-radius: 20px;
    background-color: #ffedcb;
    padding: 10px;
    margin-bottom: 10px;

}

.smallboximage {
    height: 100px;
    padding: 10px;
}

.boxheading {
    font-size: 15px;
    color: #253263;
    font-weight: bold;
    font-family: Roboto;
}

.boxdesc {
    font-size: 12px;
    color: #323f4b;
    font-family: Roboto;
}

Related Posts

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

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.