diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..2aa09ba --- /dev/null +++ b/css/index.css @@ -0,0 +1,246 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +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, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 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; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +* { + box-sizing: border-box; +} +html { + font-size: 62.5%; +} +html, +body { + font-family: "Source Sans Pro", sans-serif; + color: #5E6164; +} +h1, +h2, +h3, +h4, +h5 { + font-family: "Source Sans Pro", sans-serif; + color: #23293B; +} +h2 { + font-size: 3.2rem; +} +h3 { + font-size: 2.8rem; +} +p { + font-size: 1.6rem; + line-height: 1.4; +} +.container { + max-width: 1000px; + width: 100%; + margin: 0 auto; +} +header { + display: flex; + flex-direction: column; + align-content: center; + align-items: center; + width: 100%; + background-color: aliceblue; +} +header h1 { + font-size: 10rem; + margin-bottom: 10px; + margin-top: 20px; +} +header nav { + margin: 20px; +} +header nav a { + font-family: "Source Sans Pro", sans-serif; + font-size: 3rem; + text-decoration: none; + color: #5E6164; + margin: 200px 50px; +} +header nav a:hover { + background: white; + border-radius: 5px; + color: black; +} +header img { + width: 90%; + height: 250px; + border-radius: 10px; + margin: 50px; +} +footer { + display: flex; + flex-direction: column; + align-content: center; + align-items: center; + width: 100%; + background-color: aliceblue; +} +footer p { + line-height: 2; + margin: 20px 0; +} +.container .top { + margin: 20px; +} +.container .top h1 { + font-size: 20px; + margin: 20px 0; +} +.container .row { + display: flex; +} +@media (max-width: 800px) { + .container .row { + flex-direction: column; + align-content: center; + align-items: center; + } +} +@media (max-width: 500px) { + .container .row { + flex-direction: column; + align-content: center; + align-items: center; + } +} +.container .row div { + width: 33%; + margin: 20px 50px; + border-bottom: 1px dashed black; +} +.container .row div h3 { + line-height: 1.5; +} +.container img { + height: 150px; + width: 80%; + margin: 20px; + border-radius: 10px; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..4f18832 --- /dev/null +++ b/index.html @@ -0,0 +1,55 @@ + + + + + Replate + + + + +
+

Replate :
About Us

+ + plates +
+
+
+

Meet The Team

+

We’re here to make a difference one Lambda School student at a time.
+ We are the people who worked late nights in restaurants and overnight stocking at grocery stores.
+ We saw how much food was being thrown out at the end of shifts. We see a need to coordinate pick up & delivery more efficiently for our communities to reduce industry food waste. +

+
+ +
+

Jay Leach - PROJECT
LEAD

Jay-Leach
+

Joe Lambert - REACT II DEVELOPER

Joe Lambert
+

Jason Sonnichsen - BACKEND DEVELOPER JAVA

Jason Sonnichsen
+
+
+

Nattajohn
Rojanasupya -
REACT DEVELOPER

Nattajohn Rojanasupya
+

Lisa Cook -
UI
DEVELOPER

+

Rikei Williams-
UI
DEVELOPER

rikei-williams
+
+ +
+ + + \ No newline at end of file diff --git a/less/footer.less b/less/footer.less new file mode 100644 index 0000000..dc43183 --- /dev/null +++ b/less/footer.less @@ -0,0 +1,14 @@ +footer { + display: flex; + flex-direction: column; + align-content: center; + align-items: center; + width: 100%; + background-color: aliceblue; + p { + line-height: 2; + margin: 20px 0; + } + + } + \ No newline at end of file diff --git a/less/global.less b/less/global.less new file mode 100644 index 0000000..5ff7eb5 --- /dev/null +++ b/less/global.less @@ -0,0 +1,39 @@ +// General Styles +* { + box-sizing: border-box; + } + + html { + font-size: 62.5%; + } + + html, body { + font-family: "Source Sans Pro", sans-serif; + color: @main-font-color; + } + + h1, h2, h3, h4, h5 { + font-family: "Source Sans Pro", sans-serif; + color: @header-font-color; + } + + h2 { + font-size: 3.2rem; + } + + h3 { + font-size: 2.8rem; + } + + p { + font-size: 1.6rem; + line-height: 1.4; + } + + .container { + max-width: 1000px; + width: 100%; + margin: 0 auto; + } + + \ No newline at end of file diff --git a/less/home-page.less b/less/home-page.less new file mode 100644 index 0000000..4a0986c --- /dev/null +++ b/less/home-page.less @@ -0,0 +1,49 @@ +.container{ + .top{ + margin: 20px; + + h1 { + font-size: 20px; + margin: 20px 0; + } + } + .row{ + display: flex; + + + @media @tablet { + flex-direction: column; + align-content: center; + align-items: center; + + + } + + @media @phone { + flex-direction: column; + align-content: center; + align-items: center; + + } + + div { + + width:33%; + margin: 20px 50px; + border-bottom: 1px dashed black; + + + h3 { + line-height: 1.5; + } + } + + } + img { + height: 150px; + width: 80%; + margin: 20px; + border-radius: 10px; + +} +} \ No newline at end of file diff --git a/less/index.less b/less/index.less new file mode 100644 index 0000000..7639714 --- /dev/null +++ b/less/index.less @@ -0,0 +1,7 @@ +@import "variables"; +@import "mixins"; +@import "reset"; +@import "global"; +@import "navigation"; +@import "footer"; +@import "home-page"; \ No newline at end of file diff --git a/less/mixins.less b/less/mixins.less new file mode 100644 index 0000000..9f43b2f --- /dev/null +++ b/less/mixins.less @@ -0,0 +1,5 @@ +.columnCenter(){ + flex-direction: column; + align-content: center; + align-items: center; +} \ No newline at end of file diff --git a/less/navigation.less b/less/navigation.less new file mode 100644 index 0000000..caf4f5e --- /dev/null +++ b/less/navigation.less @@ -0,0 +1,39 @@ +header { + + display: flex; + .columnCenter(); + width:100%; + background-color: aliceblue; + h1 { + font-size: 10rem; + margin-bottom: 10px; + margin-top: 20px; + } + nav{ + margin: 20px; + + a{ + font-family: "Source Sans Pro", sans-serif; + font-size: 3rem; + text-decoration: none; + color: #5E6164; + margin: 200px 50px; + + &:hover{ + background: white; + border-radius: 5px; + color: black; + + } + } + + + } + img { + width: 90%; + height: 250px; + border-radius: 10px; + margin: 50px; + + } +} \ No newline at end of file diff --git a/less/reset.less b/less/reset.less new file mode 100644 index 0000000..af94440 --- /dev/null +++ b/less/reset.less @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +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, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 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; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/less/variables.less b/less/variables.less new file mode 100644 index 0000000..b74a16a --- /dev/null +++ b/less/variables.less @@ -0,0 +1,6 @@ +@main-font-color: @shuttle-gray; +@header-font-color: @ebony-clay; +@ebony-clay: #23293B; +@shuttle-gray: #5E6164; +@phone: ~"(max-width: 500px)"; +@tablet: ~"(max-width: 800px)"; \ No newline at end of file diff --git a/styles/Jason-S.png b/styles/Jason-S.png new file mode 100644 index 0000000..7d917f7 Binary files /dev/null and b/styles/Jason-S.png differ diff --git a/styles/Jay-Leach.jpg b/styles/Jay-Leach.jpg new file mode 100644 index 0000000..ae82b09 Binary files /dev/null and b/styles/Jay-Leach.jpg differ diff --git a/styles/Joseph-L.png b/styles/Joseph-L.png new file mode 100644 index 0000000..01b5357 Binary files /dev/null and b/styles/Joseph-L.png differ diff --git a/styles/Lisa-cook.png b/styles/Lisa-cook.png new file mode 100644 index 0000000..0d625de Binary files /dev/null and b/styles/Lisa-cook.png differ diff --git a/styles/nattajohn.jpg b/styles/nattajohn.jpg new file mode 100644 index 0000000..658d35c Binary files /dev/null and b/styles/nattajohn.jpg differ diff --git a/styles/plate.jpg b/styles/plate.jpg new file mode 100644 index 0000000..808d9e9 Binary files /dev/null and b/styles/plate.jpg differ diff --git a/styles/rikei-williams.jpg b/styles/rikei-williams.jpg new file mode 100644 index 0000000..bd5650e Binary files /dev/null and b/styles/rikei-williams.jpg differ