Made some changes

diff --cc css/mock1.css
index 7b46a31de9a06690d74fee6f7a8157637618a7ef,9faa9880b6f26ca528be3201813311d48a63c593..d2164f6146b17d84a6da6555f579d4c4b18ec31a
--- 1/css/mock1.css
--- 2/css/mock1.css
+++ b/css/mock1.css
@@@ -1,14 -1,24 +1,38 @@@
++<<<<<<< HEAD
 +/* 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;
++=======
+ /* vars */
+ :root {
+   --navbar-bg: white;
+   --nlink-col: black;
+   --jumbotron-bg: rgba(75,235,74,.4);
+   --footer-bg: #eee;
+   --link-color: #428bca;
+   --text-color: #333;
+   --border-color: 0,0,0;
+   --box-hover-color: #eee;
+   --box-round: 10px;
+ }
+ 
+ /* global */
+ body {
+   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+   color: var(--text-color);
+ }
+ a {
+   color: var(--link-color);
+   text-decoration: none;
++>>>>>>> a76ce2ec5a7fbf382a09e6e87b16841374fe28a0
  }
  
  /* navbar */
@@@ -22,57 -32,42 +46,78 @@@
    top: 0;
    display: flex;
    flex-wrap: nowrap;
 -  justify-content: space-between;
    align-items: center;
-   border-bottom: 1px solid #ccc;
+   border-bottom: 1px solid rgba(var(--border-color),.3);
    z-index: 100;
  }
  .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;
++<<<<<<< HEAD
 +  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 */
++=======
+   color: var(--nlink-col);
++>>>>>>> a76ce2ec5a7fbf382a09e6e87b16841374fe28a0
  }
  
  /* 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%; 
++<<<<<<< HEAD
 +  position: relative;
 +  height: auto;
 +  min-height: 100%; /* height is needed for some properties */
++=======
+   margin-left: 0;
+   margin-right: 0;
+   position: static;
++>>>>>>> a76ce2ec5a7fbf382a09e6e87b16841374fe28a0
  }
  
  /* jumbotron */
  .jumbotron {
++<<<<<<< HEAD
 +  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;
++=======
+   background: var(--jumbotron-bg);
+   width: 100%;
+   -webkit-border-bottom-right-radius: var(--box-round);
+   -webkit-border-bottom-left-radius: var(--box-round);
+   -moz-border-radius-bottomright: var(--box-round);
+   -moz-border-radius-bottomleft: var(--box-round);
+   border-bottom-right-radius: var(--box-round);
+   border-bottom-left-radius: var(--box-round);
++>>>>>>> a76ce2ec5a7fbf382a09e6e87b16841374fe28a0
  }
  .child {
    text-align: center;
@@@ -80,83 -75,35 +125,98 @@@
  .box {
    text-align: center;
    text-decoration: none;
++<<<<<<< HEAD
 +  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;
++=======
+   color: var(--text-color);
+   margin-bottom: 5px;
+   border: 1px solid rgb(var(--border-color));
+   flex-basis: 30%;
+   height: 105px;
+   background-color: #fff;
+   border-radius: var(--box-round);
+   -webkit-border-radius: var(--box-round);
+   -moz-border-radius: var(--box-round);
++>>>>>>> a76ce2ec5a7fbf382a09e6e87b16841374fe28a0
  }
  .box:hover, .box:active {
-   background-color: #eee;
+   background-color: var(--box-hover-color);
  }
  .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 */
+ h1 {
+   margin: 0;
+ }
  div.art {
-   border-bottom: 1px solid #eee;
+   border-bottom: 1px solid rgba(var(--border-color),.3);
  }
  div.art:last-child {
    border-bottom: none;
@@@ -183,31 -126,65 +239,94 @@@ p.art-link 
    margin-top: 0;
  }
  
+ /* help */
+ .hmain {
+   display: flex;
+   flex-wrap: wrap;
+   justify-content: space-around;
+ }
+ a.hchild {
+   color: var(--text-color);
+   height: 40px;
+   width: 95%;
+   text-align: center;
+   border-top: 1px solid rgba(var(--border-color),.6);
+   border-left: 1px solid rgba(var(--border-color),.6);
+   border-right: 1px solid rgba(var(--border-color),.6);
+ }
+ a.hchild:hover, a.hchild:active {
+   background-color: var(--box-hover-color);
+ }
+ .hchild:first-child {
+   margin-top: 10px;
+   -webkit-border-top-left-radius: var(--box-round);
+   -webkit-border-top-right-radius: var(--box-round);
+   -moz-border-radius-topleft: var(--box-round);
+   -moz-border-radius-topright: var(--box-round);
+   border-top-left-radius: var(--box-round);
+   border-top-right-radius: var(--box-round);
+ }
+ .hchild:last-child {
+   margin-bottom: 10px;
+   border-bottom: 1px solid rgba(var(--border-color),.6);
+   -webkit-border-bottom-right-radius: var(--box-round);
+   -webkit-border-bottom-left-radius: var(--box-round);
+   -moz-border-radius-bottomright: var(--box-round);
+   -moz-border-radius-bottomleft: var(--box-round);
+   border-bottom-right-radius: var(--box-round);
+   border-bottom-left-radius: var(--box-round);
+ }
+ 
  /* footer */
  .footer {
 -}
++<<<<<<< HEAD
 +  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;
 +  }
