Build a Stylized To-Do List - Build a Stylized To-Do list

HTML-CSS
1

Tell us what’s happening:

Your a elements should not have any text decorations.

but i set (text-decoration: none;)

Your code so far

<!-- file: index.html -->


/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36

Challenge Information:

Build a Stylized To-Do List - Build a Stylized To-Do list

2

Hey there,

Please update the message to include your code. The code was too long to be automatically inserted by the help button.

When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3

Hi Buddy, in this post there is no code available in order to get helped.

Can you do provide the code over here please. So that we will be able to help you out.

4 
/* =========================
   PAGE SETUP
========================= */

body {
  margin: 0;
  background: url("https://i.pinimg.com/736x/6e/b1/2e/6eb12ea7d809b2b884248b656b90f9cb.jpg");;
  font-family: "Segoe UI", sans-serif;
  display: flex;
  justify-content: center;
  padding: 40px;
}


/* =========================
   NOTEBOOK PAGE
========================= */

.container {
  width: 75%;
  max-width: 1000px;
  background: white;
  padding: 30px 30px 40px 30px;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 12px 25px rgba(0,0,0,0.2);
}


/* =========================
   TITLE
========================= */

h1 {
  text-align: center;
  margin-bottom: 40px;
  font-weight: 700;
}


/* DOUBLE LINE ACROSS PAGE */
.container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 95px; /* adjust if needed */
  height: 6px;

  background: repeating-linear-gradient(
    to bottom,
    #ff6b6b 0px,
    #ff6b6b 2px,
    transparent 2px,
    transparent 4px,
    #1775b9 4px,
    #326da8 6px
  );
}


/* =========================
   TODO LIST (NOTEBOOK PAPER)
========================= */

.todo-list {
  list-style: none;
  padding: 20px 30px 20px 70px;
  margin: 0;
  position: relative;

  /* NOTEBOOK LINES */
  background:
    repeating-linear-gradient(
      white,
      white 28px,
      #838687 29px
    )
    ;
}


/* RED VERTICAL MARGIN LINE 
.todo-list::before {
  content: "";
  position: absolute;
  left: 50px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ff6b6b;
}
*/ 

/* =========================
   TASK ITEMS
========================= */

.todo-list li {
  line-height: 29px; /* aligns with paper lines */
  margin-bottom: 6px;
}


/* SUB TASKS */
.sub-item {
  padding-left: 20px;
}

.sub-item li {
  line-height: 24px;
}


/* =========================
   LINKS
========================= */

a:link {
  text-decoration: none;
  color: #437bc0;
}

a:visited {
  text-decoration: none;
  color: purple;
}

a:hover {
  text-decoration: none;
  color: rgb(112, 112, 35);
}

a:focus {
  text-decoration: none;
  outline: 2px solid green;
}

a:active {
  text-decoration: none;
  color: red;
}


/* =========================
   CHECKBOXES
========================= */

input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.1);
  cursor: pointer;
}


/* COMPLETED TASK EFFECT */
input[type="checkbox"]:checked + label {
  text-decoration: line-through;
  color: gray;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 600px) {
  .container {
    width: 95%;
    padding: 20px;
  }
}

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Styled To-Do List</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

<div class="container">
  <h1>My To-Do List</h1>

  <ul class="todo-list">

    <li>
      <input type="checkbox" id="task1">
      <label for="task1">Explore Gaming Keyboard</label>
      <ul class="sub-item">
        <li><a href="#" class="sub-item-link" target="_blank">Store Link</a></li>
      </ul>
    </li>

    <li>
      <input type="checkbox" id="task2">
      <label for="task2">Learn CSS Basics</label>
      <ul class="sub-item">
        <li><a href="#" class="sub-item-link" target="_blank">FCC CSS Course</a></li>
      </ul>
    </li>

    <li>
      <input type="checkbox" id="task3">
      <label for="task3">Create Study Playlist</label>
      <ul class="sub-item">
        <li><a href="#" class="sub-item-link" target="_blank">Lo-fi Playlist</a></li>
      </ul>
    </li>

    <li>
      <input type="checkbox" id="task4">
      <label for="task4">Build Personal Portfolio Website</label>
      <ul class="sub-item">
        <li><a href="#" class="sub-item-link" target="_blank">Deploy Website</a></li>
      </ul>
    </li>
    

  </ul>
</div>

</body>

</html>
6

Hi.

Please don’t open duplicate topics for this. I have deleted this one. Please use your other post.