Made a basic page layout.

diff --git a/.index_mock1.html.swo b/.index_mock1.html.swo
new file mode 100644 (file)
index 0000000..4dac3db
Binary files /dev/null and b/.index_mock1.html.swo differ

diff --git a/.index_mock1.html.swp b/.index_mock1.html.swp
new file mode 100644 (file)
index 0000000..ffc8fbd
Binary files /dev/null and b/.index_mock1.html.swp differ

diff --git a/css/.mock1.css.swo b/css/.mock1.css.swo
new file mode 100644 (file)
index 0000000..8122859
Binary files /dev/null and b/css/.mock1.css.swo differ

diff --git a/css/.mock1.css.swp b/css/.mock1.css.swp
new file mode 100644 (file)
index 0000000..bf84786
Binary files /dev/null and b/css/.mock1.css.swp differ

diff --git a/css/mock1.css b/css/mock1.css
index 4ac98b72bf62f0a3a142b547598177acffe89842..7b46a31de9a06690d74fee6f7a8157637618a7ef 100644 (file)
--- a/css/mock1.css
+++ b/css/mock1.css
@@ -1,5 +1,14 @@
+/* reset css for browser compat */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Verdana, Helvetica, sans-serif;
+  font-size: 16px;
+  color: #222222;
 }
 
 /* navbar */
