Scribd
Upload
937 views3 pages

Build A Stylized To Do List

The document contains an HTML structure for a styled to-do list featuring tasks such as 'Work', 'Cook', 'Study', and 'Watch and Read', each with associated sub-tasks linked to external resources. The accompanying CSS styles the to-do list for a visually appealing layout, including hover effects for links and a centered design. Overall, it provides a simple yet functional interface for managing tasks.

Uploaded by

Angela Sabangan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
937 views3 pages

Build A Stylized To Do List

The document contains an HTML structure for a styled to-do list featuring tasks such as 'Work', 'Cook', 'Study', and 'Watch and Read', each with associated sub-tasks linked to external resources. The accompanying CSS styles the to-do list for a visually appealing layout, including hover effects for links and a centered design. Overall, it provides a simple yet functional interface for managing tasks.

Uploaded by

Angela Sabangan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

** start of undefined **

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Styled To-Do List</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<h1>My To-Do List</h1>
<ul class="todo-list">

<li>
<input type="checkbox" id="itemA">
<label for="itemA">Work</label>
<ul class="sub-item">
<li>
<a class="sub-item-link" href="https://www.freecodecamp.org/"
target="_blank">Check and Record Students' Outputs</a>
</li>
</ul>
</li>

<li>
<input type="checkbox" id="itemB">
<label for="itemB">Cook</label>
<ul class="sub-item">
<li>
<a class="sub-item-link" href="https://www.freecodecamp.org/"
target="_blank">Prepare Food for Dinner</a>
</li>
</ul>
</li>

<li>
<input type="checkbox" id="itemC">
<label for="itemC">Study</label>
<ul class="sub-item">
<li>
<a class="sub-item-link" href="https://www.freecodecamp.org/"
target="_blank">Watch Videos and Answer Quizzes on freeCodeCamp</a>
</li>
</ul>
</li>

<li>
<input type="checkbox" id="itemD">
<label for="itemD">Watch and Read</label>
<ul class="sub-item">
<li>
<a class="sub-item-link" href="https://www.freecodecamp.org/"
target="_blank">Watch Anime and Read Manga</a>
</li>
</ul>
</li>
</ul>

</body>

</html>

** end of undefined **

** start of undefined **

.todo-list {
list-style: none;
width: 300px;
}
h1{
font-family: Century;
text-align: center;
}
li~li {
background-color: #f0f8ff;
height:100px;
width: 300px;
margin-top: 20px;
text-align: left;
font-size: 20px;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
padding: 2px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
body {
width: 400px;
height: 700px;
background-color: white;
margin-top: 50px;
text-align: left;
font-size: 20px;
margin-left: auto;
margin-right: auto;
font-family: Arial;
border-radius: 10px;
padding: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
a {
text-decoration: none;
}
a:hover {
color: purple;
}
a:active {
color: black;
}
a:focus {
outline: 2px solid black;
}
a:visited {
color: purple;
}

** end of undefined **

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy