-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patharticle.html
157 lines (130 loc) · 6.48 KB
/
article.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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>FINCO</title>
<link rel="stylesheet"
href="css/p2.css">
<link rel="stylesheet"
href="responsive.css">
</head>
<body>
<!-- for header part -->
<header>
<div class="logosec">
<div class="logo"> My FinCO</div>
class="icn menuicn"
id="menuicn"
alt="menu-icon">
</div>
<div class="searchbar">
<input type="text"
placeholder="Search">
<div class="searchbtn">
<img src=
"https://w7.pngwing.com/pngs/283/246/png-transparent-money-bag-computer-icons-money-bag-saving-investment-payment-thumbnail.png"
class="icn srchicn"
alt="search-icon">
</div>
</div>
<div class="message">
<div class="circle"></div>
<img src=
"on.png"
class="icn"
alt="">
<div class="dp">
<img src=
"https://img.freepik.com/premium-vector/brunette-man-avatar-portrait-young-guy-vector-illustration-face_217290-1035.jpg?size=626&ext=jpg&ga=GA1.2.1227319902.1667066505&semt=sph"
class="dpicn"
alt="dp">
</div>
</div>
</header>
<div class="main-container">
<div class="navcontainer">
<nav class="nav">
<div class="nav-upper-options">
<div class="nav-option option1">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221210182148/Untitled-design-(29).png"
class="nav-img"
alt="dashboard">
<h3> Dashboard</h3>
</div>
<div class="option2 nav-option">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221210183322/9.png"
class="nav-img"
alt="articles">
<h3><a href="article.html">Articles</a></h3>
</div>
<div class="nav-option option3">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221210183320/5.png"
class="nav-img"
alt="report">
<h3><a href="report.html">Report</a></h3>
</div>
<div class="nav-option option5">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221210183323/10.png"
class="nav-img"
alt="blog">
<h3> Profile</h3>
</div>
<div class="nav-option option6">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221210183320/4.png"
class="nav-img"
alt="settings">
<h3> Settings</h3>
</div>
<div class="nav-option logout">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221210183321/7.png"
class="nav-img"
alt="logout">
<h3><a href="index.html">Logout</a></h3>
</div>
</div>
</nav>
</div>
<div class="main">
<div class="searchbar2">
<input type="text"
name=""
id=""
placeholder="Search">
<div class="searchbtn">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221210180758/Untitled-design-(28).png"
class="icn srchicn"
alt="search-button">
</div>
</div>
<h1>Article Title</h1>
<p>Author Name - Date Published</p>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget ex vel mauris tempor vestibulum. Nulla facilisi. Nullam in ipsum in erat facilisis pharetra. Sed tristique libero eu nibh pretium, eget volutpat mauris feugiat. Maecenas rhoncus tortor a neque eleifend faucibus. Fusce vel convallis elit, at mollis ipsum. Integer sed pulvinar felis, in tempor nulla. Curabitur auctor enim ac nibh consequat, vitae consequat lorem vestibulum. Fusce auctor sapien vel accumsan malesuada. Duis suscipit erat lectus, ac bibendum dolor viverra eu. Donec nec dapibus velit.</p>
<p>Nullam nec euismod tellus. Aliquam sit amet sapien vel metus aliquet auctor at nec massa. Aliquam erat volutpat. Nam consectetur, nulla sed fermentum tristique, nisl purus varius est, at laoreet velit nisi et augue. Integer ullamcorper, turpis vel fermentum efficitur, elit elit sollicitudin mauris, sit amet euismod purus eros eu velit. Sed molestie erat risus, a tristique augue dignissim id. Aliquam sagittis dolor in est commodo auctor.</p>
<p>Proin id lectus nisi. Sed congue blandit augue, eu vulputate nulla bibendum eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam id volutpat metus. Suspendisse rhoncus ipsum eu leo venenatis lacinia. Aliquam erat volutpat. Praesent consequat enim vel sapien lobortis, quis dapibus risus pretium. In porttitor, eros ut facilisis vulputate, tortor nisl sodales magna, ac semper metus urna a orci.</p>
</article>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget ex vel mauris tempor vestibulum. Nulla facilisi. Nullam in ipsum in erat facilisis pharetra. Sed tristique libero eu nibh pretium, eget volutpat mauris feugiat. Maecenas rhoncus tortor a neque eleifend faucibus. Fusce vel convallis elit, at mollis ipsum. Integer sed pulvinar felis, in tempor nulla. Curabitur auctor enim ac nibh consequat, vitae consequat lorem vestibulum. Fusce auctor sapien vel accumsan malesuada. Duis suscipit erat lectus, ac bibendum dolor viverra eu. Donec nec dapibus velit.</p>
<p>Nullam nec euismod tellus. Aliquam sit amet sapien vel metus aliquet auctor at nec massa. Aliquam erat volutpat. Nam consectetur, nulla sed fermentum tristique, nisl purus varius est, at laoreet velit nisi et augue. Integer ullamcorper, turpis vel fermentum efficitur, elit elit sollicitudin mauris, sit amet euismod purus eros eu velit. Sed molestie erat risus, a tristique augue dignissim id. Aliquam sagittis dolor in est commodo auctor.</p>
<p>Proin id lectus nisi. Sed congue blandit augue, eu vulputate nulla bibendum eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam id volutpat metus. Suspendisse rhoncus ipsum eu leo venenatis lacinia. Aliquam erat volutpat. Praesent consequat enim vel sapien lobortis, quis dapibus risus pretium. In porttitor, eros ut facilisis vulputate, tortor nisl sodales magna, ac semper metus urna a orci.</p>
</article>
</div>
</div>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>