diff --git a/assets/Shape.jpg b/assets/Shape.jpg new file mode 100644 index 0000000..7fad66d Binary files /dev/null and b/assets/Shape.jpg differ diff --git a/assets/Shape.svg b/assets/Shape.svg new file mode 100644 index 0000000..050aac2 --- /dev/null +++ b/assets/Shape.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/image.jpg b/assets/image.jpg new file mode 100644 index 0000000..fabb671 Binary files /dev/null and b/assets/image.jpg differ diff --git a/components/banner.html b/components/banner.html new file mode 100644 index 0000000..ebdf864 --- /dev/null +++ b/components/banner.html @@ -0,0 +1,23 @@ + + + + + + Banner + + + +
+ +
+ + \ No newline at end of file diff --git a/style.css b/style.css index bd66479..aaf89b1 100644 --- a/style.css +++ b/style.css @@ -51,4 +51,72 @@ html { background-color: #7521d5; } +.prova { + min-height: 200vh; + background-color: red; +} + +.banner { + background-color: #FFC74D; + margin-top: -2.5rem; + margin-left: 2rem; + margin-right: 2rem; + min-height: 5.5rem; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + flex-direction: row; +} +.banner-img { + flex: 0.5 1 350px; + background-image: url(../../assets/image.jpg); + background-size: cover; + background-position: center; + width: 200%; + margin: 0 0; + align-self: stretch; +} +.banner-content { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + flex: 2 1 320px; + color: #343059; + margin-left: 0.5rem; +} +.banner-content-items { + flex: 2 1 250px; + margin: 1.5rem 1.5rem; +} +.banner-content-items-subtitle { + font-size: 12px; + margin-top: 0.5rem; +} +.banner-content-button { + color: #343059; + flex: 1 1 175px; + padding: 0.5rem 0.5rem; + margin: 1.25rem 1.25rem; + text-decoration: none; + text-transform: uppercase; + font-weight: bold; + text-align: left; +} +.banner-content-button-img { + padding: 0.5rem 1.5rem; + margin: 0 0.5rem; + background-image: url(../../assets/Shape.svg); + background-size: cover; + background-position: center; +} + +@media (max-width: 767px) { + .banner .banner-img { + height: 10rem; + flex: 0.5 1 auto; + } +} + /*# sourceMappingURL=style.css.map */ diff --git a/style.css.map b/style.css.map index 06265ce..8fd3b09 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/banner.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAGF;EACE;;;ACIA;EDDA;IACE;;;ACLF;EDSA;IACE;;;ACfF;EDmBA;IACE;;;AErBJ;EAaE,WCHQ;EDIR;;ADbA;ECDF;IAEI;IACA;;;ADGF;ECNF;IAMI;IACA;;;ADIF;ECXF;IAUI;IACA;;;;AEXJ;EACE,SDaY;ECZZ;;;ACFF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA,OF5BgB;EE6BhB;;AAEA;EACE;EACA;;AACA;EACE;EACA;;AAIJ;EACE,OFzCc;EE0Cd;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;;AJzDN;EImEA;IACE;IACA","file":"style.css"} \ No newline at end of file diff --git a/styles/main.scss b/styles/main.scss index b1b4228..8366beb 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/banner.scss"; \ No newline at end of file diff --git a/styles/modules/banner.scss b/styles/modules/banner.scss new file mode 100644 index 0000000..9bcfc75 --- /dev/null +++ b/styles/modules/banner.scss @@ -0,0 +1,73 @@ +.prova{ + min-height: 200vh; + background-color:red; +} +.banner { + background-color: $banner-primary-color; + margin-top: -2.5rem; + margin-left: 2rem; + margin-right: 2rem; + min-height: 5.5rem; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + flex-direction: row; + + &-img { + flex: 0.5 1 350px; + background-image: url(../../assets/image.jpg); + background-size: cover; + background-position: center; + width: 200%; + margin: 0 0; + align-self: stretch; + } + + &-content { + display:flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + flex: 2 1 320px; + color: $banner-text-color; + margin-left: .5rem; + + &-items{ + flex:2 1 250px; + margin: 1.5rem 1.5rem; + &-subtitle{ + font-size: 12px; + margin-top: .5rem; + } + } + + &-button { + color: $banner-text-color; + flex:1 1 175px; + padding: 0.5rem 0.5rem; + margin: 1.25rem 1.25rem; + text-decoration: none; + text-transform: uppercase; + font-weight: bold; + text-align: left; + &-img { + padding: .5rem 1.5rem; + margin: 0 .5rem; + background-image: url(../../assets/Shape.svg); + background-size: cover; + background-position: center; + + + + } + } + } + +} +@include mobile { + .banner .banner-img{ + height: 10rem; + flex: 0.5 1 auto; + } +} \ No newline at end of file diff --git a/styles/variables.scss b/styles/variables.scss index 58313bf..11fb4db 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -2,6 +2,8 @@ $base-text-color: rgb(46, 46, 46); $primary-color: rgb(117, 33, 213); $secondary-color: rgb(235, 136, 14); +$banner-text-color: #343059; +$banner-primary-color: #FFC74D; // brackepoints $mobile: 768px;