CODING PRACTICE 12 Book Store Page
Book Store Page
In this assignment, let's build a Book Store Page by applying the concepts we learned till now. You can use the Bootstrap concepts and CCBP UI Kit as well.
Refer to the below images.
Book Store Home Page:
Wings of fire book details Page:
The 3 mistakes of my life book details Page:
Harry Potter book details Page:
Note:
When clicked on the Read Now button on the Book Store Home Page, it must display the respective book details page.
Try to achieve the design as close as possible.
Resources
Use the image URLs given below.
Images:
- https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/book-apj-img.png
- https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/book-chetan-bhagat-img.png
- https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/harrypotter-img.png
CSS Colors used:
Background color Hex Code values:
Text color Hex Code values:
CSS Font families used:
- Roboto
- Bree Serif
Concepts Review
Want to quickly review some of the concepts you’ve been learning?
Take a look at the Cheat Sheets.
<!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/popper.js@1.16.1/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="sectionhomepage"> <div class="book-store-home-page-bg"> <h1 class="book-store-home-page-heading">Popular Book</h1> <div class="book-store-home-page-card d-flex flex-row "> <img class="book-store-home-page-card-img " src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/book-apj-img.png" alt="" /> <div class="book-store-home-page-text"> <h1 class="book-store-home-page-card-heading">Wings of Fire</h1> <p class="book-store-home-page-card-paragraph">An Autoblography of abdul lalam</p> by annm thiruni <div class=""> <button class=" buttion btn btn-prime" onclick="display('sectionpage1')">Read Now</button> </div> </div> </div> <h1 class="book-store-home-page-sub-2">Recommended Books</h1> <div class="recommended-books-card d-flex flex-row "> <img class="the-3mistakes-book-img" src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/book-chetan-bhagat-img.png" alt="" /> <div class="book-store-home-page-text"> <h1 class="book-store-home-page-sub-2">The 3 mistakes</h1> <p class="book-store-home-page-sub-2paragraph"> jrojtgrejtgrjtgr</p> <button class=" buttion btn btn-primry" onclick="display('sectionpage2')"> Read now</button> </div> </div> <div class="recommended-books-card d-flex flex-row "> <img class="the-3mistakes-book-img" src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/harrypotter-img.png" alt="" /> <div class="book-store-home-page-text"> <h1 class="book-store-home-page-sub-2">harry potter</h1> <p class="book-store-home-page-sub-2paragraph"> jrojtgrejtgrjtgr</p> <button class=" buttion btn btn-primry" onclick="display('sectionpage3')"> Read now</button> </div> </div> </div> </div> <div id="sectionpage1"> <div class="wings-of-fire-book-page-bg"> <img class="wings-of-fire-book-img" src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/book-apj-img.png" alt="" /> <div class=" "> <h1 class="wings-of-fire-book-page-heading">Wings of fire</h1> <p class="wings-of-fire-book-page-paragraph">fheifhefhuefheuhfeuhfruiehfj<br />fhuhfuefhueyueryyhiuhrhfuryf7yeyeurhgruyeryt8ryhriuhgu<br />hf7qwdytudhnklnd;vmfd;l</p> <button class=" buttion-1 btn brn-ptimary" onclick="display('sectionhomepage')"> back</button> <button class=" buttion-2 btn brn-ptimary"> Buy now</button> </div> </div> </div> <div id="sectionpage2"> <div class="wings-of-fire-book-page-bg"> <img class="wings-of-fire-book-img" src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/book-chetan-bhagat-img.png" alt="" /> <div class=" "> <h1 class="wings-of-fire-book-page-heading">the 3 mistakes</h1> <p class="wings-of-fire-book-page-paragraph">fheifhefhuefheuhfeuhfruiehfj<br />fhuhfuefhueyueryyhiuhrhfuryf7yeyeurhgruyeryt8ryhriuhgu<br />hf7qwdytudhnklnd;vmfd;l</p> <button class=" buttion-1 btn brn-ptimary" onclick="display('sectionhomepage')"> back</button> <button class=" buttion-2 btn brn-ptimary"> Buy now</button> </div> </div> </div> <div id="sectionpage3"> <div class="wings-of-fire-book-page-bg"> <img class="wings-of-fire-book-img" src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/harrypotter-img.png" alt="" /> <div class=" "> <h1 class="wings-of-fire-book-page-heading">harry potter</h1> <p class="wings-of-fire-book-page-paragraph">fheifhefhuefheuhfeuhfruiehfj<br />fhuhfuefhueyueryyhiuhrhfuryf7yeyeurhgruyeryt8ryhriuhgu<br />hf7qwdytudhnklnd;vmfd;l</p> <button class=" buttion-1 btn brn-ptimary" onclick="display('sectionhomepage')"> back</button> <button class=" buttion-2 btn brn-ptimary"> Buy now</button> </div> </div> </div> <script type="text/javascript" src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/js/ccbp-ui-kit.js"></script> </body> </html>
@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap');
.book-store-home-page-bg {
background-color: #1b1b1b;
background-size: cover;
}
.book-store-home-page-heading {
color: white;
font-family: "Roboto";
font-weight: bold;
}
.book-store-home-page-card {
background-color: #e6f6ff;
border-radius: 15px;
padding: 5px;
margin: 25px;
}
.book-store-home-page-card-img {
height: 45vh;
width: 50vw;
}
.book-store-home-page-card-heading {
font-family: "breeserif";
color: #06070d;
font-size: 15px;
font-weight: bold;
}
.book-store-home-page-card-paragraph {
font-family: "Roboto";
font-size: 10px;
color: #06070d;
font-weight: bold;
}
.book-store-home-page-sub-heading {
color: white;
font-family: "breeserif";
font-size: 20px;
font-weight: bold;
}
.book-store-home-page-text {
text-align: center;
padding: 15px;
}
.buttion {
color: white;
background-color: blue;
margin: 20px;
}
.book-store-home-page-sub-img {}
.book-store-home-page-sub-2 {
color: white;
font-size: 30px;
font-family: "breeserif";
font-weight: bold;
}
.recommended-books-card {}
.the-3mistakes-book-img {
height: 40vh;
width: 35vw;
}
.book-store-home-page-sub-2paragraph {
color: white;
font-size: ;
font-family: "breeserif";
font-weight: bold;
}
.wings-of-fire-book-page-bg {
background-color: #06070d;
text-align: center;
}
.wings-of-fire-book-img {
height: 40vh;
width: ;
padding: 20px;
}
.wings-of-fire-book-page-heading {
color: white;
font-family: "breeserif";
}
.wings-of-fire-book-page-paragraph {
color: white;
font-family: "breeserif";
}
.buttion-1 {
color: black;
background-color: orange;
margin: 20px;
}
.buttion-2 {
color: white;
background-color: blue;
margin: 20px;
}
Comments
Post a Comment