diff --git a/assets/background.png b/assets/background.png new file mode 100644 index 0000000..0509d7f Binary files /dev/null and b/assets/background.png differ diff --git a/assets/download.png b/assets/download.png new file mode 100644 index 0000000..4f05708 Binary files /dev/null and b/assets/download.png differ diff --git a/components/cover.html b/components/cover.html new file mode 100644 index 0000000..d680dd8 --- /dev/null +++ b/components/cover.html @@ -0,0 +1,21 @@ + + + + + + Cover-Team + + + + +
+
+

Magna pars studiorum prodita

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt fugiat, assumenda tempora iste provident omnis rem veritatis repudiandae

+ + CALL TO ACTION +
+
+ + + \ No newline at end of file diff --git a/style.css b/style.css index bd66479..74ad363 100644 --- a/style.css +++ b/style.css @@ -51,4 +51,55 @@ html { background-color: #7521d5; } +.cover { + display: flex; + padding: 2rem; + box-sizing: border-box; + min-height: 800px; + max-width: 50%; + align-content: space-between; + background-color: #352857; + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} +.cover-background { + display: flex; + background-image: url(../../assets/background.png); + background-repeat: no-repeat; + background-position: right; + max-width: 55%; +} +.cover-content { + max-width: 50%; +} +.cover-title { + color: #ffc74d; + font-size: 72px; + font-weight: 900; + font-family: "Roboto", sans-serif; + margin-bottom: 3rem; +} +.cover-subtitle { + color: #ffb53d; + font-family: "Open Sans", sans-serif; + font-size: 16px; + font-weight: normal; + line-height: 1.5rem; +} +.cover-btn { + padding: 1rem; + color: #ffc74d; + font-family: "Roboto", sans-serif; + font-size: 1.5rem; + font-weight: 900; + text-decoration: none; + text-transform: uppercase; +} +.cover-btn-arrow { + background-image: url(../../assets/download.png); + width: 3rem; + height: 3rem; +} + /*# sourceMappingURL=style.css.map */ diff --git a/style.css.map b/style.css.map index 06265ce..ec7f7e4 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/cover.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;;;ACEF;EACE;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EAEA;;AAGF;EAEE;;AAGF;EACE,OAjCY;EAkCZ;EACA;EACA;EAEA;;AAGF;EACE,OAzCc;EA2Cd;EACA;EACA;EACA;;AAGF;EACE;EACA,OApDY;EAqDZ;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA","file":"style.css"} \ No newline at end of file diff --git a/styles/main.scss b/styles/main.scss index b1b4228..c48df1c 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/cover.scss"; diff --git a/styles/modules/cover.scss b/styles/modules/cover.scss new file mode 100644 index 0000000..1df9594 --- /dev/null +++ b/styles/modules/cover.scss @@ -0,0 +1,70 @@ +// COLOR +$primary-color: #ffc74d; +$secondary-color: #ffb53d; + +.cover { + display: flex; + + padding: 2rem; + box-sizing: border-box; + min-height: 800px; + max-width: 50%; + + align-content: space-between; + + background-color: #352857; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + + &-background { + display: flex; + background-image: url(../../assets/background.png); + background-repeat: no-repeat; + background-position: right; + + max-width: 55%; + } + + &-content { + + max-width: 50%; + } + + &-title { + color: $primary-color; + font-size: 72px; + font-weight: 900; + font-family: 'Roboto', sans-serif; + + margin-bottom: 3rem; + } + + &-subtitle { + color: $secondary-color; + + font-family: 'Open Sans', sans-serif; + font-size: 16px; + font-weight: normal; + line-height: 1.5rem; + } + + &-btn { + padding: 1rem; + color: $primary-color; + font-family: 'Roboto', sans-serif; + font-size: 1.5rem; + font-weight: 900; + text-decoration: none; + text-transform: uppercase; + + &-arrow { + + background-image: url(../../assets/download.png); + width: 3rem; + height: 3rem; + } + + } + +} \ No newline at end of file