-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (136 loc) · 4.85 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
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
<!--
Author: Sho Carter-Daniel <shosilva@icloud.com>
HTML Help
- W3Schools - https://www.w3schools.com/html/
- MDN - https://developer.mozilla.org/en-US/docs/Web/HTML
============================================================
Definition of semantic tags can be found here:
https://www.w3schools.com/html/html5_semantic_elements.asp
============================================================
-->
<!-- Declare the type of document that this is! -->
<!DOCTYPE html>
<html lang="en">
<!-- HEAD - like inside your head / mind. It cannot be seen, but dictates what will be shown -->
<head>
<title>Instagram</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<!-- BODY - what the world will see -->
<body>
<!--
HEADER OF WEBSITE
Navigation can go in here
-->
<header>
<nav>
<ul>
<li><a><i class="fa fa-camera"></i></a></li>
<li class="logo"><a><i class="fa fa-instagram"></i> Instagram</a></li>
<li><a><i class="fa fa-inbox"></i></a></li>
</ul>
</nav>
</header>
<!-- MAIN CONTENT OF WEBSITE -->
<main>
<!--
WEBSITES CAN BE SPLIT INTO SECTIONS
THIS IS THE FEEDS SECTION
-->
<section class="stories">
<div>
<div class="stories__one">
<img class="new" src="https://plchldr.co/i/400x400?bg=e74c3c" alt="plchldr.co" />
</div>
<div class="stories__one">
<img class="new" src="https://plchldr.co/i/400x400?bg=e67e22" alt="plchldr.co" />
</div>
<div class="stories__one">
<img class="new" src="https://plchldr.co/i/400x400?bg=f1c40f" alt="plchldr.co" />
</div>
<div class="stories__one">
<img src="https://plchldr.co/i/400x400?bg=1abc9c" alt="plchldr.co" />
</div>
<div class="stories__one">
<img src="https://plchldr.co/i/400x400?bg=2ecc71" alt="plchldr.co" />
</div>
<div class="stories__one">
<img src="https://plchldr.co/i/400x400?bg=3498db" alt="plchldr.co" />
</div>
<div class="stories__one">
<img src="https://plchldr.co/i/400x400?bg=9b59b6" alt="plchldr.co" />
</div>
<div class="stories__one">
<img src="https://plchldr.co/i/400x400?bg=34495e" alt="plchldr.co" />
</div>
</div>
</section>
<!--
WEBSITES CAN BE SPLIT INTO SECTIONS
THIS IS THE FEEDS SECTION
-->
<section class="feeds">
<article class="feeds__one">
<div class="user-information"><i class="fa fa-user-circle-o" aria-hidden="true"></i> James Carter</div>
<img data-likes="2" src="photo1.jpg" />
<div class="content">
<div class="action">
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-comment-o" aria-hidden="true"></i>
<i class="fa fa-share-square-o" aria-hidden="true"></i>
<i class="fa fa-bookmark-o" aria-hidden="true"></i>
</div>
<div><p data-likes="9601"></p></div>
<div><p data-time-ago="1 minute ago"></p></div>
</div>
</article>
<article class="feeds__one">
<div class="user-information"><i class="fa fa-user-circle-o" aria-hidden="true"></i> John Brown</div>
<img data-likes="2" src="photo2.jpg" />
<div class="content">
<div class="action">
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-comment-o" aria-hidden="true"></i>
<i class="fa fa-share-square-o" aria-hidden="true"></i>
<i class="fa fa-bookmark-o" aria-hidden="true"></i>
</div>
<div><p data-likes="2069"></p></div>
<div><p data-time-ago="12 minutes ago"></p></div>
</div>
</article>
<article class="feeds__one">
<div class="user-information"><i class="fa fa-user-circle-o" aria-hidden="true"></i> John Brown</div>
<img data-likes="2" src="photo3.jpg" />
<div class="content">
<div class="action">
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-comment-o" aria-hidden="true"></i>
<i class="fa fa-share-square-o" aria-hidden="true"></i>
<i class="fa fa-bookmark-o" aria-hidden="true"></i>
</div>
<div><p data-likes="199"></p></div>
<div><p data-time-ago="15 minutes ago"></p></div>
</div>
</article>
</section>
</main>
<!--
FOOTER: You have got to have a footer!
How can you have a website without a footer
-->
<footer>
<nav>
<ul>
<li><a><i class="fa fa-home" aria-hidden="true"></i></a></li>
<li><a><i class="fa fa-search" aria-hidden="true"></i></a></li>
<li><a><i class="fa fa-plus-square-o" aria-hidden="true"></i></a></li>
<li><a><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
<li><a><i class="fa fa-user-circle-o" aria-hidden="true"></i></a></li>
</ul>
</nav>
</footer>
<script src="instagram.js"></script>
</body>
</html>