Skip to content

Commit bcf4ec1

Browse files
authored
Update styles.css
1 parent 5326e64 commit bcf4ec1

1 file changed

Lines changed: 32 additions & 92 deletions

File tree

Chapter01/StarterFiles/styles.css

Lines changed: 32 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,32 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7-
<title>To-Do-List</title>
8-
<link rel="stylesheet" href="styles.css">
9-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
10-
</head>
11-
<body>
12-
13-
<nav class="navbar navbar-inverse navbar-fixed-top">
14-
<div class="container">
15-
<div class="navbar-header">
16-
<a class="navbar-brand" href="/">ToDo List</a>
17-
</div>
18-
</div>
19-
</nav>
20-
21-
<div class="container">
22-
23-
<div class="content-area row">
24-
<div class="col-md-2 col-xs-2 col-lg-2 col-sm-2"></div>
25-
26-
<div class="col-md-8 col-xs-8 col-lg-8 col-sm-8">
27-
<h2>ToDo List</h2>
28-
29-
<div class="row input-area">
30-
<div class="col-md-1"></div>
31-
<div class="form-group col-md-9">
32-
<input type="text" placeholder="New Task" class="form-control" id="addTask">
33-
</div>
34-
<div class="form-group col-md-1">
35-
<button class="btn btn-primary">Add</button>
36-
</div>
37-
<div class="col-md-1"></div>
38-
</div>
39-
40-
<ul class="list-group" id="taskList">
41-
<li class="list-group-item checkbox">
42-
<div class="row">
43-
<div class="col-md-1 col-xs-1 col-lg-1 col-sm-1 checkbox">
44-
<label><input type="checkbox" value="" class="" checked></label>
45-
</div>
46-
<div class="col-md-10 col-xs-10 col-lg-10 col-sm-10 task-text complete">
47-
First item
48-
</div>
49-
<div class="col-md-1 col-xs-1 col-lg-1 col-sm-1 delete-icon-area">
50-
<a class="" href="/"><i class="delete-icon glyphicon glyphicon-trash"></i></a>
51-
</div>
52-
</div>
53-
</li>
54-
<li class="list-group-item checkbox">
55-
<div class="row">
56-
<div class="col-md-1 col-xs-1 col-lg-1 col-sm-1 checkbox">
57-
<label><input type="checkbox" value="" class=""></label>
58-
</div>
59-
<div class="col-md-10 col-xs-10 col-lg-10 col-sm-10 task-text">
60-
Second item
61-
</div>
62-
<div class="col-md-1 col-xs-1 col-lg-1 col-sm-1 delete-icon-area">
63-
<a class="" href="/"><i class="delete-icon glyphicon glyphicon-trash"></i></a>
64-
</div>
65-
</div>
66-
</li>
67-
<li class="list-group-item checkbox">
68-
<div class="row">
69-
<div class="col-md-1 col-xs-1 col-lg-1 col-sm-1 checkbox">
70-
<label><input type="checkbox" value="" class=""></label>
71-
</div>
72-
<div class="col-md-10 col-xs-10 col-lg-10 col-sm-10 task-text">
73-
Third item
74-
</div>
75-
<div class="col-md-1 col-xs-1 col-lg-1 col-sm-1 delete-icon-area">
76-
<a class="" href="/"><i class="delete-icon glyphicon glyphicon-trash"></i></a>
77-
</div>
78-
</div>
79-
</li>
80-
</ul>
81-
</div>
82-
83-
<div class="col-md-2 col-xs-2 col-lg-2 col-sm-2"></div>
84-
</div>
85-
86-
</div><!-- /.container -->
87-
88-
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
89-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
90-
<script src="scripts.js"></script>
91-
</body>
92-
</html>
1+
body {
2+
padding-top: 50px;
3+
}
4+
.starter-template {
5+
padding: 40px 15px;
6+
text-align: center;
7+
}
8+
.content-area {
9+
margin: 30px;
10+
}
11+
.input-area {
12+
margin: 25px;
13+
}
14+
.task-text {
15+
display: flex;
16+
align-items: center;
17+
height: 40px;
18+
}
19+
.hidden {
20+
display: none;
21+
}
22+
.delete-icon-area {
23+
display: flex;
24+
align-items: center;
25+
height: 40px;
26+
}
27+
.delete-icon {
28+
color: red;
29+
}
30+
.complete {
31+
text-decoration: line-through;
32+
}

0 commit comments

Comments
 (0)