Skip to content

Order summary component #158

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 10 commits into
base: order_summary_component
Choose a base branch
from
Open

Order summary component #158

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4a908e8
edited html
akinyiv Jan 26, 2024
7cac4e0
Revert "edited html"
akinyiv Jan 26, 2024
92b0f90
edited html
akinyiv Jan 26, 2024
ed5b223
Revert "edited html"
akinyiv Jan 26, 2024
2b03078
add images and design implementation
akinyiv Feb 1, 2024
f3ef5ad
adjust width
akinyiv Apr 23, 2024
0ad5e4d
fix lint
akinyiv Apr 23, 2024
8613963
Adjust paddings,margins and sizes
akinyiv Apr 30, 2024
1e05027
Add padding and fontweight
akinyiv May 3, 2024
62202be
Adjust padding and text
akinyiv May 6, 2024
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/order_summary_component/images/favicon-32x32.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.
1 change: 1 addition & 0 deletions challenges/order_summary_component/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/order_summary_component/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/order_summary_component/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/order_summary_component/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.
75 changes: 71 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 @@ -26,13 +26,70 @@
href="../images/favicon-16x16.png"
/>
<link rel="manifest" href="../site.webmanifest" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap"
rel="stylesheet"
/>
<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="shadow-desaturated-blue drop-shadow-2x1 mx-auto flex w-[290px] flex-col items-center overflow-hidden rounded-2xl bg-white lg:w-[350px]"
>
<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 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 class="pl-2" src="images/icon-music.svg" alt="music icon" />
<div class="relative flex items-center px-4">
<h2 class="text-dark-blue text-xs 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-12 cursor-pointer text-xs underline hover:no-underline active:no-underline lg:-right-24"
>Change</a
>
</div>
</div>
</div>
<div class="py-3">
<a
href="#"
class="bg-bright-blue shadow-desaturated-blue mx-5 my-3 block rounded-lg py-2 font-bold text-white shadow-2xl"
>Proceed to Payment</a
>
</div>
</div>

<div>
<button class="py-4 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 +111,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/akinyiv/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="w-full lg:hidden"
/>
<img
src="images/pattern-background-desktop.svg"
alt="background-pattern"
class="relative hidden lg:block"
/>
</body>
</html>
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%)',
'dark-blue': 'hsl(223, 47%, 23%)',
'desaturated-blue': 'hsl(224, 23%, 55%)',
'very-pale-blue': 'hsl(225, 100%, 98%)',
},
fontFamily: {
'red-hat-display': ['Red Hat Display'],
},
},
},
Expand Down