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.


todo-list-to-build


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


background-image-for-todo-list


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;

}
} .p1 { padding: 10px; } .p2 { text-align: center; font-style: normal; text-decoration: underline; } .button { background-color: orange; border-width: 2px; height: 36px; width: 150px; text-align: center;


Comments

Popular posts from this blog

CODING ASSIGNMENT 4

CODING PRACTICE 11 Music Page

CODING ASSIGNMENT 3