diff --git a/README.md b/README.md index 8e34122..81e5b13 100644 --- a/README.md +++ b/README.md @@ -88,6 +88,11 @@ This repository contains a collection of frontend projects.Each project is built Currency Converter Click Here + + 16 + Currency Converter + $199.99

`; + profPrice.innerHTML = `

$249.99

`; + masterPrice.innerHTML = `

$399.99

`; + } else { + toggleArea.classList.add("monthly"); + toggleArea.classList.remove("anually"); + basicPrice.innerHTML = `

$19.99

`; + profPrice.innerHTML = `

$24.99

`; + masterPrice.innerHTML = `

$39.99

`; + } +}); diff --git a/project-16_pricing_component/images/bg-bottom.svg b/project-16_pricing_component/images/bg-bottom.svg new file mode 100644 index 0000000..a096e96 --- /dev/null +++ b/project-16_pricing_component/images/bg-bottom.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/project-16_pricing_component/images/bg-top.svg b/project-16_pricing_component/images/bg-top.svg new file mode 100644 index 0000000..b22378c --- /dev/null +++ b/project-16_pricing_component/images/bg-top.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/project-16_pricing_component/images/favicon-32x32.png b/project-16_pricing_component/images/favicon-32x32.png new file mode 100644 index 0000000..1e2df7f Binary files /dev/null and b/project-16_pricing_component/images/favicon-32x32.png differ diff --git a/project-16_pricing_component/images/project-preview.png b/project-16_pricing_component/images/project-preview.png new file mode 100644 index 0000000..4a7a604 Binary files /dev/null and b/project-16_pricing_component/images/project-preview.png differ diff --git a/project-16_pricing_component/index.html b/project-16_pricing_component/index.html new file mode 100644 index 0000000..c587039 --- /dev/null +++ b/project-16_pricing_component/index.html @@ -0,0 +1,80 @@ + + + + + + + + + + + Pricing Component With Toggle + + + + +
+

Our Pricing

+ +
+
+
+ +
+

Basic

+

$19.99

+
    +
    +
  • 500 GB Storage
    • +
    +
  • 2 Users Allowed
    • +
    +
  • Send up to 3 GB
    • +
    +
+ +
+ +
+

Professional

+

$24.99

+
    +
    +
  • 1 TB Storage
    • +
    +
  • 5 Users Allowed
    • +
    +
  • Send up to 10 GB
    • +
    +
+ +
+ +
+

Master

+

$39.99

+
    +
    +
  • 2 TB Storage
    • +
    +
  • 10 Users Allowed
    • +
    +
  • Send up to 20 GB
    • +
    +
+ +
+
+
+ + + + + + \ No newline at end of file diff --git a/project-16_pricing_component/styles.css b/project-16_pricing_component/styles.css new file mode 100644 index 0000000..9c6eb29 --- /dev/null +++ b/project-16_pricing_component/styles.css @@ -0,0 +1,279 @@ +@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap"); + +:root { + --gradient: hsl(236, 72%, 79%), hsl(237, 63%, 64%); + --purple: hsl(237, 63%, 64%); + --very-light-grayish-blue: hsl(240, 78%, 98%); + --light-grayish-blue: hsl(234, 14%, 74%); + --grayish-blue: hsl(233, 13%, 49%); + --dark-grayish-blue: hsl(232, 13%, 33%); + --white: white; + --body-font: "Montserrat", sans-serif; + --transition: all ease-in-out 0.3s; +} + +* { + margin: 0; + padding: 0; +} + +html { + font-size: 15px; +} + +body { + -ms-overflow-style: none; /* for Internet Explorer, Edge */ + scrollbar-width: none; /* for Firefox */ + overflow-y: scroll; + box-sizing: border-box; + font-family: var(--body-font); + background-color: var(--very-light-grayish-blue); + background-image: url("images/bg-top.svg"), url("images/bg-bottom.svg"); + background-repeat: no-repeat, no-repeat; + background-size: 26.5%, 26.5%; + background-position: + top 0 right -1rem, + bottom -4.7rem left -1.9rem; +} + +body::-webkit-scrollbar { + display: none; /* for Chrome, Safari, and Opera */ +} + +main { + width: 100%; + margin: 0 auto; + text-align: center; + margin-top: 5rem; + margin-bottom: 5rem; +} + +h1 { + color: var(--grayish-blue); + font-size: 2rem; + font-weight: 700; + letter-spacing: 1px; +} +header { + display: flex; + flex-direction: column; + margin: 0 auto; + justify-content: center; + align-items: center; + padding: 5rem; + padding-bottom: 0; + gap: 2.6rem; +} +/* Toggle Section */ +nav { + display: inline-flex; + flex-direction: row; + gap: 1.9rem; + align-items: center; +} + +.toggle-area { + border: none; + position: relative; + display: inline-flex; + align-items: center; + cursor: pointer; + width: 3.8rem; + height: 2.3rem; + border-radius: 25px; + background: linear-gradient(var(--gradient)); +} + +.toggle-btn { + cursor: pointer; + position: relative; + width: 1.7rem; + height: 1.7rem; + margin: 5%; + border-radius: 50%; + background-color: var(--very-light-grayish-blue); +} + +.toggle-area.monthly { + justify-content: flex-end; + align-content: flex-end; +} + +.toggle-area.anually { + justify-content: flex-start; + align-content: flex-start; +} + +.toggle-section p { + color: var(--light-grayish-blue); +} + +/* Pricing Section */ + +.pricing-container { + display: grid; + width: 72%; + grid-template-columns: repeat(3, 1fr); + margin: 0 auto; + margin-top: 5.8rem; + max-width: 1440px; +} + +.pricing { + display: grid; + grid-template-columns: 1fr; + align-items: center; + border-radius: 10px; + padding: 2.1rem 0.8rem; +} + +.container-2 { + background: linear-gradient(var(--gradient)); + color: var(--white); + margin-top: -1.6rem; + margin-bottom: -1.6rem; + padding: 3rem 1rem; +} +.container-1, +.container-3 { + background-color: var(--white); + gap: 1.3rem; +} + +.pricing h2 { + font-size: 1.23rem; + font-weight: 700; +} + +.container-1 h2, +.container-1 li, +.container-3 h2, +.container-3 li { + color: var(--light-grayish-blue); +} +.pricing p { + display: flex; + align-items: center; + gap: 6px; + margin: 0 auto; + font-size: 4.6rem; +} + +.dollar-sign { + font-size: 2.5rem; +} + +.container-1 p, +.container-3 p { + color: var(--dark-grayish-blue); +} + +hr { + width: 90%; + border-width: 0.5px; + margin: 0 auto; + border-color: transparent; + border-color: var(--light-grayish-blue); + border-style: solid; + opacity: 0.5; +} +.pricing ul { + list-style: none; + margin-top: 10px; +} + +.pricing ul li { + padding: 1.06rem; +} + +.pricing button { + cursor: pointer; + width: 90%; + margin: 0 auto; + margin-top: 1rem; + border-radius: 5px; + border-color: transparent; + border-style: solid; + border-width: 1px; + padding: 0.8rem; + text-transform: uppercase; + letter-spacing: 1.5px; + word-spacing: 3px; + font-weight: 700; + text-align: center; +} + +.container-2 button { + color: var(--purple); + background-color: var(--white); + transition: var(--transition); +} +.container-1 button, +.container-3 button { + color: var(--white); + background: linear-gradient(var(--gradient)); + background-repeat: no-repeat; + transition: background ease-in-out 0.3s; + transition: color ease-in-out 0.3s; +} + +@media (hover: hover) { + .container-1 button:hover, + .container-3 button:hover { + background: transparent; + border-color: var(--light-grayish-blue); + color: var(--purple); + border-width: 1px; + transition: background ease-in-out 0.3s; + transition: color ease-in-out 0.3s; + } + .container-2 button:hover { + background-color: transparent; + border-color: var(--white); + color: var(--white); + border-width: 1px; + transition: var(--transition); + } +} + +@media screen and (max-width: 1025px) { + .pricing-container { + width: 50%; + grid-template-columns: 1fr; + margin-top: 5.8rem; + gap: 5rem; + } + + .container-2 { + margin-top: initial; + margin-bottom: initial; + } + .container-2 ul li { + padding: 1.06rem; + } + + .container-2 h2 { + padding-top: initial; + } + .container-2 p { + margin-top: initial; + } +} + +@media screen and (max-width: 800px) { + body { + background-size: 80%, 26.5%; + background-position: + top 0 right -10rem, + bottom -4.7rem left -1.9rem; + } + .pricing-container { + width: 60%; + } +} + +@media screen and (max-width: 600px) { + .pricing-container { + width: 90%; + } +}