++=======
+   background: var(--footer-bg);
+   width: device-width;
+   margin: 0;
+   padding: 0;
+   display: flex;
+   flex-wrap: wrap;
+   justify-content: space-between;
+   align-items: flex-start;
+ /*  -webkit-border-top-left-radius: var(--box-round);
+   -webkit-border-top-right-radius: var(--box-round);
+   -moz-border-radius-topleft: var(--box-round);
+   -moz-border-radius-topright: var(--box-round);
+   border-top-left-radius: var(--box-round);
+   border-top-right-radius: var(--box-round);*/
+ }
+ .footer .footerchild p {
+   margin: 0;
+ }
+ .footerline {
+   border-right: 1px solid #000;
+   height: 100%;
++}
++>>>>>>> a76ce2ec5a7fbf382a09e6e87b16841374fe28a0

diff --cc index_mock1.html
index 2bce219e6849df4943fa79f3964e7063eed47eb9,5798a3e354c6324c616b0eea99edae1a0857c1ea..05239a2396e60228c1f404a44e28c83521751d15
--- 1/index_mock1.html
--- 2/index_mock1.html
+++ b/index_mock1.html
@@@ -10,33 -10,35 +10,64 @@@
  </head>
  <body>
      <nav class="navbar">
++<<<<<<< HEAD
 +        <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>
++=======
+         <a href="index"><img src="img/logos/coloured-alphabg.svg" class="nlogo" alt="freenode" /></a>
+         <a href="about" class="nlink">About</a>
+         <a href="help" class="nlink">Help</a>
+         <a href="contribute" class="nlink">Contribute</a>
+         <a href="projects" class="nlink">Projects&nbsp;</a>
++>>>>>>> a76ce2ec5a7fbf382a09e6e87b16841374fe28a0
      </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">
++<<<<<<< HEAD
 +                <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>
++=======
+             <h2 class="child">I want to...</h2>
+             <div class="box-container">
+                 <a href="about" class="box">
+                     <img src="" alt="chat" height="60px" width="60px" /><br />
+                     Know what freenode is
+                 </a>
+                 <a href="help" class="box">
+                     <img src="" alt="support" height="60px" width="60px" /><br />
+                     Get help
+                 </a>
+                 <a href="contribute" class="box">
+                     <img src="" alt="server" height="60px" width="60px" /><br />
+                     Contribute to freenode
+                 </a>
+                 <a href="projects" class="box">
+                     <img src="" alt="gms" height="60px" width="60px" /><br />
+                     Know who's using freenode
+                 </a>
+             </div>
++>>>>>>> a76ce2ec5a7fbf382a09e6e87b16841374fe28a0
          </div>
+         
          <div class="main">
              <h1>News</h1>
              <div class="art">
@@@ -53,10 -55,23 +84,33 @@@
              </div>
          </div>
      </div>
++<<<<<<< HEAD
 +    <!--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>
++=======
+     
+         <footer 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">
+             <p><a>Some other links</a></p>
+             <p><a>Some other links</a></p>
+             <p><a>Some other links</a></p>
+             <p><a>Some other links</a></p>
+             </div>
+         </footer>
+     </div>
+ </body>
+ </html>
++>>>>>>> a76ce2ec5a7fbf382a09e6e87b16841374fe28a0