-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog.html
146 lines (135 loc) · 5.13 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
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta -->
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- title and description -->
<meta
name="description"
content="This is a blog of Jo Ignis photographers work"
/>
<title>Ignis Photography - Blog</title>
<!-- icons -->
<link rel="manifest" href="site.webmanifest" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<!-- css -->
<link rel="stylesheet" href="styles/style.css" />
<!-- link to CSS file e.g. "../style.css" -->
<!-- link to JavaScript file
<script src="scripts.js" defer></script>
-->
</head>
<body>
<div class="container">
<!-- .header-main -->
<header class="header-main">
<h1><em>Ignis</em></h1>
<nav class="nav-main">
<a href="index.html" class="nav-text">Home</a>
<a href="blog.html" class="nav-text">Blog</a>
<a href="contact.html" class="nav-text">Contact</a>
<button class="icon">
<img src="images/icons/search1.svg" alt="magnifying glass icon" />
</button>
<button class="small-nav">
<img src="images/icons/bars1.svg" alt="menu selection bars icon" />
</button>
</nav>
</header>
<!-- blog hero -->
<h2 class="normal-hero">Blog</h2>
<!-- .cardlist -->
<section class="cardlist">
<section class="card">
<img
src="images/photos/jellies1.jpg"
alt="jellyfish swimming in the sea"
/>
<button class="category-button">underwater</button>
<button class="category-button">colourful</button>
<h3>Donec fringilla eros metus</h3>
<time class="date-time" datetime="2020-06-07"
>Posted on June 7,2020</time
>
<h4>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo
cupiditate molestias maxime voluptatum distinctio nobis.
</h4>
<a href="article.html" class="link-text">Continue reading</a>
</section>
<section class="card">
<img
src="images/photos/turtle1.jpg"
alt="turle swimming in the ocean"
/>
<button class="category-button">underwater</button>
<button class="category-button">blue</button>
<h3>Donec fringilla eros metus</h3>
<time class="date-time" datetime="2020-06-07"
>Posted on June 7,2020</time
>
<h4>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo
cupiditate molestias maxime voluptatum distinctio nobis. Sit ullam
necessitatibus culpa ea sed impedit quidem sunt commodi aperiam!
Placeat, officiis laboriosam repudiandae laborum pariatur ab
adipisci quibusdam rem iusto!
</h4>
<a href="article.html" class="link-text">Continue reading</a>
</section>
<section class="card">
<img
src="images/photos/water-birds1.jpg"
alt="a group of birds in the water"
/>
<button class="category-button">birds</button>
<button class="category-button">water</button>
<h3>Donec fringilla eros metus</h3>
<time class="date-time" datetime="2020-06-07"
>Posted on June 7,2020</time
>
<h4>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo
cupiditate molestias maxime voluptatum distinctio nobis. Lorem,
ipsum dolor sit amet consectetur adipisicing elit.
</h4>
<a href="article.html" class="link-text">Continue reading</a>
</section>
<section class="card">
<img
src="images/photos/snake1.jpg"
alt="close up of a snake head curled up"
/>
<button class="category-button">reptiles</button>
<button class="category-button">colourful</button>
<h3>Donec fringilla eros metus</h3>
<time class="date-time" datetime="2020-06-07"
>Posted on June 7,2020</time
>
<h4>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo
cupiditate molestias maxime voluptatum distinctio nobis.
</h4>
<a href="article.html" class="link-text">Continue reading</a>
</section>
</section>
<!-- .footer-main -->
<footer class="footer-main">
<a class="icon" href="http://twitter.com">
<img src="images/icons/twitter1.svg" alt="twitter icon" />
</a>
<a href="http://facebook.com" class="icon">
<img src="images/icons/facebook-f1.svg" alt="facebook icon" />
</a>
<a href="http://youtube.com" class="icon">
<img src="images/icons/youtube1.svg" alt="youtube icons" />
</a>
<a href="http://instagram.com" class="icon">
<img src="images/icons/instagram1.svg" alt="instagram icon" />
</a>
</footer>
</div>
</body>
</html>