diff --git a/assets/icon_arrow_white.png b/assets/icon_arrow_white.png new file mode 100644 index 0000000..e2f703f Binary files /dev/null and b/assets/icon_arrow_white.png differ diff --git a/assets/placeholder-img.jpg b/assets/placeholder-img.jpg new file mode 100644 index 0000000..0d2dbe8 Binary files /dev/null and b/assets/placeholder-img.jpg differ diff --git a/components/card_section.html b/components/card_section.html new file mode 100644 index 0000000..f6261af --- /dev/null +++ b/components/card_section.html @@ -0,0 +1,41 @@ + + + + + + Card section + + + + +
+
+
+

Unam Incolunt aliam tertiam

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit optio sint veniam sunt maxime quibusdam neque!

+
+
+ CALL TO ACTION + button icon +
+
+
+
+

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora architecto explicabo illum eligendi iure adipisci necessitatibus ipsum recusandae! Quisquam itaque sapiente eos eveniet repudiandae, minima esse quibusdam officiis culpa consequuntur.

+ Call to action +
+
+

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quam perferendis tempore totam? Saepe modi voluptatum quaerat aut deleniti quidem molestiae odio quod, eos ratione assumenda cumque eveniet fugiat nostrum.

+ Call to action +
+
+

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus amet eius fuga iste in deleniti nostrum pariatur laborum delectus nemo nobis, animi officiis, accusamus possimus ducimus harum! Aperiam, sint eum.

