test

test/assets/css/_backgrounds.scss

@@ -0,0 +1,7 @@
+.bg {
+  position: relative;
+}
+
+.bg--primary-100 {
+  background-color: $primary-100;
+}

test/assets/css/_buttons.scss

@@ -0,0 +1,69 @@
+.button {
+  padding: 1rem 2.5rem 1rem 2.5rem;
+  min-width: 13.75rem;
+  border: 0;
+  border-radius: $global-radius;
+  color: $primary-900;
+  font-family: $font-primary;
+  font-size: 0.875rem;
+  font-weight: $weight-bold;
+  line-height: 1.5rem;
+  text-align: center;
+  text-transform: uppercase;
+  text-decoration: none;
+
+  @media (min-width: 48rem) {
+    min-width: auto;
+  }
+}
+
+.button--primary {
+  background-color: $conversion-400;
+
+  &:hover {
+    padding-bottom: 0.875rem;
+    background-color: $conversion-500;
+    border-bottom: 0.125rem solid $conversion-600;
+  }
+}
+
+.button--secondary {
+  color: $conversion-500;
+  background-color: $white;
+  border: 0.0625rem solid $primary-100;
+  font-size: 0.875rem;
+  box-shadow: 0 0.1875rem 0.9375rem 0 #00065B1A;
+
+  &:hover {
+    color: $primary-900;
+    background-color: $primary-100;
+  }
+
+  &:active, &.is-active {
+    color: $white;
+    background-color: $primary-500;
+    border-color: $primary-500;
+  }
+
+  &:hover, &:active, &.is-active{
+    box-shadow: 0 0.3125rem 0.9375rem 0 #00065B4D;
+  }
+}
+
+.button--menu {
+  min-width: auto;
+  padding: 1rem;
+  background-color: $white;
+
+  div {
+    width: 2rem;
+    height: 0.1875rem;
+    margin-block: 0.25rem;
+    background-color: $primary-900;
+    border-radius: $global-radius;
+  }
+
+  &:active {
+    background-color: $primary-100;
+  }
+}

test/assets/css/_components.scss

@@ -0,0 +1,103 @@
+.submenu {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: -0.5rem;
+  padding: 0;
+  font-size: 0.875rem;
+  font-weight: $weight-bold;
+  border-radius: $global-radius;
+  list-style-type: none;
+  text-transform: uppercase;
+  box-shadow: 0 0.1875rem 0.9375rem 0 #00065B1A;
+  z-index: 1;
+
+  &.is-open {
+    display: block;
+  }
+
+  li {
+    width: 15rem;
+    height: 3.5rem;
+
+    .link {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background-color: $white;
+      padding-inline: 1rem;
+      width: 100%;
+      height: 100%;
+
+      &:hover {
+        background-color: $primary-100;
+      }
+    }
+
+    &:first-child .link {
+      border-radius: $global-radius $global-radius 0 0;
+    }
+  
+    &:last-child .link {
+      border-radius: 0 0 $global-radius $global-radius;
+    }
+  }
+
+  li + li {
+    border-top: 0.0625rem solid $primary-100;
+  }
+}
+
+.submenu--primary {
+  top: 2rem;
+  left: -5rem;
+
+  @media (min-width: 100rem) {
+    left: -0.5rem;
+  }
+}
+
+.submenu--secondary {
+  left: 15.625rem;
+}
+
+.section__links {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: 2rem;
+
+  @media (min-width: 36rem) {
+    flex-direction: row;
+  }
+
+  @media (min-width: 48rem) {
+    justify-content: start;
+  }
+
+  @media (min-width: 62rem) {
+    margin-top: 4rem;
+    gap: 2rem;
+  }
+}
+
+.card {
+  border: 0;
+  height: 100%;
+  text-align: center;
+
+  h4 {
+    margin-block: 1rem;
+  }
+
+  p {
+    margin-bottom: 2rem;
+  }
+
+  .button {
+    margin: auto auto 2rem;
+    min-width: auto;
+  }
+}

test/assets/css/_default.scss