@@ -13,7 +22,6 @@ body {
   top: 0;
   display: flex;
   flex-wrap: nowrap;
-  justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid #ccc;
   z-index: 100;
@@ -21,47 +29,66 @@ body {
 .nlogo {
   height: 40px;
 }
-.nlink {
+/* navigation links */
+.navlinks {
+        position: relative;
+        display: table;
+        height: 50px;
+        margin: 0 20px;
+        list-style-type: none;
+}
+
+.navlinks > li {
   text-decoration: none;
+  font-size: 20px;
   color: black;
+  float: left;
+  display: table-cell;
+  margin: 0 15px;
+  padding-top: 25px;
+  transform: translate(0, -25%); /* I have no idea how or why this works but it just does. */
+  cursor: pointer; /* for pseudo-links to still feel like links */
 }
 
 /* main */
 .container {
-  margin-top: 51px;
-  margin-left: 0;
-  margin-right: 0;
-  margin-bottom: 0;
+  margin: 51px 0 0; /* merged margins into one */
   padding: 0;
   width: 100%; 
-  margin-left: 0;
-  margin-right: 0;
   position: relative;
+  height: auto;
+  min-height: 100%; /* height is needed for some properties */
 }
 
 /* jumbotron */
 .jumbotron {
-  background: rgba(75,235,74,.4);
+  color: white;
+  height: 50%;
   width: 100%;
+  top: 50%;
+  margin: 5% 0;
+  position: relative;
+  display: flex;
+  padding: 25px;
+  wrap-flex: wrap;
+  justify-content: center;
+  align-items: center;
 }
 .child {
   text-align: center;
 }
-.box-container {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-around;
-  align-items: center;
-}
 .box {
   text-align: center;
   text-decoration: none;
   color: black;
+  margin: 0 1%;
   margin-bottom: 5px;
   border: 1px solid #000;
-  flex-basis: 30%;
-  height: 120px;
+  height: 250px;
   background-color: #fff;
+  border-radius: 10px;
+  width: 350px;
+  display: inline-block;
 }
 .box:hover, .box:active {
   background-color: #eee;
@@ -70,6 +97,63 @@ body {
   text-align: center;
 }
 
+/* a big welcome for newcomers ;) */
+.welcome-big {
+  position: relative;
+  margin-top: 51px;
+  border-bottom: 1px solid #888;
+  width: 100%;
+
+  background: rgb(65,225,64); /* fallback */
+  background: rgba(15, 75, 14, .6);
+
+  padding: 10%;
+
+  text-align: center;
+  color: white;
+  text-shadow: 0 3px 6px rgba(0,0,0, 0.16), 0 3px 6px rgba(0,0,0, 0.21);
+
+  box-shadow: 0 3px 5px rgba(0,0,0, 0.36);
+
+  height: 50%;
+
+  overflow: hidden;
+  vertical-align: bottom;
+}
+
+.welcome-big h1 { /* make this stand out */
+  font-size: 50px;
+  line-height: 80px;
+} 
+
+.welcome-big h3 {
+  font-size: 22px;
+  width: 70%;
+  margin: 0 auto;
+  vertical-align: middle;
+  }
+
+.welcome-learnmore {
+  border: 1px solid #666;
+  background-color: white;
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 400;
+
+  padding: 5px 8px;
+
+  border-radius: 8px;
+
+  box-shadow: 0 3px 6px rgba(0,0,0, 0.16), 0 3px 6px rgba(0,0,0, 0.21);
+
+  display: block;
+  position: relative;
+  margin: 0 auto;
+  vertical-align: middle;
+  bottom: -50%;
+  transform: translate(0, 50%);
+
+  }
 /* articles feed */
 div.art {
   border-bottom: 1px solid #eee;
@@ -101,16 +185,29 @@ p.art-link {
 
 /* footer */
 .footer {
-  background: #eee;
+  background: #666; /* >:^) */
   width: 100%;
-  margin: 0;
-  padding: 0;
+  /* margin and padding are reset at line 1-5 */
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
-}
-.footerline {
-  border-right: 1px solid #000;
-  height: 100%;
-}
\ No newline at end of file
+  color: #eee;
+  font-size: 18px;
+  line-height: 22px;
+  
+  min-height: 22px;
+  height: auto;
+
+  position: fixed;
+  bottom: 0;
+} /* plz no justify ;_; */
+
+.footer a {
+  text-decoration: none;
+  color: #7bf;
+  }
+
+.footer-links {
+  position: absolute;
+  right: 0;
+  margin-right: 8px;
+  }

diff --git a/index_mock1.html b/index_mock1.html
index 300199ff1adbc2e7288a3d220bcbffae7a06d736..2bce219e6849df4943fa79f3964e7063eed47eb9 100644 (file)
--- a/index_mock1.html
+++ b/index_mock1.html
@@ -11,27 +11,31 @@
 <body>
     <nav class="navbar">
         <img src="img/logos/coloured-alphabg.svg" class="nlogo" alt="Freenode" />
-        <a href="" class="nlink">Chat</a>
-        <a href="" class="nlink">Collaborate</a>
-        <a href="" class="nlink">Support&nbsp;</a>
+        <ul class="navlinks">
+            <li href="" >Chat</li>
+            <li href="" >Collaborate</li>
+            <li href="" >Support&nbsp;</li>
+        </ul>
     </nav>
     <div class="container">
+        <div class="welcome-big">
+            <h1>Welcome to the new home of your projects.</h1>
+            <h3>freenode aims to maximize efficiency in development by allowing a collaborative and relaxed environment for developers while allowing users to get an answer for their problems.</h3>
+            <button type="button" class="welcome-learnmore">Learn More &gt;&gt;</button>
+        </div>
         <div class="jumbotron">
-            <h2 class="child">I want to...</h2>
-            <div class="box-container">
-                <a href="" class="box">
+                <div href="" class="box">
                     <img src="" alt="chat" height="60px" width="60px" /><br />
                     Join a community
-                </a>
-                <a href="" class="box">
+                </div>
+                <div href="" class="box">
                     <img src="" alt="group" height="60px" width="60px" /><br />
                     Get my project on freenode
-                </a>
-                <a href="" class="box">
+                </div>
+                <div href="" class="box">
                     <img src="" alt="support" height="60px" width="60px" /><br />
                     Support freenode
-                </a>
-            </div>
+                </div>
         </div>
         <div class="main">
             <h1>News</h1>
@@ -48,17 +52,11 @@
                 <p class="art-link"><a href="">Read More</a></p>
             </div>
         </div>
+    </div>
+    <!--I do not even know why footer was put in the container-->
         <div class="footer">
-            <div class="footerchild">
-            Hello dear
-            </div>
-            <span class="footerline"></span>
-            <div class="footerchild">
-            Some links
-            </div>
-            <span class="footerline"></span>
-            <div class="footerchild">
-            Some other links
-            </div>
+                &nbsp;&copy; freenode 1995?-2016. All rights reserved.
+            <span class="footer-links">
+                <a href="/sitemap.xml">Sitemap</a> - <a href="/anotherlink.html">Another Link</a>
+            </span>
         </div>
-    </div>
\ No newline at end of file