moviemodel

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/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 class="bg-container"> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/nemo-c1-img.png" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/nemo-c2-img.png" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/nemo-c3-img.png" class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" 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="movie-heading-container d-flex flex-row justify-content-between"> <h1 class="heading">Finding Nemo</h1> <button class="button">Watch Now</button> </div> <p class="description"> A clown fish,is overly cautious with his son,Nemo who has a forshortened fin.When Nemo seims too close to the surface to prove himself,he is caught by a diver,and horrified Marlin must set out to find him.A blue reef fish named Dory joins Marlin and complicates the enciunters with sharks,jellyfish,and a host of ocean dangers.Meanwhile,Nemo plots his escape from a dentist's fish tank. </p> <h class="sub-heading">Similar Movies</h> <div class="images d-flex flex-row justify-content-end"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/finding-dory-img.png"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/bugslife-img.png" class="movie-image"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/ratatouille-movie-img.png"> </div> </div> </body> </html>
CSS
@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'); .bg-container { background-image: url("https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/orange-color-bg.png"); height: 10 0vh; background-size: cover; padding: 24px; } .movie-container-heading { margin-top: 10px; margin-bottom: 10px; } .heading { font-family: "Roboto"; color: #ffffff; font-size: 40px; padding: 10px; } .button { border-radius: 10px; border-width: 0px; color: #ff8348; font-size: 15px; height: 50px; width: 90px; margin: 10px; font-family: "Roboto"; } .description{ font-family:"Roboto"; color:#ffffff; font-size:15px; } .sub-heading{ color:#ffffff; font-size:20px; font-family:"Roboto"; } .movie-image{ margin-left:5px; margin-right:5px; } .images{ padding:30px; margin:5px; height:250px; width:450px; align-content: center; }
JAVASCRIPT
Expand for more options Login