Emerging technologies

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-1" id="sectionHome"> <h1 class="heading-1">Empower Yourself</h1> <p1 class="paragraph-1">By learning new cources from worlds leading experts</p1> <div class="d-flex flex-row justify-content-center"> <div class="tech_bg" onclick="display('sectionTechnology')"> <img src="https://assets.ccbp.in/frontend/static-website/articles-technology-icon-img.png" alt="" class="img-1" /> <h1 class="heading-2">Technology</h1> </div> <div class="tech_bg" onclick="display('sectionScience')"> <img src="https://assets.ccbp.in/frontend/static-website/articles-science-icon-img.png" alt="" class="img-1" /> <h1 class="heading-2">Science</h1> </div> </div> <div class="d-flex flex-row justify-content-center"> <div class="tech_bg" onclick="display('sectionHealthcare')"> <img src="https://assets.ccbp.in/frontend/static-website/articles-healthcare-icon-img.png" alt="" class="img-1" /> <h1 class="heading-2">Health Care</h1> </div> <div class="tech_bg" onclick="display('sectionBusiness')"> <img src="https://assets.ccbp.in/frontend/static-website/articles-business-icon-img.png" alt="" class="img-1" /> <h1 class="heading-2">Business</h1> </div> </div> </div> <div class="bg-container-2" id="sectionTechnology"> <div> <div id="carouselExampleInterval" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active" data-interval="10000"> <img src="https://assets.ccbp.in/frontend/static-website/articles-technology-c1-img.png" class="d-block w-100" alt="..."> </div> <div class="carousel-item" data-interval="2000"> <img src="https://assets.ccbp.in/frontend/static-website/articles-technology-c2-img.png" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://assets.ccbp.in/frontend/static-website/articles-technology-c3-img.png" class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <div> <h1 class="heading-3">List of things</h1> <ul class="list"> <li>Artificial Intelligence</li> <li>Data Science</li> <li>Machine Learning</li> <li>Internet of things</li> <li>Block Chain</li> <li>Vitual Reality</li> <li>Robotic Process Automation(RPA)</li> </ul> <div class="button-style"> <button class="button" onclick="display('sectionHome')">Back</button> </div> </div> </div> </div> <div class="bg-container-2" id="sectionScience"> <div> <div id="carouselExampleInterval" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active" data-interval="10000"> <img src="https://assets.ccbp.in/frontend/static-website/articles-science-c1-img.png" class="d-block w-100" alt="..."> </div> <div class="carousel-item" data-interval="2000"> <img src="https://assets.ccbp.in/frontend/static-website/articles-science-c2-img.png" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://assets.ccbp.in/frontend/static-website/articles-science-c3-img.png" class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <div> <h1 class="heading-3">List of things</h1> <ul class="list"> <li>Biology</li> <li>Zoology</li> <li>Cardiology</li> <li>Chemistry</li> <li>Bio Chemistry</li> <li>Nano Science</li> <li>Astronomy</li> </ul> <div class="button-style"> <button class="button" onclick="display('sectionHome')">Back</button> </div> </div> </div> </div> <div class="bg-container-2" id="sectionHealthcare"> <div> <div id="carouselExampleInterval" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active" data-interval="10000"> <img src="https://assets.ccbp.in/frontend/static-website/articles-healthcare-c1-img.png" class="d-block w-100" alt="..."> </div> <div class="carousel-item" data-interval="2000"> <img src="https://assets.ccbp.in/frontend/static-website/articles-healthcare-c2-img.png" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://assets.ccbp.in/frontend/static-website/articles-healthcare-c3-img.png" class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <div> <h1 class="heading-3">List of things</h1> <ul class="list"> <li>Infrastructure Management</li> <li>Latest in Health Care</li> <li>Pharmaceuticals</li> <li>COVID-19</li> </ul> <div class="button-style"> <button class="button" onclick="display('sectionHome')">Back</button> </div> </div> </div> </div> <div class="bg-container-2" id="sectionBusiness"> <div> <div id="carouselExampleInterval" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active" data-interval="10000"> <img src="https://assets.ccbp.in/frontend/static-website/articles-business-c1-img.png" class="d-block w-100" alt="..."> </div> <div class="carousel-item" data-interval="2000"> <img src="https://assets.ccbp.in/frontend/static-website/articles-business-c2-img.png" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://assets.ccbp.in/frontend/static-website/articles-business-c3-img.png" class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <div> <h1 class="heading-3">List of things</h1> <ul class="list"> <li>Business Models</li> <li>21st Century Business Skills</li> <li>Traditional Business Approaches</li> <li>How to go from 0 to 1? The startup 101</li> </ul> <div class="button-style"> <button class="button" onclick="display('sectionHome')">Back</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>
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-1 { background-color: #225db0; background-size: cover; height: 100vh; font-family: "Roboto"; text-align:center; } .heading-1 { color: #ffffff; margin: 20px; text-decoration:underline yellow; } .paragraph-1 { color: #ffffff; margin: 20px; } .tech_bg{ background-color:#ffffff; border-radius:10px; margin:20px; text-align:center; width:150px; } .img-1{ margin:20px; height:60px; } .heading-2{ font-size:20px; margin:20px; color:#1f2933; text-align:left; } .heading-3{ color:#ffffff; padding:30px; } .bg-container-2 { background-color: #225db0; background-size: cover; height: 200vh; font-family: "Roboto"; } .list{ color:#ffffff; margin:20px; } .button{ background-color:#225db0; color:#ffffff; border:solid 2px #ffffff; } .button-style{ text-align:center; }
JAVASCRIPT
Expand for more options Login