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..723148a --- /dev/null +++ b/components/carousel.html @@ -0,0 +1,81 @@ + + + + + + Carousel + + + + +
+
+

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! +

+
+
+
+
+
Iconcina
+
+
+
+
Iconcina
+
+
+
+
Iconcina
+
+
+
+
Iconcina
+
+
+
+
Iconcina
+
+
+
+
Iconcina
+
+
+
+
Iconcina
+
+
+
+
Iconcina
+
+
+
+
Iconcina
+
+
+
+
Iconcina
+
+
+
+
Iconcina
+
+
+
+
Iconcina
+
+
+
+
Iconcina
+
+
+
+
Call to action
+
+
+
+ + diff --git a/style.css b/style.css index bd66479..5b4f7a6 100644 --- a/style.css +++ b/style.css @@ -1,11 +1,20 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); * { margin: 0; padding: 0; box-sizing: inherit; } +h2, +h6, +p { + text-shadow: 1px 1px 3px #949393; +} + html { font-size: 18px; + font-family: "Roboto", sans-serif; } @media (min-width: 1024px) and (max-width: 1279px) { @@ -51,4 +60,73 @@ html { background-color: #7521d5; } +.carousel { + padding: 0.5rem; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: column; + background-color: #f0edec; + color: #343059; + font-family: "Roboto", sans-serif; +} +.carousel-intro { + text-align: center; + padding: 1rem; +} +.carousel-intro-title { + padding: 1rem; +} +.carousel-container { + display: flex; + flex-direction: row; + /*flex-wrap: wrap;*/ + overflow-x: scroll; + max-width: 100%; +} +.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: 1px 1px 3px #949393; +} +.carousel-card-title { + padding: 0.1rem; + text-align: center; +} +.carousel-button { + padding: 2rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.carousel-button-action { + font-weight: bold; + text-transform: uppercase; +} +.carousel-button-action a { + text-decoration: none; +} +.carousel-button-icon { + background-image: url("./assets/arrow_right.png"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + width: 2rem; + height: 1rem; + cursor: pointer; +} +.carousel h2, +.carousel h6, +.carousel p { + text-shadow: 1px 1px 3px #949393; +} + /*# sourceMappingURL=style.css.map */ diff --git a/style.css.map b/style.css.map index 06265ce..d9674fc 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/modules/carousel.scss","styles/base/mixin.scss","styles/layouts/container.scss","styles/variables.scss","styles/modules/header.scss"],"names":[],"mappings":"AAAQ;ACAA;ADER;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;;;AELA;EFQA;IACE;;;AEdF;EFkBA;IACE;;;AExBF;EF4BA;IACE;;;AG9BJ;EAaE,WCDQ;EDER;;ADbA;ECDF;IAEI;IACA;;;ADGF;ECNF;IAMI;IACA;;;ADIF;ECXF;IAUI;IACA;;;;AEXJ;EACE,SDcY;ECbZ;;;AJAF;EACI;EACA;EACA;EACA;EACA;EACA;EACA,kBGHc;EHId;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;AACA;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGR;AAAA;AAAA;EAGI","file":"style.css"} \ No newline at end of file diff --git a/styles/base/elements.scss b/styles/base/elements.scss index 2e5035e..4773d13 100644 --- a/styles/base/elements.scss +++ b/styles/base/elements.scss @@ -1,11 +1,20 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); + * { margin: 0; padding: 0; box-sizing: inherit; } +h2, +h6, +p { + text-shadow: 1px 1px 3px rgb(148, 147, 147); +} + html { font-size: 18px; + font-family: "Roboto", sans-serif; } @include desktop { html { @@ -21,4 +30,4 @@ html { html { font-size: 12px; } -} \ No newline at end of file +} diff --git a/styles/main.scss b/styles/main.scss index b1b4228..3ac64e8 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -8,4 +8,5 @@ @import "./layouts/container.scss"; //modules -@import "./modules/header.scss"; \ No newline at end of file +@import "./modules/header.scss"; +@import "./modules/carousel.scss"; \ No newline at end of file diff --git a/styles/modules/carousel.scss b/styles/modules/carousel.scss new file mode 100644 index 0000000..d37ddb5 --- /dev/null +++ b/styles/modules/carousel.scss @@ -0,0 +1,71 @@ +.carousel { + padding: 0.5rem; + 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: 1rem; + + &-title { + padding: 1rem; + } + } + + &-container { + display: flex; + flex-direction: row; + /*flex-wrap: wrap;*/ + overflow-x: scroll; + max-width: 100%; + } + + &-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: 1px 1px 3px rgb(148, 147, 147); + } + + &-title { + padding: 0.1rem; + text-align: center; + } + } + + &-button { + padding: 2rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; + + &-action { + font-weight: bold; + text-transform: uppercase; + a { + text-decoration: none; + } + } + + &-icon { + background-image: url("./assets/arrow_right.png"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + width: 2rem; + height: 1rem; + cursor: pointer; + } + } +} diff --git a/styles/variables.scss b/styles/variables.scss index 58313bf..b81b4a9 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -3,11 +3,14 @@ $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; $desktop: 1280px; - // spacers -$base-spacer: 1rem; \ No newline at end of file +$base-spacer: 1rem;