CODING PRACTICE 11 Music Page
Music Page
In this assignment, let's build a Music 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.
Music Home Page:
Music Details Page:
Note:
When clicked on the
Get Startedbutton on the Music Home Page, it must display the Music Details Page.Try to achieve the design as close as possible.
Resources
Use the image URLs given below.
Music Home Page:
- https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/moon-bg.png
- https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/moon-stars-bg.png
Music Details Page:
- https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/clouds-img.png
- https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/moon-clouds-img.png
- https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/sweet-sleep-img.png
CSS Colors used:
Background color Hex Code values:
Text color Hex Code values:
CSS Font families used:
- 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=""> <div class="music-bg-contoner"> <div class="music-bg-contoner-heading d-flex flex-column justify-content-center text-center"> <h1 class="music-heading">Sleep Music</h1> <p class="music-paragraph">Soomthing bedtime must to help you foll in to a deep and natural sleep</p> </div> <div class="night-island-contener"> <div class="night-island-card d-flex flex-column justify-content-center text-center"> <div class="night-island-heading-margin"> <h1 class="night-island-heading">Night Island</h1> </div> <p class="night-island-paragraph">NOn-stop 8-hours mixingh of our moust popluar sleep audeo</p> <button class="button">Get Started</button> </div> </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');
.music-bg-contoner {
background-color: #03174c;
height: 100vh;
}
.music-bg-contoner-heading {
background-image: url("https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/moon-stars-bg.png");
height: 40vh;
background-size: cover;
padding: 30px;
}
.music-heading {
color: white;
font-family: "bree serif";
font-size: 30px;
}
.music-paragraph {
color: white;
font-family: "Roboto";
font-weight: bold;
font-size: 15px;
}
.night-island-contener {
padding: 35px;
}
.night-island-card {
background-image: url("https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/moon-bg.png");
background-size: cover;
height: 457899vh;
padding: 40px;
}
.night-island-heading-margin {
margin: 28px;
padding: 28px;
}
.night-island-heading {
color: white;
font-family: "bree serif";
font-size: 45px;
}
.night-island-paragraph {
color: white;
font-family: "bree serif";
}
.button {
color: #ffffff;
background-color: #8e97fd;
font-family: "Bree Serif";
font-size: 14px;
width: 100px;
height: 30px;
border-width: 0px;
border-radius: 38px;
}
Comments
Post a Comment