Todolist In this assignment, let's build a Todolist by applying the concepts we learned till now.
Todolist
In this assignment, let's build a Todolist by applying the concepts we learned till now.
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/todolistbg.png
CSS Colors used:
Background color for button:
- orange
Text color:
- white
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></head> <body> <div class="bgcontent"> <div class="div2"> <h1 class="headingtag">Todolist</h1> <p class="p1"> Each day i will accomplish one thing on my todo list.</p> <h2>Red a Book</h2> <p> I don't think that human race Add, Prioritize & Organize your Team's Tasks! Be more efficient and successful! Start with. a simple To-Do-List, add more Details as you go ! Free for up to 50 User! Try it now! Up-To Date Information. Intuitive Drag & Drop. Instant Messaging....... </p> <button class="button"> Start </button> <p class="p2"> Don't skip introducation </p> </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"); .bgcontent { background-image: url("https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/todolistbg.png"); background-size: cover; height: 100vh; color: white; font-family: Roboto; font-style: normal; } .div2 { text-align: center; } .headingtag { text-align: center;
Comments
Post a Comment