CODING PRACTICE 9 Conference Page
Conference Page
In this assignment, let's build a Conference 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.
Conference Home Page:
Conference Details Page:
Note:
When clicked on the
Know morebutton on the Conference Home Page, it must display the Conference Details Page.Try to achieve the design as close as possible.
Resources
Use the URLs given below.
Image URL: https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/conference-img.png
Youtube Video URL: https://youtu.be/vKJ6nXE_6Hc
CSS Colors used:
Text color Hex Code values:
CSS Font families used:
- Roboto
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 class="section1"> <img class="fist-img" src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/conference-img.png" alt="" /> <div class="fist-page"> <h1 class=""> The Things Conference</h1> <p class=""> Readedtimg dsarafhk Conference DetailsTry to achieve the design as close as possible.</p> <div> <button class="btn btn-primary" onclick="display('section2')" type="submit"> Know More</button> </div> </div> </div> <div class=" section2"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vKJ6nXE_6Hc?rel=0" allowfullscreen></iframe> </div> <div class="second-page"> <h1 class=""> The Things Conference</h1> <p>Try to achieve the design as close as</p> </div> <div class="d-flex flex-row justify-content-center"> <div class="conference-stats-container"> <h1>1400+</h1> <p>atendens</p> </div> <div class="conference-stats-container"> <h1>100+</h1> <p>workers</p> </div> <div class="conference-stats-container"> <h1>120+</h1> <p>fedfrg</p> </div> <div class="conference-stats-container"> <h1>10+</h1> <p>htrh</p> </div> </div> <div class="buttion"> <div class="btn btn-primary onclick=" display('section1')""> Back </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');
.fist-img {
width: 100vw;
margin: 10px;
}
.fist-page {
text-align: center;
padding: 20px;
}
.fist-main-heading {
color: ;
font-size: ;
font-family: ;
height: ;
width: ;
font-weight: ;
}
.fist-paragraph {
color: ;
font-size: ;
}
.second-page {
text-align: center;
}
.second-main-heading {
color: ;
font-size: ;
font-family: ;
height: ;
width: ;
font-weight: ;
}
.second-paragraph {
color: ;
font-size: 30px;
}
.conference-stats-container {
margin-left: 30px;
margin-right: 30px;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
.numbers-main-heading {
color: ;
font-size: ;
font-family: ;
height: ;
width: ;
font-weight: ;
}
.numbers-paragraph {
color: ;
font-size: ;
}
.buttion {
text-align: center;
}
Comments
Post a Comment