@@ -0,0 +1,20 @@
+body {
+  font-family: $font-primary;
+  font-weight: $weight-medium;
+  color: $primary-900;
+}
+
+img {
+  border-style: none;
+  vertical-align: middle;
+}
+
+.image {
+  width: 100%;
+  height: auto;
+}
+
+.image--section {
+  height: 100%;
+  object-fit: cover;
+}

test/assets/css/_footer.scss

@@ -0,0 +1,25 @@
+
+footer .container {
+  border-top: 0.5rem solid $primary-100;
+}
+
+.footer__content {
+  padding-block: 1.5rem 2.5rem;
+  text-align: center;
+
+  @media (min-width: 62rem) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    max-width: 80rem;
+    min-height: 10rem;
+    margin-inline: auto;
+    padding-block: 0;
+    padding-inline: 1rem;
+  }
+  
+  @media (min-width: 75rem) {
+    padding-inline: 2rem;
+  }
+}

test/assets/css/_header.scss

@@ -0,0 +1,13 @@
+.header {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: $header-height;
+  background-color: $white;
+  z-index: 10;
+
+  @media (min-width: 48rem) {
+    height: $header-height-desktop;
+  }
+}

test/assets/css/_layout.scss

@@ -0,0 +1,27 @@
+.container {
+  max-width: $container-width;
+}
+
+.section {
+  position: relative;
+}
+
+.section--intro {
+  padding-block: $header-height 3.5rem;
+
+  @media (min-width: 48rem) {
+    padding-block: $header-height-desktop 7rem;
+  }
+}
+
+.section--medium {
+  padding-block: 0 3.5rem;
+
+  @media (min-width: 48rem) {
+    padding-block: 7rem;
+  }
+}
+
+.section--bottom {
+  padding-top: 0;
+}

test/assets/css/_links.scss

@@ -0,0 +1,60 @@
+.link {
+  position: relative;
+  color: $conversion-500;
+  font-weight: $weight-bold;
+  text-decoration: none;
+
+  &:hover {
+    color: $conversion-600;
+    text-decoration: underline;
+  }
+}
+
+.link--menu {
+  display: flex;
+  align-items: center;
+  color: $primary-900;
+  font-weight: $weight-bold;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  gap: 0.5rem;
+  text-transform: uppercase;
+  transition: $global-transition;
+
+  &:hover {
+    color: $primary-900;
+    text-decoration: none;
+    margin-top: -0.3125rem;
+    padding-bottom: 0.3125rem;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -0.3125rem;
+    left: 0;
+    width: 100%;
+    height: 0;
+    background-color: $conversion-400;
+    transition: $global-transition;
+    opacity: 0;
+  }
+
+  &:hover::after {
+    bottom: 0rem;
+  }
+
+  &:hover::after, &.is-active::after {
+    height: 0.25rem;
+    opacity: 1;
+  }
+}
+
+.link--submenu {
+  color: $primary-900;
+
+  &:hover {
+    color: $primary-900;
+    text-decoration: none;
+  }
+}

test/assets/css/_lists.scss

@@ -0,0 +1,61 @@
+.list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  p {
+    margin-bottom: 0;
+  }
+}
+
+.list--menu {
+  display: flex;
+  gap: 2rem;
+
+  li {
+    position: relative;
+  }
+}
+
+.list--dots {
+  list-style-type: '•';
+  margin: 0 0 0 0.375rem;
+
+  li {
+    margin-bottom: 0.25rem;
+    padding-left: 0.375rem;
+  }
+}
+
+.list--selection {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-block: 2.5rem;
+  gap: 1rem;
+
+  .button {
+    min-width: 13.75rem;
+  }
+
+  @media (min-width: 62rem) {
+    flex-direction: row;
+    margin-block: 4rem;
+    gap: 2rem;
+
+    .button {
+      min-width: auto;
+    }
+  }
+}
+
+.list--footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+
+  @media (min-width: 62rem) {
+    flex-direction: row;
+    gap: 2.5rem;
+  }
+}

test/assets/css/_settings.scss

