CODING PRACTICE 5 Advanced Technologies Cover Page
Advanced Technologies Cover Page
In this assignment, let's build an Advanced Technologies Cover 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.
Resources
Use this background image,
URL: https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/arvrbg.png
CSS Colors used:
Background color Hex Code value for card:
- #ffffff
Background color Hex Code values for buttons:
- #5752ab
- #ffffff
Border color Hex Code value for button:
- #d7dfe9
Text color Hex Code values:
For main heading:
- #5752ab
For paragraph:
- #323f4b
For buttons:
- #171f46
- #ffffff
CSS Font families used:
- Bree Serif
- 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="main-bg-continer d-flex flex-column justify-content-end "> <div class="advancedtechnologies"> <h1 class="mainheading">Advanced Technologies</h1> <p class=" advanced-techlogic-discripations">machinery and equipment developed from the applications of scienitific knowledge.</p> <button class="learnmore-bottion">Learn more</button> <button class="Save-draft-button">Save Draft</button> </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"); .main-bg-continer { background-image: url("https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/arvrbg.png"); height: 100vh; background-size: cover; } .advancedtechnologies { background-color: #ffffff; border-top-right-radius: 5px; border-top-left-radius: 5px; padding: 16px; } .mainheading { color: #5752ab; font-family: "Bree Serif"; font-size: 24px; } .advanced-techlogic-discripations { color: #323f4b; font-family: "Roboto"; } .learnmore-bottion { color: #171f46; background-color: #ffffff; font-family: "Roboto"; font-size: 12px; font-weight: 500; width: 126px; height: 38px; border-width: 0px; border-radius: 8px; margin-right: 5px; } .Save-draft-button { color: #ffffff; background-color: #5752ab; font-family: "Roboto"; font-size: 12px; font-weight: 500; width: 126px; height: 38px; border-width: 0px; border-radius: 8px; margin-left: 5px; }
Comments
Post a Comment