diff --git a/assets/Rectangle 2.png b/assets/Rectangle 2.png new file mode 100644 index 0000000..88a1f7d Binary files /dev/null and b/assets/Rectangle 2.png differ 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/next.png b/assets/next.png new file mode 100644 index 0000000..d3fc6c6 Binary files /dev/null and b/assets/next.png differ diff --git a/components/banner.html b/components/banner.html new file mode 100644 index 0000000..db2dbea --- /dev/null +++ b/components/banner.html @@ -0,0 +1,32 @@ + + + + + + Document + + + + +
+ + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css index bd66479..2e8098b 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,4 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,700&display=swap"); * { margin: 0; padding: 0; @@ -51,4 +52,58 @@ html { background-color: #7521d5; } +.banner { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: center; + margin-left: 2rem; + margin-right: 2rem; + background-color: #FFC74D; +} +.banner-img { + flex: 1 1 320px; + width: 200px; + height: 8rem; + background-image: url("../../assets/Rectangle 2.png"); + background-position: center; + background-size: cover; +} +.banner-content { + margin: 0 auto; + padding: 0.8rem; + box-sizing: inherit; + align-items: center; +} +.banner-content-title { + font-family: "Roboto", sans-serif; +} +.banner-content-paragraph { + font-family: "Roboto", sans-serif; + font-size: 14px; + flex: 3 1 320px; + align-content: center; + height: auto; +} +.banner-button { + flex: 0.5 1 100px; + padding: 0.25rem 0.5rem; + margin: 0 0.5rem; + font-family: "Roboto", sans-serif; + color: var(--primary-color); + text-decoration: none; + text-transform: uppercase; + align-self: center; +} +.banner-content-button-img { + padding: 1rem 1.5rem; + background-position: right center; + background-image: url("../../assets/Shape.svg"); +} + +A:VISITED { + color: var(--primary-color); +} + /*# sourceMappingURL=style.css.map */ diff --git a/style.css.map b/style.css.map index 06265ce..0e8884d 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/modules/banner.scss","styles/base/elements.scss","styles/base/mixin.scss","styles/layouts/container.scss","styles/variables.scss","styles/modules/header.scss"],"names":[],"mappings":"AAEQ;ACFR;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;;;ALGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAED;EACE;EACA;EACA;EACA;;AAGF;EACC;;AAID;EACC;EACA;EACA;EACA;EACA;;AAGD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;;AAKH;EACE","file":"style.css"} \ No newline at end of file diff --git a/styles/main.scss b/styles/main.scss index b1b4228..9a7e62d 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"; diff --git a/styles/modules/banner.scss b/styles/modules/banner.scss new file mode 100644 index 0000000..73979ec --- /dev/null +++ b/styles/modules/banner.scss @@ -0,0 +1,68 @@ + +//font +@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,700&display=swap'); + + +.banner { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: center; + margin-left: 2rem; + margin-right: 2rem; + background-color: #FFC74D; + + &-img { + flex: 1 1 320px; + width: 200px; + height: 8rem; + background-image: url("../../assets/Rectangle\ 2.png"); + background-position: center; + background-size: cover; + } + &-content { + margin: 0 auto; + padding: 0.8rem; + box-sizing: inherit; + align-items: center; + } + + &-content-title { + font-family: 'Roboto', sans-serif; + } + + + &-content-paragraph { + font-family: 'Roboto', sans-serif; + font-size: 14px; + flex: 3 1 320px; + align-content: center; + height: auto; + } + + &-button { + flex: .5 1 100px; + padding: .25rem .5rem; + margin: 0 0.5rem; + font-family: 'Roboto', sans-serif; + color: var( --primary-color); + text-decoration: none; + text-transform: uppercase; + align-self: center; + } + &-content-button-img { + padding: 1rem 1.5rem; + background-position: right center; + background-image: url("../../assets/Shape.svg"); + } + + } + + A:VISITED { + color: var( --primary-color); + + } + + + diff --git a/styles/variables.scss b/styles/variables.scss index 58313bf..f8acc8b 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -10,4 +10,4 @@ $desktop: 1280px; // spacers -$base-spacer: 1rem; \ No newline at end of file +$base-spacer: 1rem;