diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/README.md b/README.md index 3f43b27..96ec2cf 100644 --- a/README.md +++ b/README.md @@ -1 +1,42 @@ -# UI \ No newline at end of file +# UI + +## Design Style Guide +Goal: Match the Lambda Training Kit + + + +### Primary: Lambda Red (for Lambda Logo & Logo text) + +- ![#ec3944 ](https://via.placeholder.com/15/ec3944/000000?text=+) `#ec3944 (lambda logo)` +- ![#bb1333 ](https://via.placeholder.com/15/bb1333/000000?text=+) `#bb1333 (body text accent)` + +### Secondary: Faded Navy +- ![#2f2b4a ](https://via.placeholder.com/15/2f2b4a/000000?text=+) `#2f2b4a (nav bar)` + +### Accent Blues +- ![#14121f ](https://via.placeholder.com/15/14121f/000000?text=+) `#14121f (Deep Navy)` +- ![#0c3d78 ](https://via.placeholder.com/15/0c3d78/000000?text=+) `#0c3d78 (Cobalt blue)` +- ![#3bb5e6 ](https://via.placeholder.com/15/3bb5e6/000000?text=+) `#3bb5e6 (Sky Blue)` +- ![#1a61af](https://via.placeholder.com/15/1a61af/000000?text=+) `#1a61af (Medium Blue)` + +## Text & BG +- ![#f8f9fa](https://via.placeholder.com/15/f8f9fa/000000?text=+) `#f8f9fa(Light BG)` +- ![#343a40](https://via.placeholder.com/15/343a40/000000?text=+) `#343a40(Dark Text)` + +### Font Stack: + +Sans-serif: +- [Lato](https://fonts.google.com/specimen/Lato) +- Helvetica +- sans-serif + +Serif: +- [Frank Ruhl Libre](https://fonts.google.com/specimen/Frank+Ruhl+Libre) +- Times New Roman +- serif + +### Other notes: + +Headers & buttons bold + +Rounded corners on buttons and images \ No newline at end of file diff --git a/common-issues.html b/common-issues.html new file mode 100644 index 0000000..3fab93a --- /dev/null +++ b/common-issues.html @@ -0,0 +1,96 @@ + + + + + + + + + + + + + + + + + DeskOverflow + + + +
+
+ +
+
+
+

Common Issues

+

Here are the questions we get most often.

+ + +

+ +
+

+ +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus urna metus, sed tempus lacus luctus at. Cras suscipit purus vel mi viverra, eget interdum nisi aliquam. Suspendisse potenti. Vivamus metus felis, mollis id venenatis nec, cursus vel augue. Phasellus nulla magna, eleifend sit amet tortor sit amet, facilisis sollicitudin risus. Integer eleifend aliquet quam in eleifend. Fusce blandit molestie est et viverra. Cras tristique, nisl at pretium tristique, justo sapien ultricies leo, sit amet rutrum nisl tellus ac ante.

+
+

+ +
+

Phasellus condimentum, neque et sagittis pharetra, dolor orci cursus libero, vehicula iaculis dolor quam in lorem. Sed ultrices fringilla elementum. Duis ornare mollis dui, ut porta ante pretium sodales. Curabitur feugiat viverra dui, quis volutpat ipsum efficitur eget.

+
+

+ +
+

Phasellus semper, orci non mattis consequat, risus neque dictum nunc, imperdiet egestas velit mi sed nibh. Maecenas rutrum dictum dui, at tincidunt urna laoreet ut. Sed vel augue porttitor, imperdiet lacus at, venenatis nisl.

+
+

+ +
+

Mauris sed scelerisque quam. Integer mollis augue at metus pellentesque, ac gravida arcu vestibulum. Maecenas sed erat varius, ultricies massa vitae, tincidunt purus. Donec hendrerit interdum diam sit amet tristique. Cras condimentum diam quis leo dignissim, nec sodales justo tincidunt. Nunc vulputate auctor turpis nec pulvinar. Duis quis magna tempor, ornare lorem sed, pulvinar nisl. In pharetra nisl nec dolor placerat hendrerit. Nunc vitae finibus nisi. In venenatis feugiat feugiat. Nullam sit amet malesuada justo. Nunc tristique ut purus nec interdum.

+
+
+ + +

+ +
+

+ +
+

Aliquam sed lectus porta, luctus ex auctor, dictum neque. Maecenas pretium libero sit amet felis vehicula, vel finibus arcu vulputate. Nunc non rhoncus justo, et euismod enim. Nunc condimentum diam nec erat accumsan tincidunt.

