diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..995ed75 --- /dev/null +++ b/.gitignore @@ -0,0 +1,17 @@ +# Avoid accidental upload of the Sketch and Figma design files +##################################################### +## Please do not remove lines 5 and 6 - thanks! 🙂 ## +##################################################### +*.sketch +*.fig + +# Avoid accidental XD upload if you convert the design file +############################################### +## Please do not remove line 12 - thanks! 🙂 ## +############################################### +*.xd + +# Avoid your project being littered with annoying .DS_Store files! +.DS_Store +.prettierignore.idea +.idea diff --git a/README.md b/README.md new file mode 100644 index 0000000..f72015a --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# Order Summary Component + +View the live version of this project [here](https://redstar504.github.io/css-order-summary/). diff --git a/design/active-states.jpg b/design/active-states.jpg new file mode 100644 index 0000000..0edc363 Binary files /dev/null and b/design/active-states.jpg differ diff --git a/design/desktop-design.jpg b/design/desktop-design.jpg new file mode 100644 index 0000000..df5326f Binary files /dev/null and b/design/desktop-design.jpg differ diff --git a/design/desktop-preview.jpg b/design/desktop-preview.jpg new file mode 100644 index 0000000..4e2b6b2 Binary files /dev/null and b/design/desktop-preview.jpg differ diff --git a/design/mobile-design.jpg b/design/mobile-design.jpg new file mode 100644 index 0000000..3077627 Binary files /dev/null and b/design/mobile-design.jpg differ diff --git a/images/favicon-32x32.png b/images/favicon-32x32.png new file mode 100644 index 0000000..1e2df7f Binary files /dev/null and b/images/favicon-32x32.png differ diff --git a/images/icon-music.svg b/images/icon-music.svg new file mode 100644 index 0000000..1421b03 --- /dev/null +++ b/images/icon-music.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/illustration-hero.svg b/images/illustration-hero.svg new file mode 100644 index 0000000..c7f3534 --- /dev/null +++ b/images/illustration-hero.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/pattern-background-desktop.svg b/images/pattern-background-desktop.svg new file mode 100644 index 0000000..c6e640c --- /dev/null +++ b/images/pattern-background-desktop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/pattern-background-mobile.svg b/images/pattern-background-mobile.svg new file mode 100644 index 0000000..905cb4b --- /dev/null +++ b/images/pattern-background-mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..957b54c --- /dev/null +++ b/index.html @@ -0,0 +1,34 @@ + + + + + Order Summary + + + + +
+
+

Order Summary

+

You can now listen to millions of songs, audiobooks, and podcasts on any device anywhere you like!

+
+
+ +
+ Annual Plan + $59.99/year +
+ Change +
+ +
+
+
+ Coded by: Brayden Williams +
+
+ + diff --git a/screen.css b/screen.css new file mode 100644 index 0000000..24a2eac --- /dev/null +++ b/screen.css @@ -0,0 +1,198 @@ +@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap'); + +/* start reset */ + +html, body, div, p, h1, h2, h3, h4, h5, h6, +ul, ol, li, dl, dt, dd, form, fieldset, caption, legend, +table, tr, td, th, address, blockquote, img { + margin: 0; + padding: 0; +} + +img, fieldset { + border: none; +} + +blockquote, q { + quotes: none; +} + +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +button, label, summary { + cursor: pointer; +} + +body, button, input, table, textarea, select { + font-size: 1rem; + line-height: 1.5; + font-family: inherit; +} + +button { + background: none; + border: none; + cursor: pointer; +} + +ul { + list-style: none; +} + +/* end reset */ + +:root { + --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%); +} + +html { + height: 100%; +} + +body { + min-height: 100%; + font: 500 1em/1.5 Red Hat Display, sans-serif; + background-color: var(--pale-blue); + background-image: url(images/pattern-background-mobile.svg); + background-repeat: no-repeat; + background-position: 0 0; + background-size: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + row-gap: 1em; +} + +article { + min-width: 21.4375em; + width: 21.4375em; + display: flex; + flex-direction: column; + text-align: center; + margin: 0 1.25em; + border-radius: 16px; + background-color: #fff; + background-image: url(images/illustration-hero.svg); + background-size: contain; + background-repeat: no-repeat; + padding: 10.5em 2em 1.5em; +} + +article h1 { + font: 900 1.4em/1.5 Red Hat Display, sans-serif; + padding: 1.25em 0 .75em; + color: var(--dark-blue); +} + +h1 + p { + font: 500 .9375em/1.5 Red Hat Display, sans-serif; + color: var(--desaturated-blue); + padding: 0 1.75em 1.75em; +} + +article section { + background: var(--very-pale-blue); + display: flex; + flex-direction: row; + padding: 1em; + border-radius: .625em; + text-align: left; + justify-content: space-between; + align-items: center; + column-gap: 1.25em; + margin: 0 0 1.5em; +} + +section div { + display: flex; + flex-direction: column; +} + +section div strong { + font-weight: 600; + font-size: .875em; +} + +section div small { + color: var(--desaturated-blue); + font-size: .875em; +} + +section > a { + margin-left: auto; + font-size: .8125em; +} + +footer { + display: flex; + flex-direction: column; + row-gap: 1em; +} + +footer button { + height: 3em; + display: block; + background: var(--bright-blue); + font: 900 .9375em/3 Red Hat Display, sans-serif; + border-radius: .625em; + color: #fff; + box-shadow: 0 12px 24px -16px var(--bright-blue); +} + +footer a { + font: 900 .9375em/1.5 Red Hat Display, sans-serif; + color: var(--desaturated-blue); + text-decoration: none; +} + +.attribution { + text-align: center; + color: var(--desaturated-blue); + font: 600 .75em/1.5 Red Hat Display, sans-serif; + opacity: 0.4; + display: flex; + flex-direction: column; + row-gap: .25em; +} + +.attribution a { + color: var(--desaturated-blue); + opacity: 0.6; + text-decoration: none; +} + +@media (min-width: 48em) { + body { + background-image: url(images/pattern-background-desktop.svg); + font-size: 1.125em; + } + + article { + min-width: 26em; + width: 26em; + padding-top: 13.0625em; + } + + article section { + column-gap: 2em; + padding-left: 1.5em; + padding-right: 1.5em; + } + + .attribution { + flex-direction: row; + justify-content: flex-end; + column-gap: 1em; + } +}