Skip to content
Snippets Groups Projects
Commit 8fa1df73 authored by Famboupe Abbas's avatar Famboupe Abbas
Browse files

changes to the ui

parent 3ff1135d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
.idea/Layout.html
+ 28
− 2
View file @ 8fa1df73
...@@ -2,9 +2,35 @@ ...@@ -2,9 +2,35 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Title</title> <link rel="stylesheet" href="Stylesheet.css">
<script src="Controller.js"></script>
<title>To-Do-List</title>
</head> </head>
<body> <body>
<h1>TODO-Liste</h1>
<div id="main-container">
<form>
<input id="txt-todo" type="text" placeholder="Aufgabe">
<button id="btn-add">Hinzufügen</button>
</form>
<ul id="list-todo">
<li class="items-todo">
<input type="checkbox" id="item-1">
<label class="custom-checkbox" for="item-1">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f">
<path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/>
</svg>
</label>
<label for="item-1" class="item-text">
webdev project for uni
</label>
<button class="btn-delete">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f">
<path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/>
</svg>
</button>
</li>
</ul>
</div>
</body> </body>
</html> </html>
\ No newline at end of file
.idea/Stylesheet.css
+ 75
− 0
View file @ 8fa1df73
:root{
--background: #33302B;
--primary-color: #332F29;
--secondary-color: #5C4E3A;
--accent-color: #DB8C1D;
--text-color: #000000;
}
html{
font-family: "Consolas", Arial, sans-serif;
font-size: 16px;
color: var(--text-color);
}
body{
min-height: 100vh;
padding: 10px;
background-color: var(--background);
display: flex;
flex-direction: column;
align-items: center;
}
h1{
margin-top: 100px;
margin-botton: 20px;
font-size: 3rem;
font-weight: bold;
text-transform: uppercase;
text-align: center;
color: var(--accent-color);
}
.main-container{
width: 700px;
max-width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
}
#txt-todo{
box-sizing: border-box;
padding: 12px 20px;
width: 100%;
background: none;
border-radius: 1000px;
font: inherit;
color: var(--text-color);
caret-color: var(--accent-color);
}
#text-todo:focus{
outline: none;
}
form{
position: relative;
}
#btn-add{
position: absolute;
top: 0;
right: 0;
background-color: var(--accent-color);
height: 100%;
padding: 0 30px;
border: none;
border-radius: 1000px;
font: inherit;
font-weight: lighter;
color: var(--background);
cursor: pointer;
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment