-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblog.html
138 lines (129 loc) · 5.8 KB
/
blog.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
<!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>Blogs</title>
<link rel = "stylesheet" href = "/blog.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<body>
<!--Navigation-->
<nav>
<div class="menu">
<button class = "logo"><span style="color: white; font-size: large;">ZS</span></button>
<ul>
<li><a href = "index.html">Home</a></li>
<li><a href = "about.html" class="about">About</a></li>
<li><a href = "portfolio.html" class="portfolio">Portfolio</a></li>
<li><a href = "#blog" class="blog" style="color: #7A35EA; text-decoration: underline; text-underline-offset: 2px;">Blogs</a></li>
</ul>
</div>
<div class="social">
<div class = "media github">
<a href = "https://github.com/zealshah29">
<img src = "/images/Social media logo github.svg" class = "images" alt = "github">
</a>
</div>
<div class = "media linkedIn">
<a href = "https://www.linkedin.com/in/zeal-shah-60214b121/">
<img src = "/images/Social media logo linkdin.svg" class = "images" alt = "linkedIn">
</a>
</div>
<div class = "media Behance">
<a href = "https://www.behance.net/zealshah5">
<img src = "/images/Social media logo Behance.svg" class = "images" alt = "Behance">
</a>
</div>
<div class = "media YouTube">
<a href = "https://www.youtube.com/channel/UCh44B2ZjMoUtRWTfi7G9yTA">
<img src = "/images/Youtube.svg" class = "images" alt = "YouTube">
</a>
</div>
</div>
<a href="contact.html">
<button class = "contact">
Contact Me
</button>
</a>
</nav>
<h2 class = "section title">Blogs</h2>
<!--First page-->
<section class="blog_section" id="blog">
<img src="/images/Blog technical.png" alt = "technical blog" class="img_technical">
<div class="rectangle"></div>
<h1 class="heading">Technical<br></h1>
<span class = "text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra auctor
morbi vestibulum morbi. Amet ipsum malesuada bibendum pharetra volutpat eget sed. </span>
<a href=""><span class = "dot 1"></span></a>
<a href=""><span class = "dot 2"></span></a>
<a href="#blog_page_2">
<span class="material-icons">
keyboard_double_arrow_down
</span>
</a>
</section>
<!--Second Page-->
<h2 class="title">Blogs</h2>
<section id="blog_page_2">
<!--blog 1-->
<div class = "grid_1">
<img src = "/images/blog (life) 1.png" alt = "Blog Image" class = "blog_img 1">
<div class = "blog_data">
<h3 class = "blog_title 1"><b> Title</b></h5>
<p>
<span class = "blog_type">Life<br></span>
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Ex doloremque accusamus sunt nostrum, dolor dignissimos odit?
Iusto, mollitia, voluptas amet iure obcaecati, sint explicabo id quas
illo nemo laborum nulla temporibus qui dicta minima sunt vitae.
</p>
</div>
</div>
<!--blog 2-->
<div class = "grid_2">
<img src = "/images/Blog (tech) 1.png" alt = "Blog Image" class = "blog_img 2">
<div class = "blog_data">
<h3 class = "blog_title 2"><b> Title</b></h5>
<p>
<span class = "blog_type">Tech<br></span>
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Ex doloremque accusamus sunt nostrum, dolor dignissimos odit?
Iusto, mollitia, voluptas amet iure obcaecati, sint explicabo id quas
illo nemo laborum nulla temporibus qui dicta minima sunt vitae.
</p>
</div>
</div>
<!--blog 3-->
<div class = "grid_3">
<img src = "/images/blog (life) 2.png" alt = "Blog Image" class = "blog_img 3">
<div class = "blog_data">
<h3 class = "blog_title 3"><b> Title</b></h5>
<p>
<span class = "blog_type">Life<br></span>
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Ex doloremque accusamus sunt nostrum, dolor dignissimos odit?
Iusto, mollitia, voluptas amet iure obcaecati, sint explicabo id quas
illo nemo laborum nulla temporibus qui dicta minima sunt vitae.
</p>
</div>
</div>
<!--blog 4-->
<div class = "grid_4">
<img src = "/images/Blog (tech) 2.png" alt = "Blog Image" class = "blog_img 4">
<div class = "blog_data">
<h3 class = "blog_title 4"><b> Title</b></h5>
<p>
<span class = "blog_type">Tech<br></span>
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Ex doloremque accusamus sunt nostrum, dolor dignissimos odit?
Iusto, mollitia, voluptas amet iure obcaecati, sint explicabo id quas
illo nemo laborum nulla temporibus qui dicta minima sunt vitae.
</p>
</div>
</div>
</section>
</body>
</html>