microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

html cleanup

Browse Source
This commit is contained in:
Micah Godbolt
2019-02-20 22:36:08 -08:00
parent bdf6b2b0a9
commit 756c948ce3
36 changed files with 428 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
step1-02/README.md Normal file
View File

@@ -0,0 +1,9 @@
## HTML and CSS
## Exercise
1. Add an unordered list of class 'todos' after the filters
2. Add four todos.
3. Center the "TODO" header
4. Style all elements with button class to have no border and 5px padding top/bottom and 10px left/right
5. Set the active button style to have a 2px solid blue bottom border

34
step1-02/finished/index.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<header>
<h1>todos</h1>
<div class="addTodo"><input class="textfield" placeholder="add todo" /><button class="submit">Add</button></div>
<nav class="filter">
<button class="active">all</button>
<button>active</button>
<button>completed</button>
</nav>
</header>
<main>
<ul class="todos">
<li class="todo">
<label><input type="checkbox" /> <span class="title"> Todo 1 </span> </label>
</li>
<li class="todo">
<label><input type="checkbox" /> <span class="title"> Todo 2 </span> </label>
</li>
<li class="todo">
<label><input type="checkbox" /> <span class="title"> Todo 3 </span> </label>
</li>
<li class="todo">
<label><input type="checkbox" /> <span class="title"> Todo 4 </span> </label>
</li>
</ul>
</main>
<footer><span>4 items left</span> <button class="submit">Clear Completed</button></footer>
</body>
</html>

17
step1-02/style.css → step1-02/finished/style.css
View File

@@ -1,21 +1,23 @@
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 400px;
margin: 20px auto;
}
h1 {
text-align: center;
}
.addTodo {
display: flex;
}
.textfield {
width: 80%;
flex-grow: 1;
margin-right: 10px;
}
.add {
margin-left: 5%;
}
.button {
.submit {
border: none;
padding: 5px 10px;
}
@@ -28,6 +30,7 @@ h1 {
background: transparent;
border: none;
}
.filter .active {
border-bottom: 2px solid blue;
}

28
step1-02/index.html
View File

@@ -1,28 +0,0 @@
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="./style.css" />
<body>
<h1>todos</h1>
<input class="textfield" placeholder="add todo" /><button class="button add">Add</button>
<div class="filter">
<button class="active">all</button>
<button>active</button>
<button>completed</button>
</div>
<ul class="todos">
<li class="todo">
<label><input type="checkbox" /> Todo 1</label>
</li>
<li class="todo">
<label><input type="checkbox" /> Todo 2</label>
</li>
<li class="todo">
<label><input type="checkbox" /> Todo 3</label>
</li>
<li class="todo">
<label><input type="checkbox" /> Todo 4</label>
</li>
</ul>
<footer><span>4 items left</span> <button class="button">Clear Completed</button></footer>
</body>
</html>