Merge pull request #24 from fac18/ccs_update

css update

public/css/reset.css

@@ -0,0 +1,78 @@
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default padding */
+ul[class],
+ol[class] {
+  padding: 0;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul[class],
+ol[class],
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  scroll-behavior: smooth;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* Remove list styles on ul, ol elements with a class attribute */
+ul[class],
+ol[class] {
+  list-style: none;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img {
+  max-width: 100%;
+  display: block;
+}
+
+/* Natural flow and rhythm in articles by default */
+article > * + * {
+  margin-top: 1em;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Remove all animations and transitions for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

public/css/style.css

@@ -1,14 +1,34 @@
 body {
-  /* background-image: url("images/christmas_1.jpg"); */
-  background-color: gold;
-  display: flex;
+  background-color: red;
+
+  display: flex; 
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  font-family: 'Gelasio', cursive;
+;
+}
+
+h1 {
+  font-family: 'Mountains of Christmas', cursive;
+  margin-left: 1em;
+  color: red;
+  font-size: 2.5em;;
 }
 
 form {
   padding-top: 100px;
+  background-color: white;
+  margin: 3em;
+  box-shadow: 20px 20px 0px 0px darkred;
+}
+
+
+
+.name{
+  margin: 1em;
+  padding: 1em;
+  border: 1px solid darkred;
 }
 
 p {
@@ -18,3 +38,85 @@ p {
 label {
   font-size: 20px;
 }
+
+footer {
+  width: 100%;
+  margin-top: 5em;
+  background-color: green;
+  color: white;
+  padding: 3em;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+}
+
+.searchBy{
+  margin-right: 1em;
+}
+
+.dropdown {
+  margin: 1em;
+  display: flex;
+  flex-direction: row;
+}
+
+.category{
+  padding: 1em;
+}
+
+.button {
+  margin-top: 2em;
+  padding: 1em 3em;
+  background-color: red;;
+  border: none;
+  margin: 1em 1em 3em 1em;
+  opacity: 0.5;
+  transition: 0.3s all ease-in;
+  color: white;
+
+}
+
+.button:hover{
+  opacity: 1;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  opacity: 0.8;
+}
+
+.question{
+  margin: 1em;
+  padding-bottom: 1em;
+  border-bottom: 2px darkred solid ;
+}
+
+
+th {
+  text-transform: uppercase;
+  font-size: 1.9;;
+  border: 2px solid darkred;
+}
+tr, th, td {
+  padding: 1em;
+  color: white;
+}
+
+tr:nth-child(even) {
+  background-color: rgb(189, 19, 19);
+}
+
+table {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 2em;
+  box-shadow: 20px 20px 0px 0px darkred;
+  border: 3px solid darkred;
+  margin-top: 2em;
+
+}

src/views/home.hbs

@@ -1,11 +1,11 @@
 <form method="POST" action="/create-user">
-  <input name='username' id='createusername' class='entry' aria-label="enter your name" placeholder='name here'
-    required />
+  <h1>Santa, what will I get for X-mas?</h1>
+  <input class="name" name='username' id='createusername' class='entry' aria-label="enter your name" placeholder='name here' required />
   {{!-- create input for password when we get there strech goaL --}}
 
 
-  <label for='category' name='category'>
-    Search by category
+  <label class="dropdown" for='category' name='category'>
+    <p class="searchBy">Search by category </p>
     <select class="category" name="category" required>
       <option value="Sports"> Sports </option>
       <option value="Food"> Food </option>
@@ -15,16 +15,18 @@
   </label>
 
   {{#each questions}}
-
-  <p>{{question}}</p>
-  <input name={{name}} type='radio' aria-label="Yes" value=1 required>Yes</input>
-  <input name={{name}} type='radio' aria-label="No" value=0 required>No</input>
+  <section class="question">
+    <p>{{question}}</p>
+    <input name={{name}} type='radio' aria-label="Yes" value=1 required>Yes</input>
+    <input name={{name}} type='radio' aria-label="No" value=0 required>No</input>
+  </section>
   {{/each}}
 
   <br>
   <br>
 
-  <input type="submit" aria-label="submit button" />
+  <input class="button" type="submit" aria-label="submit button" />
 
 
 </form>
+

src/views/layouts/main.hbs

@@ -6,8 +6,10 @@
 </head>
 
 <body>
+
+  {{{h1}}}
   <main class="main">
-    {{{body}}}
+   {{{body}}}
   </main>
 
   <footer>

src/views/partials/footer.hbs

@@ -1,2 +1,3 @@
-<p>© 2019 FruitMarket</p>
-<p>intellectual property of Alex X Ayub X Pat X Roshan</p>
+    <p>© 2019 Santa Claus's Little Helpers</p>
+    <p>intellectual property of Alex X Ayub X Pat X Roshan</p>
+

src/views/partials/head.hbs

@@ -1,5 +1,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
+<link href="https://fonts.googleapis.com/css?family=Mountains+of+Christmas|Gelasio&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="/css/reset.css">
 <link rel="stylesheet" href="/css/style.css">
 <title>Presents</title>