Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stats preview card component #146

Open
wants to merge 16 commits into
base: stats_preview_card_component
Choose a base branch
from
Open

Stats preview card component #146

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
14254b8
stats_preview_card_component first commit
ngumokenneth Sep 24, 2023
a051281
edited the image position
ngumokenneth Sep 28, 2023
32a7bc5
updated the background colour paletes
ngumokenneth Sep 30, 2023
98f144d
ensured all tests worked right
ngumokenneth Oct 1, 2023
74ee408
changed the desktop layout
ngumokenneth Oct 1, 2023
1784959
changed images layouts and fonts
ngumokenneth Oct 4, 2023
5acfc2b
added the custom fonts and colors
ngumokenneth Oct 4, 2023
c0aa338
adjusted content position
ngumokenneth Oct 6, 2023
6234274
adjusted the design by adding grid
ngumokenneth Oct 8, 2023
259f6e3
adjusted the width of the images, adjusted the padding and margins of…
ngumokenneth Oct 18, 2023
a59df83
adjusted the background color
ngumokenneth Oct 22, 2023
9d9f679
removed unrequired font link in the style.css file
ngumokenneth Oct 24, 2023
01f1064
changed location of favicon
ngumokenneth Oct 25, 2023
4613de7
placed image directory into the right position
ngumokenneth Oct 25, 2023
c665e98
fix unnecessary changes
ngumokenneth Oct 25, 2023
a396df1
Fix file structure
ngumokenneth Oct 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 challenges/images/android-chrome-192x192.png → ...mponent/images/android-chrome-192x192.png
View file
Open in desktop
File renamed without changes
0 challenges/images/android-chrome-512x512.png → ...mponent/images/android-chrome-512x512.png
View file
Open in desktop
File renamed without changes
0 challenges/images/apple-touch-icon.png → ...ard_component/images/apple-touch-icon.png
View file
Open in desktop
File renamed without changes
0 challenges/images/favicon-16x16.png → ...w_card_component/images/favicon-16x16.png
View file
Open in desktop
File renamed without changes
0 challenges/images/favicon-32x32.png → ...w_card_component/images/favicon-32x32.png
View file
Open in desktop
File renamed without changes
Binary file added challenges/stats_preview_card_component/images/image-header-desktop.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added challenges/stats_preview_card_component/images/image-header-mobile.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
106 changes: 82 additions & 24 deletions challenges/stats_preview_card_component/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,36 +27,94 @@
/>
<link rel="manifest" href="../site.webmanifest" />
<link rel="stylesheet" href="style.css" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-0">
<body class="bg-very-dark-blue m-0">
<div
class="flex h-[100vh] w-full flex-col place-content-center text-center"
class="font-inter flex flex-col items-center justify-center lg:h-screen"
>
<div>
<a
class="text-optimum-blue hover:text-optimum-darkblue"
href="https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62"
target="_blank"
>Frontend Mentor challenge</a
<div
class="flex w-8/12 flex-col overflow-hidden rounded-lg bg-white lg:flex-row"
>
<div
class="bg-dark-desaturated-blue col-span-2 flex flex-col items-center text-center text-white lg:items-start lg:justify-center lg:text-left"
>
<div class="lg:w-10/12">
<div class="py-4 px-6">
<h1 class="text-xl font-bold lg:text-3xl">
Get <span class="text-soft-violet">insights</span> that help
your business grow.
</h1>
<p class="pt-3 text-xs lg:pr-10">
Discover the benefits of data analytics and make better
decisions regarding revenue, customer experience, and overall
efficiency.
</p>
</div>
<div class="flex flex-col py-6 lg:flex-row lg:gap-12 lg:px-6">
<div class="text-xl font-bold">
10k+
<span class="block text-xs font-light uppercase"
>companies</span
>
</div>
<div class="py-4 text-xl font-bold lg:py-0">
314<span class="block text-xs font-light uppercase"
>templates</span
>
</div>
<div class="text-xl font-bold">
12m+
<span class="block pb-4 text-xs font-light uppercase"
>queries</span
>
</div>
</div>
</div>
</div>
<div class="relative order-first lg:order-last lg:w-10/12">
<img
src="images/image-header-mobile.jpg"
alt="three ladies at work"
class="h-full w-full lg:hidden xl:hidden"
/>
<img
src="images/image-header-desktop.jpg"
alt="three ladies at work"
class="hidden lg:block"
/>
<div class="bg-soft-violet/40 absolute inset-y-0 h-full w-full"></div>
</div>
</div>
<div>
for
<a
class="text-optimum-blue hover:text-optimum-darkblue"
href="https://github.com/optimumBA"
target="_blank"
>Optimum BH</a
>
Internship.
</div>
<div
class="mt-4 flex flex-col place-content-center text-center text-white"
>
<div>
<a
class="text-optimum-blue hover:text-optimum-darkblue"
href="https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62"
target="_blank"
>Frontend Mentor challenge</a
>
</div>
<div>
for
<a
class="text-optimum-blue hover:text-optimum-darkblue"
href="https://github.com/optimumBA"
target="_blank"
>Optimum BH</a
>
Internship.
</div>

<div class="mt-3">
<a
class="text-optimum-blue hover:text-optimum-darkblue"
href="https://github.com/optimumBA/frontend_mentor_challenges/tree/stats_preview_card_component/challenges/stats_preview_card_component"
>Source code</a
>
<div class="mt-3">
<a
class="text-optimum-blue hover:text-optimum-darkblue"
href="https://github.com/ngumokenneth/frontend_mentor_challenges/tree/stats_preview_card_component/challenges/stats_preview_card_component"
>Source code</a
>
</div>
</div>
</div>
</body>
Expand Down
1 change: 1 addition & 0 deletions challenges/stats_preview_card_component/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Kumbh+Sans:wght@400;700&family=Manrope:wght@600;800&family=Outfit:wght@400;700&family=Overpass:wght@300;600&family=Red+Hat+Display:wght@500;700;800&family=Ubuntu:ital,wght@0,700;1,400&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
9 changes: 9 additions & 0 deletions challenges/stats_preview_card_component/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,15 @@ module.exports = {
colors: {
'optimum-blue': '#009efc',
'optimum-darkblue': '#0389e1',
'very-dark-blue': 'hsl(233, 47%, 7%)',
'soft-violet': 'hsl(277, 64%, 61%)',
'dark-desaturated-blue': 'hsl(244, 38%, 16%)',
white: 'hsl(0, 0%, 100%)',
'slightly-transparent-whites': 'hsla(0, 0%, 100%, 0.75)',
'slightly-transparent-white': 'hsla(0, 0%, 100%, 0.6)',
},
fontFamily: {
inter: ['Inter', 'sans-serif'],
},
},
},
Expand Down
1 change: 1 addition & 0 deletions challenges/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Outfit:wght@400;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
Loading