seperated src and dist

NJIT-SIG-WEBDEV · Dec 7, 2016 · 68b7ff7 · 68b7ff7
1 parent e036473
commit 68b7ff7
Show file tree

Hide file tree

Showing 21 changed files with 313 additions and 3 deletions.
diff --git a/pic1.PNG → footer_pic1.PNG b/pic1.PNG → footer_pic1.PNG
diff --git a/pic2.PNG → footer_pic2.PNG b/pic2.PNG → footer_pic2.PNG
diff --git a/main.css → headerandfooter.css b/main.css → headerandfooter.css
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title></title>
-    <link rel="stylesheet" href="./main.css">
+    <link rel="stylesheet" href="./headerandfooter.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
 
     <style>
@@ -80,7 +80,7 @@ <h3>Are you lazy?</h3>
         <h3>Latest items on PS</h3>
         <ul>
           <li>
-             <img class="col-4" src="pic1.png" alt="">
+             <img class="col-4" src="footer_pic1.png" alt="">
              <div class="col-8">
                <ul>
                  <li><h3>Social Icons</h3></li><br>
@@ -89,7 +89,7 @@ <h3>Latest items on PS</h3>
              </div>
           </li>
           <li>
-             <img class="col-4" src="pic2.png" alt="">
+             <img class="col-4" src="footer_pic2.png" alt="">
              <div class="col-8">
                <ul>
                  <li><h3>Browser Iconset</h3></li><br>

