diff --git a/assets/arrow_right.png b/assets/arrow_right.png new file mode 100644 index 0000000..b7107f0 Binary files /dev/null and b/assets/arrow_right.png differ diff --git a/assets/pong.jpg b/assets/pong.jpg new file mode 100644 index 0000000..ef6b8e5 Binary files /dev/null and b/assets/pong.jpg differ diff --git a/components/carousel.html b/components/carousel.html new file mode 100644 index 0000000..0d29584 --- /dev/null +++ b/components/carousel.html @@ -0,0 +1,44 @@ + + + + + + + Document + + + + +
+
+

Cum Ceteribus

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+ Minus, officia corporis iusto vero ratione labore, placeat rem facere quod ut, eligendi voluptas + sapiente eos. Deserunt eius impedit sunt ipsam cum!

+
+
+
+
+
Titolo Iconcina
+
+
+
Titolo Iconcina
+
+
+
Titolo Iconcina
+
+
+
Titolo Iconcina
+
+
+
+
Titolo Iconcina
+
+
+
+ Call to action
 +
+
+ + + \ No newline at end of file diff --git a/style.css b/style.css index bd66479..f0d481d 100644 --- a/style.css +++ b/style.css @@ -46,6 +46,59 @@ html { } } +.carousel { + padding: 2rem; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: column; + background-color: #f0edec; + color: #343059; +} +.carousel-intro { + text-align: center; + padding: 2rem; +} +.carousel-intro-title { + padding: 1rem; +} +.carousel-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.carousel-card { + padding: 0 2rem 0 2rem; +} +.carousel-card-image { + background-image: url("./assets/pong.jpg"); + background-size: cover; + background-repeat: no-repeat; + width: 5rem; + height: 5rem; + border-radius: 5px; + box-shadow: 2px 2px 5px #949393; +} +.carousel-card-title { + text-align: center; +} +.carousel-button { + padding: 2rem; + font-style: uppercase; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.carousel-button-icon { + background-image: url("./assets/arrow_right.png"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + width: 2rem; + height: 1rem; +} + .header { padding: 1rem; background-color: #7521d5; diff --git a/style.css.map b/style.css.map index 06265ce..d92ee98 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/layouts/container_carousel.scss","styles/modules/header.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAGF;EACE;;;ACIA;EDDA;IACE;;;ACLF;EDSA;IACE;;;ACfF;EDmBA;IACE;;;AErBJ;EAaE,WCDQ;EDER;;ADbA;ECDF;IAEI;IACA;;;ADGF;ECNF;IAMI;IACA;;;ADIF;ECXF;IAUI;IACA;;;;AEXJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA,kBDDc;ECEd;;AAEA;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAIJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AACJ;EACI;EACA;EACA;EACA;EACA;EACA;;;ACxDR;EACE,SFeY;EEdZ","file":"style.css"} \ No newline at end of file diff --git a/styles/layouts/container_carousel.scss b/styles/layouts/container_carousel.scss new file mode 100644 index 0000000..2912539 --- /dev/null +++ b/styles/layouts/container_carousel.scss @@ -0,0 +1,60 @@ +.carousel { + padding: 2rem; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: column; + background-color: $backgroundcolor; + color: #343059; + + &-intro{ + text-align: center; + padding: 2rem; + + &-title{ + padding: 1rem; + } + } + + &-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + + } + + &-card{ + padding: 0 2rem 0 2rem; + + &-image{ + background-image: url('./assets/pong.jpg'); + background-size: cover; + background-repeat: no-repeat; + width: 5rem; + height: 5rem; + border-radius: 5px; + box-shadow: 2px 2px 5px rgb(148, 147, 147); + } + + &-title { + text-align: center; + } + } + + &-button{ + padding: 2rem; + font-style: uppercase; + display: flex; + flex-direction: row; + flex-wrap: wrap; + &-icon{ + background-image: url('./assets/arrow_right.png'); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + width: 2rem; + height: 1rem; + } + } +} diff --git a/styles/main.scss b/styles/main.scss index b1b4228..17ca80b 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -6,6 +6,7 @@ //layouts @import "./layouts/container.scss"; +@import "./layouts/container_carousel.scss"; //modules @import "./modules/header.scss"; \ No newline at end of file diff --git a/styles/variables.scss b/styles/variables.scss index 58313bf..a416eef 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -3,6 +3,10 @@ $base-text-color: rgb(46, 46, 46); $primary-color: rgb(117, 33, 213); $secondary-color: rgb(235, 136, 14); +// carousel-colours +$backgroundcolor: #f0edec; +$carousel-text-color: #343059; + // brackepoints $mobile: 768px; $tablet: 1024px;