Merge pull request #11 from fac-14/styles

Styles
fac-14 · Aug 23, 2018 · 2e9d6b9 · 2e9d6b9
2 parents b6bc7c6 + 92d79d5
commit 2e9d6b9
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 24 deletions.
diff --git a/public/css/form.css b/public/css/form.css
@@ -46,6 +46,16 @@ form {
   font-weight: 400;
 }
 
+h3 {
+  font-size: 25px;
+  font-weight: 700;
+}
+
+h4 {
+  font-size: 18px;
+  font-weight: 400;
+}
+
 label {
   font-size: 18px;
   margin: 0 auto;
@@ -73,11 +83,33 @@ button {
 
 textarea {
   font-size: 18px;
-  /* background: #f5f5f5; */
 }
 
-#github-icon {
-
+.github-icon {
   height:50px;
   width: 50px;
 }
+
+#container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.profile-div {
+  border: solid red 5px;
+  display: flex;
+  flex-direction: column;
+  margin: 20px;
+  background-color: white;
+}
+
+ul,
+a {
+  display: flex;
+}
+
+li {
+  display: flex;
+  justify-content: space-around;
+}
diff --git a/public/css/profile.css b/public/css/profile.css
@@ -1,4 +1,4 @@
-.profile-div {
+/* .profile-div {
   display: flex;
   flex-direction: column;
   border: 1px solid red;
@@ -10,11 +10,3 @@
   width: 40vw;
   /* margin: auto; */
 }
-
-.github-icon {
-
-}
-
-li {
-  list-style: none;
-}
diff --git a/src/views/profile.hbs b/src/views/profile.hbs
@@ -1,17 +1,84 @@
 <section>
-  <div class="profile-div">
-    <div class="profile-image">
-      <img src="/images/emilyrever.jpg" alt="image">
+  <div id='container'>
+
+    <div class="profile-div">
+      <!-- add info in from data object -->
+      <img class="profile-image" src="/images/emilyrever.jpg" alt="image">
+      <h3>Emily Rever</h3>
+      <ul>
+        <li><h4>FAC14</h4></li>
+        <li><h4>GitHub</h4></li>
+        <li><a href="https://github.com/EmilyScripts"><img class="github-icon" src="/images/github.png"></a>
+        </li>
+      </ul>
+      <div class="textarea"><h4>bio:</h4></div>
+    </div>
+
+    <div class="profile-div">
+      <!-- add info in from data object -->
+      <img class="profile-image" src="/images/emilyrever.jpg" alt="image">
+      <h3>Emily Rever</h3>
+      <ul>
+        <li><h4>FAC14</h4></li>
+        <li><h4>GitHub</h4></li>
+        <li><a href="https://github.com/EmilyScripts"><img class="github-icon" src="/images/github.png"></a>
+        </li>
+      </ul>
+
+      <div class="textarea"><h4>bio:</h4></div>
+    </div>
+
+    <div class="profile-div">
+      <!-- add info in from data object -->
+      <img class="profile-image" src="/images/emilyrever.jpg" alt="image">
+      <h3>Emily Rever</h3>
+      <ul>
+        <li><h4>FAC14</h4></li>
+        <li><h4>GitHub</h4></li>
+        <li><a href="https://github.com/EmilyScripts"><img class="github-icon" src="/images/github.png"></a>
+        </li>
+      </ul>
+      <div class="textarea"><h4>bio:</h4></div>
     </div>
 
-    <h1>Emily Rever</h1>
-    <ul>
-      <li>FAC14</li>
-      <li>GitHub</li>
-        <a href="https://github.com/EmilyScripts"><img id="github-icon" src="/images/github.png"></a>
-      </li>
-    </ul>
+    <div class="profile-div">
+      <!-- add info in from data object -->
+      <img class="profile-image" src="/images/emilyrever.jpg" alt="image">
+      <h3>Emily Rever</h3>
+      <ul>
+        <li><h4>FAC14</h4></li>
+        <li><h4>GitHub</h4></li>
+        <li><a href="https://github.com/EmilyScripts"><img class="github-icon" src="/images/github.png"></a>
+        </li>
+      </ul>
+      <div class="textarea"><h4>bio:</h4></div>
+    </div>
+
+    <div class="profile-div">
+      <!-- add info in from data object -->
+      <img class="profile-image" src="/images/emilyrever.jpg" alt="image">
+      <h3>Emily Rever</h3>
+      <ul>
+        <li><h4>FAC14</h4></li>
+        <li><h4>GitHub</h4></li>
+        <li><a href="https://github.com/EmilyScripts"><img class="github-icon" src="/images/github.png"></a>
+        </li>
+      </ul>
+      <div class="textarea"><h4>bio:</h4></div>
+    </div>
+
+    <div class="profile-div">
+      <!-- add info in from data object -->
+      <img class="profile-image" src="/images/emilyrever.jpg" alt="image">
+      <h3>Emily Rever</h3>
+      <ul>
+        <li><h4>FAC14</h4></li>
+        <li><h4>GitHub</h4></li>
+        <li><a href="https://github.com/EmilyScripts"><img class="github-icon" src="/images/github.png"></a>
+        </li>
+      </ul>
+      <div class="textarea"><h4>bio:</h4></div>
+    </div>
 
-    <textarea name="bio" cols="5" rows="5"></textarea>
   </div>
-</section >
+</section>