CODING PRACTICE 7 Goa Page
Goa Page
In this assignment, let's build a Goa Page by applying the concepts we learned till now. You can use the Bootstrap concepts as well.
Refer to the below image.
Note:
- Try to achieve the design as close as possible.
- Take a look at the Cheat Sheet named
Favourite Place Detailed View Section | Cheat Sheetto know how to embed the Youtube Video.
Resources
Use the image URLs given below.
Carousel:
- https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/goa-c1-img.png
- https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/goa-c2-img.png
- https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/goa-c3-img.png
More Pictures:
- https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/goa-more1-img.png
- https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/goa-more2-img.png
- https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/goa-more3-img.png
Youtube Video URLs:
- https://www.youtube.com/watch?v=NFalCkZAClY&ab_channel=GoaTourism
- https://www.youtube.com/watch?v=4irzfMfTmM8&ab_channel=EntrepreneursBeachFestivalIndia
- https://www.youtube.com/watch?v=OJu0gjzsvQE&ab_channel=SoulandFuel
CSS Colors used:
Text color Hex Code values:
CSS Font families used:
- Roboto
Hint
To embed the Youtube Videos in a smaller size, replace the class name embed-responsive-16by9 with embed-responsive-1by1 in the Bootstrap Video Embed Code. You can find the reference here.
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="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/goa-c1-img.png" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/goa-c2-img.png" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/goa-c3-img.png" class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <div class="fist-text-card"> <h1 class="fist-sub-heading">About</h1> <p class="fist-paragraph"> Goa is known for its striking landscape, famous beaches in India, on weekends, as it is not very far from Mumbai and having Panaji as its capital and Vasco da Gama as the largest city. It attracts a large number of tourists from all over the world, round the year.</p> </div> <h1 class="second-sub-heading"> More Pictures</h1> <div class="thee-img"> <img class="" src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/goa-more1-img.png" alt="" /> <img class="" src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/goa-more2-img.png" alt="" /> <img class="" src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/goa-more3-img.png" alt="" /> </div> <h1 class="three-videos">Videos</h1> <div class=" three-last-card three-videosyou d-flex flex-row "> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/NFalCkZAClY?rel=0" allowfullscreen></iframe> </div> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/4irzfMfTmM8?rel=0" allowfullscreen></iframe> </div> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/OJu0gjzsvQE?rel=0" allowfullscreen></iframe> </div> </div> </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");
.fist-text-card {}
.fist-sub-heading {
font-family: "Roboto";
font-size: 25px;
color: #323f4b;
}
.fist-paragraph {
color: #9aa5b1;
font-family: "Roboto";
font-size: 10px;
text-align: center;
}
.second-sub-heading {
font-family: "Roboto";
font-size: 25px;
color: #323f4b;
}
.thee-img {
text-align: center;
padding: 5px;
margin: 2px;
}
.three-videos {
font-family: "Roboto";
font-size: 25px;
color: #323f4b;
}
.three-videosyou {
margin: 10px;
}
.three-last-card {
width: 96px;
height: 96px;
border-radius: 8px;
margin: 4px;
}
Comments
Post a Comment