diff --git a/.gitignore b/.gitignore index e43b0f9889..9daa8247da 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ .DS_Store +node_modules diff --git a/SASS/Variables/_variables.scss b/SASS/Variables/_variables.scss new file mode 100644 index 0000000000..36b69493b3 --- /dev/null +++ b/SASS/Variables/_variables.scss @@ -0,0 +1,10 @@ +h1 { + font-size: 8.8rem; + font-weight: bold; + color: white; +} +h3 { + font-size: 2.4rem; + font-weight: bold; + color: #444444; +} diff --git a/SASS/_base.scss b/SASS/_base.scss new file mode 100644 index 0000000000..f22d441fef --- /dev/null +++ b/SASS/_base.scss @@ -0,0 +1,36 @@ +html, +body { + height: 100%; + font-family: "Lato", sans-serif; +} + +html { + font-size: 62.5%; +} + +body { + margin: 0 auto; +} + +a, +p, +address, +footer, +ul, +li, +section, +nav, +header { + font-size: 1.6rem; +} + +.container { + display: grid; + grid-template-rows: 8rem 70vh repeat(9, min-content); + grid-template-columns: + [full-start] minmax(6rem, 1fr) [center-start] repeat( + 8, + [col-start] minmax(min-content, 14rem) [col-end] + ) + [center-end] minmax(6rem, 1fr) [full-end]; +} diff --git a/SASS/_home/_designs.scss b/SASS/_home/_designs.scss new file mode 100644 index 0000000000..940959b15c --- /dev/null +++ b/SASS/_home/_designs.scss @@ -0,0 +1,35 @@ +.designs { + margin-top: 4.8rem; + grid-column: center-start / center-end; + + &__content { + display: flex; + justify-content: space-between; + align-items: center; + } + + &__info { + width: 48%; + order: 2; + + h3 { + margin-bottom: 2.4rem; + } + + p { + margin-bottom: 2.4rem; + } + button { + height: 4.8rem; + width: 20rem; + border-radius: 4px; + font-size: 1.6rem; + font-family: lato; + border: line 1px grey; + } + } + + img { + width: 48%; + } +} diff --git a/SASS/_home/_header.scss b/SASS/_home/_header.scss new file mode 100644 index 0000000000..6317cf5c61 --- /dev/null +++ b/SASS/_home/_header.scss @@ -0,0 +1,24 @@ +.header { + // background-color: lightblue; + grid-column: full-start / full-end; + background-image: url(../../img/home/home-jumbotron.png); + background-size: cover; + display: grid; + grid-template-columns: + [full-start] minmax(6rem, 1fr) [center-start] repeat( + 8, + [col-start] minmax(min-content, 14rem) [col-end] + ) + [center-end] minmax(6rem, 1fr) [full-end]; + grid-template-rows: [row-start1] 1fr [row-end1 row-start2] 1fr [row-end2 row-start3] min-content [row-end3 row-start4] 1fr [row-end4]; + + // &__img { + // justify-self: center; + // } + + &__h1 { + grid-column: center-start / center-end; + grid-row: row-start4 / row-end4; + padding-bottom: 4.8rem; + } +} diff --git a/SASS/_home/_learn_more.scss b/SASS/_home/_learn_more.scss new file mode 100644 index 0000000000..d5fde5fd5d --- /dev/null +++ b/SASS/_home/_learn_more.scss @@ -0,0 +1,35 @@ +.learn-more { + // background-color: lightgrey; + margin-top: 4.8rem; + grid-column: center-start / center-end; + + &__content { + display: flex; + justify-content: space-between; + align-items: center; + } + + &__info { + width: 48%; + + h3 { + margin-bottom: 2.4rem; + } + + p { + margin-bottom: 2.4rem; + } + button { + height: 4.8rem; + width: 20rem; + border-radius: 4px; + font-size: 1.6rem; + font-family: lato; + border: line 1px grey; + } + } + + img { + width: 48%; + } +} diff --git a/SASS/_home/_nav.scss b/SASS/_home/_nav.scss new file mode 100644 index 0000000000..2f068c9ada --- /dev/null +++ b/SASS/_home/_nav.scss @@ -0,0 +1,92 @@ +// .nav { +// width: 100%; +// padding: 3.2rem 4rem; +// background-color: #888888; +// display: flex; +// justify-content: space-between; +// position: fixed; +// font-size: 2.4rem; +// z-index: 100000; +// margin: 0; +// } + +.nav { + background-color: grey; + grid-column: full-start / full-end; + z-index: 10000; + + display: grid; + grid-template-columns: + [full-start] minmax(6rem, 1fr) [center-start] repeat( + 8, + [col-start] minmax(min-content, 14rem) [col-end] + ) + [center-end] minmax(6rem, 1fr) [full-end]; + + &_main { + grid-column: center-start / center-end; + // background-color: aqua; + + &-content { + display: flex; + justify-content: space-between; + // background-color: blueviolet; + margin-top: 3rem; + } + } + + a { + text-decoration: none; + } + + &__logo { + color: white; + } + + &__menu { + display: none; + &--links { + color: white; + margin: 1.5rem auto; + + &:hover { + color: black; + transform: scale(1.05); + font-weight: bold; + } + } + } + + &__toggle { + color: white; + + &:hover { + color: black; + // transform: scale(1.1); + } + } + + .active { + display: flex; + flex-direction: column; + margin-top: 5rem; + width: 100%; + } +} + +.project-1 { + background-color: orangered; + grid-column: center-start / center-end; +} +.project-2 { + background-color: fuchsia; + grid-column: center-start / center-end; +} +.project-3 { + background-color: orange; + grid-column: center-start / center-end; +} +.footer { + background-color: grey; + grid-column: full-start / full-end; +} diff --git a/SASS/_reset.scss b/SASS/_reset.scss new file mode 100644 index 0000000000..e7471564fa --- /dev/null +++ b/SASS/_reset.scss @@ -0,0 +1,143 @@ +/*------------------------------------*\ +RESET +\*------------------------------------*/ +/* http://meyerweb.com/eric/tools/css/reset/ +v2.0b1 | 201101 +NOTE:WORK IN PROGRESS +USE WITH CAUTION AND TEST WITH ABANDON */ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ’’; + content: none; +} +ins { + text-decoration: none; +} +del { + text-decoration: line-through; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* Your Code Goes Here */ + +* { + box-sizing: border-box; +} diff --git a/SASS/index.scss b/SASS/index.scss new file mode 100644 index 0000000000..7329530b93 --- /dev/null +++ b/SASS/index.scss @@ -0,0 +1,7 @@ +@import "reset"; +@import "base"; +@import "variables/variables"; +@import "_home/nav"; +@import "_home/header"; +@import "_home/learn_more"; +@import "_home/designs"; diff --git a/css/index.css b/css/index.css index e6b2b589c1..2603539885 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,286 @@ -/* Should be empty until you compile your LESS */ \ No newline at end of file +@charset "UTF-8"; +/*------------------------------------*\ +RESET +\*------------------------------------*/ +/* http://meyerweb.com/eric/tools/css/reset/ +v2.0b1 | 201101 +NOTE:WORK IN PROGRESS +USE WITH CAUTION AND TEST WITH ABANDON */ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } + +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; } + +body { + line-height: 1; } + +ol, +ul { + list-style: none; } + +blockquote, +q { + quotes: none; } + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ’’; + content: none; } + +ins { + text-decoration: none; } + +del { + text-decoration: line-through; } + +table { + border-collapse: collapse; + border-spacing: 0; } + +/* Your Code Goes Here */ +* { + box-sizing: border-box; } + +html, +body { + height: 100%; + font-family: "Lato", sans-serif; } + +html { + font-size: 62.5%; } + +body { + margin: 0 auto; } + +a, +p, +address, +footer, +ul, +li, +section, +nav, +header { + font-size: 1.6rem; } + +.container { + display: grid; + grid-template-rows: 8rem 70vh repeat(9, min-content); + grid-template-columns: [full-start] minmax(6rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end]; } + +h1 { + font-size: 8.8rem; + font-weight: bold; + color: white; } + +h3 { + font-size: 2.4rem; + font-weight: bold; + color: #444444; } + +.nav { + background-color: grey; + grid-column: full-start / full-end; + z-index: 10000; + display: grid; + grid-template-columns: [full-start] minmax(6rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end]; } + .nav_main { + grid-column: center-start / center-end; } + .nav_main-content { + display: flex; + justify-content: space-between; + margin-top: 3rem; } + .nav a { + text-decoration: none; } + .nav__logo { + color: white; } + .nav__menu { + display: none; } + .nav__menu--links { + color: white; + margin: 1.5rem auto; } + .nav__menu--links:hover { + color: black; + transform: scale(1.05); + font-weight: bold; } + .nav__toggle { + color: white; } + .nav__toggle:hover { + color: black; } + .nav .active { + display: flex; + flex-direction: column; + margin-top: 5rem; + width: 100%; } + +.project-1 { + background-color: orangered; + grid-column: center-start / center-end; } + +.project-2 { + background-color: fuchsia; + grid-column: center-start / center-end; } + +.project-3 { + background-color: orange; + grid-column: center-start / center-end; } + +.footer { + background-color: grey; + grid-column: full-start / full-end; } + +.header { + grid-column: full-start / full-end; + background-image: url(../../img/home/home-jumbotron.png); + background-size: cover; + display: grid; + grid-template-columns: [full-start] minmax(6rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end]; + grid-template-rows: [row-start1] 1fr [row-end1 row-start2] 1fr [row-end2 row-start3] min-content [row-end3 row-start4] 1fr [row-end4]; } + .header__h1 { + grid-column: center-start / center-end; + grid-row: row-start4 / row-end4; + padding-bottom: 4.8rem; } + +.learn-more { + margin-top: 4.8rem; + grid-column: center-start / center-end; } + .learn-more__content { + display: flex; + justify-content: space-between; + align-items: center; } + .learn-more__info { + width: 48%; } + .learn-more__info h3 { + margin-bottom: 2.4rem; } + .learn-more__info p { + margin-bottom: 2.4rem; } + .learn-more__info button { + height: 4.8rem; + width: 20rem; + border-radius: 4px; + font-size: 1.6rem; + font-family: lato; + border: line 1px grey; } + .learn-more img { + width: 48%; } + +.designs { + margin-top: 4.8rem; + grid-column: center-start / center-end; } + .designs__content { + display: flex; + justify-content: space-between; + align-items: center; } + .designs__info { + width: 48%; + order: 2; } + .designs__info h3 { + margin-bottom: 2.4rem; } + .designs__info p { + margin-bottom: 2.4rem; } + .designs__info button { + height: 4.8rem; + width: 20rem; + border-radius: 4px; + font-size: 1.6rem; + font-family: lato; + border: line 1px grey; } + .designs img { + width: 48%; } diff --git a/index.html b/index.html index 8a84a17304..9fef636026 100644 --- a/index.html +++ b/index.html @@ -1,20 +1,90 @@ -
- -Et sed autem causae appareat, tempor abhorreant te mei, facer facilisis sit ea. Eu timeam vidisse consectetuer sed. Duo etiam laboramus dissentiet in, nec no errem
+ +Et sed autem causae appareat, tempor abhorreant te mei, facer facilisis sit ea. Eu timeam vidisse consectetuer sed. Duo etiam laboramus dissentiet in, nec no errem
+ +