Skip to content

Order summary component #145

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

Open
wants to merge 8 commits into
base: order_summary_component
Choose a base branch
from
Open

Order summary component #145

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
163a26f
checked on failing test
ngumokenneth Oct 3, 2023
f5749b3
added the background pattern
ngumokenneth Oct 8, 2023
4ec985d
changed the font, margins and paddings. Also changed the path of the …
ngumokenneth Oct 18, 2023
22b5de9
moved the images directory into the order_summary_directory
ngumokenneth Oct 18, 2023
3a8641f
Fix the file structure
ngumokenneth Oct 25, 2023
14b598a
Fix the path of images
ngumokenneth Oct 25, 2023
9eb619d
Improve the design and fix file structure
ngumokenneth Oct 29, 2023
aa50785
Fix file structure
ngumokenneth Oct 29, 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
1 change: 1 addition & 0 deletions challenges/images/icon-music.svg
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.
1 change: 1 addition & 0 deletions challenges/images/illustration-hero.svg
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.
1 change: 1 addition & 0 deletions challenges/images/pattern-background-desktop.svg
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.
1 change: 1 addition & 0 deletions challenges/images/pattern-background-mobile.svg
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.
67 changes: 63 additions & 4 deletions challenges/order_summary_component/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,60 @@
<link rel="manifest" href="../site.webmanifest" />
<link rel="stylesheet" href="style.css" />
</head>
<body class="m-0">
<body class="bg-pale-blue font-red-hat m-0">
<div
class="flex h-[100vh] w-full flex-col place-content-center text-center"
class="absolute z-10 flex h-[100vh] w-full flex-col place-content-center text-center"
>
<div>
<div
class="mx-auto flex w-[330px] flex-col items-center overflow-hidden rounded-2xl bg-white lg:w-[380px]"
>
<div>
<img src="/images/illustration-hero.svg" alt="hero illustration" />
</div>
<div class="mx-3">
<div class="p-4">
<h1 class="text-dark-blue text-xl font-bold">Order Summary</h1>
<p class="text-desaturated-blue px-5 pt-3 text-sm lg:mx-3">
You can now listen to millions of songs, audiobooks, and podcasts
on any device anywhere you like!
</p>
</div>

<div>
<div
class="bg-very-pale-blue mx-5 flex items-center rounded-lg py-1"
>
<img src="/images/icon-music.svg" alt="music icon" />
<div class="relative flex items-center px-4">
<h2 class="text-dark-blue text-sm font-bold">
Annual Plan
<span class="text-desaturated-blue block font-normal"
>$59.99/year</span
>
</h2>
<a
href="#"
class="text-bright-blue absolute -right-20 cursor-pointer text-xs underline hover:no-underline active:no-underline lg:-right-32"
>Change</a
>
</div>
</div>
</div>
<a
href="#"
class="bg-bright-blue mx-5 my-3 block rounded-lg py-3 font-bold text-white"
>Proceed to Payment</a
>
</div>

<div>
<button class="py-3 text-sm font-bold text-gray-400">
Cancel Order
</button>
</div>
</div>

<div class="mt-4">
<a
class="text-optimum-blue hover:text-optimum-darkblue"
href="https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj"
Expand All @@ -54,10 +103,20 @@
<div class="mt-3">
<a
class="text-optimum-blue hover:text-optimum-darkblue"
href="https://github.com/optimumBA/frontend_mentor_challenges/tree/order_summary_component/challenges/order_summary_component"
href="https://github.com/ngumokenneth/frontend_mentor_challenges/tree/order_summary_component/challenges/order_summary_component"
>Source code</a
>
</div>
</div>
<img
src="/images/pattern-background-mobile.svg"
alt="background pattern"
class="lg:hidden"
/>
<img
src="/images/pattern-background-desktop.svg"
alt="background-pattern"
class="relative hidden lg:block"
/>
</body>
</html>
1 change: 1 addition & 0 deletions challenges/order_summary_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;
8 changes: 8 additions & 0 deletions challenges/order_summary_component/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,14 @@ module.exports = {
colors: {
'optimum-blue': '#009efc',
'optimum-darkblue': '#0389e1',
'pale-blue': 'hsl(225, 100%, 94%)',
'bright-blue': 'hsl(245, 75%, 52%)',
'very-pale-blue': 'hsl(225, 100%, 98%)',
'desaturated-blue': 'hsl(224, 23%, 55%)',
'dark-blue': 'hsl(223, 47%, 23%)',
},
fontFamily: {
'red-hat': ['Red Hat Display', 'sans-serif'],
},
},
},
Expand Down