diff --git a/src/header-&-footer/About.jpg b/src/header-&-footer/About.jpg
diff --git a/src/header-&-footer/Contact.jpg b/src/header-&-footer/Contact.jpg
diff --git a/src/header-&-footer/HelveticaCE.otf b/src/header-&-footer/HelveticaCE.otf
diff --git a/src/header-&-footer/Home.jpg b/src/header-&-footer/Home.jpg
diff --git a/src/header-&-footer/Portfolio.jpg b/src/header-&-footer/Portfolio.jpg
diff --git a/src/header-&-footer/README.md b/src/header-&-footer/README.md
@@ -0,0 +1,24 @@
+# Pixel-Studios
+A brand new design agency sent us jpegs of pages they want for their website. We need to turn them into html.
+
+Please pick a page and create a branch for it. After you worked on it and want me to review it, create a pull request and we will go over it together.
+
+### Remarks
+- The header and footer will be in the master branch. You can include it into your html. If you dont see it yet means im still making it.
+- You dont have to use the exact pictures, but if you can find something similar it would be great
+- The buttons dont need to do anything, just create them and make them change color on hover or something.
+- The form doesn't have to actually send anything. But you should make validation check work. 
+- You can use any tool you want. Whatever you use please just use its cdn link in your html file.
+- try to keep everything in one directory so its smoother merging it all at the end.
+- Questions? Message me or create an issue.
+
+##### Some Tools:
+- [Adobe Kuler] (https://color.adobe.com/)
+- [Place It] (https://placeit.net/)
+- [Css Slider](http://cssslider.com/)
+- [Font Awesome](fontawesome.io)
+
+
+###### Fonts
+- [Helvetica CE](http://ttfonts.net/font/20936_HelveticaCE.htm)
+- [Montserrat](https://fonts.google.com/specimen/Montserrat)
diff --git a/src/header-&-footer/Services.jpg b/src/header-&-footer/Services.jpg
diff --git a/_colors.scss → src/header-&-footer/_colors.scss b/_colors.scss → src/header-&-footer/_colors.scss
diff --git a/_grid.scss → src/header-&-footer/_grid.scss b/_grid.scss → src/header-&-footer/_grid.scss
diff --git a/_mixins.scss → src/header-&-footer/_mixins.scss b/_mixins.scss → src/header-&-footer/_mixins.scss
diff --git a/src/header-&-footer/footer_pic1.PNG b/src/header-&-footer/footer_pic1.PNG
diff --git a/src/header-&-footer/footer_pic2.PNG b/src/header-&-footer/footer_pic2.PNG
diff --git a/src/header-&-footer/index.html b/src/header-&-footer/index.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <link rel="stylesheet" href="./main.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
+
+    <style>
+      .wrapper{
+        max-width: 1148px;
+        margin: auto;
+      }
+    </style>
+
+
+  </head>
+  <body>
+
+
+
+
+<!--
+THIS IS THE MAIN CONTAINER/WRAPPER
+EVERY PAGE NEEDS TO HAVE THIS.
+I PUT THE STYLE ABOVE
+-->
+<div class="wrapper">
+
+
+
+  <!-- Header -->
+  <header>
+    <div class="alirow">
+      <div class="col-3 logo">
+        <img src="logo.png" alt="logo" />
+      </div>
+      <div class="col-9">
+        <div class="col-10 menu">
+          <nav>
+            <ul>
+              <li><a href="#" class="active">home</a></li>
+              <li><a href="#">about us</a></li>
+              <li><a href="#">services</a></li>
+              <li><a href="#">portfolio</a></li>
+              <li><a href="#">blog</a></li>
+              <li><a href="#">contact</a></li>
+            </ul>
+          </nav>
+        </div>
+        <div class="col-2 joinus">
+          <button type="button" name="button"><i class="fa fa-plus-circle fa-3" aria-hidden="true"></i> JOIN US</button>
+        </div>
+      </div><!--end .col-->
+    </div><!--end .alirow-->
+  <hr>
+</header>
+
+
+
+
+
+  <br><br><br><br><br><br><br><!-- Where Body content would go into -->
+
+
+
+
+
+<!-- FOOTER -->
+  <footer>
+    <div class="alirow">
+      <div class="col-3 about">
+        <h3>Are you lazy?</h3>
+        <p>
+          We offer over 1000 different webelements and designs. We love to design awesome stunning interfaces and icons.
+        </p>
+        <button type="button" name="button">GET ALL PSD FILES</button>
+      </div>
+      <div class="col-3 latest">
+        <h3>Latest items on PS</h3>
+        <ul>
+          <li>
+             <img class="col-4" src="footer_pic1.png" alt="">
+             <div class="col-8">
+               <ul>
+                 <li><h3>Social Icons</h3></li><br>
+                 <li>200 Social Icons</li>
+               </ul>
+             </div>
+          </li>
+          <li>
+             <img class="col-4" src="footer_pic2.png" alt="">
+             <div class="col-8">
+               <ul>
+                 <li><h3>Browser Iconset</h3></li><br>
+                 <li>3D Glossy Browser</li>
+               </ul>
+             </div>
+          </li>
+        </ul>
+      </div>
+      <div class="col-3 links">
+        <h3>Alternative Links</h3>
+        <ul>
+          <li>Branding /Logos</li>
+          <li>Websites</li>
+          <li>Web applications</li>
+          <li>Web development</li>
+          <li>Content Management Systems</li>
+          <li>Responsive Web Design</li>
+        </ul>
+      </div>
+      <div class="col-3 contact">
+        <h3>Contact Us</h3>
+        <ul>
+          <li><span>Address: </span>Avenue 123</li>
+          <li><span>Phone: </span>+40 123 456 789</li>
+          <li><span>Fax: </span>+40 987 654 321</li>
+          <li><span>Email: </span>[email protected]</li>
+        </ul>
+        <br>
+        <span>Follow Us on</span>
+        <i class="fa fa-facebook" aria-hidden="true"></i>
+        <i class="fa fa-twitter" aria-hidden="true"></i>
+        <i class="fa fa-dribbble" aria-hidden="true"></i>
+        <i class="fa fa-rss" aria-hidden="true"></i>
+      </div>
+    </div>
+    <hr>
+    <p class="copyright">Copyright <i class="fa fa-copyright" aria-hidden="true"></i> 2013 by <span>KL-Webmedia</span> | All rights reserved</p>
+  </footer>
+
+
+
+</div><!--end .wrapper-->
+  </body>
+</html>
diff --git a/src/header-&-footer/logo.PNG b/src/header-&-footer/logo.PNG
diff --git a/src/header-&-footer/main.css b/src/header-&-footer/main.css
diff --git a/main.css.map → src/header-&-footer/main.css.map b/main.css.map → src/header-&-footer/main.css.map
diff --git a/main.scss → src/header-&-footer/main.scss b/main.scss → src/header-&-footer/main.scss