-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
160 lines (146 loc) · 7.27 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
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reddit clone</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="./assets/stylesheet/main.css">
</head>
<body>
<!-- primary header -->
<header class="primary-header">
<h1><span><i class="fab fa-reddit"></i></span>Reddit</h1>
<div class="small-srch-box">
<svg width="30px" class="ssdjlj-0 zSeAY" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M15.8286,15.8998 C15.3466,16.3788 12.6326,15.5598 8.5516,11.4798 C4.4706,7.3968 3.6486,4.6858 4.1316,4.2038 C4.3566,3.9788 4.9286,3.9208 5.9126,4.3518 C5.6166,4.5678 5.3306,4.8008 5.0666,5.0658 C5.0536,5.0798 5.0416,5.0948 5.0266,5.1098 C5.5756,6.4268 6.8946,8.4088 9.2596,10.7728 C11.6206,13.1338 13.6046,14.4538 14.9246,15.0028 C14.9376,14.9898 14.9526,14.9778 14.9666,14.9638 C15.2316,14.6988 15.4646,14.4128 15.6786,14.1178 C16.1096,15.1028 16.0526,15.6748 15.8286,15.8998 M16.7526,11.8998 C17.4066,9.5458 16.8136,6.9138 14.9666,5.0658 C13.6436,3.7438 11.8866,3.0148 10.0166,3.0148 C9.3686,3.0148 8.7356,3.1078 8.1286,3.2768 C5.7306,1.7598 3.9176,1.5898 2.7176,2.7898 C1.4036,4.1028 2.0736,6.1918 3.2866,8.1688 C2.6446,10.5128 3.2276,13.1258 5.0666,14.9638 C6.3886,16.2868 8.1456,17.0148 10.0166,17.0148 C10.6536,17.0148 11.2746,16.9178 11.8736,16.7518 C13.0856,17.4938 14.3406,18.0318 15.4316,18.0318 C16.1156,18.0318 16.7366,17.8198 17.2426,17.3138 C18.4416,16.1138 18.2706,14.2988 16.7526,11.8998"></path></svg>
<input class="input" type="text" placeholder="r/html">
<span><i class="fas fa-sort-down"></i></span>
</div>
<div class="fas fa-search Search-box"><input class="main-input" type="text" placeholder="Search"></div>
<span><i class="fas fa-chart-line"></i></span>
<span>
<i class="fas fa-sort-amount-up"></i>
</span>
<abbr title="Original content">OC</abbr>
<button class="btn login">LOG IN</button>
<button class="btn sign-up">SIGN UP</button>
<div>
<span><i class="fas fa-user"></i></span>
<span><i class="fas fa-sort-down"></i></span>
</div>
</header>
<!-- sub header -->
<div class="sub-header">
<div class="sub-hdr-text">
<svg width="40px" class="ssdjlj-0 zSeAY" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M15.8286,15.8998 C15.3466,16.3788 12.6326,15.5598 8.5516,11.4798 C4.4706,7.3968 3.6486,4.6858 4.1316,4.2038 C4.3566,3.9788 4.9286,3.9208 5.9126,4.3518 C5.6166,4.5678 5.3306,4.8008 5.0666,5.0658 C5.0536,5.0798 5.0416,5.0948 5.0266,5.1098 C5.5756,6.4268 6.8946,8.4088 9.2596,10.7728 C11.6206,13.1338 13.6046,14.4538 14.9246,15.0028 C14.9376,14.9898 14.9526,14.9778 14.9666,14.9638 C15.2316,14.6988 15.4646,14.4128 15.6786,14.1178 C16.1096,15.1028 16.0526,15.6748 15.8286,15.8998 M16.7526,11.8998 C17.4066,9.5458 16.8136,6.9138 14.9666,5.0658 C13.6436,3.7438 11.8866,3.0148 10.0166,3.0148 C9.3686,3.0148 8.7356,3.1078 8.1286,3.2768 C5.7306,1.7598 3.9176,1.5898 2.7176,2.7898 C1.4036,4.1028 2.0736,6.1918 3.2866,8.1688 C2.6446,10.5128 3.2276,13.1258 5.0666,14.9638 C6.3886,16.2868 8.1456,17.0148 10.0166,17.0148 C10.6536,17.0148 11.2746,16.9178 11.8736,16.7518 C13.0856,17.4938 14.3406,18.0318 15.4316,18.0318 C16.1156,18.0318 16.7366,17.8198 17.2426,17.3138 C18.4416,16.1138 18.2706,14.2988 16.7526,11.8998"></path></svg>
<span class="text">r/html</span>
</div>
</div>
<div class="posts"><span class="post">Posts</span></div>
<!-- menu bar -->
<div class="menu-bar">
<div class="View">
<span>View</span>
<span><i class="fas fa-clipboard-list"></i></span>
<span><i class="fas fa-bars"></i></span>
<span><i class="fas fa-align-justify"></i></span>
</div>
<div class="sort">
<span>sort</span>
<span><i class="fab fa-gripfire"></i>
</span>HOT<span>
<i class="fas fa-sort-down"></i>
</span>
</div>
</div>
<!-- flexbox experiment -->
<!-- <section class="test">
<div class="check one"></div>
<div class="check two"></div>
<div class="check three"></div>
</section>
-->
<!-- main section -->
<main class="main-sec">
<!-- wrapper -->
<section class="wrapper">
<!-- posts section -->
<section class="Posts-sec">
<!-- post section header -->
<div class="post-sec-header">
<span><i class="fab fa-reddit"></i></span>
<div>
<span class="post-hdr">Join the 17.0k peoples in the r/HTML community</span>
</div>
<button>GET STARTED</button>
<span></span>
</div>
</section>
<section class="adds-sec">
<div class="comp-details card">
<h2>community details</h2>
<p class="first-para">
<svg width="35px" class="ssdjlj-0 zSeAY" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M15.8286,15.8998 C15.3466,16.3788 12.6326,15.5598 8.5516,11.4798 C4.4706,7.3968 3.6486,4.6858 4.1316,4.2038 C4.3566,3.9788 4.9286,3.9208 5.9126,4.3518 C5.6166,4.5678 5.3306,4.8008 5.0666,5.0658 C5.0536,5.0798 5.0416,5.0948 5.0266,5.1098 C5.5756,6.4268 6.8946,8.4088 9.2596,10.7728 C11.6206,13.1338 13.6046,14.4538 14.9246,15.0028 C14.9376,14.9898 14.9526,14.9778 14.9666,14.9638 C15.2316,14.6988 15.4646,14.4128 15.6786,14.1178 C16.1096,15.1028 16.0526,15.6748 15.8286,15.8998 M16.7526,11.8998 C17.4066,9.5458 16.8136,6.9138 14.9666,5.0658 C13.6436,3.7438 11.8866,3.0148 10.0166,3.0148 C9.3686,3.0148 8.7356,3.1078 8.1286,3.2768 C5.7306,1.7598 3.9176,1.5898 2.7176,2.7898 C1.4036,4.1028 2.0736,6.1918 3.2866,8.1688 C2.6446,10.5128 3.2276,13.1258 5.0666,14.9638 C6.3886,16.2868 8.1456,17.0148 10.0166,17.0148 C10.6536,17.0148 11.2746,16.9178 11.8736,16.7518 C13.0856,17.4938 14.3406,18.0318 15.4316,18.0318 C16.1156,18.0318 16.7366,17.8198 17.2426,17.3138 C18.4416,16.1138 18.2706,14.2988 16.7526,11.8998"></path>
</svg>
<span>r/HTML</span>
</p>
<div class="subscribers">
<div class="frist-child">
<span class="users">17.0K</span>
<p>Subscribers</p>
</div>
<div>
<span class="users">28</span>
<p>Online</p>
</div>
</div>
<button>subscribe</button>
<button>create post</button>
</div>
<div class="moderators card">
<h2>
<span>moderators</span>
<span><i class="fas fa-envelope"></i></span>
</h2>
<p>
<a href="#">u/Snookerman</a>
<span>Mod</span>
</p>
<p>
<a href="#">u/roomzinchina</a>
<span>Mod // Developer at OvalBit</span>
</p>
<a class="helpr-bot" href="#">u/FlairHelperBot</a>
<button class="view-mod">view all moderators</button>
</div>
<div class="copyright-sec card">
<div class="terms">
<div>
<a href="#">About</a>
<a href="#">Careers</a>
<a href="#">aress</a>
</div>
<div>
<a href="#">Advertise</a>
<a href="#">Blog</a>
<a href="#">Hela</a>
</div>
<div>
<a href="#">The Reddit Aaa</a>
<a href="#">Reddit Coins</a>
<a href="#">Reddit aremium</a>
<a href="#">Reddit Gifts</a>
</div>
</div>
<div class="copyright">
<p>Content Policy | Privacy Policy</p>
<p>User Agreement | Mod Policy</p>
<small>© 2019 Reddit, Inc.All rights reserved</small>
</div>
</div>
</section>
</section>
</main>
<img src="" alt="">
<script src="./main.bundle.js"></script>
</body>
</html>