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

Qr code component #143

Open
wants to merge 19 commits into
base: qr_code_component
Choose a base branch
from
Open

Qr code component #143

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
1cfd794
qr_code_component first commit, edited the index.html and added the i…
ngumokenneth Sep 24, 2023
efb04b4
ensured all tests worked right
ngumokenneth Sep 26, 2023
46d49f6
updated the image borders
ngumokenneth Sep 27, 2023
ce1aa41
adjusted the colors and font
ngumokenneth Oct 3, 2023
3828da3
complete qr_code_challege
ngumokenneth Oct 6, 2023
ce4a01b
changed the image reference and adjusted the padding
ngumokenneth Oct 18, 2023
41d75bb
adjusted the padding of text
ngumokenneth Oct 18, 2023
d1c6383
updated the image path
ngumokenneth Oct 18, 2023
a081b00
updated the image path
ngumokenneth Oct 18, 2023
4563d06
all changes complete
ngumokenneth Oct 24, 2023
d459c62
changed location of favicon
ngumokenneth Oct 25, 2023
2f138ec
arranged file directories appropriately
ngumokenneth Oct 25, 2023
d81bfca
arranged file directories appropriately
ngumokenneth Oct 25, 2023
70d86ec
arranged file directories appropriately
ngumokenneth Oct 25, 2023
197fd96
arranged file directories appropriately
ngumokenneth Oct 25, 2023
9e47f01
arranged file directories appropriately
ngumokenneth Oct 25, 2023
9557349
arranged file directories appropriately
ngumokenneth Oct 25, 2023
6fdacab
Fix file structure
ngumokenneth Oct 25, 2023
0278eb8
Remove unnecessary changes
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
Binary file added challenges/qr_code_component/images/image-qr-code.png
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.
68 changes: 43 additions & 25 deletions challenges/qr_code_component/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,35 +28,53 @@
<link rel="manifest" href="../site.webmanifest" />
<link rel="stylesheet" href="style.css" />
</head>
<body class="m-0">
<body class="font-outfit m-0">
<div
class="flex h-[100vh] w-full flex-col place-content-center text-center"
class="bg-Light-gray flex h-screen flex-col items-center justify-center py-40"
>
<div>
<a
class="text-optimum-blue hover:text-optimum-darkblue"
href="https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H"
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 class="w-80 rounded-xl bg-white">
<div class="rounded-lg py-4 px-4">
<img src="images/image-qr-code.png" alt="" class="rounded-lg" />
</div>
<div class="px-4 text-center">
<h1 class="font-outfit text-Dark-blue px-4 pb-4 text-xl font-bold">
Improve your front-end skills by building projects
</h1>
<p class="text-Grayish-blue px-6 pb-8 text-sm">
Scan the QR code to visit Frontend Mentor and take your coding
skills to the next level
</p>
</div>
</div>
<div
class="mt-6 flex h-[100vh] flex-col place-content-center text-center"
>
<div>
<a
class="text-optimum-blue hover:text-optimum-darkblue"
href="https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H"
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/qr_code_component/challenges/qr_code_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/qr_code_component/challenges/qr_code_component"
>Source code</a
>
</div>
</div>
</div>
</body>
Expand Down
2 changes: 2 additions & 0 deletions challenges/qr_code_component/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;
7 changes: 7 additions & 0 deletions challenges/qr_code_component/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@ module.exports = {
colors: {
'optimum-blue': '#009efc',
'optimum-darkblue': '#0389e1',
White: 'hsl(0, 0%, 100%)',
'Light-gray': 'hsl(212, 45%, 89%)',
'Grayish-blue': 'hsl(220, 15%, 55%)',
'Dark-blue': 'hsl(218, 44%, 22%)',
},
fontFamily: {
outfit: ['Outfit', 'sans-serif'],
},
},
},
Expand Down
Loading