-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
60 lines (48 loc) · 5.51 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
<!DOCTYPE html>
<html lang="en-us" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A profile card component made by Yari Morcus. A challenge from Frontend Mentor">
<meta name="keywords" content="frontendmentor frontend yarimorcus yari morcus coding challenge profile card component">
<meta name="author" content="Yari Morcus">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="canonical" href="https://yarimorcus.github.io/profile-card-component/">
<!-- custom CSS -->
<style>*,::after,::before{box-sizing:border-box}blockquote,body,dd,dl,figcaption,figure,h1,h2,h3,h4,h5,h6,li,p{margin:0}ol[role=list],ul[role=list]{list-style:none}button,input,select,textarea{margin:0;padding:0;font-family:inherit;font-size:100%}html{font-size:10px}html:focus-within{scroll-behavior:smooth}body{display:flex;flex-direction:column;min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5;background-image:url(img/bg-pattern-top.svg),url(img/bg-pattern-bottom.svg);background-position:-45rem -41rem,47vw 50vh;background-repeat:no-repeat;background-color:hsl(185deg,75%,39%);background-size:65rem 65rem,65rem 65rem}@media (min-width:768px){body{background-position:-17.4rem -49rem,51.4vw 48vh;background-size:85rem 85rem,85rem 85rem}}main{display:flex;align-items:center;flex:1}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img{display:block;max-width:100%}@media (prefers-reduced-motion:reduce){*,::after,::before{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}}.footer{padding:0 1.28rem 1.28rem;font-family:"Kumbh Sans",sans-serif;font-size:1.2rem;color:hsl(0deg,0%,0%)}.footer__link{color:hsl(0deg,0%,0%)}.footer__link:hover{color:#333}.footer__link:focus-visible{outline:2px solid hsl(0deg,0%,0%);border-radius:1px}@font-face{font-family:"Kumbh Sans";src:url(fonts/kumbh-sans-regular.woff2) format("woff2"),url(fonts/kumbh-sans-regular.woff) format("woff"),url(fonts/kumbh-sans-regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"Kumbh Sans";src:url(fonts/kumbh-sans-bold.woff2) format("woff2"),url(fonts/kumbh-sans-bold.woff) format("woff"),url(fonts/kumbh-sans-bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}.profile{width:85%;max-width:32rem;margin:0 auto;font-family:"Kumbh Sans",sans-serif;font-size:1.8rem;background:url(img/bg-pattern-card.svg) #fff no-repeat;border-radius:1.5rem}@media (min-width:568px){.profile{max-width:34rem}}.profile__img{margin:9rem auto 0;border-radius:100%;border:.5rem solid hsl(0deg,0%,100%)}.profile__header{text-align:center}.profile__name{display:inline-block;margin-top:1.5rem}.profile__age{margin-left:.5rem}.profile__city{margin:.5rem auto 0;font-size:1.3rem}.profile__stats{display:flex;justify-content:space-evenly;margin:3rem 0 2.5rem;padding-top:3rem;border-top:1px solid #d5d5d5}.profile__followers,.profile__likes,.profile__photos{text-align:center;font-size:1rem;letter-spacing:2px}.profile__age,.profile__city,.profile__followers,.profile__likes,.profile__photos{color:hsl(227deg,10%,46%)}.profile__followers-count,.profile__likes-count,.profile__name,.profile__photos-count{font-family:"Kumbh Sans",sans-serif;font-weight:700;font-size:1.8rem;color:hsl(229deg,23%,23%)}</style>
<title>Profile card component | Frontend Mentor challenge</title>
<meta property="og:type" content="website">
<meta property="og:url" content="https://yarimorcus.github.io/profile-card-component">
<meta property="og:title" content="Profile card component challenge">
<meta property="og:description" content="A challenge from Frontend Mentor">
<meta property="og:image" content="screenshot.png">
<meta property="og:image:width" content="2160">
<meta property="og:image:height" content="1300">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Profile card component challenge">
<meta name="twitter:description" content="A challenge from Frontend Mentor">
<meta name="twitter:image" content="screenshot.png">
<meta name="twitter:image:alt" content="A thumbnail of the profile card component">
</head>
<body>
<main>
<article class="profile">
<header class="profile__header">
<img class="profile__img" src="img/image-victor.webp" alt="Portrait of Victor Crest" width="96" height="96">
<h1 class="profile__name">Victor Crest</h1>
<span class="profile__age">26</span>
<div class="profile__city">London</div>
</header> <!-- .profile__header -->
<footer class="profile__stats">
<p class="profile__followers"><span class="profile__followers-count">80K</span><br>Followers</p>
<p class="profile__likes"><span class="profile__likes-count">803K</span><br>Likes</p>
<p class="profile__photos"><span class="profile__photos-count">1.4K</span><br>Photos</p>
</footer> <!-- .profile__stats -->
</article> <!-- .profile -->
</main>
<footer class="footer">
Challenge by <a class="footer__link" href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a class="footer__link" href="https://www.linkedin.com/in/yarimorcus" target="_blank">Yari Morcus</a>.
</footer> <!-- .footer -->
</body>
</html>