@@ -0,0 +1,29 @@
+// Fonts
+$font-primary: 'Montserrat', sans-serif;
+
+// Weights
+$weight-normal: 400;
+$weight-medium: 500;
+$weight-bold: 700;
+
+// Colors
+$white: #FFFFFF;
+$black: #000000;
+
+$primary-100: #E7F0FF;
+$primary-300: #7387AC;
+$primary-400: #5F7AFF;
+$primary-500: #264AFB;
+$primary-900: #00065B;
+
+$conversion-400: #06EB83;
+$conversion-500: #01D684;
+$conversion-600: #009E61;
+
+// Others
+$container-width: 88rem;
+$header-height: 4.5rem;
+$header-height-desktop: 6.5rem;
+
+$global-radius: 0.5rem;
+$global-transition: all 0.2s ease-in;

test/assets/css/_typography.scss

@@ -0,0 +1,40 @@
+h1, h2, h3, h4 {
+  font-weight: $weight-bold;
+}
+
+h1 {
+  font-size: clamp(2rem, 4vw, 3rem);
+  line-height: 3.5rem;
+  margin-block: 1rem 0.25rem;
+
+  @media (min-width: 48rem) {
+    margin-block: 0 1.25rem;
+  }
+}
+
+h2 {
+  font-size: clamp(1.625rem, 3vw, 2rem);
+  line-height: 2.5rem;
+  margin-block: 1.5rem 0.75rem;
+
+  @media (min-width: 48rem) {
+    margin-block: 0 1.125rem;
+  }
+}
+
+h3 {
+  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
+}
+
+h4 {
+  font-size: clamp(1.125rem, 2vw, 1.25rem);
+}
+
+h3, h4 {
+  line-height: 2rem;
+  margin-bottom: 0.875rem;
+}
+
+p {
+  font-size: clamp(0.875rem, 1.75vw, 1rem);
+}

test/assets/css/app.css

