diff --git a/assets/images/1-1-gamebox-f122-keyart-1.png.adapt.crop1x1.767p.png b/assets/images/1-1-gamebox-f122-keyart-1.png.adapt.crop1x1.767p.png new file mode 100644 index 0000000..4c864a5 Binary files /dev/null and b/assets/images/1-1-gamebox-f122-keyart-1.png.adapt.crop1x1.767p.png differ diff --git a/assets/images/apex-mobile-keyart-1x1.jpg.adapt.crop1x1.767p.jpg b/assets/images/apex-mobile-keyart-1x1.jpg.adapt.crop1x1.767p.jpg new file mode 100644 index 0000000..c2a19ae Binary files /dev/null and b/assets/images/apex-mobile-keyart-1x1.jpg.adapt.crop1x1.767p.jpg differ diff --git a/assets/images/apex-mobile-logo.svg b/assets/images/apex-mobile-logo.svg new file mode 100644 index 0000000..720a49c --- /dev/null +++ b/assets/images/apex-mobile-logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/ea-play-16x9-png.adapt.crop1x1.jpg b/assets/images/ea-play-16x9-png.adapt.crop1x1.jpg new file mode 100644 index 0000000..64b3594 Binary files /dev/null and b/assets/images/ea-play-16x9-png.adapt.crop1x1.jpg differ diff --git a/assets/images/ea-play-grid-legends-hero-xl.jpg.adapt.crop16x9.320w.jpg b/assets/images/ea-play-grid-legends-hero-xl.jpg.adapt.crop16x9.320w.jpg new file mode 100644 index 0000000..85491fa Binary files /dev/null and b/assets/images/ea-play-grid-legends-hero-xl.jpg.adapt.crop16x9.320w.jpg differ diff --git a/assets/images/ea-play-grid-legends-hero-xl.jpg.adapt.crop16x9.767w.jpg b/assets/images/ea-play-grid-legends-hero-xl.jpg.adapt.crop16x9.767w.jpg new file mode 100644 index 0000000..dc0382f Binary files /dev/null and b/assets/images/ea-play-grid-legends-hero-xl.jpg.adapt.crop16x9.767w.jpg differ diff --git a/assets/images/ea-play-grid-legends-hero-xl.jpg.adapt.crop2x1.1023w.jpg b/assets/images/ea-play-grid-legends-hero-xl.jpg.adapt.crop2x1.1023w.jpg new file mode 100644 index 0000000..6a12f70 Binary files /dev/null and b/assets/images/ea-play-grid-legends-hero-xl.jpg.adapt.crop2x1.1023w.jpg differ diff --git a/assets/images/ea-play-logo-coral-hero-logo-small (1).svg b/assets/images/ea-play-logo-coral-hero-logo-small (1).svg new file mode 100644 index 0000000..59619ea --- /dev/null +++ b/assets/images/ea-play-logo-coral-hero-logo-small (1).svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/ea-play-mono-logo-svg.svg b/assets/images/ea-play-mono-logo-svg.svg new file mode 100644 index 0000000..90611e9 --- /dev/null +++ b/assets/images/ea-play-mono-logo-svg.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/images/f122-gamebox-logo.png b/assets/images/f122-gamebox-logo.png new file mode 100644 index 0000000..e3031fa Binary files /dev/null and b/assets/images/f122-gamebox-logo.png differ diff --git a/assets/images/game-box-logo-thesims4-refresh.svg b/assets/images/game-box-logo-thesims4-refresh.svg new file mode 100644 index 0000000..e39d4f8 --- /dev/null +++ b/assets/images/game-box-logo-thesims4-refresh.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + diff --git a/assets/images/hero-medium-console-7x2-xl.jpg.adapt.crop2x1.1023w.jpg b/assets/images/hero-medium-console-7x2-xl.jpg.adapt.crop2x1.1023w.jpg new file mode 100644 index 0000000..c276bfb Binary files /dev/null and b/assets/images/hero-medium-console-7x2-xl.jpg.adapt.crop2x1.1023w.jpg differ diff --git a/assets/images/hero-medium-console-7x2-xl.jpg.adapt.crop3x5.320w.jpg b/assets/images/hero-medium-console-7x2-xl.jpg.adapt.crop3x5.320w.jpg new file mode 100644 index 0000000..d0d0b3b Binary files /dev/null and b/assets/images/hero-medium-console-7x2-xl.jpg.adapt.crop3x5.320w.jpg differ diff --git a/assets/images/hero-medium-console-7x2-xl.jpg.adapt.crop3x5.767w.jpg b/assets/images/hero-medium-console-7x2-xl.jpg.adapt.crop3x5.767w.jpg new file mode 100644 index 0000000..ce6ff1c Binary files /dev/null and b/assets/images/hero-medium-console-7x2-xl.jpg.adapt.crop3x5.767w.jpg differ diff --git a/assets/images/m23-gamebox-logo.svg b/assets/images/m23-gamebox-logo.svg new file mode 100644 index 0000000..2db4417 --- /dev/null +++ b/assets/images/m23-gamebox-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/madden-23-keyart.jpg.adapt.crop1x1.767w.jpg b/assets/images/madden-23-keyart.jpg.adapt.crop1x1.767w.jpg new file mode 100644 index 0000000..f24c218 Binary files /dev/null and b/assets/images/madden-23-keyart.jpg.adapt.crop1x1.767w.jpg differ diff --git a/css/main.css b/css/main.css index 366822d..a0ec51d 100644 --- a/css/main.css +++ b/css/main.css @@ -4,49 +4,6 @@ box-sizing: border-box; } -/* Box Styling*/ -.box-container { - position: relative; - top: 0; - left: 0; - width: 355px; - height: 355px; - background: linear-gradient(90deg, #29244d, #ed5355); - display: flex; - justify-content: center; - align-items: center; -} -.box-container:hover .box-background { - opacity: 0.2; -} -.box-container:hover .box-logo { - transform: translateY(-70px); -} -.box-container:hover p { - visibility: visible; -} -.box-container .box-background { - position: absolute; - top: 0; - left: 0; - width: 355px; - height: 355px; - opacity: 1; - transition: all 300ms ease-in-out; - filter: brightness(0.7); -} -.box-container .box-logo { - width: 130px; - position: absolute; - color: white; - transition: all 300ms ease-out; -} -.box-container p { - position: absolute; - visibility: hidden; - color: white; -} - @font-face { font-family: "ElectronicArtsDisplay"; src: url(../../assets/fonts/ElectronicArtsDisplay-Regular.woff2) format("woff"); @@ -162,9 +119,9 @@ --h5-line-height-tablet: 1.25; --h5-line-height-mobile: 1.25; --h5-font-weight-400: 400; - --h6-font-size-mobile: 20px; - --h6-font-size-tablet: 24px; - --h6-font-size-desktop: 24px; + --h6-font-size-mobile: 19px; + --h6-font-size-tablet: 18px; + --h6-font-size-desktop: 18px; --h6-letter-spacing-mobile: -0.025em; --h6-letter-spacing-tablet: -0.025em; --h6-letter-spacing-desktop: -0.025em; @@ -275,7 +232,7 @@ --b1-line-height-mobile: 1.65; --b1-line-height-tablet: 1.5; --b1-line-height-desktop: 1.5; - --b2-font-size-mobile: 16px; + --b2-font-size-mobile: 15px; --b2-font-size-tablet: 18px; --b2-font-size-desktop: 18px; --b2-letter-spacing-mobile: normal; @@ -300,30 +257,31 @@ --btn-line-height-desktop: 1.5; --btn-font-weight-normal: normal; --btn-letter-spacing-normal: normal; - --btn-text-transform-none: none; + --btn-text-decoration-none: none; --nav-bar-1-font-size-16: 16px; --nav-bar-1-font-family-open-sans: open-sans, "Verdana", "Helvetica", "Arial", sans-serif; --nav-bar-1-line-height-1_35: 1.35; --nav-bar-1-text-decoration-none: none; --nav-bar-1-color-inherit: inherit; - --nav-link-font-family-ElectronicArtsText: "ElectronicArtsText", Verdana, Helvetica, Arial, sans-serif; - --nav-link-font-size-mobile: 16px; - --nav-link-font-size-tablet: 18px; - --nav-link-font-size-desktop: 18px; - --nav-link-line-height-mobile: 1.65; - --nav-link-line-height-tablet: 1.5; - --nav-link-line-height-desktop: 1.5; - --nav-link-font-weight-normal: normal; - --nav-link-letter-spacing-normal: normal; - --nav-link-text-decoration-none: none; - --nav-link-color-inherit: inherit; - --nav-dropdown-item-font-size-mobile: 16px; - --nav-dropdown-item-font-size-tablet: 16px; - --nav-dropdown-item-font-size-desktop: 16px; - --nav-dropdown-item-font-weight-300: 300; - --nav-dropdown-item-text-decoration-none: none; - --nav-dropdown-item-title-font-weight-700: 700; - --nav-dropdown-item-title-text-decoration-none: none; + --nav-bar-2-link-font-family-ElectronicArtsDisplay: "ElectronicArtsDisplay", Verdana, Helvetica, Arial, sans-serif; + --nav-bar-2-link-font-size-mobile: 15px; + --nav-bar-2-link-font-size-tablet: 17px; + --nav-bar-2-link-font-size-desktop: 17px; + --nav-bar-2-link-line-height-mobile: 1.65; + --nav-bar-2-link-line-height-tablet: 1.5; + --nav-bar-2-link-line-height-desktop: 1.5; + --nav-bar-2-link-font-weight-normal: normal; + --nav-bar-2-link-letter-spacing-normal: normal; + --nav-bar-2-link-text-decoration-none: none; + --nav-bar-2-link-color-inherit: inherit; + --nav-bar-2-dropdown-item-font-size-mobile: 16px; + --nav-bar-2-dropdown-item-font-size-tablet: 16px; + --nav-bar-2-dropdown-item-font-size-desktop: 16px; + --nav-bar-2-dropdown-item-font-weight-300: 300; + --nav-bar-2-dropdown-item-text-decoration-none: none; + --nav-bar-2-dropdown-item-title-font-weight-700: 700; + --nav-bar-2-dropdown-item-title-text-decoration-none: none; + --title-font-weight-bold: bold; } /*selectors*/ @@ -608,7 +566,7 @@ h6 { line-height: var(--btn-line-height-mobile); font-weight: var(--btn-font-weight-normal); letter-spacing: var(--btn-letter-spacing-normal); - text-transform: var(--btn-text-transform-none); + text-decoration: var(--btn-text-decoration-none); } .nav-bar-1 { @@ -619,25 +577,29 @@ h6 { color: var(--nav-bar-1-color-inherit); } -.nav-link { - font-family: var(--nav-link-font-family-ElectronicArtsText); - font-size: var(--nav-link-font-size-mobile); - line-height: var(--nav-link-line-height-mobile); - font-weight: var(--nav-link-font-weight-normal); - letter-spacing: var(--nav-link-letter-spacing-normal); - text-decoration: var(--nav-link-text-decoration-none); - color: var(--nav-link-color-inherit); +.nav-bar-2-link { + font-family: var(--nav-bar-2-link-font-family-ElectronicArtsDisplay); + font-size: var(--nav-bar-2-link-font-size-mobile); + line-height: var(--nav-bar-2-link-line-height-mobile); + font-weight: var(--nav-bar-2-link-font-weight-normal); + letter-spacing: var(--nav-bar-2-link-letter-spacing-normal); + text-decoration: var(--nav-bar-2-link-text-decoration-none); + color: var(--nav-bar-2-link-color-inherit); +} + +.nav-bar-2-dropdown-item { + font-size: var(--nav-bar-2-dropdown-item-font-size-mobile); + font-weight: var(--nav-bar-2-dropdown-item-font-weight-300); + text-decoration: var(--nav-bar-2-dropdown-item-text-decoration-none); } -.nav-dropdown-item { - font-size: var(--nav-dropdown-item-font-size-mobile); - font-weight: var(--nav-dropdown-item-font-weight-300); - text-decoration: var(--nav-dropdown-item-text-decoration-none); +.nav-bar-2-dropdown-item-title { + font-weight: var(--nav-bar-2-dropdown-item-title-font-weight-700); + text-decoration: var(--nav-bar-2-dropdown-item-title-text-decoration-none); } -.nav-dropdown-item-title { - font-weight: var(--nav-dropdown-item-title-font-weight-700); - text-decoration: var(--nav-dropdown-item-title-text-decoration-none); +.title { + font-weight: var(--title-font-weight-bold); } @media only screen and (min-width: 1456px) { @@ -730,12 +692,12 @@ h6 { font-size: var(--btn-font-size-desktop); line-height: var(--btn-line-height-desktop); } - .nav-link { - font-size: var(--nav-link-font-size-desktop); - line-height: var(--nav-link-line-height-desktop); + .nav-bar-2-link { + font-size: var(--nav-bar-2-link-font-size-desktop); + line-height: var(--nav-bar-2-link-line-height-desktop); } - .nav-dropdown-item { - font-size: var(--nav-dropdown-item-font-size-desktop); + .nav-bar-2-dropdown-item { + font-size: var(--nav-bar-2-dropdown-item-font-size-desktop); } } @media only screen and (min-width: 1024px) { @@ -814,13 +776,1431 @@ h6 { font-size: var(--btn-font-size-tablet); line-height: var(--btn-line-height-tablet); } - .nav-link { - font-size: var(--nav-link-font-size-tablet); - line-height: var(--nav-link-line-height-tablet); + .nav-bar-2-link { + font-size: var(--nav-bar-2-link-font-size-tablet); + line-height: var(--nav-bar-2-link-line-height-tablet); + } + .nav-bar-2-dropdown-item { + font-size: var(--nav-bar-2-dropdown-item-font-size-tablet); + } +} +.hero { + width: 100%; + height: 28.5714285714vw; + overflow: hidden; + position: relative; +} +.hero picture source, +.hero picture img { + width: 100%; + position: absolute; + z-index: auto; + scale: 1.1; +} +@media screen and (max-width: 1455px) { + .hero { + height: 40vw; + } +} +@media screen and (max-width: 1023px) { + .hero { + height: 50vw; + } +} +@media screen and (max-width: 767px) { + .hero { + height: 125vw; + } +} +.hero-items-center { + position: absolute; + width: 100%; + height: 100%; + z-index: 4; + display: flex; + justify-content: space-between; + align-items: center; +} +@media screen and (max-width: 767px) { + .hero-items-center { + flex-direction: column-reverse; + justify-content: flex-end; + } +} +.hero-items-left { + position: absolute; + width: 100%; + height: 100%; + z-index: 4; + display: flex; + justify-content: space-between; + align-items: center; +} +@media screen and (max-width: 767px) { + .hero-items-left { + flex-direction: column; + justify-content: center; + align-items: flex-start; + } + .hero-items-left .hidden { + display: none; + } +} +.hero-content-center { + width: 100%; + height: 100%; + flex: 1 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + padding-right: 150px; + padding-left: 70px; +} +@media screen and (max-width: 1455px) { + .hero-content-center { + padding-right: 50px; + padding-left: 70px; + } +} +@media screen and (max-width: 1023px) { + .hero-content-center { + padding-right: 0px; + padding-left: 70px; + } +} +@media screen and (max-width: 767px) { + .hero-content-center { + padding-right: 20px; + padding-left: 20px; + } +} +.hero-content-center .img-hero { + max-width: 80%; + margin-bottom: 1rem; +} +@media screen and (max-width: 767px) { + .hero-content-center .img-hero { + width: 80vw; + } +} +.hero-content-center .btn-container { + margin-top: 2.7rem; +} +.hero-content-left { + width: 100%; + height: 100%; + flex: 1 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + padding-left: 17.5%; +} +@media screen and (max-width: 1455px) { + .hero-content-left { + padding-left: 15%; + } +} +@media screen and (max-width: 1023px) { + .hero-content-left { + padding-left: 10%; + } +} +@media screen and (max-width: 767px) { + .hero-content-left { + padding-inline: 10%; + } +} +.hero-content-left .img-hero { + max-width: 50%; +} +@media screen and (max-width: 767px) { + .hero-content-left .img-hero { + width: 20vw; + } +} +.hero-content-left .btn-container { + margin-top: 2.7rem; +} + +/* Box Styling*/ +.box-container { + position: relative; + top: 0; + left: 0; + width: 355px; + height: 355px; + background: linear-gradient(90deg, #29244d, #ed5355); + display: flex; + justify-content: center; + align-items: center; +} +.box-container:hover .box-background { + opacity: 0.1; +} +.box-container:hover .box-logo { + transform: translateY(-70px); +} +.box-container:hover p { + visibility: visible; +} +.box-container .box-background { + position: absolute; + top: 0; + left: 0; + width: 355px; + height: 355px; + opacity: 1; + transition: all 300ms ease-in-out; + filter: brightness(0.7); +} +.box-container .box-logo { + position: absolute; + transition: all 300ms ease-out; +} +.box-container p { + position: absolute; + visibility: hidden; + color: white; +} + +.box-logo-w1 { + width: 160px; +} + +.box-logo-w2 { + width: 130px; +} + +.box-logo-w3 { + width: 100px; +} + +.box-logo-w4 { + width: 70px; +} + +.btn-container { + display: flex; + align-items: center; + justify-content: center; + width: 168px; + height: 65px; + position: relative; +} + +.btn { + height: 60px; + width: 160px; + background-color: #f3f3f3; + color: rgb(22, 22, 22); + border-radius: 2.5px; + transition: 0.1s; +} +.btn p { + width: 100%; + text-align: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.btn:hover { + width: 168px; + height: 65px; +} +.btn:focus { + border: 2.5px solid black; + outline: 2.5px solid #f3f3f3; + transition: 0s; +} + +.btn-dark { + border: 2px solid #161616; + background-color: transparent; + color: #161616; +} +.btn-dark:focus { + background-color: #161616; + border: 2.5px solid #f3f3f3; + outline: 2.5px solid #161616; + color: #f3f3f3; + transition: 0s; +} + +.btn-white { + border: 2px solid #f3f3f3; + background-color: transparent; + color: #f3f3f3; +} +.btn-white:focus { + background-color: #f3f3f3; + border: 2.5px solid #161616; + outline: 2.5px solid #f3f3f3; + color: #161616; + transition: 0s; +} + +@media only screen and (max-width: 1023px) { + .btn-container { + height: 56px; + width: 144px; + } + .btn { + height: 50px; + width: 136px; + } + .btn:hover { + height: 56px; + width: 144px; + } +} +@media only screen and (max-width: 767px) { + .btn-container { + height: 56px; + width: 144px; + } + .btn { + height: 50px; + width: 136px; + } + .btn:hover { + height: 56px; + width: 144px; + } +} +@media only screen and (max-width: 639px) { + .btn-container { + width: 547px; + height: 56px; + } + .btn { + width: 544px; + height: 50px; + } + .btn:hover { + width: 547px; + height: 56px; + } +} +/*Card Styling*/ +.titleultime { + margin-top: 4rem; + display: flex; + justify-content: center; + align-items: center; +} +.titleultime .ultimenov { + text-align: center; +} + +.cards-container { + width: 72rem; + display: flex; + justify-content: space-around; + align-items: space-around; + flex-wrap: wrap; + margin-left: auto; + margin-right: auto; + flex: 1 1; + margin-top: 4rem; + /* approccio super responsive per le transitions, da sistemare*/ +} +.cards-container .card { + height: 31.5rem; + width: 22rem; + box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3); + margin-bottom: 1rem; + transition: transform 0.5s ease, box-shadow 0.5s ease; +} +.cards-container .card:hover { + transform: translateY(-12px); + box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.7); +} +.cards-container .card .img { + width: 100%; +} +.cards-container .card .img img { + margin: 0; + width: 100%; +} +.cards-container .card .spans { + display: flex; + margin: 1rem; +} +.cards-container .card .spans span { + margin-right: 1rem; + font-size: 1rem; +} +.cards-container .card .spans span:first-of-type { + color: orangered; +} +.cards-container .card h3 { + margin: 1rem; +} +.cards-container .card h6 { + margin: 1rem; +} + +@media screen and (max-width: 1023px) { + .cards-container { + max-width: 100%; + display: flex; + justify-content: center; + align-items: center; + } + .cards-container .card { + width: 25.5rem; + height: 26.5rem; + margin-bottom: 1rem; + margin-right: 1rem; + margin-left: 1rem; + transition: transform 0.5s ease, box-shadow 0.5s ease; + } + .cards-container .card:hover { + transform: translateY(-10px); + box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.7); + } + .cards-container .card .spans { + margin: 0.5rem 1rem 0.5rem 1rem; + } + .cards-container .card h3 { + margin: 0.5rem 1rem 0.5rem 1rem; + } + .cards-container .card h6 { + margin: 0.5rem 1rem 0.5rem 1rem; + font-size: 16px; + } +} +@media screen and (max-width: 767px) { + .cards-container { + display: flex; + flex-direction: column; + } + .cards-container .card { + width: 35.5rem; + height: 7.25rem; + display: flex; + flex-direction: column; + align-items: center; + transition: transform 0.5s ease, box-shadow 0.5s ease; + } + .cards-container .card:hover { + transform: translateY(-10px); + box-shadow: 10px 20px 50px rgba(0, 0, 0, 0.7); + } + .cards-container .card .spans { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + .cards-container .card .img { + display: none; } - .nav-dropdown-item { - font-size: var(--nav-dropdown-item-font-size-tablet); + .cards-container .card h6 { + display: none; } } +.btn-ultime { + display: flex; + justify-content: center; + margin-bottom: 3rem; + margin-top: 2.7rem; +} + +:root { + --black: #000000; + --dark: #161616; + --light: #f3f3f3; + --white: #ffffff; + --gray: #eaeaea; + --gray-focus: #dedede; + --dark-blue: #29244d; + --light-orange: #ed5355; + --orange: #ff4747; + --red: #fe0115; + --dark-light-blue: #6fb0d6; + --transparent: transparent; +} + +.text-black { + color: var(--black); +} + +.text-dark { + color: var(--dark); +} + +.text-light { + color: var(--light); +} + +.text-white { + color: var(--white); +} + +.text-gray { + color: var(--gray); +} + +.text-gray-focus { + color: var(--gray-focus); +} + +.text-dark-blue { + color: var(--dark-blue); +} + +.text-light-orange { + color: var(--light-orange); +} + +.text-orange { + color: var(--orange); +} + +.text-red { + color: var(--red); +} + +.text-dark-light-blue { + color: var(--dark-light-blue); +} + +.text-transparent { + color: var(--transparent); +} + +.bg-black { + background-color: var(--black); +} + +.bg-dark { + background-color: var(--dark); +} + +.bg-light { + background-color: var(--light); +} + +.bg-white { + background-color: var(--white); +} + +.bg-gray { + background-color: var(--gray); +} + +.bg-gray-focus { + background-color: var(--gray-focus); +} + +.bg-dark-blue { + background-color: var(--dark-blue); +} + +.bg-light-orange { + background-color: var(--light-orange); +} + +.bg-orange { + background-color: var(--orange); +} + +.bg-red { + background-color: var(--red); +} + +.bg-dark-light-blue { + background-color: var(--dark-light-blue); +} + +.bg-transparent { + background-color: var(--transparent); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.bottom-footer { + width: 100% !important; + max-width: 100% !important; + display: flex; + flex-direction: column; + margin-bottom: 0px; + overflow: hidden !important; +} + +#ea-local-footer { + height: 235px; + background-color: #eaeaea; + line-height: 27px; + display: block; + font-size: 18px; + overflow-wrap: break-word; + padding-bottom: 12px; + padding-left: 76px; + padding-right: 76px; + display: flex; + flex-direction: column; +} +#ea-local-footer #section-footer-container { + width: 80%; + height: 121.78px; + display: flex; + justify-content: space-between; + align-items: baseline; + line-height: 27px; + margin-left: 145px; + margin-right: 31.5px; + margin-top: 40px; + padding-bottom: 28px; + overflow-wrap: break-word; +} +#ea-local-footer #section-footer-container #ea-local-links { + width: 850px; + display: flex; + flex-wrap: wrap; + font-family: ElectronicArtsText; + font-size: 18px; + line-height: 27px; + margin-top: 14px; + color: black; +} +#ea-local-footer #section-footer-container #ea-local-links a { + font-size: 16px; + font-family: "ElectronicArtsText"; + font-weight: lighter; + color: #161616; + text-decoration: none; + margin-bottom: 5px; + margin-right: 40px; + margin-top: 8px; +} +#ea-local-footer #section-footer-container #ea-local-links a:hover { + color: rgb(255, 71, 71); +} + +#ea-social-links { + width: 245px; + min-width: 245px !important; + height: 65px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +#links-container { + height: 27px; + justify-self: flex-end; + display: flex; + justify-content: space-between; +} +#links-container a { + transition: all 0.1s; + transform-origin: 50% 50%; +} +#links-container a:hover { + transform: scale(1.2); +} + +#ea-network-footer { + width: 100%; + height: 337.72px; + background-color: #f3f3f3; + padding: 15px 93px 40px; + display: flex; + justify-content: center; +} +#ea-network-footer #network-footer-section { + width: 82%; + height: 282.72px; + display: flex; + justify-content: space-between; +} +#ea-network-footer #network-footer-section #ea-logo { + width: 64px; + display: flex; + flex-direction: column; + justify-content: flex-start; +} +#ea-network-footer #network-footer-section #footer-row { + width: 90%; + justify-self: end; +} +#ea-network-footer #network-footer-section #footer-row #row-1 { + height: 50%; + width: 100%; + display: flex; + justify-content: space-between; +} +#ea-network-footer #network-footer-section #footer-row #row-1 #network-links { + height: 100%; + width: 55%; + line-height: 50px; +} +#ea-network-footer #network-footer-section #footer-row #row-1 #network-links a { + font-size: 18px; + font-family: "ElectronicArtsText"; + font-weight: lighter; + color: #161616; + text-decoration: none; + margin-bottom: 5px; + margin-right: 40px; + margin-top: 8px; +} +#ea-network-footer #network-footer-section #footer-row #row-1 #selector-container { + margin-top: 15px; + height: 100%; + width: 40%; + display: flex; + justify-content: space-between; + gap: 35px !important; +} +#ea-network-footer #network-footer-section #footer-row #row-1 #selector-container .footer-selector { + height: 61px; + width: 191px; + min-height: 61px !important; + min-width: 191px !important; + border: 2px solid rgb(194, 194, 194); + border-radius: 3px; + outline: 2px solid transparent; + transition: 0.1s; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + transition: all 0.1s; +} +#ea-network-footer #network-footer-section #footer-row #row-1 #selector-container .footer-selector:hover { + border: 2px solid transparent; + outline: 2px solid rgb(194, 194, 194); +} +#ea-network-footer #network-footer-section #footer-row #row-1 #selector-container .footer-selector:focus { + border: 2px solid transparent; + outline: 3px solid rgb(194, 194, 194); +} +#ea-network-footer #network-footer-section #footer-row #row-1 #selector-container .footer-selector #options-container-pricing { + height: 50px; + width: 142px; + font-family: ElectronicArtsText; + font-size: 15px; + font-stretch: 100%; + font-weight: 400; + letter-spacing: normal; + line-height: 22.5px; + text-align: left; + text-indent: 0px; + word-spacing: 0px; + color: rgb(90, 90, 88); + cursor: default; +} +#ea-network-footer #network-footer-section #footer-row #row-1 #selector-container .footer-selector #options-container-pricing #country-prices-dropdown { + color: rgb(22, 22, 22); +} +#ea-network-footer #network-footer-section #footer-row #row-1 #selector-container .footer-selector #options-container-pricing #dropdown-selection { + display: flex; + align-items: center; + position: relative; +} +#ea-network-footer #network-footer-section #footer-row #row-1 #selector-container .footer-selector #options-container-pricing #dropdown-selection #regional-dropdown { + position: absolute; + right: 0px; +} +#ea-network-footer #network-footer-section #footer-row #row-1 #selector-container #language-selector #options-container-language { + height: 50px; + width: 142px; + font-family: ElectronicArtsText; + font-size: 15px; + font-stretch: 100%; + font-weight: 400; + letter-spacing: normal; + line-height: 22.5px; + text-align: left; + text-indent: 0px; + word-spacing: 0px; + color: rgb(90, 90, 88); +} +#ea-network-footer #network-footer-section #footer-row #row-1 #selector-container #language-selector #options-container-language #dropdown-language-selection { + display: flex; + align-items: center; + position: relative; +} +#ea-network-footer #network-footer-section #footer-row #row-1 #selector-container #language-selector #options-container-language #dropdown-language-selection #country-language-dropdown { + color: rgb(22, 22, 22); +} +#ea-network-footer #network-footer-section #footer-row #row-1 #selector-container #language-selector #options-container-language #dropdown-language-selection #language-dropdown { + position: absolute; + right: 0px; +} +#ea-network-footer #network-footer-section #footer-row #row-1 #selector-container #language-selector #options-container-language #dropdown-language-selection span { + height: 11px; + width: 16px; + margin-right: 7px; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAIAAAD5gJpuAAAA50lEQVR42nWRMQ/BQBSAL0aRdDQzMnVjJWam1iDiV4jE5g+ZLSYSC6vIhSbowFrX3rXVeL0Xjza8fOn0fb17LSvOSt84Jwe4uu75cgT2By4ZQ24aBtJ0MyGSJHnqieKUMAzlYPSwbED1up+gv7CRpw7iOI6iCGylVNBoeqYp6rU/QdaGQVtUqqrT+RGAR7aUMggCtAE4Kh+0562cnQba9srlTAAqAouS7fu+gNF2JhguxxTkbSFAvRtG2pgmxwAvgwhfkP3QgwEAy3A6gZamq1MDL8YP9TmBWQViu9uuVyt8Ilz/YP7mBVsTOUQfESu+AAAAAElFTkSuQmCC"); +} +#ea-network-footer #network-footer-section #footer-row #row-2 { + height: 50%; + display: flex; + justify-content: space-between; + align-items: center; +} +#ea-network-footer #network-footer-section #footer-row #row-2 #ea-network-legal { + height: 100%; + width: 50%; +} +#ea-network-footer #network-footer-section #footer-row #row-2 #ea-network-legal a, #ea-network-footer #network-footer-section #footer-row #row-2 #ea-network-legal p { + font-size: 16px; + font-family: "ElectronicArtsText"; + font-weight: lighter; + color: #161616; + text-decoration: none; + margin-bottom: 5px; + margin-right: 40px; + margin-top: 8px; +} +#ea-network-footer #network-footer-section #footer-row #row-2 #img-rights-container { + width: 191px; + height: 61px; +} + +.footer-activated { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +.dropdown-activated { + -moz-transform: scale(-1, -1); + -o-transform: scale(-1, -1); + -webkit-transform: scale(-1, -1); + transform: scale(-1, -1); +} + +@media only screen and (min-width: 1024px) and (max-width: 1440px) { + #ea-local-footer { + height: 172.78px; + } + #ea-local-footer #section-footer-container { + width: 90vw !important; + align-self: center !important; + margin: 0; + margin-top: 20px; + } + #ea-local-footer #section-footer-container #ea-local-links { + width: 900px; + height: 86.78px; + } + #ea-local-footer #section-footer-container #ea-social-links { + width: 218px; + height: 82.89px; + } + #ea-local-footer #section-footer-container #ea-social-links h3 { + font-size: 14px; + } + #ea-logo { + width: 49px; + } + #ea-logo img { + width: 49px; + } + #ea-network-footer { + height: 281.81px; + } + #network-footer-section { + max-width: 1120px; + width: 90vw !important; + height: 90% !important; + } + #ea-network-legal { + width: 70% !important; + } + #ea-network-legal a { + font-size: 14px !important; + } + #network-links { + height: 95px !important; + max-height: 95px !important; + } + #network-links a { + font-size: 16px !important; + margin: 10px !important; + } + #selector-container { + margin-left: 0px !important; + left: 0px !important; + gap: 0px !important; + justify-content: space-evenly !important; + } +} +@media only screen and (max-width: 1023px) { + #ea-local-footer { + height: 261.06px; + justify-content: center; + } + #ea-local-footer #section-footer-container { + width: 100% !important; + max-width: 100% !important; + flex-direction: column; + left: 0; + margin-left: 0px; + margin-top: 0px; + height: 70%; + } + #ea-social-links { + height: 80px !important; + margin-top: 15px; + } + #ea-social-links h3 { + font-size: 14px !important; + left: 0px !important; + text-align: left !important; + margin-left: 0px !important; + margin-bottom: 10px !important; + } + #ea-network-footer { + height: 450px; + } + #network-footer-section { + width: 870px !important; + height: 90% !important; + margin: 0px !important; + flex-direction: column; + } + #ea-logo img { + width: 49px; + height: 49px; + } + #row-1 { + flex-direction: column; + width: 100% !important; + } + #network-links { + width: 110% !important; + line-height: 30px !important; + } + #network-links a { + font-size: 16px !important; + margin: 5px !important; + } + #selector-container { + width: 90vw !important; + justify-content: space-around !important; + margin-top: 0px !important; + margin-bottom: 20px !important; + } + .footer-selector { + width: 40% !important; + } + #row-2 { + width: 110% !important; + flex-direction: column; + } + #ea-network-legal { + width: 100% !important; + } + #ea-network-legal a, #ea-network-legal p { + font-size: 14px; + margin: 5px; + } + #img-rights-container { + align-self: flex-start; + } + .footer-selector { + width: 100% !important; + position: relative !important; + } + .footer-selector #options-container-pricing { + width: 95% !important; + } + .footer-selector #options-container-language { + width: 95% !important; + } +} +@media only screen and (min-width: 769px) and (max-width: 883px) { + #ea-local-links { + width: 100% !important; + } + .footer-selector { + width: 100% !important; + position: relative !important; + } + .footer-selector #options-container-pricing { + width: 95% !important; + } + .footer-selector #options-container-language { + width: 95% !important; + } + #selector-container { + margin-bottom: 0px !important; + } + #ea-network-legal { + margin-top: 0px !important; + } +} +@media only screen and (min-width: 642px) and (max-width: 768px) { + .bottom-footer { + height: 850px; + background-color: #f3f3f3; + } + #ea-local-links { + width: 100% !important; + width: 90vw !important; + left: 0px !important; + margin-left: 0px !important; + border-bottom: 1px solid #969696; + align-self: center !important; + } + #section-footer-container { + height: 100% !important; + } + #selector-container { + margin-top: 20px !important; + flex-direction: column; + } + .footer-selector { + width: 100% !important; + position: relative !important; + } + .footer-selector #options-container-pricing { + width: 95% !important; + } + .footer-selector #options-container-language { + width: 95% !important; + } + #ea-network-legal { + margin-top: 50px; + } + #ea-network-legal a { + font-size: 14px !important; + } + #ea-local-footer { + height: 300px; + } + #ea-network-footer { + height: 700px; + } + #ea-social-links { + height: 60px !important; + margin-top: 35px; + } + #ea-social-links h3 { + position: relative !important; + left: -20px !important; + } +} +@media only screen and (max-width: 641px) { + .bottom-footer { + height: 1000px; + background-color: #f3f3f3; + } + #ea-local-links { + width: 100% !important; + width: 90vw !important; + left: 0px !important; + margin-left: 0px !important; + border-bottom: 1px solid #969696; + align-self: center !important; + } + #section-footer-container { + height: 100% !important; + } + #selector-container { + flex-direction: column; + } + .footer-selector { + width: 100% !important; + position: relative !important; + } + .footer-selector #options-container-pricing { + width: 95% !important; + } + .footer-selector #options-container-language { + width: 95% !important; + } + #ea-network-legal { + margin-top: 20px; + } + #ea-network-legal a { + font-size: 14px !important; + } + #ea-local-footer { + height: 300px; + } + #ea-network-footer { + height: 700px; + } + #network-links { + margin-bottom: 40px; + } +} +@media only screen and (max-width: 500px) { + #ea-local-footer { + height: 400px !important; + } + #ea-social-links { + justify-content: space-evenly; + } +} +@media only screen and (max-width: 444px) { + .bottom-footer { + height: 1000px !important; + background-color: #f3f3f3 !important; + } + #ea-network-footer { + height: 720px !important; + } +} +@media only screen and (max-width: 404px) { + .bottom-footer { + height: 1100px !important; + } + #ea-network-footer { + height: 750px !important; + } + #ea-social-links { + align-self: center !important; + } +} +.nav-bar-1 { + height: 40px; + background-color: #161616; + color: #b0b0b0; + display: flex; + justify-content: flex-end; + align-items: center; + position: relative; +} +.nav-bar-1 .nav-bar-1-link { + text-decoration: none; + color: #636363; +} +.nav-bar-1 .fa-user, .nav-bar-1 .fa-question { + margin-left: 2rem; + margin-right: 1rem; + cursor: pointer; +} +.nav-bar-1 .nav-bar-1-svg-container { + width: 32px; + height: 32px; + fill: #777777; + margin-right: 2.25rem; + margin-left: 1.5rem; +} +.nav-bar-1 .nav-bar-1-svg-container:hover { + fill: #a3a3a3; +} +.nav-bar-1 .fa-user:hover, .nav-bar-1 .fa-question:hover { + color: #f3f3f3; +} + +.nav-bar-2 { + height: 60px; + display: flex; + align-items: center; + position: relative; +} + +.nav-bar-2-vertical-menu { + font-size: 1.5rem; + transition: 0.25s; + position: absolute; + margin-left: 1.5rem; +} +.nav-bar-2-vertical-menu:hover { + color: rgb(255, 71, 71); + font-size: 2rem; + cursor: pointer; + transition: 0.25s ease-in-out; +} + +.nav-bar-2-hamburger-menu { + display: none; +} + +.nav-bar-2-img-link { + margin-left: 4.4rem; + margin-top: 0.48rem; +} + +.nav-bar-2-links { + display: flex; + margin-left: 3rem; +} + +.nav-bar-2-link-container { + display: flex; + text-decoration: none; +} + +.nav-bar-2-link { + text-decoration: none; + color: #161616; + margin-left: 1rem; + margin-right: 0.7rem; +} +.nav-bar-2-link .fa-angle-down { + transition: 0.2s; + margin-left: 5px; +} +.nav-bar-2-link .fa-angle-down { + transition: 0.3s; +} +.nav-bar-2-link:hover { + transition: 0.1s; + color: rgb(255, 71, 71); +} +.nav-bar-2-link:hover .fa-angle-down { + transform: rotateX(180deg); + transition: 0.3s; +} + +@media only screen and (max-width: 1023px) { + .nav-bar-2-links { + display: none; + } + .nav-bar-2-vertical-menu { + display: none; + } + .nav-bar-2-hamburger-menu { + display: block; + font-size: 1.4rem; + position: absolute; + top: 30%; + left: 1.5%; + } + .nav-bar-2-hamburger-menu:hover { + transition: 0.1s; + color: rgb(255, 71, 71); + } + .nav-bar-2-img-link { + margin: 0; + margin-left: 3rem; + margin-top: 0.27rem; + } +} +@media screen and (max-width: 767px) { + .nav-bar-2-img-link img { + width: 55%; + margin-bottom: 0.3rem; + } + .nav-bar-2-hamburger-menu { + top: 29%; + left: 2%; + } +} +@media screen and (max-width: 639px) { + .nav-bar-2-img-link img { + width: 55%; + margin-bottom: 0.3rem; + } + .nav-bar-2-hamburger-menu { + top: 29%; + left: 2%; + } +} +.tabs-wrapper { + overflow-x: hidden; + overflow-y: hidden; + margin-top: 2rem; + height: 3.75rem; + display: flex; + justify-content: center; + align-items: center; + border-bottom: 2px solid rgba(211, 211, 211, 0.7); +} +.tabs-wrapper ul { + width: 72rem; + list-style: none; + display: flex; + justify-content: flex-start; +} +.tabs-wrapper ul li { + border-left: 1.5px solid rgba(211, 211, 211, 0.7); +} +.tabs-wrapper ul li a { + padding: 1rem; + color: inherit; + text-decoration: none; + font-size: 1.2rem; +} +.tabs-wrapper ul li a:hover { + transition: all 0.3s ease; + background: rgba(211, 211, 211, 0.7); + color: rgba(0, 0, 0, 0.6); +} +.tabs-wrapper ul li a sup { + vertical-align: top; + font-size: 0.6em; +} +.tabs-wrapper ul li:nth-of-type(1) { + border-left: none; +} + +.banner { + width: 100%; + height: 5.8823529412vw; + display: flex; + justify-content: space-evenly; +} +.banner .banner-item { + display: flex; + max-width: 60%; + flex: 1 1; + justify-content: space-between; + align-items: center; +} +@media screen and (max-width: 1455px) { + .banner .banner-item { + max-width: 80%; + } +} +@media screen and (max-width: 1023px) { + .banner .banner-item { + max-width: 90%; + } +} +@media screen and (max-width: 1023px) { + .banner .banner-item { + text-align: center; + flex-direction: column; + align-items: center; + justify-content: center; + } + .banner .banner-item .btn-container { + margin-block: 15px; + } +} +@media screen and (max-width: 1455px) { + .banner { + height: 7.6923076923vw; + } +} +@media screen and (max-width: 1023px) { + .banner { + height: 16.6666666667vw; + } +} +@media screen and (max-width: 767px) { + .banner { + height: 30vw; + } +} + +/* EA Play Box Styling*/ +.sidebar-ea-play-box { + position: relative; + top: 0; + left: 0; + width: 100%; + height: 336px; + display: flex; + justify-content: center; + align-items: center; +} +.sidebar-ea-play-box:hover .sidebar-box-logo { + transform: scale(1.15); +} +.sidebar-ea-play-box .sidebar-ea-play-bg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 336px; + filter: brightness(0.9); + transition: all 300ms ease-in-out; +} +.sidebar-ea-play-box .sidebar-box-logo { + width: 90px; + position: absolute; + transition: all 300ms ease-out; +} + +/* Sidebar Little Box Styling*/ +.sidebar-little-box { + position: relative; + top: 0; + left: 0; + width: calc(50% - 16px); + height: 160px; + display: flex; + justify-content: center; + align-items: center; +} +.sidebar-little-box:hover .sidebar-little-box-logo { + transform: scale(1.15); +} +.sidebar-little-box .sidebar-little-box-bg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 160px; + filter: brightness(0.9); + transition: all 300ms ease-in-out; +} +.sidebar-little-box .sidebar-little-box-logo { + width: 70px; + position: absolute; + transition: all 300ms ease-out; +} + +/* sidebar */ +.sidebar-wrapper { + background-color: #fff; + width: 416px; + padding: 0 48px 64px 32px; + box-shadow: 5px 10px 8px #888888; + transition: all 0.3s ease-in; + position: relative; + top: 32px; + left: 0; +} +.sidebar-wrapper .sidebar-close-icon { + width: 16px; +} +.sidebar-wrapper .sidebar-close-icon:hover { + color: red; +} +.sidebar-wrapper .sidebar-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 47px 0 47px 0; +} +.sidebar-wrapper .boxes-wrapper { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 32px; +} + +/*Sezione giochi in evidenza*/ +#giochi-in-evidenza { + max-width: 1456px; + margin: 0 auto; +} + +.giochi-in-evidenza-text { + text-align: center; + margin: 3rem 0 2rem 0; +} + +.boxes-section { + display: flex; + flex-wrap: wrap; + gap: 30px; + justify-content: center; +} + +.gie-inner-section { + display: flex; + justify-content: center; + margin: 2.7rem; +} /*# sourceMappingURL=main.css.map */ diff --git a/css/main.css.map b/css/main.css.map index 532df4e..21fe3bc 100644 --- a/css/main.css.map +++ b/css/main.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/_config.scss","../scss/box/_box.scss","../scss/typography/_fonts.scss","../scss/typography/_typography.scss","../scss/typography/_fuctions.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;ACHF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AC/CJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;ACrDJ;AAgqBA;AAGA;AClqBI;EAOgB;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;AD8pBpB;AC5lBQ;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AAQpB;EAGI;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;;AASxB;EAGI;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;;ADsjB5B;ACrpBQ;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;;;AANhB;EAMgB;EAAA;;;AAQpB;EAGI;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;;EANpB;IAMoB;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;;EANpB;IAMoB;IAAA;;EANpB;IAMoB;;EANpB;IAMoB;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;;EANpB;IAMoB;IAAA;;EANpB;IAMoB;;;AASxB;EAGI;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;;EANpB;IAMoB;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;;EANpB;IAMoB;IAAA;;EANpB;IAMoB;IAAA;;EANpB;IAMoB","file":"main.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/_config.scss","../scss/typography/_fonts.scss","../scss/typography/_typography.scss","../scss/typography/_functions.scss","../scss/hero/_hero.scss","../scss/box/_box.scss","../scss/button/_button.scss","../scss/card/_card.scss","../scss/colors/_functions.scss","../scss/footer/_footer.scss","../scss/navbar/_navbar.scss","../scss/nav-ultime/_nav-ultime.scss","../scss/banner/banner.scss","../scss/box-2/_box-2.scss","../scss/sidebar/_sidebar.scss","../scss/main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;ACHF;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;ACrDJ;AAsqBA;AAGA;ACxqBI;EAOgB;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;ADoqBpB;AClmBQ;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AAQpB;EAGI;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;;AASxB;EAGI;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;;AD4jB5B;AC3pBQ;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;;;AANhB;EAMgB;EAAA;;;AANhB;EAMgB;;;AAQpB;EAGI;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;;EANpB;IAMoB;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;;EANpB;IAMoB;IAAA;;EANpB;IAMoB;;EANpB;IAMoB;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;;EANpB;IAMoB;IAAA;;EANpB;IAMoB;;;AASxB;EAGI;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;;EANpB;IAMoB;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;;EANpB;IAMoB;IAAA;;EANpB;IAMoB;IAAA;;EANpB;IAMoB;;;AC7D5B;EACI;EACA;EACA;EACA;;AAEI;AAAA;EAEI;EACA;EACA;EACA;;AAIR;EAfJ;IAgBQ;;;AAGJ;EAnBJ;IAoBQ;;;AAGJ;EAvBJ;IAwBQ;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EAVJ;IAWQ;IACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EAVJ;IAWQ;IACA;IACA;;EACA;IACI;;;AAKZ;EACI;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;AAEA;EAdJ;IAgBQ;IACA;;;AAGJ;EApBJ;IAsBQ;IACA;;;AAGJ;EA1BJ;IA4BQ;IACA;;;AAIJ;EACI;EACA;;AACA;EAHJ;IAKQ;;;AAKR;EACI;;AAKR;EACI;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAXJ;IAaQ;;;AAGJ;EAhBJ;IAkBQ;;;AAGJ;EArBJ;IAsBQ;;;AAKJ;EAEI;;AAEA;EAJJ;IAMQ;;;AAKR;EACI;;;ACvJZ;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AC5DF;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;;AAMR;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;;AAQR;EACI;IACI;IACA;;EAGJ;IACI;IACA;;EAEA;IACI;IACA;;;AAOZ;EACI;IACI;IACA;;EAGJ;IACI;IACA;;EAEA;IACI;IACA;;;AAKZ;EACG;IACC;IACA;;EAGA;IACI;IACA;;EAEA;IACI;IACA;;;AC1HZ;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;;AAsBA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAIJ;EACE;;AAGF;EACE;;;AAKN;EACE;IACE;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;IACA;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;IACA;;;AAMR;EACE;IACE;IACA;;EAEA;IACE;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;IACA;;EAGF;IACE;IACA;IACA;IACA;;EAEF;IACE;;EAGF;IACE;;;AAMR;EACE;EACA;EACA;EACA;;;ACpKE;EAEI;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;AAQA;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;ACTV;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAOV;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;AACA;EACI;;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;;AACA;EACE;EACA;;AAON;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAOZ;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACE;EACA;;;AASV;EACE;;;AAGF;EACE;EACA;EACI;EACA;;;AAKN;EACE;IACE;;EACA;IACE;IACA;IACA;IACA;;EACA;IACE;IACA;;EAEF;IACE;IACA;;EACA;IACE;;EAMR;IACE;;EACA;IACE;;EAIJ;IACE;;EAGF;IACE;IACA;IACA;;EAGF;IACE;;EACA;IACE;;EAIJ;IACE;IACA;;EACA;IACE;IACA;;EAIJ;IACE;IACA;IACA;IACA;;;AAIJ;EACA;IACE;IACA;;EACA;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAIJ;IACE;IACA;;EACA;IACE;IACA;IACA;IACA;IACA;;EAKJ;IACE;;EAGF;IACE;IACA;IACA;IACA;;EAIA;IACE;IACA;;EAIJ;IACE;IACA;;EAGF;IACE;IACA;;EACA;IACE;IACA;;EAIJ;IACE;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;;EAGF;IACE;;EACA;IACE;IACA;;EAIJ;IACE;;EAGF;IACE;IACA;;EACA;IACE;;EAEF;IACE;;;AAKJ;EACE;IACE;;EAGF;IACE;IACA;;EACA;IACE;;EAEF;IACE;;EAIJ;IACE;;EAGF;IACE;;;AAKJ;EACE;IACE;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;;EAIF;IACE;IACA;;EACA;IACE;;EAEF;IACE;;EAIJ;IACE;;EACA;IACE;;EAIJ;IACE;;EAGF;IACE;;EAGF;IACE;IACA;;EACA;IACE;IACA;;;AAKN;EACE;IACE;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;IACA;;EACA;IACE;;EAEF;IACE;;EAIJ;IACE;;EACA;IACE;;EAIJ;IACE;;EAGF;IACE;;EAGF;IACE;;;AAKJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;IACA;;EAGF;IACE;;;AAKJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;;AC3lBJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKR;EACI;;;AAKR;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;;AAIR;EACI;;;AAGJ;EACI;EACA;;;AAIJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;;AAIZ;EACI;IACI;;EAGJ;IACI;;EAGJ;IACI;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;;EAIR;IACI;IACA;IACA;;;AAIR;EAEQ;IACI;IACA;;EAIR;IACI;IACA;;;AAGJ;EAEQ;IACI;IACA;;EAIR;IACI;IACA;;;AC9JZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAKN;EACE;;;ACvCN;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AACA;EANJ;IAOQ;;;AAEJ;EATJ;IAUQ;;;AAEJ;EAZJ;IAaQ;IACA;IACA;IACA;;EAEA;IACI;;;AAMZ;EA/BJ;IAgCQ;;;AAGJ;EAnCJ;IAoCQ;;;AAGJ;EAvCJ;IAwCQ;;;;ACxCR;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIE;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;ACjEJ;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AACA;EACE;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;ACfJ;AACA;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA","file":"main.css"} \ No newline at end of file diff --git a/index.html b/index.html index b91c8bd..2d4db67 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,424 @@ - - - - + + + + + EA Project Team 1 + + + + + +
+ + + + + + + +
+
+
+ +

Prendi posto sulla griglia di partenza oggi stesso con EA Play!*

+ +
+

Gioca ora

 +
+ +
+
+
+
+
+ + +
+

Giochi in evidenza

+
+ + + +

Sito ufficiale

+ + + + +

Sito ufficiale

+ + + + +

Sito ufficiale

+ + + + +

Sito ufficiale

+ + + + +

Sito ufficiale

+ + + + +

Sito ufficiale

+ +
+
+
+

Ultimi giochi

 +
+
+
+ + +
+

Ultime Novità

+
+ +
+ +
+ +
+
+ +
+ Immagine generica +
+
+ Electronic Arts Inc. + 29-lug-2022 +
+

Lorem, ipsum dolor.

+
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem + atque voluptatum voluptatibus ratione enim nemo aperiam inventore + mollitia dolore vero! +
+ + + +
+ Immagine generica +
+
+ Electronic Arts Inc. + 29-lug-2022 +
+

Lorem, ipsum dolor.

+
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem + atque voluptatum voluptatibus ratione enim nemo aperiam inventore + mollitia dolore vero! +
+ + + +
+ Immagine generica +
+
+ Electronic Arts Inc. + 29-lug-2022 +
+

Lorem, ipsum dolor.

+
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem + atque voluptatum voluptatibus ratione enim nemo aperiam inventore + mollitia dolore vero! +
+ + + +
+ Sexual Orientation The Sims 4 +
+
+ Electronic Arts Inc. + 29-lug-2022 +
+

Lorem, ipsum dolor.

+
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem + atque voluptatum voluptatibus ratione enim nemo aperiam inventore + mollitia dolore vero! +
+ + + +
+ The Sims College +
+
+ Electronic Arts Inc. + 29-lug-2022 +
+

Lorem, ipsum dolor.

+
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem + atque voluptatum voluptatibus ratione enim nemo aperiam inventore + mollitia dolore vero! +
+ + + +
+ Immagine generica +
+
+ Electronic Arts Inc. + 29-lug-2022 +
+

Lorem, ipsum dolor.

+
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem + atque voluptatum voluptatibus ratione enim nemo aperiam inventore + mollitia dolore vero! +
+ +
+ +
+
+

Più Dettagli

 +
+
+ +
+ + +
+ + + + + + + + +
+
+
+ +
Non limitarti al gioco. Gioca al massimo. Sblocca ricompense esclusive, contenuti per i soli membri e una libreria dei migliori titoli.
+ +
+

Iscriviti subito

 +
+
+ +
+
+ + + + + + + + + - \ No newline at end of file + diff --git a/scss/nav/_nav.scss b/sass similarity index 100% rename from scss/nav/_nav.scss rename to sass diff --git a/scss/banner/banner.html b/scss/banner/banner.html new file mode 100644 index 0000000..027451c --- /dev/null +++ b/scss/banner/banner.html @@ -0,0 +1,26 @@ + + + + + + + + Banner + + + + + \ No newline at end of file diff --git a/scss/banner/banner.scss b/scss/banner/banner.scss new file mode 100644 index 0000000..30ba5ef --- /dev/null +++ b/scss/banner/banner.scss @@ -0,0 +1,43 @@ +.banner { + width: 100%; + height: calc(100vw / 17); + display: flex; + justify-content: space-evenly; + + .banner-item{ + display: flex; + max-width: 60%; + flex: 1 1; + justify-content: space-between; + align-items: center; + @media screen and (max-width: 1455px) { + max-width: 80%; + } + @media screen and (max-width: 1023px) { + max-width: 90%; + } + @media screen and (max-width: 1023px) { + text-align: center; + flex-direction: column; + align-items: center; + justify-content: center; + + .btn-container { + margin-block: 15px; + } + } + + + } + @media screen and (max-width: 1455px) { + height: calc(100vw / 13); + } + + @media screen and (max-width: 1023px) { + height: calc(100vw / 6); + } + + @media screen and (max-width: 767px) { + height: 30vw; + } +} \ No newline at end of file diff --git a/scss/box-2/_box-2.scss b/scss/box-2/_box-2.scss new file mode 100644 index 0000000..d696745 --- /dev/null +++ b/scss/box-2/_box-2.scss @@ -0,0 +1,72 @@ +/* EA Play Box Styling*/ +.sidebar-ea-play-box{ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 336px; + display: flex; + justify-content: center; + align-items: center; + + &:hover{ + + .sidebar-box-logo{ + transform: scale(1.15); + } + } + + .sidebar-ea-play-bg{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 336px; + filter: brightness(0.9); + transition: all 300ms ease-in-out; + } + + .sidebar-box-logo{ + width: 90px; + position: absolute; + transition: all 300ms ease-out; + } +} + +/* Sidebar Little Box Styling*/ +.sidebar-little-box{ + position: relative; + top: 0; + left: 0; + width: calc(50% - 16px); + height: 160px; + display: flex; + justify-content: center; + align-items: center; + + &:hover{ + .sidebar-little-box-logo{ + transform: scale(1.15); + } + } + + .sidebar-little-box-bg{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 160px; + filter: brightness(0.9); + transition: all 300ms ease-in-out; + } + + .sidebar-little-box-logo{ + width: 70px; + position: absolute; + transition: all 300ms ease-out; + } +} + + + + diff --git a/scss/box-2/box-2.html b/scss/box-2/box-2.html new file mode 100644 index 0000000..d159d70 --- /dev/null +++ b/scss/box-2/box-2.html @@ -0,0 +1,23 @@ + + + + + + + + Sidebar box + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/scss/box/_box.scss b/scss/box/_box.scss index 316b858..978be09 100644 --- a/scss/box/_box.scss +++ b/scss/box/_box.scss @@ -12,7 +12,7 @@ &:hover{ .box-background{ - opacity: 0.2; + opacity: 0.1; } .box-logo{ @@ -36,9 +36,7 @@ } .box-logo{ - width: 130px; position: absolute; - color: white; transition: all 300ms ease-out; } @@ -47,4 +45,19 @@ visibility: hidden; color: white; } +} + +.box-logo-w1{ + width: 160px; +} +.box-logo-w2{ + width: 130px; +} + +.box-logo-w3{ + width: 100px; +} + +.box-logo-w4{ + width: 70px; } \ No newline at end of file diff --git a/scss/button/_button.scss b/scss/button/_button.scss index e69de29..a03b413 100644 --- a/scss/button/_button.scss +++ b/scss/button/_button.scss @@ -0,0 +1,126 @@ + +.btn-container{ + display: flex; + align-items: center; + justify-content: center; + width: 168px; + height: 65px; + position: relative; +} + +// SPECIFICHE GENERALI DI TUTTI I BUTTONS +.btn{ + height: 60px; + width: 160px; + background-color: #f3f3f3; + color: rgb(22, 22, 22); + border-radius: 2.5px; + transition: .1s; + + p{ + width: 100%; + text-align: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + &:hover{ + width: 168px; + height: 65px; + } + + &:focus{ + border: 2.5px solid black; + outline: 2.5px solid #f3f3f3; + transition: 0s; + } +} + + +// SPECIFICHE ALTRI BUTTONS +.btn-dark{ + border: 2px solid #161616; + background-color: transparent; + color: #161616; + + &:focus{ + background-color: #161616; + border: 2.5px solid #f3f3f3; + outline: 2.5px solid #161616; + color: #f3f3f3; + transition: 0s; + } +} + +.btn-white{ + border: 2px solid #f3f3f3; + background-color: transparent; + color: #f3f3f3; + + &:focus{ + background-color: #f3f3f3; + border: 2.5px solid #161616; + outline: 2.5px solid #f3f3f3; + color: #161616; + transition: 0s; + } +} + + +// MEDIA QUERIES + +//TABLET +@media only screen and (max-width: 1023px){ + .btn-container{ + height: 56px; + width: 144px; + } + + .btn{ + height: 50px; + width: 136px; + + &:hover{ + height: 56px; + width: 144px; + } + } +} + + +//MOBILE +@media only screen and (max-width: 767px){ + .btn-container{ + height: 56px; + width: 144px; + } + + .btn{ + height: 50px; + width: 136px; + + &:hover{ + height: 56px; + width: 144px; + } + } +} + +@media only screen and (max-width: 639px){ + .btn-container{ + width: 547px; + height: 56px; + } + + .btn{ + width: 544px; + height: 50px; + + &:hover{ + width: 547px; + height: 56px; + } + } +} \ No newline at end of file diff --git a/scss/button/button.html b/scss/button/button.html index e69de29..7f642b6 100644 --- a/scss/button/button.html +++ b/scss/button/button.html @@ -0,0 +1,39 @@ + + + + + + + + + + Buttons + + + +
+
+
+

Gioca ora

 +
+ +
+

Più dettagli

 +
+ +
+

Ultimi giochi

 +
+ +
+

Iscriviti subito

 +
+ +
+

Scopri di più

 +
+
+
+ + + \ No newline at end of file diff --git a/scss/card/_card.scss b/scss/card/_card.scss index e69de29..acf3702 100644 --- a/scss/card/_card.scss +++ b/scss/card/_card.scss @@ -0,0 +1,167 @@ +/*Card Styling*/ +.titleultime { + margin-top:4rem; + display: flex; + justify-content: center; + align-items: center; + + .ultimenov { + text-align: center; + } +} + +.cards-container { + width: 72rem; + display: flex; + justify-content: space-around; + align-items: space-around; + flex-wrap: wrap; + margin-left: auto; + margin-right: auto; + flex: 1 1; + margin-top:4rem; //da rimuovere appena andremo a posizionare tutto + + /* approccio super responsive per le transitions, da sistemare*/ + // .card { + // height: 31.5rem; + // width: 22rem; + // box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3); + // margin-bottom: 1rem; + + // .card::after { + // position: absolute; + // top: 0; + // left: 0; + // right: 0; + // bottom: 0; + // opacity: 0; + // box-shadow: 5px 5px 30px rgba(0, 0, 0, .7); + // transition: opacity .5s ease; + // } + // .card:hover { + // opacity: 1; + // transform: translateY(-15px); + // } + + .card { + height: 31.5rem; + width: 22rem; + box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3); + margin-bottom: 1rem; + transition: transform 0.5s ease, box-shadow 0.5s ease; + + &:hover { + transform: translateY(-12px); + box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.7); + } + + .img { + width: 100%; + + img { + margin: 0; + width: 100%; + } + } + + .spans { + display: flex; + margin: 1rem; + + span { + margin-right: 1rem; + font-size: 1rem; + } + + span:first-of-type { + color: orangered; + } + } + + h3 { + margin: 1rem; + } + + h6 { + margin: 1rem; + } + } +} + +@media screen and (max-width: 1023px) { + .cards-container { + max-width: 100%; + display: flex; + justify-content: center; + align-items: center; + + .card { + width: 25.5rem; + height: 26.5rem; + margin-bottom: 1rem; + margin-right: 1rem; + margin-left: 1rem; + transition: transform 0.5s ease, box-shadow 0.5s ease; + + &:hover { + transform: translateY(-10px); + box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.7); + } + + .spans { + margin: 0.5rem 1rem 0.5rem 1rem; + } + + h3 { + margin: 0.5rem 1rem 0.5rem 1rem; + } + + h6 { + margin: 0.5rem 1rem 0.5rem 1rem; + font-size: 16px; + } + } + } +} + +@media screen and (max-width: 767px) { + .cards-container { + display: flex; + flex-direction: column; + + .card { + width: 35.5rem; + height: 7.25rem; + display: flex; + flex-direction: column; + align-items: center; + transition: transform 0.5s ease, box-shadow 0.5s ease; + + &:hover { + transform: translateY(-10px); + box-shadow: 10px 20px 50px rgba(0, 0, 0, 0.7); + } + + .spans { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + .img { + display: none; + } + + h6 { + display: none; + } + } + } +} + +.btn-ultime { + display: flex; + justify-content: center; + margin-bottom: 3rem; + margin-top: 2.7rem; +} \ No newline at end of file diff --git a/scss/card/card.html b/scss/card/card.html index e69de29..39d54aa 100644 --- a/scss/card/card.html +++ b/scss/card/card.html @@ -0,0 +1,129 @@ + + + + + + + + Card + + +
+

Ultime Novità

+
+ +
+ + +
+ +
+ +
+ Immagine generica +
+
+ Electronic Arts Inc. + 29-lug-2022 +
+

Lorem, ipsum dolor.

+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem atque voluptatum voluptatibus ratione enim nemo aperiam inventore mollitia dolore vero!
+ + + +
+ Immagine generica +
+
+ Electronic Arts Inc. + 29-lug-2022 +
+

Lorem, ipsum dolor.

+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem atque voluptatum voluptatibus ratione enim nemo aperiam inventore mollitia dolore vero!
+ + + +
+ Immagine generica +
+
+ Electronic Arts Inc. + 29-lug-2022 +
+

Lorem, ipsum dolor.

+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem atque voluptatum voluptatibus ratione enim nemo aperiam inventore mollitia dolore vero!
+ + + +
+ Sexual Orientation The Sims 4 +
+
+ Electronic Arts Inc. + 29-lug-2022 +
+

Lorem, ipsum dolor.

+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem atque voluptatum voluptatibus ratione enim nemo aperiam inventore mollitia dolore vero!
+ + + +
+ The Sims College +
+
+ Electronic Arts Inc. + 29-lug-2022 +
+

Lorem, ipsum dolor.

+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem atque voluptatum voluptatibus ratione enim nemo aperiam inventore mollitia dolore vero!
+ + + +
+ Immagine generica +
+
+ Electronic Arts Inc. + 29-lug-2022 +
+

Lorem, ipsum dolor.

+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem atque voluptatum voluptatibus ratione enim nemo aperiam inventore mollitia dolore vero!
+ +
+ +
+
+

Più Dettagli

 +
+
+ + diff --git a/scss/colors/_colors.scss b/scss/colors/_colors.scss index e69de29..b2ad347 100644 --- a/scss/colors/_colors.scss +++ b/scss/colors/_colors.scss @@ -0,0 +1,25 @@ +@use 'functions'; + +$colors: ( + "black": #000000, + "dark": #161616, + "light": #f3f3f3, + "white": #ffffff, + "gray": #eaeaea, + "gray-focus": #dedede, + "dark-blue": #29244d, + "light-orange": #ed5355, + "orange": #ff4747, + "red": #fe0115, + "dark-light-blue": #6fb0d6, + "transparent": transparent, +); + +$items: ( + "text": color, + "bg": background-color +); + +@include functions.color_root($colors); + +@include functions.color_classes($colors, $items); \ No newline at end of file diff --git a/scss/colors/_functions.scss b/scss/colors/_functions.scss new file mode 100644 index 0000000..b0da51e --- /dev/null +++ b/scss/colors/_functions.scss @@ -0,0 +1,17 @@ +@mixin color_root($colors) { + :root { + @each $key1, $value1 in $colors { + --#{$key1}: #{$value1}; + } + } + } + + @mixin color_classes($colors, $items) { + @each $item, $value1 in $items { + @each $color, $value2 in $colors { + .#{$item}-#{$color} { + #{$value1}: var(--#{$color}); + } + } + } + } \ No newline at end of file diff --git a/scss/colors/colors.html b/scss/colors/colors.html index e69de29..a3835e9 100644 --- a/scss/colors/colors.html +++ b/scss/colors/colors.html @@ -0,0 +1,90 @@ + + + + + + + Colors + + + + + +
+ +

.bg-black

+

.text-black

+

--black: #000000

+ + +

.bg-dark

+

.text-dark

+

--dark: #161616

+ + +

.bg-light

+

.text-light

+

--light: #f3f3f3

+ + +

.bg-white

+

.text-white

+

--white: #ffffff

+ + +

.bg-gray

+

."text-gray

+

--gray: #eaeaea

+ + +

.bg-gray-focus

+

.text-gray-focus

+

--dark-gray: #dedede

+ + +

.bg-dark-blue

+

.text-dark-blue

+

--dark-blue: #29244d

+ + +

.bg-light-orange

+

.text-light-orange

+

--light-orange: #ed5355

+ + +

.bg-orange

+

.text-orange

+

--orange: #ff4747

+ + +

.bg-red

+

.text-red

+

--red: #fe0115

+ + +

.bg-dark-light-blue

+

.text-dark-light-blue

+

--dark-light-blue: #6fb0d6

+ + +

.bg-transparent

+

.text-transparent (non usare)

+

--transparent: transparent

+ +
+ + + + \ No newline at end of file diff --git a/scss/footer/_footer.scss b/scss/footer/_footer.scss new file mode 100644 index 0000000..9738468 --- /dev/null +++ b/scss/footer/_footer.scss @@ -0,0 +1,606 @@ +@use "../colors/colors" as color; +@use "../typography/fonts" as font; + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + //border: 1px solid black; +} + +.bottom-footer { + width: 100% !important; + max-width: 100% !important; + display: flex; + flex-direction: column; + margin-bottom: 0px; + overflow: hidden !important; +} + +#ea-local-footer { + height: 235px; + background-color: #eaeaea; + line-height: 27px; + display: block; + font-size: 18px; + overflow-wrap: break-word; + padding-bottom: 12px; + padding-left: 76px; + padding-right: 76px; + display: flex; + flex-direction: column; + #section-footer-container { + width: 80%; + height: 121.78px; + display: flex; + justify-content: space-between; + align-items: baseline; + line-height: 27px; + margin-left: 145px; + margin-right: 31.5px; + margin-top: 40px; + padding-bottom: 28px; + overflow-wrap: break-word; + #ea-local-links { + width: 850px; + display: flex; + flex-wrap: wrap; + font-family: ElectronicArtsText; + font-size: 18px; + line-height: 27px; + margin-top: 14px; + color: black; + a { + font-size: 16px; + font-family: "ElectronicArtsText"; + font-weight: lighter; + color: #161616; + text-decoration: none; + margin-bottom: 5px; + margin-right: 40px; + margin-top: 8px; + &:hover { + color: rgb(255, 71, 71); + } + } + } + } +} + +#ea-social-links { + width: 245px; + min-width: 245px !important; + height: 65px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +#links-container { + height: 27px; + justify-self: flex-end; + display: flex; + justify-content: space-between; + a { + transition: all 0.1s; + transform-origin: 50% 50%; + &:hover { + transform: scale(1.2); + } + } + +} + +#ea-network-footer { + width: 100%; + height: 337.72px; + background-color: #f3f3f3; + padding: 15px 93px 40px; + display: flex; + justify-content: center; + #network-footer-section { + width: 82%; + height: 282.72px; + display: flex; + justify-content: space-between; + #ea-logo { + width: 64px; + display: flex; + flex-direction: column; + justify-content: flex-start; + } + #footer-row { + width: 90%; + justify-self: end; + #row-1 { + height: 50%; + width: 100%; + display: flex; + justify-content: space-between; + #network-links { + height: 100%; + width: 55%; + line-height: 50px; + a { + font-size: 18px; + font-family: "ElectronicArtsText"; + font-weight: lighter; + color: #161616; + text-decoration: none; + margin-bottom: 5px; + margin-right: 40px; + margin-top: 8px; + } + } + #selector-container { + margin-top: 15px; + height: 100%; + width: 40%; + display: flex; + justify-content: space-between; + gap: 35px !important; + .footer-selector { + height: 61px; + width: 191px; + min-height: 61px !important; + min-width: 191px !important; + border: 2px solid rgb(194, 194, 194); + border-radius: 3px; + outline: 2px solid transparent; + transition: 0.1s; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + transition: all 0.1s; + &:hover { + border: 2px solid transparent; + outline: 2px solid rgb(194, 194, 194) + } + &:focus { + border: 2px solid transparent; + outline: 3px solid rgb(194, 194, 194) + } + #options-container-pricing { + height: 50px; + width: 142px; + font-family: ElectronicArtsText; + font-size: 15px; + font-stretch: 100%; + font-weight: 400; + letter-spacing: normal; + line-height: 22.5px; + text-align: left; + text-indent: 0px; + word-spacing: 0px; + color: rgb(90, 90, 88); + cursor: default; + #country-prices-dropdown { + color: rgb(22, 22, 22); + } + #dropdown-selection { + display: flex; + align-items: center; + position: relative; + #regional-dropdown { + position: absolute; + right: 0px; + } + } + } + + } + #language-selector { + #options-container-language { + height: 50px; + width: 142px; + font-family: ElectronicArtsText; + font-size: 15px; + font-stretch: 100%; + font-weight: 400; + letter-spacing: normal; + line-height: 22.5px; + text-align: left; + text-indent: 0px; + word-spacing: 0px; + color: rgb(90, 90, 88); + #dropdown-language-selection { + display: flex; + align-items: center; + position: relative; + #country-language-dropdown { + color: rgb(22, 22, 22); + } + #language-dropdown { + position: absolute; + right: 0px; + } + span { + height: 11px; + width: 16px; + margin-right: 7px; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAIAAAD5gJpuAAAA50lEQVR42nWRMQ/BQBSAL0aRdDQzMnVjJWam1iDiV4jE5g+ZLSYSC6vIhSbowFrX3rXVeL0Xjza8fOn0fb17LSvOSt84Jwe4uu75cgT2By4ZQ24aBtJ0MyGSJHnqieKUMAzlYPSwbED1up+gv7CRpw7iOI6iCGylVNBoeqYp6rU/QdaGQVtUqqrT+RGAR7aUMggCtAE4Kh+0562cnQba9srlTAAqAouS7fu+gNF2JhguxxTkbSFAvRtG2pgmxwAvgwhfkP3QgwEAy3A6gZamq1MDL8YP9TmBWQViu9uuVyt8Ilz/YP7mBVsTOUQfESu+AAAAAElFTkSuQmCC"); + } + } + } + } + } + } + #row-2 { + height: 50%; + display: flex; + justify-content: space-between; + align-items: center; + #ea-network-legal { + height: 100%; + width: 50%; + a, p { + font-size: 16px; + font-family: "ElectronicArtsText"; + font-weight: lighter; + color: #161616; + text-decoration: none; + margin-bottom: 5px; + margin-right: 40px; + margin-top: 8px;} + } + #img-rights-container { + width: 191px; + height: 61px; + } + } + } + } +} + + + +.footer-activated { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +.dropdown-activated { + -moz-transform: scale(-1, -1); + -o-transform: scale(-1, -1); + -webkit-transform: scale(-1, -1); + transform: scale(-1, -1); +} + + + +@media only screen and (min-width: 1024px) and (max-width: 1440px) { + #ea-local-footer { + height: 172.78px; + #section-footer-container { + width: 90vw !important; + align-self: center !important; + margin: 0; + margin-top: 20px; + #ea-local-links { + width: 900px; + height: 86.78px; + } + #ea-social-links { + width: 218px; + height: 82.89px; + h3 { + font-size: 14px; + } + } + } + } + + #ea-logo { + width: 49px; + img { + width: 49px; + } + } + + #ea-network-footer { + height: 281.81px; + } + + #network-footer-section { + max-width: 1120px; + width: 90vw !important; + height: 90% !important; + } + + #ea-network-legal { + width: 70% !important; + a { + font-size: 14px !important; + } + } + + #network-links { + height: 95px !important; + max-height: 95px !important; + a { + font-size: 16px !important; + margin: 10px !important; + } + } + + #selector-container { + margin-left: 0px !important; + left: 0px !important; + gap: 0px !important; + justify-content: space-evenly !important; + } +} + +@media only screen and (max-width: 1023px) { +#ea-local-footer { + height: 261.06px; + justify-content: center; + #section-footer-container { + width: 100% !important; + max-width: 100% !important; + flex-direction: column; + left: 0; + margin-left: 0px; + margin-top: 0px; + height: 70%; + } +} + +#ea-social-links { + height: 80px !important; + margin-top: 15px; + h3 { + font-size: 14px !important; + left: 0px !important; + text-align: left !important; + margin-left: 0px !important; + margin-bottom: 10px !important; + + } +} + +#ea-network-footer { + height: 450px; +} + +#network-footer-section { + width: 870px !important; + height: 90% !important; + margin: 0px !important; + flex-direction: column; +} + +#ea-logo { + img { + width: 49px; + height: 49px; + } +} + +#row-1 { + flex-direction: column; + width: 100% !important; +} + +#network-links { + width: 110% !important; + line-height: 30px !important; + a { + font-size: 16px !important; + margin: 5px !important; + } +} + +#selector-container { + width: 90vw !important; + justify-content: space-around !important; + margin-top: 0px !important; + margin-bottom: 20px !important; +} + +.footer-selector { + width: 40% !important; +} + +#row-2 { + width: 110% !important; + flex-direction: column; +} + +#ea-network-legal { + width: 100% !important; + a, p { + font-size: 14px; + margin: 5px; + } +} + +#img-rights-container { + align-self:flex-start; +} + +.footer-selector { + width: 100% !important; + position: relative !important; + #options-container-pricing { + width: 95% !important; + } + #options-container-language { + width: 95% !important; + } +} +} + +@media only screen and (min-width: 769px) and (max-width: 883px) { + #ea-local-links { + width: 100% !important; + } + + .footer-selector { + width: 100% !important; + position: relative !important; + #options-container-pricing { + width: 95% !important; + } + #options-container-language { + width: 95% !important; + } + } + + #selector-container { + margin-bottom: 0px !important; + } + + #ea-network-legal { + margin-top: 0px !important; + } + +} + +@media only screen and (min-width: 642px) and (max-width: 768px) { + .bottom-footer { + height: 850px; + background-color: #f3f3f3; + } + #ea-local-links { + width: 100% !important; + width: 90vw !important; + left: 0px !important; + margin-left: 0px !important; + border-bottom: 1px solid #969696; + align-self: center !important; + } + + #section-footer-container { + height: 100% !important; + } + + #selector-container { + margin-top: 20px !important; + flex-direction: column; + } + + //INTERVENIRE QUI SOTTO! + .footer-selector { + width: 100% !important; + position: relative !important; + #options-container-pricing { + width: 95% !important; + } + #options-container-language { + width: 95% !important; + } + } + + #ea-network-legal { + margin-top: 50px; + a { + font-size: 14px !important; + } + } + + #ea-local-footer { + height: 300px; + } + + #ea-network-footer { + height: 700px; + } + + #ea-social-links { + height: 60px !important; + margin-top: 35px; + h3 { + position: relative !important; + left: -20px !important; + } + } +} + +@media only screen and (max-width: 641px) { + .bottom-footer { + height: 1000px; + background-color: #f3f3f3; + } + #ea-local-links { + width: 100% !important; + width: 90vw !important; + left: 0px !important; + margin-left: 0px !important; + border-bottom: 1px solid #969696; + align-self: center !important; + } + + #section-footer-container { + height: 100% !important; + } + + #selector-container { + flex-direction: column; + } + + .footer-selector { + width: 100% !important; + position: relative !important; + #options-container-pricing { + width: 95% !important; + } + #options-container-language { + width: 95% !important; + } + } + + #ea-network-legal { + margin-top: 20px; + a { + font-size: 14px !important; + } + } + + #ea-local-footer { + height: 300px; + } + + #ea-network-footer { + height: 700px; + } + + #network-links { + margin-bottom: 40px; + } + +} + +@media only screen and (max-width: 500px) { + #ea-local-footer { + height: 400px !important; + } + + #ea-social-links { + justify-content: space-evenly; + } +} + +@media only screen and (max-width: 444px) { + .bottom-footer { + height: 1000px !important; + background-color: #f3f3f3 !important; + } + + #ea-network-footer { + height: 720px !important; + } + +} + +@media only screen and (max-width: 404px) { + .bottom-footer { + height: 1100px !important; + } + #ea-network-footer { + height: 750px !important; + } + #ea-social-links { + align-self: center !important; + } +} diff --git a/scss/footer/footer.html b/scss/footer/footer.html new file mode 100644 index 0000000..dcbcb0d --- /dev/null +++ b/scss/footer/footer.html @@ -0,0 +1,110 @@ + + + + + + + + Footer + + + + + + + \ No newline at end of file diff --git a/scss/hero/_hero.scss b/scss/hero/_hero.scss new file mode 100644 index 0000000..832a239 --- /dev/null +++ b/scss/hero/_hero.scss @@ -0,0 +1,157 @@ +.hero { + width: 100%; + height: calc(100vw / 3.5); + overflow: hidden; + position: relative; + picture { + source, + img { + width: 100%; + position: absolute; + z-index: auto; + scale: 1.1; + } + } + + @media screen and (max-width: 1455px) { + height: calc(100vw / 2.5); + } + + @media screen and (max-width: 1023px) { + height: calc(100vw / 2); + } + + @media screen and (max-width: 767px) { + height: 125vw; + } + + &-items-center { + position: absolute; + width: 100%; + height: 100%; + z-index: 4; + display: flex; + justify-content: space-between; + align-items: center; + + + @media screen and (max-width: 767px) { + flex-direction: column-reverse; + justify-content: flex-end; + } + } + + &-items-left { + position: absolute; + width: 100%; + height: 100%; + z-index: 4; + display: flex; + justify-content: space-between; + align-items: center; + + + @media screen and (max-width: 767px) { + flex-direction: column; + justify-content: center; + align-items: flex-start; + .hidden { + display: none; + } + } + } + + &-content-center { + width: 100%; + height: 100%; + + flex: 1 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + + padding-right: 150px; + padding-left: 70px; + + @media screen and (max-width: 1455px) { + + padding-right: 50px; + padding-left: 70px; + } + + @media screen and (max-width: 1023px) { + + padding-right: 0px; + padding-left: 70px; + } + + @media screen and (max-width: 767px) { + + padding-right: 20px; + padding-left: 20px; + + } + + .img-hero { + max-width: 80%; + margin-bottom: 1rem; + @media screen and (max-width: 767px) { + + width: 80vw; + + } + } + + .btn-container{ + margin-top: 2.7rem; + } + + } + + &-content-left { + width: 100%; + height: 100%; + + flex: 1 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + padding-left: 17.5%; + + @media screen and (max-width: 1455px) { + + padding-left: 15%; + } + + @media screen and (max-width: 1023px) { + + padding-left: 10%; + } + + @media screen and (max-width: 767px) { + padding-inline: 10%; + + + } + + .img-hero { + + max-width: 50%; + + @media screen and (max-width: 767px) { + + width: 20vw; + + } + } + + .btn-container{ + margin-top: 2.7rem; + } + + } + +} \ No newline at end of file diff --git a/scss/hero/hero.html b/scss/hero/hero.html new file mode 100644 index 0000000..4fbb1a0 --- /dev/null +++ b/scss/hero/hero.html @@ -0,0 +1,68 @@ + + + + + + + + Hero + + + + +
+ + + + + + + +
+
+
+ +

Prendi posto sulla griglia di partenza oggi stesso con EA Play!*

+ +
+

Gioca ora

 +
+ +
+
+
+
+
+ +
+ + + + + + + + +
+
+
+ +
Non limitarti al gioco. Gioca al massimo. Sblocca ricompense esclusive, contenuti per i soli membri e una libreria dei migliori titoli.
+ +
+

Iscriviti subito

 +
+
+ +
+
+ + + \ No newline at end of file diff --git a/scss/main.scss b/scss/main.scss index 4b2c236..f045ec3 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -1,7 +1,37 @@ @use "config"; +@use "typography/typography"; +@use "hero/hero"; @use "box/box"; @use "button/button"; @use "card/card"; @use "colors/colors"; -@use "nav/nav"; -@use "typography/typography"; \ No newline at end of file +@use "footer/footer"; +@use "navbar/navbar"; +@use "nav-ultime/nav-ultime"; +@use "banner/banner"; +@use "box-2/box-2"; +@use "sidebar/sidebar"; + +/*Sezione giochi in evidenza*/ +#giochi-in-evidenza{ + max-width: 1456px; + margin: 0 auto; +} + +.giochi-in-evidenza-text{ + text-align: center; + margin: 3rem 0 2rem 0; +} + +.boxes-section{ + display: flex; + flex-wrap: wrap; + gap: 30px; + justify-content: center; +} + +.gie-inner-section{ + display: flex; + justify-content: center; + margin: 2.7rem; +} \ No newline at end of file diff --git a/scss/nav-ultime/_nav-ultime.scss b/scss/nav-ultime/_nav-ultime.scss new file mode 100644 index 0000000..c8c33c9 --- /dev/null +++ b/scss/nav-ultime/_nav-ultime.scss @@ -0,0 +1,43 @@ +.tabs-wrapper { + overflow-x: hidden; + overflow-y: hidden; + margin-top: 2rem; + height: 3.75rem; + display: flex; + justify-content: center; + align-items: center; + border-bottom: 2px solid rgba($color: lightgrey, $alpha: 0.7); + + ul { + width: 72rem; + list-style: none; + display: flex; + justify-content: flex-start; + + li { + border-left: 1.5px solid rgba($color: lightgrey, $alpha: 0.7); + + a { + padding: 1rem; + color: inherit; + text-decoration: none; + font-size: 1.2rem; + + &:hover { + transition: all 0.3s ease; + background: rgba($color: lightgrey, $alpha: 0.7); + color: rgba($color: #000000, $alpha: 0.6); + } + + sup { + vertical-align: top; + font-size: 0.6em; + } + } + } + + li:nth-of-type(1) { + border-left: none; + } + } +} diff --git a/scss/nav-ultime/nav-ultime.html b/scss/nav-ultime/nav-ultime.html new file mode 100644 index 0000000..0fe71d8 --- /dev/null +++ b/scss/nav-ultime/nav-ultime.html @@ -0,0 +1,19 @@ + + + +
+ + +
+ diff --git a/scss/nav/nav.html b/scss/nav/nav.html deleted file mode 100644 index e69de29..0000000 diff --git a/scss/navbar/_navbar.scss b/scss/navbar/_navbar.scss new file mode 100644 index 0000000..626f842 --- /dev/null +++ b/scss/navbar/_navbar.scss @@ -0,0 +1,161 @@ +.nav-bar-1{ + height: 40px; + background-color: #161616; + color: #b0b0b0; + display: flex; + justify-content: flex-end; + align-items: center; + position: relative; + + .nav-bar-1-link{ + text-decoration: none; + color: #636363; + } + + .fa-user, .fa-question{ + margin-left: 2rem; + margin-right: 1rem; + cursor: pointer; + } + + .nav-bar-1-svg-container{ + width: 32px; + height: 32px; + fill: #777777; + margin-right: 2.25rem; + margin-left: 1.5rem; + + &:hover{ + fill: #a3a3a3; + } + } + + + .fa-user:hover, .fa-question:hover{ + color: #f3f3f3; + } +} + + +.nav-bar-2{ + height: 60px; + display: flex; + align-items: center; + position: relative; +} + +.nav-bar-2-vertical-menu{ + font-size: 1.5rem; + transition: .25s; + position: absolute; + margin-left:1.5rem; + + &:hover{ + color: rgb(255, 71, 71); + font-size: 2rem; + cursor: pointer; + transition: .25s ease-in-out; + } +} + +.nav-bar-2-hamburger-menu{ + display: none; +} + +.nav-bar-2-img-link{ + margin-left: 4.4rem; + margin-top: .48rem; +} + + +.nav-bar-2-links{ + display: flex; + margin-left: 3rem; +} + +.nav-bar-2-link-container{ + display: flex; + text-decoration: none; +} + +.nav-bar-2-link{ + text-decoration: none; + color: #161616; + margin-left: 1rem; + margin-right: 0.7rem; + + .fa-angle-down{ + transition: .2s; + margin-left: 5px; + } + + .fa-angle-down{ + transition: .3s; + } + + &:hover{ + transition: .1s; + color: rgb(255, 71, 71); + } + + &:hover .fa-angle-down{ + transform: rotateX(180deg); + transition: .3s; + } +} + +@media only screen and (max-width: 1023px) { + .nav-bar-2-links{ + display: none; + } + + .nav-bar-2-vertical-menu{ + display: none; + } + + .nav-bar-2-hamburger-menu{ + display: block; + font-size: 1.4rem; + position: absolute; + top: 30%; + left: 1.5%; + + &:hover{ + transition: .1s; + color: rgb(255, 71, 71); + } + } + + .nav-bar-2-img-link{ + margin: 0; + margin-left: 3rem; + margin-top: .27rem; + } +} + +@media screen and (max-width: 767px){ + .nav-bar-2-img-link{ + img{ + width: 55%; + margin-bottom: .3rem; + } + } + + .nav-bar-2-hamburger-menu{ + top: 29%; + left: 2%; + } +} + @media screen and (max-width: 639px){ + .nav-bar-2-img-link{ + img{ + width: 55%; + margin-bottom: .3rem; + } + } + + .nav-bar-2-hamburger-menu{ + top: 29%; + left: 2%; + } +} diff --git a/scss/navbar/navbar.html b/scss/navbar/navbar.html new file mode 100644 index 0000000..06fe74c --- /dev/null +++ b/scss/navbar/navbar.html @@ -0,0 +1,41 @@ + + + + + + + + + + EA Navbar + + + +
+
+ + + +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/scss/sidebar/_sidebar.scss b/scss/sidebar/_sidebar.scss new file mode 100644 index 0000000..58a8ba6 --- /dev/null +++ b/scss/sidebar/_sidebar.scss @@ -0,0 +1,32 @@ +/* sidebar */ +.sidebar-wrapper{ + background-color: #fff; + width: 416px; + padding: 0 48px 64px 32px; + box-shadow: 5px 10px 8px #888888; + transition: all 0.3s ease-in; + position: relative; + top: 32px; + left: 0; + + .sidebar-close-icon{ + width: 16px; + &:hover{ + color: red; + } + } + + .sidebar-header{ + display: flex; + justify-content: space-between; + align-items: center; + padding: 47px 0 47px 0; + } + + .boxes-wrapper{ + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 32px; + } +} \ No newline at end of file diff --git a/scss/sidebar/sidebar.html b/scss/sidebar/sidebar.html new file mode 100644 index 0000000..d10793a --- /dev/null +++ b/scss/sidebar/sidebar.html @@ -0,0 +1,63 @@ + + + + + + + + Sidebar + + + ☰ + + + + \ No newline at end of file diff --git a/scss/typography/_fuctions.scss b/scss/typography/_functions.scss similarity index 100% rename from scss/typography/_fuctions.scss rename to scss/typography/_functions.scss diff --git a/scss/typography/_typography.scss b/scss/typography/_typography.scss index 6f36b12..3be94dc 100644 --- a/scss/typography/_typography.scss +++ b/scss/typography/_typography.scss @@ -1,7 +1,7 @@ /*tipografia*/ @use 'fonts'; -@use 'fuctions'; +@use 'functions'; @@ -411,9 +411,9 @@ $styles_classes: ( h6: ( font-size: ( - mobile: 20px, - tablet: 24px, - desktop: 24px), + mobile: 19px, + tablet: 18px, + desktop: 18px), letter-spacing: ( mobile: -0.025em, @@ -536,7 +536,7 @@ $styles_classes: ( b2 : ( font-size: ( - mobile: 16px, + mobile: 15px, tablet: 18px, desktop: 18px), @@ -589,7 +589,7 @@ $styles_classes: ( letter-spacing: ( normal:normal), - text-transform: ( + text-decoration: ( none: none ) ), @@ -614,14 +614,14 @@ $styles_classes: ( ) ), - nav-link: ( + nav-bar-2-link: ( font-family: ( - ElectronicArtsText:'"ElectronicArtsText", Verdana, Helvetica, Arial, sans-serif'), + ElectronicArtsDisplay: '"ElectronicArtsDisplay", Verdana, Helvetica, Arial, sans-serif'), font-size: ( - mobile: 16px, - tablet: 18px, - desktop: 18px + mobile: 15px, + tablet: 17px, + desktop: 17px ), line-height: ( @@ -644,7 +644,7 @@ $styles_classes: ( ) ), - nav-dropdown-item: ( + nav-bar-2-dropdown-item: ( font-size: ( mobile: 16px, tablet: 16px, @@ -659,13 +659,19 @@ $styles_classes: ( ) ), - nav-dropdown-item-title: ( + nav-bar-2-dropdown-item-title: ( font-weight: ( 700: 700), text-decoration: ( none: none ) + ), + + title: ( + font-weight: ( + bold: bold + ) ) ); @@ -674,11 +680,11 @@ $styles_classes: ( $root: map-merge($styles_selectors, $styles_classes); /*root*/ -@include fuctions.typography_root($root); +@include functions.typography_root($root); /*selectors*/ -@include fuctions.typography_selectors($styles_selectors); +@include functions.typography_selectors($styles_selectors); /*clasess*/ -@include fuctions.typography_classes($styles_classes); +@include functions.typography_classes($styles_classes); diff --git a/scss/typography/typography.css b/scss/typography/typography.css new file mode 100644 index 0000000..8b7e72b --- /dev/null +++ b/scss/typography/typography.css @@ -0,0 +1,777 @@ +@font-face { + font-family: "ElectronicArtsDisplay"; + src: url(../../assets/fonts/ElectronicArtsDisplay-Regular.woff2) format("woff"); + font-weight: 400; + font-style: normal; +} +@font-face { + font-family: "ElectronicArtsDisplay"; + src: url(../../assets/fonts/ElectronicArtsDisplay-Bold.woff2) format("woff"); + font-weight: 600; + font-style: normal; +} +@font-face { + font-family: "ElectronicArtsText"; + src: url(../../assets/fonts/ElectronicArtsText-Light.woff2) format("woff"); + font-weight: 300; + font-style: normal; +} +@font-face { + font-family: "ElectronicArtsText"; + src: url(../../assets/fonts/ElectronicArtsText-LightItalic.woff2) format("woff"); + font-weight: 300; + font-style: italic; +} +@font-face { + font-family: "ElectronicArtsText"; + src: url(../../assets/fonts/ElectronicArtsText-Regular.woff2) format("woff"); + font-weight: 400; + font-style: normal; +} +@font-face { + font-family: "ElectronicArtsText"; + src: url(../../assets/fonts/ElectronicArtsText-Italic.woff2) format("woff"); + font-weight: 400; + font-style: italic; +} +@font-face { + font-family: "ElectronicArtsText"; + src: url(../../assets/fonts/ElectronicArtsText-Bold.woff2) format("woff"); + font-weight: 600; + font-style: normal; +} +@font-face { + font-family: "ElectronicArtsText"; + src: url(../../assets/fonts/ElectronicArtsText-BoldItalic.woff2) format("woff"); + font-weight: 600; + font-style: italic; +} +/*tipografia*/ +/*unisco le liste per estrarre i root*/ +/*root*/ +:root { + --body-font-size-mobile: 16px; + --body-font-size-tablet: 18px; + --body-font-size-desktop: 18px; + --body-font-family-ElectronicArtsText: "ElectronicArtsText", Verdana, Helvetica, Arial, sans-serif; + --body-font-weight-light: 300; + --body-font-weight-normal: 400; + --body-font-weight-bold: 600; + --body-letter-spacing-mobile: normal; + --body-letter-spacing-tablet: normal; + --body-letter-spacing-desktop: normal; + --body-line-height-mobile: 1.65; + --body-line-height-tablet: 1.5; + --body-line-height-desktop: 1.5; + --h1-font-size-mobile: 40px; + --h1-font-size-tablet: 44px; + --h1-font-size-desktop: 48px; + --h1-font-weight-400: 400; + --h1-letter-spacing-mobile: normal; + --h1-letter-spacing-tablet: normal; + --h1-letter-spacing-desktop: normal; + --h1-line-height-mobile: 1.25; + --h1-line-height-tablet: 1.25; + --h1-line-height-desktop: 1.35; + --h2-font-size-mobile: 32px; + --h2-font-size-tablet: 36px; + --h2-font-size-desktop: 40px; + --h2-font-weight-400: 400; + --h2-letter-spacing-mobile: normal; + --h2-letter-spacing-tablet: normal; + --h2-letter-spacing-desktop: normal; + --h2-line-height-mobile: 1.25; + --h2-line-height-tablet: 1.25; + --h2-line-height-desktop: 1.35; + --h3-font-size-mobile: 28px; + --h3-font-size-tablet: 32px; + --h3-font-size-desktop: 36px; + --h3-letter-spacing-desktop: normal; + --h3-letter-spacing-tablet: normal; + --h3-letter-spacing-mobile: normal; + --h3-line-height-desktop: 1.35; + --h3-line-height-tablet: 1.25; + --h3-line-height-mobile: 1.25; + --h3-font-weight-400: 400; + --h4-font-size-mobile: 20px; + --h4-font-size-tablet: 24px; + --h4-font-size-desktop: 24px; + --h4-letter-spacing-desktop: normal; + --h4-letter-spacing-tablet: normal; + --h4-letter-spacing-mobile: normal; + --h4-line-height-desktop: 1.35; + --h4-line-height-tablet: 1.25; + --h4-line-height-mobile: 1.25; + --h4-font-weight-400: 400; + --h5-font-size-mobile: 20px; + --h5-font-size-tablet: 24px; + --h5-font-size-desktop: 24px; + --h5-letter-spacing-mobile: -0.025em; + --h5-letter-spacing-tablet: -0.025em; + --h5-letter-spacing-desktop: -0.025em; + --h5-line-height-desktop: 1.35; + --h5-line-height-tablet: 1.25; + --h5-line-height-mobile: 1.25; + --h5-font-weight-400: 400; + --h6-font-size-mobile: 20px; + --h6-font-size-tablet: 24px; + --h6-font-size-desktop: 24px; + --h6-letter-spacing-mobile: -0.025em; + --h6-letter-spacing-tablet: -0.025em; + --h6-letter-spacing-desktop: -0.025em; + --h6-line-height-desktop: 1.35; + --h6-line-height-tablet: 1.25; + --h6-line-height-mobile: 1.25; + --h6-font-weight-400: 400; + --d1-font-size-mobile: 50px; + --d1-font-size-tablet: 64px; + --d1-font-size-desktop: 80px; + --d1-letter-spacing-mobile: normal; + --d1-letter-spacing-tablet: normal; + --d1-letter-spacing-desktop: normal; + --d1-line-height-mobile: 1.15; + --d1-line-height-tablet: 1.15; + --d1-line-height-desktop: 1.15; + --d1-font-style-normal: normal; + --d1-font-weight-600: 600; + --d1-font-family-ElectronicArtsDisplay: "ElectronicArtsDisplay", Verdana, Helvetica, Arial, sans-serif; + --d2-font-size-mobile: 42px; + --d2-font-size-tablet: 54px; + --d2-font-size-desktop: 68px; + --d2-letter-spacing-mobile: normal; + --d2-letter-spacing-tablet: normal; + --d2-letter-spacing-desktop: normal; + --d2-line-height-mobile: 1.15; + --d2-line-height-tablet: 1.15; + --d2-line-height-desktop: 1.15; + --d2-font-style-normal: normal; + --d2-font-weight-600: 600; + --d2-font-family-ElectronicArtsDisplay: "ElectronicArtsDisplay", Verdana, Helvetica, Arial, sans-serif; + --d3-font-size-mobile: 36px; + --d3-font-size-tablet: 44px; + --d3-font-size-desktop: 54px; + --d3-letter-spacing-mobile: normal; + --d3-letter-spacing-tablet: normal; + --d3-letter-spacing-desktop: normal; + --d3-line-height-mobile: 1.15; + --d3-line-height-tablet: 1.15; + --d3-line-height-desktop: 1.15; + --d3-font-style-normal: normal; + --d3-font-weight-600: 600; + --d3-font-family-ElectronicArtsDisplay: "ElectronicArtsDisplay", Verdana, Helvetica, Arial, sans-serif; + --d4-font-size-mobile: 32px; + --d4-font-size-tablet: 40px; + --d4-font-size-desktop: 44px; + --d4-letter-spacing-mobile: normal; + --d4-letter-spacing-tablet: normal; + --d4-letter-spacing-desktop: normal; + --d4-line-height-mobile: 1.15; + --d4-line-height-tablet: 1.15; + --d4-line-height-desktop: 1.15; + --d4-font-style-normal: normal; + --d4-font-weight-600: 600; + --d4-font-family-ElectronicArtsDisplay: "ElectronicArtsDisplay", Verdana, Helvetica, Arial, sans-serif; + --d5-font-size-mobile: 22px; + --d5-font-size-desktop: 32px; + --d5-letter-spacing-normal: normal; + --d5-line-height-100: 100%; + --d5-font-style-normal: normal; + --d5-font-weight-600: 600; + --d5-font-family-ElectronicArtsDisplay: "ElectronicArtsDisplay", Verdana, Helvetica, Arial, sans-serif; + --d6-font-size-mobile: 20px; + --d6-font-size-desktop: 24px; + --d6-letter-spacing-normal: normal; + --d6-line-height-100: 100%; + --d6-font-style-normal: normal; + --d6-font-weight-600: 600; + --d6-font-family-ElectronicArtsDisplay: "ElectronicArtsDisplay", Verdana, Helvetica, Arial, sans-serif; + --l1-font-size-mobile: 24px; + --l1-font-size-tablet: 24px; + --l1-font-size-desktop: 26px; + --l1-font-weight-600: 600; + --l1-letter-spacing-normal: normal; + --l1-line-height-mobile: 1.35; + --l1-line-height-tablet: 1.35; + --l1-line-height-desktop: 1.35; + --l1-font-family-ElectronicArtsDisplay: "ElectronicArtsDisplay", Verdana, Helvetica, Arial, sans-serif; + --l2-font-size-mobile: 14px; + --l2-font-size-tablet: 14px; + --l2-font-size-desktop: 16px; + --l2-font-weight-600: 600; + --l2-letter-spacing-normal: normal; + --l2-line-height-mobile: 1.35; + --l2-line-height-tablet: 1.35; + --l2-line-height-desktop: 1.35; + --l2-font-family-ElectronicArtsDisplay: "ElectronicArtsDisplay", Verdana, Helvetica, Arial, sans-serif; + --l3-font-size-mobile: 14px; + --l3-font-size-desktop: 16px; + --l3-font-style-normal: normal; + --l3-font-weight-600: 600; + --l3-letter-spacing-normal: normal; + --l3-line-height-100: 100%; + --l3-font-family-ElectronicArtsDisplay: "ElectronicArtsDisplay", Verdana, Helvetica, Arial, sans-serif; + --l4-font-size-mobile: 14px; + --l4-font-size-desktop: 14px; + --l4-font-style-normal: normal; + --l4-font-weight-600: 600; + --l4-letter-spacing-normal: normal; + --l4-line-height-100: 100%; + --l4-font-family-ElectronicArtsDisplay: "ElectronicArtsDisplay", Verdana, Helvetica, Arial, sans-serif; + --b1-font-size-mobile: 20px; + --b1-font-size-tablet: 20px; + --b1-font-size-desktop: 24px; + --b1-letter-spacing-mobile: normal; + --b1-letter-spacing-tablet: normal; + --b1-letter-spacing-desktop: normal; + --b1-line-height-mobile: 1.65; + --b1-line-height-tablet: 1.5; + --b1-line-height-desktop: 1.5; + --b2-font-size-mobile: 16px; + --b2-font-size-tablet: 18px; + --b2-font-size-desktop: 18px; + --b2-letter-spacing-mobile: normal; + --b2-letter-spacing-tablet: normal; + --b2-letter-spacing-desktop: normal; + --b2-line-height-mobile: 1.65; + --b2-line-height-tablet: 1.5; + --b2-line-height-desktop: 1.5; + --b3-font-size-mobile: 14px; + --b3-font-size-desktop: 16px; + --b3-letter-spacing-mobile: normal; + --b3-letter-spacing-tablet: normal; + --b3-letter-spacing-desktop: normal; + --b3-line-height-mobile: 1.65; + --b3-line-height-desktop: 1.5; + --btn-font-family-ElectronicArtsText: "ElectronicArtsText", Verdana, Helvetica, Arial, sans-serif; + --btn-font-size-mobile: 16px; + --btn-font-size-tablet: 18px; + --btn-font-size-desktop: 18px; + --btn-line-height-mobile: 1.65; + --btn-line-height-tablet: 1.5; + --btn-line-height-desktop: 1.5; + --btn-font-weight-normal: normal; + --btn-letter-spacing-normal: normal; + --btn-text-transform-none: none; + --nav-bar-1-font-size-16: 16px; + --nav-bar-1-font-family-open-sans: open-sans, "Verdana", "Helvetica", "Arial", sans-serif; + --nav-bar-1-line-height-1_35: 1.35; + --nav-bar-1-text-decoration-none: none; + --nav-bar-1-color-inherit: inherit; + --nav-link-font-family-ElectronicArtsText: "ElectronicArtsText", Verdana, Helvetica, Arial, sans-serif; + --nav-link-font-size-mobile: 16px; + --nav-link-font-size-tablet: 18px; + --nav-link-font-size-desktop: 18px; + --nav-link-line-height-mobile: 1.65; + --nav-link-line-height-tablet: 1.5; + --nav-link-line-height-desktop: 1.5; + --nav-link-font-weight-normal: normal; + --nav-link-letter-spacing-normal: normal; + --nav-link-text-decoration-none: none; + --nav-link-color-inherit: inherit; + --nav-dropdown-item-font-size-mobile: 16px; + --nav-dropdown-item-font-size-tablet: 16px; + --nav-dropdown-item-font-size-desktop: 16px; + --nav-dropdown-item-font-weight-300: 300; + --nav-dropdown-item-text-decoration-none: none; + --nav-dropdown-item-title-font-weight-700: 700; + --nav-dropdown-item-title-text-decoration-none: none; +} + +/*selectors*/ +body { + font-size: var(--body-font-size-mobile); + font-family: var(--body-font-family-ElectronicArtsText); + font-weight: var(--body-font-weight-light); + font-weight: var(--body-font-weight-normal); + font-weight: var(--body-font-weight-bold); + letter-spacing: var(--body-letter-spacing-mobile); + line-height: var(--body-line-height-mobile); +} + +h1 { + font-size: var(--h1-font-size-mobile); + font-weight: var(--h1-font-weight-400); + letter-spacing: var(--h1-letter-spacing-mobile); + line-height: var(--h1-line-height-mobile); +} + +h2 { + font-size: var(--h2-font-size-mobile); + font-weight: var(--h2-font-weight-400); + letter-spacing: var(--h2-letter-spacing-mobile); + line-height: var(--h2-line-height-mobile); +} + +h3 { + font-size: var(--h3-font-size-mobile); + letter-spacing: var(--h3-letter-spacing-mobile); + line-height: var(--h3-line-height-mobile); + font-weight: var(--h3-font-weight-400); +} + +h4 { + font-size: var(--h4-font-size-mobile); + letter-spacing: var(--h4-letter-spacing-mobile); + line-height: var(--h4-line-height-mobile); + font-weight: var(--h4-font-weight-400); +} + +h5 { + font-size: var(--h5-font-size-mobile); + letter-spacing: var(--h5-letter-spacing-mobile); + line-height: var(--h5-line-height-mobile); + font-weight: var(--h5-font-weight-400); +} + +h6 { + font-size: var(--h6-font-size-mobile); + letter-spacing: var(--h6-letter-spacing-mobile); + line-height: var(--h6-line-height-mobile); + font-weight: var(--h6-font-weight-400); +} + +@media only screen and (min-width: 1456px) { + body { + font-size: var(--body-font-size-desktop); + letter-spacing: var(--body-letter-spacing-desktop); + line-height: var(--body-line-height-desktop); + } + h1 { + font-size: var(--h1-font-size-desktop); + letter-spacing: var(--h1-letter-spacing-desktop); + line-height: var(--h1-line-height-desktop); + } + h2 { + font-size: var(--h2-font-size-desktop); + letter-spacing: var(--h2-letter-spacing-desktop); + line-height: var(--h2-line-height-desktop); + } + h3 { + font-size: var(--h3-font-size-desktop); + letter-spacing: var(--h3-letter-spacing-desktop); + line-height: var(--h3-line-height-desktop); + } + h4 { + font-size: var(--h4-font-size-desktop); + letter-spacing: var(--h4-letter-spacing-desktop); + line-height: var(--h4-line-height-desktop); + } + h5 { + font-size: var(--h5-font-size-desktop); + letter-spacing: var(--h5-letter-spacing-desktop); + line-height: var(--h5-line-height-desktop); + } + h6 { + font-size: var(--h6-font-size-desktop); + letter-spacing: var(--h6-letter-spacing-desktop); + line-height: var(--h6-line-height-desktop); + } +} +@media only screen and (min-width: 1024px) { + body { + font-size: var(--body-font-size-tablet); + letter-spacing: var(--body-letter-spacing-tablet); + line-height: var(--body-line-height-tablet); + } + h1 { + font-size: var(--h1-font-size-tablet); + letter-spacing: var(--h1-letter-spacing-tablet); + line-height: var(--h1-line-height-tablet); + } + h2 { + font-size: var(--h2-font-size-tablet); + letter-spacing: var(--h2-letter-spacing-tablet); + line-height: var(--h2-line-height-tablet); + } + h3 { + font-size: var(--h3-font-size-tablet); + letter-spacing: var(--h3-letter-spacing-tablet); + line-height: var(--h3-line-height-tablet); + } + h4 { + font-size: var(--h4-font-size-tablet); + letter-spacing: var(--h4-letter-spacing-tablet); + line-height: var(--h4-line-height-tablet); + } + h5 { + font-size: var(--h5-font-size-tablet); + letter-spacing: var(--h5-letter-spacing-tablet); + line-height: var(--h5-line-height-tablet); + } + h6 { + font-size: var(--h6-font-size-tablet); + letter-spacing: var(--h6-letter-spacing-tablet); + line-height: var(--h6-line-height-tablet); + } +} +/*clasess*/ +.d1 { + font-size: var(--d1-font-size-mobile); + letter-spacing: var(--d1-letter-spacing-mobile); + line-height: var(--d1-line-height-mobile); + font-style: var(--d1-font-style-normal); + font-weight: var(--d1-font-weight-600); + font-family: var(--d1-font-family-ElectronicArtsDisplay); +} + +.d2 { + font-size: var(--d2-font-size-mobile); + letter-spacing: var(--d2-letter-spacing-mobile); + line-height: var(--d2-line-height-mobile); + font-style: var(--d2-font-style-normal); + font-weight: var(--d2-font-weight-600); + font-family: var(--d2-font-family-ElectronicArtsDisplay); +} + +.d3 { + font-size: var(--d3-font-size-mobile); + letter-spacing: var(--d3-letter-spacing-mobile); + line-height: var(--d3-line-height-mobile); + font-style: var(--d3-font-style-normal); + font-weight: var(--d3-font-weight-600); + font-family: var(--d3-font-family-ElectronicArtsDisplay); +} + +.d4 { + font-size: var(--d4-font-size-mobile); + letter-spacing: var(--d4-letter-spacing-mobile); + line-height: var(--d4-line-height-mobile); + font-style: var(--d4-font-style-normal); + font-weight: var(--d4-font-weight-600); + font-family: var(--d4-font-family-ElectronicArtsDisplay); +} + +.d5 { + font-size: var(--d5-font-size-mobile); + letter-spacing: var(--d5-letter-spacing-normal); + line-height: var(--d5-line-height-100); + font-style: var(--d5-font-style-normal); + font-weight: var(--d5-font-weight-600); + font-family: var(--d5-font-family-ElectronicArtsDisplay); +} + +.d6 { + font-size: var(--d6-font-size-mobile); + letter-spacing: var(--d6-letter-spacing-normal); + line-height: var(--d6-line-height-100); + font-style: var(--d6-font-style-normal); + font-weight: var(--d6-font-weight-600); + font-family: var(--d6-font-family-ElectronicArtsDisplay); +} + +.h1 { + font-size: var(--h1-font-size-mobile); + font-weight: var(--h1-font-weight-400); + letter-spacing: var(--h1-letter-spacing-mobile); + line-height: var(--h1-line-height-mobile); +} + +.h2 { + font-size: var(--h2-font-size-mobile); + font-weight: var(--h2-font-weight-400); + letter-spacing: var(--h2-letter-spacing-mobile); + line-height: var(--h2-line-height-mobile); +} + +.h3 { + font-size: var(--h3-font-size-mobile); + letter-spacing: var(--h3-letter-spacing-mobile); + line-height: var(--h3-line-height-mobile); + font-weight: var(--h3-font-weight-400); +} + +.h4 { + font-size: var(--h4-font-size-mobile); + letter-spacing: var(--h4-letter-spacing-mobile); + line-height: var(--h4-line-height-mobile); + font-weight: var(--h4-font-weight-400); +} + +.h5 { + font-size: var(--h5-font-size-mobile); + letter-spacing: var(--h5-letter-spacing-mobile); + line-height: var(--h5-line-height-mobile); + font-weight: var(--h5-font-weight-400); +} + +.h6 { + font-size: var(--h6-font-size-mobile); + letter-spacing: var(--h6-letter-spacing-mobile); + line-height: var(--h6-line-height-mobile); + font-weight: var(--h6-font-weight-400); +} + +.l1 { + font-size: var(--l1-font-size-mobile); + font-weight: var(--l1-font-weight-600); + letter-spacing: var(--l1-letter-spacing-normal); + line-height: var(--l1-line-height-mobile); + font-family: var(--l1-font-family-ElectronicArtsDisplay); +} + +.l2 { + font-size: var(--l2-font-size-mobile); + font-weight: var(--l2-font-weight-600); + letter-spacing: var(--l2-letter-spacing-normal); + line-height: var(--l2-line-height-mobile); + font-family: var(--l2-font-family-ElectronicArtsDisplay); +} + +.l3 { + font-size: var(--l3-font-size-mobile); + font-style: var(--l3-font-style-normal); + font-weight: var(--l3-font-weight-600); + letter-spacing: var(--l3-letter-spacing-normal); + line-height: var(--l3-line-height-100); + font-family: var(--l3-font-family-ElectronicArtsDisplay); +} + +.l4 { + font-size: var(--l4-font-size-mobile); + font-style: var(--l4-font-style-normal); + font-weight: var(--l4-font-weight-600); + letter-spacing: var(--l4-letter-spacing-normal); + line-height: var(--l4-line-height-100); + font-family: var(--l4-font-family-ElectronicArtsDisplay); +} + +.b1 { + font-size: var(--b1-font-size-mobile); + letter-spacing: var(--b1-letter-spacing-mobile); + line-height: var(--b1-line-height-mobile); +} + +.b2 { + font-size: var(--b2-font-size-mobile); + letter-spacing: var(--b2-letter-spacing-mobile); + line-height: var(--b2-line-height-mobile); +} + +.b3 { + font-size: var(--b3-font-size-mobile); + letter-spacing: var(--b3-letter-spacing-mobile); + line-height: var(--b3-line-height-mobile); +} + +.btn { + font-family: var(--btn-font-family-ElectronicArtsText); + font-size: var(--btn-font-size-mobile); + line-height: var(--btn-line-height-mobile); + font-weight: var(--btn-font-weight-normal); + letter-spacing: var(--btn-letter-spacing-normal); + text-transform: var(--btn-text-transform-none); +} + +.nav-bar-1 { + font-size: var(--nav-bar-1-font-size-16); + font-family: var(--nav-bar-1-font-family-open-sans); + line-height: var(--nav-bar-1-line-height-1_35); + text-decoration: var(--nav-bar-1-text-decoration-none); + color: var(--nav-bar-1-color-inherit); +} + +.nav-link { + font-family: var(--nav-link-font-family-ElectronicArtsText); + font-size: var(--nav-link-font-size-mobile); + line-height: var(--nav-link-line-height-mobile); + font-weight: var(--nav-link-font-weight-normal); + letter-spacing: var(--nav-link-letter-spacing-normal); + text-decoration: var(--nav-link-text-decoration-none); + color: var(--nav-link-color-inherit); +} + +.nav-dropdown-item { + font-size: var(--nav-dropdown-item-font-size-mobile); + font-weight: var(--nav-dropdown-item-font-weight-300); + text-decoration: var(--nav-dropdown-item-text-decoration-none); +} + +.nav-dropdown-item-title { + font-weight: var(--nav-dropdown-item-title-font-weight-700); + text-decoration: var(--nav-dropdown-item-title-text-decoration-none); +} + +@media only screen and (min-width: 1456px) { + .d1 { + font-size: var(--d1-font-size-desktop); + letter-spacing: var(--d1-letter-spacing-desktop); + line-height: var(--d1-line-height-desktop); + } + .d2 { + font-size: var(--d2-font-size-desktop); + letter-spacing: var(--d2-letter-spacing-desktop); + line-height: var(--d2-line-height-desktop); + } + .d3 { + font-size: var(--d3-font-size-desktop); + letter-spacing: var(--d3-letter-spacing-desktop); + line-height: var(--d3-line-height-desktop); + } + .d4 { + font-size: var(--d4-font-size-desktop); + letter-spacing: var(--d4-letter-spacing-desktop); + line-height: var(--d4-line-height-desktop); + } + .d5 { + font-size: var(--d5-font-size-desktop); + } + .d6 { + font-size: var(--d6-font-size-desktop); + } + .h1 { + font-size: var(--h1-font-size-desktop); + letter-spacing: var(--h1-letter-spacing-desktop); + line-height: var(--h1-line-height-desktop); + } + .h2 { + font-size: var(--h2-font-size-desktop); + letter-spacing: var(--h2-letter-spacing-desktop); + line-height: var(--h2-line-height-desktop); + } + .h3 { + font-size: var(--h3-font-size-desktop); + letter-spacing: var(--h3-letter-spacing-desktop); + line-height: var(--h3-line-height-desktop); + } + .h4 { + font-size: var(--h4-font-size-desktop); + letter-spacing: var(--h4-letter-spacing-desktop); + line-height: var(--h4-line-height-desktop); + } + .h5 { + font-size: var(--h5-font-size-desktop); + letter-spacing: var(--h5-letter-spacing-desktop); + line-height: var(--h5-line-height-desktop); + } + .h6 { + font-size: var(--h6-font-size-desktop); + letter-spacing: var(--h6-letter-spacing-desktop); + line-height: var(--h6-line-height-desktop); + } + .l1 { + font-size: var(--l1-font-size-desktop); + line-height: var(--l1-line-height-desktop); + } + .l2 { + font-size: var(--l2-font-size-desktop); + line-height: var(--l2-line-height-desktop); + } + .l3 { + font-size: var(--l3-font-size-desktop); + } + .l4 { + font-size: var(--l4-font-size-desktop); + } + .b1 { + font-size: var(--b1-font-size-desktop); + letter-spacing: var(--b1-letter-spacing-desktop); + line-height: var(--b1-line-height-desktop); + } + .b2 { + font-size: var(--b2-font-size-desktop); + letter-spacing: var(--b2-letter-spacing-desktop); + line-height: var(--b2-line-height-desktop); + } + .b3 { + font-size: var(--b3-font-size-desktop); + letter-spacing: var(--b3-letter-spacing-desktop); + line-height: var(--b3-line-height-desktop); + } + .btn { + font-size: var(--btn-font-size-desktop); + line-height: var(--btn-line-height-desktop); + } + .nav-link { + font-size: var(--nav-link-font-size-desktop); + line-height: var(--nav-link-line-height-desktop); + } + .nav-dropdown-item { + font-size: var(--nav-dropdown-item-font-size-desktop); + } +} +@media only screen and (min-width: 1024px) { + .d1 { + font-size: var(--d1-font-size-tablet); + letter-spacing: var(--d1-letter-spacing-tablet); + line-height: var(--d1-line-height-tablet); + } + .d2 { + font-size: var(--d2-font-size-tablet); + letter-spacing: var(--d2-letter-spacing-tablet); + line-height: var(--d2-line-height-tablet); + } + .d3 { + font-size: var(--d3-font-size-tablet); + letter-spacing: var(--d3-letter-spacing-tablet); + line-height: var(--d3-line-height-tablet); + } + .d4 { + font-size: var(--d4-font-size-tablet); + letter-spacing: var(--d4-letter-spacing-tablet); + line-height: var(--d4-line-height-tablet); + } + .h1 { + font-size: var(--h1-font-size-tablet); + letter-spacing: var(--h1-letter-spacing-tablet); + line-height: var(--h1-line-height-tablet); + } + .h2 { + font-size: var(--h2-font-size-tablet); + letter-spacing: var(--h2-letter-spacing-tablet); + line-height: var(--h2-line-height-tablet); + } + .h3 { + font-size: var(--h3-font-size-tablet); + letter-spacing: var(--h3-letter-spacing-tablet); + line-height: var(--h3-line-height-tablet); + } + .h4 { + font-size: var(--h4-font-size-tablet); + letter-spacing: var(--h4-letter-spacing-tablet); + line-height: var(--h4-line-height-tablet); + } + .h5 { + font-size: var(--h5-font-size-tablet); + letter-spacing: var(--h5-letter-spacing-tablet); + line-height: var(--h5-line-height-tablet); + } + .h6 { + font-size: var(--h6-font-size-tablet); + letter-spacing: var(--h6-letter-spacing-tablet); + line-height: var(--h6-line-height-tablet); + } + .l1 { + font-size: var(--l1-font-size-tablet); + line-height: var(--l1-line-height-tablet); + } + .l2 { + font-size: var(--l2-font-size-tablet); + line-height: var(--l2-line-height-tablet); + } + .b1 { + font-size: var(--b1-font-size-tablet); + letter-spacing: var(--b1-letter-spacing-tablet); + line-height: var(--b1-line-height-tablet); + } + .b2 { + font-size: var(--b2-font-size-tablet); + letter-spacing: var(--b2-letter-spacing-tablet); + line-height: var(--b2-line-height-tablet); + } + .b3 { + letter-spacing: var(--b3-letter-spacing-tablet); + } + .btn { + font-size: var(--btn-font-size-tablet); + line-height: var(--btn-line-height-tablet); + } + .nav-link { + font-size: var(--nav-link-font-size-tablet); + line-height: var(--nav-link-line-height-tablet); + } + .nav-dropdown-item { + font-size: var(--nav-dropdown-item-font-size-tablet); + } +} + +/*# sourceMappingURL=typography.css.map */ diff --git a/scss/typography/typography.css.map b/scss/typography/typography.css.map new file mode 100644 index 0000000..248fe91 --- /dev/null +++ b/scss/typography/typography.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["_fonts.scss","_typography.scss","_fuctions.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;ACrDJ;AAgqBA;AAGA;AClqBI;EAOgB;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;AD8pBpB;AC5lBQ;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AAQpB;EAGI;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;;AASxB;EAGI;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;;ADsjB5B;ACrpBQ;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;AANhB;EAMgB;EAAA;EAAA;;;AANhB;EAMgB;EAAA;;;AAQpB;EAGI;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;;EANpB;IAMoB;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;;EANpB;IAMoB;IAAA;;EANpB;IAMoB;;EANpB;IAMoB;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;;EANpB;IAMoB;IAAA;;EANpB;IAMoB;;;AASxB;EAGI;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;;EANpB;IAMoB;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;IAAA;IAAA;;EANpB;IAMoB;;EANpB;IAMoB;IAAA;;EANpB;IAMoB;IAAA;;EANpB;IAMoB","file":"typography.css"} \ No newline at end of file diff --git a/scss/typography/typography.html b/scss/typography/typography.html index 1444be3..7edf4e5 100644 --- a/scss/typography/typography.html +++ b/scss/typography/typography.html @@ -4,7 +4,7 @@ - Tipograpia + Tipografia