-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathHome.html
148 lines (123 loc) · 8.37 KB
/
Home.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
<!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>Home | Flicker</title>
<link rel="icon" type="img/png" href="assests/flickr (4).png">
<link rel="stylesheet" href="output.css">
<script src="https://kit.fontawesome.com/57efc2f9b4.js" crossorigin="anonymous"></script>
</head>
<body style="background-color: rgb(243, 243, 243);height: 100%;">
<header class="flex justify-around" style="background-color: black; height: 4rem;color: white;">
<div class="flex">
<img class="cursor-pointer" onclick="location.reload();" src="assests/flickr.png" alt=""
style="height: 4rem;">
<a style="margin-top: 24px;padding-right: 2rem;padding-left: 2rem;" href="#">View</a>
<a style="margin-top: 24px;padding-right: 2rem;" href="#">Explore</a>
<a style="margin-top: 24px;padding-right: 2rem;" href="#">Prints</a>
<a style="margin-top: 24px;padding-right: 2rem;" href="#">Get Pro</a>
</div>
<div class="flex">
<input style="padding-right:15rem;height: 2rem; margin-top: 15px;color: black;"
class="border-none rounded-sm outline-none border-2 px-3 my-2" type="text"
placeholder="Photos ,peoples or groups">
<i class="fa-solid fa-cloud-arrow-up cursor-pointer" style="margin-top: 24px;padding-left: 1rem;"></i>
<i class="fa-solid fa-bell cursor-pointer"
style="color: #ffffff;margin-left: 15px;margin-top: 24px;padding-right: 1rem;"></i>
<button onclick="location.href = 'profile.html';"><img src="assests/profile.jpg" alt="profile"
style="border-radius: 50%;height: 2rem;">
</button>
</div>
</header>
<section class="text-center place-items-center"
style="box-sizing: border-box;margin-left: auto;margin-right: auto;max-width: 80%;">
<div
style="box-sizing: border-box;display: flex;justify-content: space-between;max-width: 1400px;width: 100%;;">
<div style="flex: 1 1 auto;min-width: 0;">
<div
style="align-items: center;display: flex;justify-content: space-between;margin-top: 20px;padding: 16px 0;position: relative">
<a style="color: grey;" href="#">All Activity</a>
</div>
<div style="display: flex;justify-content: center;padding: 40px 20px;text-align: center;">
</div>
<div>
<h1 style="font-size: 28px;line-height: 1.5em;margin: 0 0 12px;">There is no activity to show right
now.</h1>
<p style="font-size: 16px;line-height: 1.5;margin: 0 0 24px;">Check out the recommended
photographers and start following people to see their content here.</p>
</div>
</div>
<div style="flex: 0 0 auto;margin: 20px 0 0 40px;width: 300px;">
<div style="margin-top: 0;">
<div style="box-sizing: border-box;padding-bottom: 20px;position: sticky;will-change: top,bottom;">
<div style="margin-bottom: 20px;width: 100%;height: 230px;">
<div
style="justify-content: center; background-color: #fff;border-radius: 4px;box-sizing: border-box;margin-bottom: 20px;padding: 20px;width: 100%;">
<div>
<h2 class="text-left" style="font-weight: 500; font-size: 15px;">Explore Popular
Photos</h2>
</div>
<div>
<div class="flex flex-row-3 gap-4 justify-between">
<div class="col-span-2">
<img src="assests/profile5.jpg" alt=""
style="height: 100px; padding-right: 0.5rem;">
</div>
<div class="">
<img src="assests/profile7.jpg" alt=""
style="height: 100px;padding-right: 0.5rem;">
</div>
<div class="">
<img src="assests/profile6.jpg" alt="" style="height: 100px;;">
</div>
</div>
</div>
</div>
<div style="margin-bottom: 20px;width: 100%;height: 230px;">
<div
style="background-color: #fff;border-radius: 4px;box-sizing: border-box;margin-bottom: 20px;padding: 20px;width: 100%;">
<div>
<h2 class="text-left" style="font-weight: 500; font-size: 15px;">Flicker
Editorial</h2>
<img src="https://combo.staticflickr.com/pw/images/buddyicon06_r.png#198157442@N06"
alt="">
<p class="text-left">Do you have an instant camera? ’RoidWeek runs from April
23rd–28th and is a great time to celebrate all types of instant film. Get
inspired by this group's instant film creations and share your own.</p>
</div>
</div>
<div style="background-color: #fff;border-radius: 4px;margin-top: 20px;">
<div style=" box-sizing: border-box;padding: 20px;width: 100%;">
<div class="text-sm">
<a style="margin-right: 8px;color: #898989;font-size: 12px;font-weight: 400;line-height: 1"
href="#">About<a>
<a style="margin-right: 8px;color: #898989;font-size: 12px;font-weight: 400;line-height: 1"
href="#">Jobs</a>
<a style="margin-right: 8px;color: #898989;font-size: 12px;font-weight: 400;line-height: 1"
href="#">Blog</a>
<a style="margin-right: 8px;color: #898989;font-size: 12px;font-weight: 400;line-height: 1"
href="#">Developers</a>
<a style="margin-right: 8px;color: #898989;font-size: 12px;font-weight: 400;line-height: 1"
href="#">Guidelines</a>
<a style="margin-right: 8px;color: #898989;font-size: 12px;font-weight: 400;line-height: 1"
href="#">Help</a>
<a style="margin-right: 8px;color: #898989;font-size: 12px;font-weight: 400;line-height: 1"
href="#">Help Forum</a>
<a style="margin-right: 8px;color: #898989;font-size: 12px;font-weight: 400;line-height: 1"
href="#">Privacy Policy</a>
<a style="margin-right: 8px;color: #898989;font-size: 12px;font-weight: 400;line-height: 1"
href="">Cookies</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>