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;
}