--navbar-bg: white;
--jumbotron-bg: 15,75,14;
--jumbotron-bg-fall: 65,225,64;
- --footer-bg: 36,62,22;
--copyright-bg: 0,0,0;
--link-color: 66,139,202;
+ --footer-link-color: 32,32,32;
--nlink-col: black;
--text-color: #333;
--footer-text-color: 255,255,255;
text-decoration: none;
}
-/* order */
-.jumbotron {
- order: 0;
-}
-.navkinks {
- order:1;
-}
-.main {
- order: 2;
-}
-
/* navbar */
.navbar {
width: 100%;
width: 100%;
margin-left: 0;
margin-right: 0;
- display: flex;
- flex-direction: column;
- fkex-wrap: wrap;
- justify-content: space-between;
min-height: 100%;
}
/* footer */
.footer {
- background: rgb(var(--footer-bg));
- color: rgb(var(--footer-text-color));
- width: device-width;
- margin: 0;
- padding: 0;
+ background: rgba(var(--jumbotron-bg),.6);
+ color: rgba(var(--footer-text-color),.9);
+ margin-top: 1em;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
+ box-shadow: 0 -3px 5px rgba(0,0,0, 0.36);
+
+}
+.footerchild h2 {
+ margin-top: 1em;
}
.footer a {
- color: rgba(var(--link-color),.9);
+ color: rgb(var(--footer-link-color));
}
@media all and (max-width: 500px) {
.footer {
<body>
<nav class="navbar">
<a href="index"><img src="img/logos/coloured-alphabg.svg" class="nlogo" alt="freenode" /></a>
- <!--navkinks-->
<a href="PIA" target="_blank"><img src="img/logos/PIALogo_black.svg" alt="Private internet access" class="nlogo" /></a>
</nav>
<div class="container">
<div class="jumbotron">
- <h2 class="child"> welcomr to fn, I want to...</h2>
+ <h2 class="child">Welcome to freenode, the new home of your projects.</h2>
<div class="box-container">
<a href="about" class="box">
<img src="" alt="chat" height="60px" width="60px" /><br />
- Chat
+ I want to chat
</a>
<a href="help" class="box">
<img src="" alt="support" height="60px" width="60px" /><br />
- Get help
+ I want to get help
</a>
<a href="contribute" class="box">
<img src="" alt="gms" height="60px" width="60px" /><br />
- Register a group
+ I want to register a group
</a>
- <!--<a href="PIA" class="box">
- <img src="img/logos/newPIA.png" alt="Private internet access" height="60px" class="box-center"/><br />
- </a>-->
</div>
</div>