CodePen Embed - Twitter Clone Part II

<!DOCTYPE html>
<head>
  <title>Twitter Clone</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">  
</head>
<body>
  <div class="Twitter">
    
  <div class="navbar">
    <ul class="links flex-v-center">
      <li class="active">
        <i class="fas fa-home"></i>
        <span> Home</span>
      </li>
      <li >
        <i class="fas fa-bolt"></i>
        <span> Moments</span>
      </li>
      <li>
        <i class="far fa-bell"></i>
        <span> Notifications</span>
      </li>
      <li>
        <i class="far fa-envelope"></i>
        <span> Messages</span>
      </li>             
    </ul>           


    <div class="bird flex-v-center">
      <i class="fab fa-twitter"></i>
    </div>

    <div class="search flex-v-center">
      <input placeholder="Search Twitter" />
      <i class="fas fa-search"></i>
    </div>

    <div class="actions flex-v-center">
      <span class="avatar fa-stack flex-v-center">
        <i class="fas fa-circle fa-stack-2x">
          <i class="fas fa-user fa-stack-1x"></i>            
        </i>
      </span>

      <button>
        Tweet
      </button>
    </div>  
  </div>
    
    <main class="main">
      <div class="col left-col"></div>
      <div class="col feed">
        
      </div>    
      <div class="col right-col"></div>     
    </main>
    
  </div>
</body>

:root {
  --color-twitter-light-blue: rgb(234, 245, 252);  
  --color-twitter-blue:       rgb(72,  161, 235);
  --color-twitter-bg:         rgb(231, 236, 239);
  --color-twitter-light-gray: rgb(245, 248, 250);
  --color-twitter-mid-gray:   rgb(206, 214, 220);  
  --color-twitter-dark-gray:  rgb(102, 117, 130);  
  --color-font-main:          rgb(0, 0, 0);
  --color-font-secondary:     #14171a;
  --color-nav-border:         rgba(0, 0, 0, 0.25);
}
body {
  background: var(--color-twitter-bg);
  font-size: 14px;  
  font-family: Helvetica Neue;
}
.Twitter {}
input:focus,
button:focus { outline: none }

i, button {
  cursor: pointer;
}

/*****************
      NAVBAR  
*****************/
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
  background: rgb(255, 255, 255);
  height: 50px;
  color: var(--color-font-secondary);
  border-bottom: 1px solid var(--color-nav-border);
  display: grid;
  grid-template-columns: repeat(12, 1fr);  
  grid-template-areas:
    ". links links links . bird . . search search actions .";
  overflow-x: hidden;  
}

/*****************
   NAVBAR LINKS 
*****************/
.navbar .links {
  grid-area: links;
  display: flex;
  align-items: center;
}
.flex-v-center {
  display: flex;
  align-items: center;
}
.navbar .links li {
  flex: 1;
  height: 48px;  
  display: flex;  
  cursor: pointer;
  padding: 0px 10px;
  align-items: center;
  justify-content: center;
  color: var(--color-font-secondary);  
  border-bottom: solid 2px transparent;
  transition: all 0.2s ease;
}
.navbar .links li i {
  font-size: 18px;
  margin-right: 5px;
}
.navbar .links li.active,
.navbar .links li:hover {
  color: var(--color-twitter-blue);  
  border-bottom: solid 2px var(--color-twitter-blue);
}
.navbar .links li.active span::before {
  content: '';    
  width: 5px;
  height: 5px;  
  border-radius: 50%;
  position: absolute;
  top: 10px;   
  margin-left: -35px;
  background: var(--color-twitter-blue);  
}
/*****************
   NAVBAR ICON 
*****************/
.navbar .bird {
  grid-area: bird;
  font-size: 20px;  
  margin-left: 20px;
}
.navbar .bird i {
  color: var(--color-twitter-blue);
}

/*****************
   NAVBAR SEARCH 
*****************/
.navbar .search {
  grid-area: search;  
}
.navbar .search input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 20px;
  border: solid 1px var(--color-twitter-mid-gray);
  background: var(--color-twitter-light-gray);  
  transition: all 0.2s ease;
}
.navbar .search input:focus { 
  outline: none;
  background: white;
  border: solid 2px var(--color-twitter-blue);  
}
.navbar .search i {
  transform: translateX(-25px);
  color: var(--color-twitter-dark-gray);
}

/******************
   NAVBAR ACTIONS 
*******************/
.navbar .actions {
  grid-area: actions
}
.navbar .actions .avatar {
  display: flex;
  
}
.navbar .actions i.fa-circle {
  color: var(--color-twitter-mid-gray);
  font-size: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 50%;
}
.navbar .actions i.fa-user {
  color: var(--color-twitter-dark-gray);
  font-size: 24px;
  transform: translateY(6px)
}
.navbar .actions button {
  color: white;
  background: var(--color-twitter-blue);
  padding: 8px 12px;
  border-radius: 20px;
  margin-left: 10px;
  font-size: 16px;
}

@media screen and (max-width: 1150px) {
  .navbar {
    padding: 0 20px;
  grid-template-areas:
    " links links links . . bird . search search search actions actions"    
  }  
}
@media screen and (max-width: 900px) {
  .navbar {
  grid-template-areas:
    "links links links links . . bird search search search actions actions"    
  }  
}
@media screen and (max-width: 740px) {
  .navbar {
  grid-template-areas:
    "links links links links . . . . . . . bird"    
  }  
  .search,
  .actions {
    display: none;
  }
}

.main {}
.col {}
.left-col {}
.feed {}
.right-col {}

This Pen is owned by Jeff Astor on CodePen.

See more by @jastor11-the-decoder on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.