+ Call to action +
+
+
+ + \ No newline at end of file diff --git a/style.css b/style.css index bd66479..934c0ea 100644 --- a/style.css +++ b/style.css @@ -12,6 +12,15 @@ html { html { font-size: 16px; } + + .content .card { + display: flex; + flex-flow: column wrap; + justify-content: center; + align-items: center; + height: auto; + line-height: 1.5rem; + } } @media (min-width: 768px) and (max-width: 1023px) { html { @@ -51,4 +60,97 @@ html { background-color: #7521d5; } +.card-section { + font-family: "Open Sans", sans-serif; + display: flex; + flex-flow: column wrap; + margin: 0; + padding: 0; + max-width: 100vw; +} +.card-section .main-container { + background-image: url("../../assets/placeholder-img.jpg"); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + height: 85vh; + color: white; + padding: 0 4rem; +} +.card-section .main-container .text-container { + margin: 2.5rem 0rem; + font-size: 1.5rem; +} +.card-section .main-container .text-container-title { + font-size: 4.5rem; + margin-bottom: 2rem; +} +.card-section .main-container .text-container-desc { + font-weight: lighter; + line-height: 2.5rem; + padding-right: 1.5rem; +} +.card-section .main-container .button { + display: flex; + align-items: center; + font-size: 2rem; + font-weight: bolder; +} +.card-section .main-container .button-icon { + width: 2.25rem; + padding-left: 1rem; +} +.card-section .card-container { + margin: 0 4rem; + padding: 0; + position: relative; + top: -7.5rem; + display: flex; + justify-content: center; + flex-flow: column wrap; +} +.card-section .card-container .card { + background-color: white; + margin-bottom: 2rem; + padding: 4rem 2.5rem 4rem 2.5rem; + box-shadow: 0 0 15px gray; + position: relative; +} +.card-section .card-container .card-title { + color: #3D3A45; + font-size: 2rem; + margin-bottom: 1rem; +} +.card-section .card-container .card-desc { + font-size: 1rem; + margin-bottom: 3rem; + color: #73717A; +} +.card-section .card-container .card-link { + text-decoration: none; + color: #73717A; + font-weight: 400; + position: absolute; + bottom: 3rem; +} +.card-section .card-container .card:last-child { + margin-bottom: 0; +} + +@media (min-width: 1024px) and (max-width: 1279px) { + .card-section .card-container { + flex-flow: row; + } + + .card-section .card-container .card { + margin-bottom: 0; + margin-right: 1.5rem; + max-width: 33vw; + } + + .card-section .card:last-child { + margin-right: 0; + } +} + /*# sourceMappingURL=style.css.map */ diff --git a/style.css.map b/style.css.map index 06265ce..485fd1b 100644 --- a/style.css.map +++ b/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["styles/base/elements.scss","styles/base/mixin.scss","styles/layouts/container.scss","styles/variables.scss","styles/modules/header.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAGF;EACE;;;ACIA;EDDA;IACE;;;ACLF;EDSA;IACE;;;ACfF;EDmBA;IACE;;;AErBJ;EAaE,WCLQ;EDMR;;ADbA;ECDF;IAEI;IACA;;;ADGF;ECNF;IAMI;IACA;;;ADIF;ECXF;IAUI;IACA;;;;AEXJ;EACE,SDWY;ECVZ","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["styles/base/elements.scss","styles/base/mixin.scss","styles/layouts/container.scss","styles/variables.scss","styles/modules/header.scss","styles/modules/card_section.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAGF;EACE;;;ACIA;EDDA;IACE;;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;;;ACbF;EDiBA;IACE;;;ACvBF;ED2BA;IACE;;;AE7BJ;EAaE,WCLQ;EDMR;;ADbA;ECDF;IAEI;IACA;;;ADGF;ECNF;IAMI;IACA;;;ADIF;ECXF;IAUI;IACA;;;;AEXJ;EACE,SDWY;ECVZ;;;ACFF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;EACA;;AAGJ;EACE;EACA;EAEA;EACA;;AAEA;EACE;EACA;;AAIN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAGJ;EACE;;;AJrEJ;EI2EA;IACE;;;EAEF;IACE;IACA;IACA;;;EAEF;IACE","file":"style.css"} \ No newline at end of file diff --git a/styles/base/elements.scss b/styles/base/elements.scss index 2e5035e..10abe82 100644 --- a/styles/base/elements.scss +++ b/styles/base/elements.scss @@ -11,6 +11,14 @@ html { html { font-size: 16px; } + .content .card { + display: flex; + flex-flow: column wrap; + justify-content: center; + align-items: center; + height: auto; + line-height: 1.5rem; + } } @include tablet { html { diff --git a/styles/main.scss b/styles/main.scss index b1b4228..ce29165 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -8,4 +8,6 @@ @import "./layouts/container.scss"; //modules -@import "./modules/header.scss"; \ No newline at end of file +@import "./modules/header.scss"; +@import "./modules/card_section.scss"; +// @import "./modules/button.scss"; \ No newline at end of file diff --git a/styles/modules/button.scss b/styles/modules/button.scss new file mode 100644 index 0000000..0ba29bf --- /dev/null +++ b/styles/modules/button.scss @@ -0,0 +1,20 @@ + +.button { + display: inline-flex; + padding: 6px 6pxpx; + color: inherit; + font-weight: 700; + line-height: normal; + text-decoration: none; + text-align: center; + text-transform: uppercase; + margin-left: 20px; +} +.button:after { + content: url(../../assets/ic_arrow_forward.png); + max-width: 3%; + max-height: 3%; + display: inline; + position: relative; + left: 10px; +} diff --git a/styles/modules/card_section.scss b/styles/modules/card_section.scss new file mode 100644 index 0000000..bbb62a1 --- /dev/null +++ b/styles/modules/card_section.scss @@ -0,0 +1,98 @@ +.card-section { + font-family: 'Open Sans', sans-serif; + display: flex; + flex-flow: column wrap; + margin: 0; + padding: 0; + max-width: 100vw; + + .main-container { + background-image: url("../../assets/placeholder-img.jpg"); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + height: 85vh; + color: white; + padding: 0 4rem; + + .text-container { + margin: 2.5rem 0rem; + font-size: 1.5rem; + + &-title { + font-size: 4.5rem; + margin-bottom: 2rem; + } + &-desc { + font-weight: lighter; + line-height: 2.5rem; + padding-right: 1.5rem; + } + } + .button { + display: flex; + align-items: center; + + font-size: 2rem; + font-weight: bolder; + + &-icon { + width: 2.25rem; + padding-left: 1rem; + } + } + } + .card-container { + margin: 0 4rem; + padding: 0; + position: relative; + top: -7.5rem; + display: flex; + justify-content: center; + flex-flow: column wrap; + + .card { + background-color: white; + margin-bottom: 2rem; + padding: 4rem 2.5rem 4rem 2.5rem; + box-shadow: 0 0 15px gray; + position: relative; + + + &-title { + color: #3D3A45; + font-size: 2rem; + margin-bottom: 1rem; + } + &-desc { + font-size: 1rem; + margin-bottom: 3rem; + color: #73717A; + } + &-link { + text-decoration: none; + color: #73717A; + font-weight: 400; + position: absolute; + bottom: 3rem; + } + } + .card:last-child { + margin-bottom: 0; + } + } +} + +@include desktop { + .card-section .card-container { + flex-flow: row; + } + .card-section .card-container .card { + margin-bottom: 0; + margin-right: 1.5rem; + max-width: 33vw; + } + .card-section .card:last-child { + margin-right: 0; + } +} \ No newline at end of file