-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (110 loc) · 3.86 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Note App</title>
<link rel="stylesheet" href="./css/style.css" />
<link rel="stylesheet" href="./css/font.css" />
</head>
<body>
<!------------------------ Header ----------------------------->
<header class="header container">
<div class="header__top">
<h1 class="header__title">Hello, Notes</h1>
<div class="header__icon">
<p>Light/Dark</p>
<div class="header__icon__toggle toggle">
<div class="toggle__circle icon"></div>
</div>
</div>
</div>
<div class="header__bottom">
<form>
<svg class="icon searchIcon">
<use xlink:href="./assets/images/sprites.svg#search-grey"></use>
</svg>
<input type="text" placeholder="Search" class="search-bar" />
</form>
</div>
</header>
<!------------------------ Note Section ------------------------------->
<section class="notes-container container">
<!-- Single Note Structure -->
<!-- <div class="note__self">
<div class="note__header">
<div class="note__header__date">
<div class="note__date__icon">X</div>
<p>28 May</p>
</div>
<div class="note__header__icons">
<img
src="./assets/images/8666681_edit_icon.svg"
alt="edit icon"
class="note__header__edit"
/>
<img
src="./assets/images/icons8-trash.svg"
alt=""
class="note__header__trash"
/>
</div>
</div>
<div class="note__text">
<h2>Task Management App Ui Design</h2>
<p>
In publishing and graphic design, Lorem ipsum is a placeholder text
commonly used.
</p>
</div>
<div class="note__update">
<p>1h ago</p>
</div>
</div> -->
</section>
<!----------------------------- Adding Note Modal --------------------------------->
<!-- todo: Add a container -->
<section class="adding-notes-modal">
<div class="notes-modal__main">
<div class="notes-modal__main__title">Add Note</div>
<form>
<input type="text" placeholder="Title" class="notes-modal-title" />
<textarea
name="textarea"
id="textarea"
placeholder="Description"
class="notes-modal-description"
></textarea>
<div class="notes-modal__buttons">
<button type="submit" class="notes-modal__buttons__add">Add</button>
<button class="notes-modal__buttons__cancel">Cancel</button>
</div>
</form>
</div>
</section>
<!-- <div class="back__drop"></div> -->
<!-- --------------------------- Editting Note Modal --------------------------
<section class="adding-notes-modal Editting-notes-modal">
<div class="notes-modal__main">
<div class="notes-modal__main__title">Edit Note</div>
<form>
<input type="text" placeholder="Title" class="notes-modal-title" />
<input type="text" class="notes-modal-description" />
<div class="notes-modal__buttons">
<button type="submit" class="notes-modal__buttons__add">Add</button>
<button class="notes-modal__buttons__cancel">Cancel</button>
</div>
</form>
</div>
</section> -->
<!---------------------------- Adding Note Button --------------------------------->
<section class="adding-notes-btn container">
<img
src="./assets/images/4115237_add_plus_icon.svg"
alt=""
class="add__btn"
/>
</section>
<script src="./js/app.js" type="module"></script>
</body>
</html>