@@ -0,0 +1 @@
+@charset "UTF-8";.header,.link--menu{display:flex;align-items:center}.button,body{font-family:Montserrat,sans-serif;color:#00065b}.button,.list--selection .button{min-width:13.75rem}.button,.link{text-decoration:none}.button,.link--menu{line-height:1.5rem;text-transform:uppercase}.button,.link--menu,.submenu{text-transform:uppercase}.button--secondary,.submenu{font-size:.875rem;box-shadow:0 .1875rem .9375rem 0 rgba(0,6,91,.1019607843)}.button,.card,.footer__content{text-align:center}body{font-weight:500}.button,.link,.link--menu,.submenu,h1,h2,h3,h4{font-weight:700}img{border-style:none;vertical-align:middle}.image{width:100%;height:auto}.image--section{height:100%;-o-object-fit:cover;object-fit:cover}.container{max-width:88rem}.section{position:relative}.section--intro{padding-block:4.5rem 3.5rem}@media (min-width:48rem){.section--intro{padding-block:6.5rem 7rem}}.section--medium{padding-block:0 3.5rem}.section--bottom{padding-top:0}.header{position:fixed;width:100%;height:4.5rem;background-color:#fff;z-index:10}.bg,.link,.list--menu li{position:relative}footer .container{border-top:.5rem solid #e7f0ff}.footer__content{padding-block:1.5rem 2.5rem}@media (min-width:62rem){.footer__content{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:80rem;min-height:10rem;margin-inline:auto;padding-block:0;padding-inline:1rem}}@media (min-width:75rem){.footer__content{padding-inline:2rem}}h1{font-size:clamp(2rem, 4vw, 3rem);line-height:3.5rem;margin-block:1rem 0.25rem}h2{font-size:clamp(1.625rem, 3vw, 2rem);line-height:2.5rem;margin-block:1.5rem 0.75rem}h3{font-size:clamp(1.25rem, 2.5vw, 1.5rem)}h4{font-size:clamp(1.125rem, 2vw, 1.25rem)}h3,h4{line-height:2rem;margin-bottom:.875rem}p{font-size:clamp(.875rem, 1.75vw, 1rem)}.button{padding:1rem 2.5rem;border:0;border-radius:.5rem;font-size:.875rem}.button--primary{background-color:#06eb83}.button--primary:hover{padding-bottom:.875rem;background-color:#01d684;border-bottom:.125rem solid #009e61}.button--secondary{color:#01d684;background-color:#fff;border:.0625rem solid #e7f0ff}.button--secondary:hover{color:#00065b;background-color:#e7f0ff}.button--secondary.is-active,.button--secondary:active{color:#fff;background-color:#264afb;border-color:#264afb}.button--secondary.is-active,.button--secondary:active,.button--secondary:hover{box-shadow:0 .3125rem .9375rem 0 rgba(0,6,91,.3019607843)}.button--menu{min-width:auto;padding:1rem;background-color:#fff}.bg--primary-100,.button--menu:active,.submenu li .link:hover{background-color:#e7f0ff}.button--menu div{width:2rem;height:.1875rem;margin-block:0.25rem;background-color:#00065b;border-radius:.5rem}.list{list-style-type:none;margin:0;padding:0}.list p{margin-bottom:0}.list--menu{display:flex;gap:2rem}.list--dots{list-style-type:"•";margin:0 0 0 .375rem}.list--dots li{margin-bottom:.25rem;padding-left:.375rem}.list--selection{display:flex;flex-direction:column;justify-content:center;margin-block:2.5rem;gap:1rem}@media (min-width:62rem){.list--selection{flex-direction:row;margin-block:4rem;gap:2rem}.list--selection .button{min-width:auto}}.list--footer{display:flex;flex-direction:column;gap:.75rem}.link{color:#01d684}.link:hover{color:#009e61;text-decoration:underline}.link--menu:hover,.link--submenu:hover{color:#00065b;text-decoration:none}.link--menu{color:#00065b;font-size:.875rem;gap:.5rem;transition:.2s ease-in}.link--menu:hover{margin-top:-.3125rem;padding-bottom:.3125rem}.link--menu::after{content:"";position:absolute;bottom:-.3125rem;left:0;width:100%;height:0;background-color:#06eb83;transition:.2s ease-in;opacity:0}.link--menu:hover::after{bottom:0}.link--menu.is-active::after,.link--menu:hover::after{height:.25rem;opacity:1}.link--submenu{color:#00065b}.submenu{display:none;position:absolute;top:0;left:-.5rem;padding:0;border-radius:.5rem;list-style-type:none;z-index:1}.submenu.is-open{display:block}.submenu li{width:15rem;height:3.5rem}.submenu li .link{display:flex;align-items:center;justify-content:space-between;background-color:#fff;padding-inline:1rem;width:100%;height:100%}.submenu li:first-child .link{border-radius:.5rem .5rem 0 0}.submenu li:last-child .link{border-radius:0 0 .5rem .5rem}.submenu li+li{border-top:.0625rem solid #e7f0ff}.submenu--primary{top:2rem;left:-5rem}@media (min-width:100rem){.submenu--primary{left:-.5rem}}.submenu--secondary{left:15.625rem}.section__links{display:flex;flex-wrap:wrap;flex-direction:column;justify-content:center;gap:1rem;margin-top:2rem}@media (min-width:36rem){.section__links{flex-direction:row}}@media (min-width:48rem){.section--medium{padding-block:7rem}.header{height:6.5rem}h1{margin-block:0 1.25rem}h2{margin-block:0 1.125rem}.button{min-width:auto}.section__links{justify-content:start}}@media (min-width:62rem){.list--footer{flex-direction:row;gap:2.5rem}.section__links{margin-top:4rem;gap:2rem}}.card{border:0;height:100%}.card h4{margin-block:1rem}.card p{margin-bottom:2rem}.card .button{margin:auto auto 2rem;min-width:auto}

test/assets/css/app.scss

@@ -0,0 +1,13 @@
+@import 'settings';
+
+@import 'default';
+@import 'layout';
+@import 'header';
+@import 'footer';
+
+@import 'typography';
+@import 'buttons';
+@import 'lists';
+@import 'links';
+@import 'backgrounds';
+@import 'components';

test/assets/js/app.js

@@ -0,0 +1,3 @@
+document.querySelectorAll(".js-submenu").forEach(function(e){
+  e.addEventListener('click', function (event) {this.parentElement.querySelector('.submenu').classList.toggle("is-open");});
+});