Dev-Desk-queque · suzannecabral · Aug 24, 2020 · Aug 24, 2020 · Aug 24, 2020 · Aug 24, 2020
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
@@ -1 +1,42 @@
-# UI
+# 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
diff --git a/common-issues.html b/common-issues.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
+
+    <link href="https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@500;700&display=swap" rel="stylesheet">
+
+    <script src="https://kit.fontawesome.com/4d99540586.js" crossorigin="anonymous"></script>
+
+    <link href="img/favicon_lambda_32.png" rel="shortcut icon" type="image/x-icon" />
+    <link href="img/favicon_lambda_256.png" rel="apple-touch-icon" />
+
+    <link rel="stylesheet" href="index.css">
+    <title>DeskOverflow</title>
+</head>
+
+<body>
+    <header>
+        <div class="nav-wrapper">
+            <nav>
+                <div class="flex-item">
+                    <a href="https://lambdaschool.com/" class="nav-button logo"><img src="img/lambda-logo.png"
+                            class="logo" alt="Lambda logo with red shield"></a></div>
+                <div class="flex-item">
+                    <a href="index.html" class="nav-button">DeskOverflow</a>
+                    <a href="common-issues.html" class="nav-button">Common Issues</a>
+                    <a href="team.html" class="nav-button">About the Team</a>
+                    <a href="https://lambda-desk-overflow.netlify.app/login" class="nav-button red-button">Ask a
+                        Question</a>
+                </div>
+            </nav>
+        </div>
+    </header>
+    <div class="content-wrapper faq">
+        <h1>Common Issues</h1>
+        <p>Here are the questions we get most often.</p>
+
+
+        <h2><label for="topic-1"><i class="far fa-chevron-right"></i>Topic 1</label></h2>
+        <input type="checkbox" id="topic-1"></input>
+        <div class="topic">
+            <h3><label for="question-1-1">Question 1.1</label></h3>
+            <input type="checkbox" id="question-1-1"></input>
+            <div class="question">
+                <p>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.</p>
+            </div>
+            <h3><label for="question-1-2">Question 1.2</label></h3>
+            <input type="checkbox" id="question-1-2"></input>
+            <div class="question">
+                <p>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.</p>
+            </div>
+            <h3><label for="question-1-3">Question 1.3</label></h3>
+            <input type="checkbox" id="question-1-3"></input>
+            <div class="question">
+                <p>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. </p>
+            </div>
+            <h3><label for="question-1-4">Question 1.4</label></h3>
+            <input type="checkbox" id="question-1-4"></input>
+            <div class="question">
+                <p>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.</p>
+            </div>
+        </div>
+
+
+        <h2><label for="topic-2"><i class="far fa-chevron-right"></i>Topic 2</label></h2>
+        <input type="checkbox" id="topic-2"></input>
+        <div class="topic">
+            <h3><label for="question-2-1">Question 2.1</label></h3>
+            <input type="checkbox" id="question-2-1"></input>
+            <div class="question">
+                <p>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. </p>
+            </div>
+            <h3><label for="question-2-2">Question 2.2</label></h3>
+            <input type="checkbox" id="question-2-2"></input>
+            <div class="question">
+                <p>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.</p>
+            </div>
+            <h3><label for="question-2-3">Question 2.3</label></h3>
+            <input type="checkbox" id="question-2-3"></input>
+            <div class="question">
+                <p>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.</p>
+            </div>
+            <h3><label for="question-2-4">Question 2.4</label></h3>
+            <input type="checkbox" id="question-2-4"></input>
+            <div class="question">
+                <p>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.</p>
+            </div>
+        </div>
+
+
+</body>
+
+</html>
diff --git a/img/favicon_lambda_256.png b/img/favicon_lambda_256.png
diff --git a/img/favicon_lambda_32.png b/img/favicon_lambda_32.png
diff --git a/img/home-nesa-by-makers-kwzWjTnDPLk-unsplash(M).jpg b/img/home-nesa-by-makers-kwzWjTnDPLk-unsplash(M).jpg
diff --git a/img/home-nesa-by-makers-kwzWjTnDPLk-unsplash(S).jpg b/img/home-nesa-by-makers-kwzWjTnDPLk-unsplash(S).jpg
diff --git a/img/lambda-logo.png b/img/lambda-logo.png
diff --git a/img/lambda-underline.png b/img/lambda-underline.png
diff --git a/img/team-Brian-Griffiths.png b/img/team-Brian-Griffiths.png
diff --git a/img/team-Devin-Bidwell.jpg b/img/team-Devin-Bidwell.jpg
diff --git a/img/team-Emily-Adams.jpg b/img/team-Emily-Adams.jpg
diff --git a/img/team-Juan-Aleman.jpg b/img/team-Juan-Aleman.jpg
diff --git a/img/team-Suzanne-Cabral.png b/img/team-Suzanne-Cabral.png