+
+

+ +
+

Praesent aliquet elementum justo non eleifend. Pellentesque id nunc imperdiet, facilisis lectus vitae, condimentum nulla. Suspendisse ante metus, efficitur vitae lectus non, venenatis sollicitudin diam. Nulla viverra sed ante malesuada tristique. Ut pharetra mollis rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec tempus purus nibh, sit amet ultricies odio semper at. Mauris consectetur leo elit, in hendrerit velit scelerisque at.

+
+

+ +
+

Donec auctor blandit lorem, eget ullamcorper ante elementum a. Aliquam vel rutrum augue. Ut vitae odio nec sapien lobortis malesuada. Sed quis risus eu dui malesuada ultrices. Sed maximus neque neque, eget auctor nunc imperdiet sed. Duis eget condimentum ex. Fusce sed semper tellus. Nullam tempus libero id malesuada placerat. Ut non sagittis risus. Praesent at porttitor nunc.

+
+

+ +
+

Aenean sit amet varius mauris, a dignissim turpis. In nec metus et felis tincidunt suscipit. Nullam efficitur vestibulum orci id ultrices. Vivamus ut semper libero, ac rutrum dolor. Praesent nibh velit, vehicula eu viverra nec, aliquet et dui.

+
+
+ + + + + \ No newline at end of file diff --git a/img/favicon_lambda_256.png b/img/favicon_lambda_256.png new file mode 100644 index 0000000..8d059aa Binary files /dev/null and b/img/favicon_lambda_256.png differ diff --git a/img/favicon_lambda_32.png b/img/favicon_lambda_32.png new file mode 100644 index 0000000..b712814 Binary files /dev/null and b/img/favicon_lambda_32.png differ diff --git a/img/home-nesa-by-makers-kwzWjTnDPLk-unsplash(M).jpg b/img/home-nesa-by-makers-kwzWjTnDPLk-unsplash(M).jpg new file mode 100644 index 0000000..ef3dbef Binary files /dev/null and b/img/home-nesa-by-makers-kwzWjTnDPLk-unsplash(M).jpg differ diff --git a/img/home-nesa-by-makers-kwzWjTnDPLk-unsplash(S).jpg b/img/home-nesa-by-makers-kwzWjTnDPLk-unsplash(S).jpg new file mode 100644 index 0000000..d2a54c1 Binary files /dev/null and b/img/home-nesa-by-makers-kwzWjTnDPLk-unsplash(S).jpg differ diff --git a/img/lambda-logo.png b/img/lambda-logo.png new file mode 100644 index 0000000..14618ed Binary files /dev/null and b/img/lambda-logo.png differ diff --git a/img/lambda-underline.png b/img/lambda-underline.png new file mode 100644 index 0000000..562504e Binary files /dev/null and b/img/lambda-underline.png differ diff --git a/img/team-Brian-Griffiths.png b/img/team-Brian-Griffiths.png new file mode 100644 index 0000000..676ed90 Binary files /dev/null and b/img/team-Brian-Griffiths.png differ diff --git a/img/team-Devin-Bidwell.jpg b/img/team-Devin-Bidwell.jpg new file mode 100644 index 0000000..5c4817a Binary files /dev/null and b/img/team-Devin-Bidwell.jpg differ diff --git a/img/team-Emily-Adams.jpg b/img/team-Emily-Adams.jpg new file mode 100644 index 0000000..aae18fa Binary files /dev/null and b/img/team-Emily-Adams.jpg differ diff --git a/img/team-Juan-Aleman.jpg b/img/team-Juan-Aleman.jpg new file mode 100644 index 0000000..b09db7f Binary files /dev/null and b/img/team-Juan-Aleman.jpg differ diff --git a/img/team-Suzanne-Cabral.png b/img/team-Suzanne-Cabral.png new file mode 100644 index 0000000..c11bcda Binary files /dev/null and b/img/team-Suzanne-Cabral.png differ diff --git a/index.css b/index.css new file mode 100644 index 0000000..73e6f34 --- /dev/null +++ b/index.css @@ -0,0 +1,471 @@ +/* =================== */ +/* Reset */ +/* =================== */ + +* { + box-sizing:border-box; + padding:0; + margin:0; + line-height:1; + max-width:100%; + font-weight:100; + /* border:1px solid gray; */ +} + +a { + text-decoration:none; +} +/* =================== */ +/* General Styles */ +/* =================== */ + +html { + font-size:62.5%; +} + + +body { + font-size:1.9rem; + line-height:1.5; + background-color:#f8f9fa; + color:#343a40; + font-family: 'Lato', 'Helvetica', sans-serif; +} + +.nav-wrapper .flex-item{ + padding:2rem 0; + /* border:2px solid fuchsia; */ + +} + +nav { + display:flex; + justify-content:space-between; + width:100%; + align-items:baseline; + flex-flow:row; +} + +.nav-wrapper { + border-bottom: 1px solid #d5d5d5; + display:flex; + flex-flow:row; + justify-content:space-between; +} + +.nav-wrapper a { + margin-bottom:1rem; + /* background-color:plum; */ +} + +.logo { + border-radius:0; + width:18rem; + margin-right: 20%; +} + + + +.nav-button { + font-weight:bold; + font-size:1.5rem; + color:#343a40; + margin:0 1rem; + padding:1rem 1rem; +} + +.content-wrapper { + width:80%; + margin: 0 auto; +} + + + + + +h1{ + font-size:7rem; + margin: 4.5rem 0 1.5rem 0; + font-family: 'Frank Ruhl Libre', 'Times New Roman', serif; + color:black; +} + +h2{ + font-size:4.5rem; + font-family: 'Frank Ruhl Libre', 'Times New Roman', serif; + margin: 0 0 1.5rem 0; + color:black; +} +h3{ + font-family:'Frank Ruhl Libre', 'Times New Roman', Serif; + font-size:2.5rem; +} +a{ + font-weight:bold; + color:black; +} + +p{ + line-height:2.2rem; + margin:0 0 2.5rem 0; +} + +img { + border-radius:30px; +} + +.flex-row { + display:flex; + flex-flow:row-reverse; + justify-content:flex-start; +} + + + +.flex-text { + width:60rem; + margin:3rem 7% 0 0; +} +.flex-text p { + margin:0 0 4rem 0; +} +.red-button { + border-radius:10px; + padding:1rem; + background-color:#ec3944; + color:white; +} + +.red-underline { + background-image: url("img/lambda-underline.png"); + background-size:100%; + background-repeat:no-repeat; + background-position:bottom; + color:#ec3944; +} +/* =================== */ +/* Team */ +/* =================== */ +.contacts-wrapper { + display:flex; + flex-flow:row wrap; + justify-items:center; +} +.contact-card { + /* background-color:palegreen; */ + background-size:100%; + background-repeat:no-repeat; + border:1px solid #d5d5d5; + border-radius:25px; + height:35rem; + width:35rem; + margin:1rem; + overflow:hidden; + display:flex; + align-items:flex-end; +} + + +.contact-card-text{ + background-color:#f8f9fa; + width:100%; + padding:2rem 0 0 2rem; + +} + +.contact-card p { + color:#777; +} + + +.emily { + background-image:url("img/team-Emily-Adams.jpg"); +} +.devin { + background-image:url("img/team-Devin-Bidwell.jpg"); +} +.brian { + background-image:url("img/team-Brian-Griffiths.png"); +} +.juan { + background-image:url("img/team-Juan-Aleman.jpg"); +} +.suzanne { + background-image:url("img/team-Suzanne-Cabral.png"); +} + + + +/* =================== */ +/* FAQ */ +/* =================== */ + +/*---------------------------*/ +/* LABEL & HEADER Styles*/ +/*---------------------------*/ + +i { + margin:0 1.7rem 0 0; + font-size:3rem; +} +.faq p, h2, h3 { + max-width:70rem; +} + +.faq h2 { + margin:.5rem 0; +} + +.faq h2>label { + border-bottom: 1px solid #d5d5d5; +} + +.faq h3>label { + margin:.2rem 0; + border-bottom:1px solid #d5d5d5; +} + +.topic { + padding:0 0 0 3rem; + margin:0 0 2rem 0; + max-width:65rem; +} + +.topic p { + padding:1rem 0 0 1.4rem; +} + + +/* ---- Clickable Labels ---- */ + +.faq h2>label, h3>label { + padding:1rem; + width:80rem; + display:block; + cursor: pointer; +} + + +/* ---- Hide Checkboxes ---- */ + +.faq input[type="checkbox"] { + position:absolute; + left:-100vw; +} + +/*---------------------------*/ +/* TOPIC UNFOLDER */ +/*---------------------------*/ + +/* ---- Default: Closed ---- */ + +.faq .topic{ + overflow-y:hidden; + height:0; +} + + +/* ---- On check: Opened ---- */ + +.faq > input[type="checkbox"]:checked + .topic { + height:auto; + overflow:visible; +} + +/*---------------------------*/ +/* ANSWER UNFOLDER */ +/*---------------------------*/ + + +/*---- Default: Closed ---- */ + +.faq .question{ + overflow-y:hidden; + height:0; +} + + +/* ---- On check: Opened ---- */ + +.faq .topic > input[type="checkbox"]:checked + .question { + height:auto; + overflow:visible; +} + + + + + +/* =================== */ +/* Breakpoints */ +/* =================== */ + + +@media(max-width:800px){ + + h1 { + font-size:5.5rem; + margin:3rem 0 .5rem 0; + } + + h2 { + font-size:3.6rem; + } + p { + font-size:1.8rem; + max-width:35rem; + } + + nav{ + display:flex; + flex-flow:column; + align-items:flex-start; + padding:0 0 0 1.5rem; + width:40rem; + } + + .nav-wrapper .flex-item { + display:flex; + flex-flow:column; + align-items:flex-start; + padding:0 0 0 1.5rem; + width:40rem; + } + + .logo { + width:17rem; + margin:1.5rem 0 0 0; + padding:0; + } + .nav-wrapper .flex-item a{ + font-size:1.6rem; + padding:.7rem 1.5rem; + margin: 0 0 1rem 0; + + } + + .nav-wrapper{ + padding-bottom:1.2rem; + } + + .flex-row { + display:flex; + flex-flow:column; + } + + .hero-img-wrapper { + width:80%; + margin-bottom: 1.5rem; + } + + .flex-row p{ + margin:0 0 2rem 0; + } + .content-wrapper { + width:88%; + } + + .contact-card { + width:30rem; + background-size:100%; + background-size:cover; + } + + .red-button { + display:inline-block; + width:40%; + } + + + .flex-text { + margin:0 2.2rem 0 0; + } + .red-button { + min-width:15rem; + } + + +} + + + +@media (max-width:500px) { + + .nav-wrapper { + padding:1rem 0 1.4rem 0; + } + + .nav-button:nth-child(4){ + margin-bottom:1.5rem; + } + + .red-button{ + min-width:70%; + padding:1.5rem; + } + + + .logo { + padding:0; + + } + + nav { + padding:0 0 0 2rem; + } + + + + h1 { + font-size:4.8rem; + margin:2rem 0 .2rem 0; + } + h2 { + font-size: 4rem; + } + + .flex-row { + display:flex; + flex-flow:column; + margin:0 0 5rem 0; + } + + .hero-img-wrapper { + margin:0 0 2rem 0; + width:95%; + } + + .flex-text { + margin:0; + } + + + .content-wrapper { + min-width:85%; + margin:auto; + display:flex; + flex-flow:column; + align-items:center; + } + + .contact-card { + background-size:100%; + background-size:cover; + } + + + .faq p, h2, h3 { + max-width:35rem; + } +} + +@media (max-width:320px) { + + + .faq h2, h3 { + max-width:25rem; + } + .faq p { + max-width:21rem; + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..616f9fa --- /dev/null +++ b/index.html @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + DeskOverflow + + + + +
+
+ +
+
+
+

DeskOverflow

+

A helpdesk system for Lambda School

+
+
+ Two people coding together at an office +
+ +
+

Ask us anything.

+

Need help with your class schedule? Having trouble with a slack channel? Want to sign up for the Team + Leadership program? We've got you covered.

+ Ask a Question +
+
+
+ + \ No newline at end of file diff --git a/team.html b/team.html new file mode 100644 index 0000000..e895c37 --- /dev/null +++ b/team.html @@ -0,0 +1,91 @@ + + + + + + + + + + + + + + + + + DeskOverflow + + + +
+
+ +
+
+
+

Meet the Team

+

Here's everyone who worked on the project for Build Week.

+
+ +
+ +
+

Emily Adams

+

React Developer

+
+
+ + +
+ +
+

Devin Bidwell

+

React Developer

+
+
+ + +
+ +
+

Brian Griffiths

+

Back-end Developer

+
+
+ + +
+ +
+

Suzanne Cabral

+

UI Developer

+
+
+ + +
+ +
+

Juan Aleman

+

Project Lead

+
+
+
+ + +
+ + + \ No newline at end of file