Skip to content

Commit 8ae0fcf

Browse files
akinyivakinyiv
committed
profile card template
1 parent 7927fbf commit 8ae0fcf

File tree

7 files changed

+91
-27
lines changed

7 files changed

+91
-27
lines changed

‎challenges/profile_card_component/images/bg-pattern-bottom.svg

Lines changed: 1 addition & 0 deletions
Loading

‎challenges/profile_card_component/images/bg-pattern-card.svg

Lines changed: 1 addition & 0 deletions
Loading

‎challenges/profile_card_component/images/bg-pattern-top.svg

Lines changed: 1 addition & 0 deletions
Loading

‎challenges/profile_card_component/images/favicon-32x32.png

1.04 KB
Loading

‎challenges/profile_card_component/images/image-victor.jpg

2.86 KB
Loading

‎challenges/profile_card_component/index.html

Lines changed: 80 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -30,34 +30,88 @@
3030
</head>
3131
<body class="m-0">
3232
<div
33-
class="flex h-[100vh] w-full flex-col place-content-center text-center"
33+
class="bg-dark-cyan font-kumbh-sans flex h-screen items-center justify-center overflow-hidden"
3434
>
35-
<div>
36-
<a
37-
class="text-optimum-blue hover:text-optimum-darkblue"
38-
href="https://www.frontendmentor.io/challenges/profile-card-component-cfArpWshJ"
39-
target="_blank"
40-
>Frontend Mentor challenge</a
41-
>
42-
</div>
43-
<div>
44-
for
45-
<a
46-
class="text-optimum-blue hover:text-optimum-darkblue"
47-
href="https://github.com/optimumBA"
48-
target="_blank"
49-
>Optimum BH</a
50-
>
51-
Internship.
52-
</div>
35+
<div class="absolute z-40 flex flex-col justify-center">
36+
<div class="flex w-[330px] flex-col items-center rounded-2xl bg-white">
37+
<img
38+
src="./images/bg-pattern-card.svg"
39+
alt="card's parttern"
40+
class="rounded-t-2xl"
41+
/>
42+
<div class="flex flex-col items-center">
43+
<img
44+
src="./images/image-victor.jpg"
45+
alt="victor's image"
46+
class="-mt-[52px] w-24 rounded-full ring-4 ring-white"
47+
/>
48+
<div class="my-4 flex flex-col items-center">
49+
<p class="text-dark-desaturated-blue text-lg font-bold">
50+
Victor Crest <span class="text-dark-gray font-normal">26</span>
51+
</p>
52+
<span class="text-dark-gray bg-white text-sm">London</span>
53+
</div>
54+
</div>
55+
56+
<div class="flex w-full border-t"></div>
5357

54-
<div class="mt-3">
55-
<a
56-
class="text-optimum-blue hover:text-optimum-darkblue"
57-
href="https://github.com/optimumBA/frontend_mentor_challenges/tree/profile_card_component/challenges/profile_card_component"
58-
>Source code</a
59-
>
58+
<div class="my-5 flex gap-12 text-center">
59+
<div>
60+
<p class="text-dark-desaturated-blue text-lg font-bold">80k</p>
61+
<span class="text-dark-gray text-xs">Followers</span>
62+
</div>
63+
<div>
64+
<p class="text-dark-desaturated-blue text-lg font-bold">803k</p>
65+
<span class="text-dark-gray text-xs">Likes</span>
66+
</div>
67+
<div>
68+
<p class="text-dark-desaturated-blue text-lg font-bold">1.4k</p>
69+
<span class="text-dark-gray text-xs">Photos</span>
70+
</div>
71+
</div>
72+
</div>
73+
<div class="mt-8 flex flex-col place-content-center text-center">
74+
<div>Front-end development challenges</div>
75+
<div>
76+
by
77+
<a
78+
class="text-optimum-blue hover:text-optimum-darkblue"
79+
href="https://www.frontendmentor.io/challenges/profile-card-component-cfArpWshJ"
80+
target="_blank"
81+
>Frontend Mentor challenge</a
82+
>
83+
</div>
84+
<div>
85+
for
86+
<a
87+
class="text-optimum-blue hover:text-optimum-darkblue"
88+
href="https://github.com/optimumBA"
89+
target="_blank"
90+
>Optimum BH</a
91+
>
92+
Internship.
93+
</div>
94+
95+
<div class="mt-3">
96+
<a
97+
class="text-optimum-blue hover:text-optimum-darkblue"
98+
href="https://github.com/ngumokenneth/frontend_mentor_challenges/tree/profile_card_component/challenges/profile_card_component"
99+
>Source code</a
100+
>
101+
</div>
102+
</div>
60103
</div>
104+
105+
<img
106+
src="./images/bg-pattern-top.svg"
107+
alt=""
108+
class="relative bottom-72 right-16 lg:bottom-96"
109+
/>
110+
<img
111+
src="./images/bg-pattern-bottom.svg"
112+
alt=""
113+
class="relative left-10 top-60 lg:-left-[180px] lg:top-[500px]"
114+
/>
61115
</div>
62116
</body>
63-
</html>
117+
</html>

‎challenges/profile_card_component/tailwind.config.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,16 @@ module.exports = {
55
colors: {
66
'optimum-blue': '#009efc',
77
'optimum-darkblue': '#0389e1',
8+
'dark-cyan': 'hsl(185, 75%, 39%)',
9+
'dark-desaturated-blue': 'hsl(229, 23%, 23%)',
10+
'dark-grayish-blue': 'hsl(227, 10%, 46%)',
11+
'dark-gray': 'hsl(0, 0%, 59%)',
12+
},
13+
fontFamily: {
14+
'kumbh-sans': ['Kumbh Sans', 'sans-serif'],
815
},
916
},
1017
},
1118
plugins: [],
1219
variants: {},
13-
}
20+
}

0 commit comments

Comments
 (0)