Basic HTML Layouts

by black strings

HTML

<!-- mobile layout -->
<div id="container">

  <!-- header -->
  <div id="header">
    <ul>
     <li><span class="un-highlight" id="home">Home</span></li>
     <li><span class="un-highlight" id="login">Login</span></li>
    </ul>

  </div>
  
  <!-- body -->
  <div id="main-body">
     My body contents
  </div>
  
  <!-- footer -->
  <div id="footer">
    <h1>Twitter</h1>
    <span>CopyRights &copy2018</span>
  </div>
  
</div>

CSS

span {
  font-family:'arial';
  border-right: thin solid #ddd;
  padding:2px;
  padding-right:4px;
}
#header ul li{
  list-style:none;
  display: inline-block;
}
.highlight {
  color: red;
}
.un-highlight {
  color: blue;
}
#container {
  width: auto;
  text-align:center;
  padding:5px;
  border: thin solid black;
  height: 500px;
}
#main-body {
  min-height:300px;
  border:thin solid grey;
}
#footer {
  font-size: 12px;
}
#footer h1 {
  font-size: 16px;
}

JavaScript

homeSelected = false;
loginSelected = false;

var login = document.getElementById('login');
login.addEventListener('click', loginFunction);
var home = document.getElementById('home');
home.addEventListener('click', homeFunction);

// login btn
function loginFunction(e){
	unHighlightAll();
  highlight(e.currentTarget);
}

// home btn
function homeFunction(e){
	unHighlightAll();
  highlight(e.currentTarget);
}


function unHighlightAll(){
	var login = document.getElementById('login');
  login.setAttribute('class', 'un-highlight');
  var home = document.getElementById('home');
  home.setAttribute('class', 'un-highlight');
}

function highlight(element) {
	element.setAttribute('class', 'highlight');
}