Scribd
Upload
978 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
978 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