-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
101 lines (100 loc) · 4.24 KB
/
index.html
File metadata and controls
101 lines (100 loc) · 4.24 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/main.css" />
<title>Article Preview Component</title>
</head>
<body
class="bg-light-grayish-blue flex justify-center items-center min-h-screen font-Manrope"
>
<div class="flex bg-white rounded-[12px] mobile:flex-col mobile:w-[315px]">
<section
class="rounded-l-[12px] overflow-clip mobile:rounded-bl-none mobile:rounded-t-[12px]"
>
<img
src="./images/drawers.jpg"
alt="drawers"
class="w-[400px] h-[320px] object-cover object-[left_0rem_top_0rem]mobile:w-[315px] mobile:h-[252px]"
/>
</section>
<section
class="w-[500px] px-[35px] py-[30px] rounded-r-[12px] mobile:w-[315px] mobile:px-[30px] mobile:pb-[15px]"
>
<h1
class="text-2xl text-very-dark-grayish-blue font-bold mobile:text-[16px] mobile:leading-[24px]"
>
Shift the overall look and feel by adding these wonderful touches to
furniture in your home.
</h1>
<p
class="text-[16px] text-desaturated-dark-blue py-5 font-[500] mobile:text-[13px]"
>
Ever been in a room and felt like something was missing? Perhaps it
felt slightly bare and uninviting. I've got some simple tips to help
you make any room feel complete
</p>
<div class="flex justify-between items-center">
<div class="flex items-center gap-5">
<div>
<img
src="./images/avatar-michelle.jpg"
alt="michelle"
class="w-[50px] h-[50px] rounded-full"
/>
</div>
<div>
<h3
class="text-very-dark-grayish-blue font-bold mobile:text-[13px]"
>
Michelle Appleton
</h3>
<p class="text-desaturated-dark-blue mobile:text-[13px]">
28 Jun 2020
</p>
</div>
</div>
<div
class="w-[40px] h-[40px] rounded-full bg-light-grayish-blue flex justify-center items-center relative inline-block group cursor-pointer hover:bg-very-dark-grayish-blue"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-[15px] h-[15px] text-[#6E8098] group-hover:fill-current group-hover:text-white"
>
<path
d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z"
/>
</svg>
<div
class="w-[200px] bg-very-dark-grayish-blue flex justify-between px-5 py-4 absolute bottom-[65px] right-[-80px] rounded-md z-10 shadow-[0_2px_2px_2px_hsl(210_46%_95%)] invisible transition-opacity duration-[300ms] group-hover:visible after:content-[''] after:absolute after:top-[100%] after:left-[70%] after:ml-[-50px] after:border-[10px] after:border-solid after:border-t-[hsl(217_19%_35%)] after:border-b-transparent after:border-x-transparent mobile:after:opacity-0 mobile:py-[21px] mobile:bottom-[-20px] mobile:right-[-30px] mobile:w-[315px] mobile:rounded-b-[12px] mobile:rounded-t-[0px]"
>
<p
class="text-light-grayish-blue tracking-[2.5px] text-[13px]mobile:text-[15px] mobile:tracking-[4px]"
>
SHARE
</p>
<div class="flex items-center gap-[10px]">
<img
src="./images/icon-facebook.svg"
alt="facebook"
class="w-[15px] h-[15px] mobile:w-[20px] mobile:h-[20px]"
/>
<img
src="./images/icon-pinterest.svg"
alt="pinterest"
class="w-[15px] h-[15px] mobile:w-[20px] mobile:h-[20px]"
/>
<img
src="./images/icon-twitter.svg"
alt="twitter"
class="w-[15px] h-[15px] mobile:w-[20px] mobile:h-[20px]"
/>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>