diff --git a/components/banner.html b/components/banner.html new file mode 100644 index 0000000..faebd3b --- /dev/null +++ b/components/banner.html @@ -0,0 +1,21 @@ + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css index bd66479..aaaf433 100644 --- a/style.css +++ b/style.css @@ -51,4 +51,38 @@ html { background-color: #7521d5; } +html { + font-family: "Roboto", sans-serif, serif; + color: #343059; +} + +.banner { + background-color: #ffc74d; + display: flex; + flex-direction: raw; + margin-left: 2rem; + margin-right: 2rem; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; +} +.banner-img { + flex: 0.5 1 auto; + background-image: url("../styles/assets/Rectangle 2.png"); + background-size: cover; + background-position: left center; + width: 200px; + height: 8rem; + align-self: stretch; +} +.banner-content { + margin: 0 auto; + width: 515px; +} +.banner-button { + text-decoration: none; + text-transform: uppercase; + color: #343059; +} + /*# sourceMappingURL=style.css.map */ diff --git a/style.css.map b/style.css.map index 06265ce..888a983 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,WCLQ;EDMR;;ADbA;ECDF;IAEI;IACA;;;ADGF;ECNF;IAMI;IACA;;;ADIF;ECXF;IAUI;IACA;;;;AEXJ;EACE,SDWY;ECVZ;;;ACFF;EACI;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA","file":"style.css"} \ No newline at end of file diff --git a/styles/assets/Rectangle 2.png b/styles/assets/Rectangle 2.png new file mode 100644 index 0000000..88a1f7d Binary files /dev/null and b/styles/assets/Rectangle 2.png differ diff --git a/styles/assets/next.png b/styles/assets/next.png new file mode 100644 index 0000000..d3fc6c6 Binary files /dev/null and b/styles/assets/next.png differ diff --git a/styles/main.scss b/styles/main.scss index b1b4228..926a49f 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/banner.scss"; diff --git a/styles/modules/banner.scss b/styles/modules/banner.scss new file mode 100644 index 0000000..6b9b281 --- /dev/null +++ b/styles/modules/banner.scss @@ -0,0 +1,37 @@ +html { + font-family: "Roboto", sans-serif, serif; + color: #343059; + } + + .banner { + background-color: #ffc74d; + display: flex; + flex-direction: raw; + margin-left: 2rem; + margin-right: 2rem; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + + &-img { + flex: 0.5 1 auto; + background-image: url("../styles/assets/Rectangle 2.png"); + background-size: cover; + background-position: left center; + width: 200px; + height: 8rem; + align-self: stretch; + } + + &-content { + margin: 0 auto; + width: 515px; + } + + &-button { + text-decoration: none; + text-transform: uppercase; + color: #343059; + } + } + \ No newline at end of file