-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
91 lines (83 loc) · 4.63 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
<!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">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
<link rel="preconnect" href="https://fonts.googleapis.com" >
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin >
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;700&display=swap" rel="stylesheet">
<title>Frontend Mentor | Article preview component</title>
<link rel="stylesheet" href="./assets/css/style.min.css">
<script src="./index.js" defer></script>
</head>
<body>
<main>
<article class="article">
<div class="image">
<img src="./assets/images/drawers.jpg" alt="article image" />
</div>
<div class="content">
<h1>
Shift the overall look and feel by adding these wonderful touches to
furniture in your home
</h1>
<p>
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>
<div class="author">
<img
src="./assets/images/avatar-michelle.jpg"
alt="profile picture of Michelle"
/>
<div class="authorDetails">
<h2><a href="#" target="_blank">Michelle Appleton</a></h2>
<p>28 Jun 2020</p>
</div>
</div>
<div class="share">
<a
id="shareBtn"
href="#"
aria-label="share"
title="share"
target="_blank"
>
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="13">
<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>
</a>
<div id="shareBox">
<p>Share</p>
<a href="#" aria-label="facebook" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0z"/></svg> </a>
<a href="#" aria-label="twitter" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17"><path d="M20 2.172a8.192 8.192 0 01-2.357.646 4.11 4.11 0 001.804-2.27 8.22 8.22 0 01-2.605.996A4.096 4.096 0 0013.847.248c-2.65 0-4.596 2.472-3.998 5.037A11.648 11.648 0 011.392 1a4.109 4.109 0 001.27 5.478 4.086 4.086 0 01-1.858-.513c-.045 1.9 1.318 3.679 3.291 4.075a4.113 4.113 0 01-1.853.07 4.106 4.106 0 003.833 2.849A8.25 8.25 0 010 14.658a11.616 11.616 0 006.29 1.843c7.618 0 11.922-6.434 11.663-12.205A8.354 8.354 0 0020 2.172z"/></svg> </a>
<a href="#" aria-label="fa-pinterest" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M10 0C4.478 0 0 4.477 0 10c0 4.237 2.636 7.855 6.356 9.312-.088-.791-.167-2.005.035-2.868.182-.78 1.172-4.97 1.172-4.97s-.299-.6-.299-1.486c0-1.39.806-2.428 1.81-2.428.852 0 1.264.64 1.264 1.408 0 .858-.545 2.14-.828 3.33-.236.995.5 1.807 1.48 1.807 1.778 0 3.144-1.874 3.144-4.58 0-2.393-1.72-4.068-4.177-4.068-2.845 0-4.515 2.135-4.515 4.34 0 .859.331 1.781.745 2.281a.3.3 0 01.069.288l-.278 1.133c-.044.183-.145.223-.335.134-1.249-.581-2.03-2.407-2.03-3.874 0-3.154 2.292-6.052 6.608-6.052 3.469 0 6.165 2.473 6.165 5.776 0 3.447-2.173 6.22-5.19 6.22-1.013 0-1.965-.525-2.291-1.148l-.623 2.378c-.226.869-.835 1.958-1.244 2.621.937.29 1.931.446 2.962.446 5.522 0 10-4.477 10-10S15.522 0 10 0z"/></svg> </a>
</div>
</div>
</div>
</div>
</article>
<footer>
<div class="attribution">
<p>
Challenge by
<a href="https://www.frontendmentor.io">Frontend Mentor</a>. Coded
by
<a href="https://github.com/faha1999/" title="faha1999">
faha1999
</a>
</p>
</div>
</footer>
</main>
</body>
</html>