Renamed files to be ready for merge

diff --git a/css/mock2.css b/css/mock2.css
new file mode 100644 (file)
index 0000000..7b46a31
--- /dev/null
+++ b/css/mock2.css
@@ -0,0 +1,213 @@
+/* reset css for browser compat */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+  font-family: Verdana, Helvetica, sans-serif;
+  font-size: 16px;
+  color: #222222;
+}
+
+/* navbar */
+.navbar {
+  width: 100%;
+  height: 50px;
+  background-color: white;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  border-bottom: 1px solid #ccc;
+  z-index: 100;
+}
+.nlogo {
+  height: 40px;
+}
+/* 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: 51px 0 0; /* merged margins into one */
+  padding: 0;
+  width: 100%; 
+  position: relative;
+  height: auto;
+  min-height: 100%; /* height is needed for some properties */
+}
+
+/* jumbotron */
+.jumbotron {
+  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 {
+  text-align: center;
+  text-decoration: none;
+  color: black;
+  margin: 0 1%;
+  margin-bottom: 5px;
+  border: 1px solid #000;
+  height: 250px;
+  background-color: #fff;
+  border-radius: 10px;
+  width: 350px;
+  display: inline-block;
+}
+.box:hover, .box:active {
+  background-color: #eee;
+}
+.title {
+  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;
+}
+div.art:last-child {
+  border-bottom: none;
+}
+h3.art {
+  margin: 0;
+}
+p.art {
+  margin: 0;
+}
+p.art-ingress {
+  font-style: italic;
+  margin: 0;
+}
+p.art-date {
+  color: #ccc;
+  margin-top: 0;
+}
+a {
+  color: #0645AD;
+  text-decoration: none;
+}
+p.art-link {
+  margin-top: 0;
+}
+
+/* footer */
+.footer {
+  background: #666; /* >:^) */
+  width: 100%;
+  /* margin and padding are reset at line 1-5 */
+  display: flex;
+  flex-wrap: wrap;
+  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_mock2.html b/index_mock2.html
new file mode 100644 (file)
index 0000000..2bce219
--- /dev/null
+++ b/index_mock2.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+    <title>freenode</title>
+    <link href="css/mock1.css" rel="stylesheet" />
+</head>
+<body>
+    <nav class="navbar">
+        <img src="img/logos/coloured-alphabg.svg" class="nlogo" alt="Freenode" />
+        <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">
+                <div href="" class="box">
+                    <img src="" alt="chat" height="60px" width="60px" /><br />
+                    Join a community
+                </div>
+                <div href="" class="box">
+                    <img src="" alt="group" height="60px" width="60px" /><br />
+                    Get my project on freenode
+                </div>
+                <div href="" class="box">
+                    <img src="" alt="support" height="60px" width="60px" /><br />
+                    Support freenode
+                </div>
+        </div>
+        <div class="main">
+            <h1>News</h1>
+            <div class="art">
+                <h3 class="art">Some News</h3>
+                <p class="art-date">2016-02-21 by spb</p>
+                <p class="art-ingress">Fancy news article's ingress text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat ultricies euismod. Maecenas dolor mauris, posuere mollis eros vel, auctor rhoncus quam...</p>
+                <p class="art-link"><a href="">Read More</a></p>
+            </div>
+            <div class="art">
+                <h3 class="art">Another News</h3>
+                <p class="art-date">2016-01-19 by christel</p>
+                <p class="art-ingress">Some other news article's ingress here. Phasellus nec erat rhoncus, pretium orci eget, ullamcorper ipsum. Fusce sit amet felis a augue sodales commodo id eget justo. Phasellus id nisl nec elit porta pellentesque in egestas nibh. Vivamus mollis ligula lectus, in mollis nibh pharetra vitae...</p>
+                <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">
+                &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>