CodePen Embed - Twitter Clone Part IV

<!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 class="user-info">
          <div class="card-top"></div>
          <div class="card-mid">
            <span class="fa-stack ">
              <i class="fas fa-camera fa-stack-2x">
                <i class="fas fa-plus fa-stack-1x"></i>            
              </i>
            </span>  
            <div class="twitter-handle">
              <h3>Jeff Astor</h3>
              <p>@jastornaut</p>
            </div>
          </div>
          <div class="card-bottom">
            <p>Tweets</p>
            <p>Following</p>          
            <h3>1</h3>
            <h3>20</h3>            
          </div>           
        </div>       
      </div>
 <div class="col feed">
  <div class="tweet-container">
    <div id="tweet-box-top" class="row">
      <span class="tweet-avatar fa-stack">
        <i class="fas fa-circle fa-stack-2x">
          <i class="fas fa-user fa-stack-1x"></i> 
        </i>
      </span>

      <textarea id="tweet-box">What's happening?</textarea>

      <i id="tweet-box-img" class="fas fa-image"></i>
    </div>
    <div id="tweet-actions" class="row">
      <div class="icon-set">
        <i class="fas fa-image"></i>
        <i class="icon-gif">GIF</i>
        <i class="far fa-chart-bar"></i>
        <i class="fas fa-map-marker-alt"></i>
      </div>
      <div class="submit">
        <i class="fas fa-plus-circle"></i>
        <button id="tweet-submit">Tweet</button>
      </div>
    </div>
  </div>

  <div class="see-new-tweets">
    <p>See <span>13</span> New Tweets</p>
  </div>
  <div class="twitter-posts"></div>  
</div>
  
      <div class="col right-col">
        <div class="advert">
          <img src="https://abs.twimg.com/a/1553555845/img/delight/delight_prompt_2.png" />
          <h3>Sneak a peak at the new Twitter</h3>
          <p>Bookmarks, night mode, data saver, and more — see all the new features coming to the web.</p>
          <button>Take a look</button>
        </div>      
      </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;
}
input:focus,
button:focus { outline: none }

i, button {
  cursor: pointer;
}

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

/*****************
   NAVBAR LINKS 
*****************/
.navbar .links {
  grid-area: links;
}
.flex-v-center {
  display: flex;
  align-items: center;
}
.navbar .links li {
  flex: 1;
  height: 49px;  
  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 i {
  color: var(--color-twitter-blue);  
}
.navbar .links li.active span::before {
  top: 10px; 
  content: '';    
  width: 5px;
  height: 5px;  
  border-radius: 50%;
  position: absolute;
  margin-left: -3vw;
  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;
}

/******************
   MAIN SECTION 
*******************/
.main {
  padding-top: 60px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 10px;
  grid-template-areas:
  ". left-col left-col left-col feed feed feed feed feed right-col right-col ."
}
.col {}

/******************
   LEFT COLUMN 
*******************/
.left-col {
  grid-area: left-col
}
.left-col .user-info {
  background: white;
  height: 220px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}
.left-col .user-info .card-top {
  flex: 1;
  background: var(--color-twitter-blue);
}
.left-col .user-info .card-mid {
  flex: 1;
  background: white;
  display: flex;
}
.left-col .card-mid .fa-stack {
  background: var(--color-twitter-blue);
  color: white;
  padding: 20px;
  border-radius: 50%;
  border: solid 3px white;
  margin-top: -30px;
  margin-left: 10px;
}
.left-col .card-mid .fa-plus {
  color: var(--color-twitter-blue);
  font-size: 8px;
  transform: translateY(11px)
}
.left-col .card-mid .twitter-handle {
  margin-top: 10px;
  margin-left: 10px;  
  letter-spacing: .2px
}
.left-col .card-mid .twitter-handle h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}
.left-col .card-mid .twitter-handle p {
  color: var(--color-twitter-dark-gray);
  font-weight: 400;
}
.left-col .card-bottom {
  width: 80%;
  height: 60px;
  margin: -20px 0px 0 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.left-col .card-bottom p {
  font-size: 14px;
  color: var(--color-twitter-dark-gray)
}
.left-col .card-bottom h3 {
  font-size: 20px;
  font-weight: bold;
  color: var(--color-twitter-blue);
  margin-top: -10px
}

/******************
   RIGHT COLUMN 
*******************/
.right-col {
  grid-area: right-col;
}
.right-col .advert {
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 20px;
  text-align: center;
}
.right-col .advert img {
  max-height: 200px;
}
.right-col .advert h3 {
  font-size: 18px;
  font-weight: 500;
  margin: 5px 0 15px 0;
}
.right-col .advert p {
  font-weight: 300;
  margin: 0 0 15px 0;
}
.right-col .advert button {
  background: var(--color-twitter-blue);
  color: white;
  padding: 8px 12px;
  width: 100%;
  font-size: 15px;
  border-radius: 20px;
}


.fa-stack 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%;
}
.fa-stack i.fa-user {
  color: var(--color-twitter-dark-gray);
  font-size: 24px;
  transform: translateY(6px)
}

/***************
      FEED
***************/
.main .feed {
  grid-area: feed;
  background: white;
}
.main .feed .tweet-container {
  background: var(--color-twitter-light-blue);
  transition: height 0.2s ease;
}
.main .feed .tweet-container .row {
  display: flex;
}
.main .feed .tweet-container #tweet-box-top {
  padding-top: 10px
}
.main .feed .tweet-avatar {
  margin-left: 20px;
}


.main .feed textarea {
  flex: 1;
  height: 40px ;
  margin-left: 10px;
  margin-right: -10px;
  border-radius: 8px;
  border: solid 1px var(--color-twitter-mid-gray);
  color: var(--color-twitter-blue);
  padding: 8px 20px 0 8px;
  font-size: 16px;
  transition: height 0.2s ease;
  font-weight: 300;
  resize: none;
}

.main .feed #tweet-box-top .fa-image,
.main .feed #tweet-box-top .fa-smile {
  transform: translateX(-25px) translateY(8px);
  font-size: 24px;
  color: var(--color-twitter-blue);
  transition: all 0.2s ease;
}

.main .feed .tweet-container #tweet-actions {
  height: 60px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-left: 70px;
  margin-right: 15px;
  margin-top: 10px;
}
.main .feed .tweet-container #tweet-actions .icon-set {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}
.main .feed .tweet-container #tweet-actions i {
  color: var(--color-twitter-blue);
  font-size: 24px;
  transform: translateY(3px);
  padding-bottom: 5px;
}
.main .feed .tweet-container #tweet-actions .icon-gif {
  font-size: 10px;
  padding: 4px;
  border: solid 1px var(--color-twitter-blue);
  border-radius: 4px;
  transform: translateY(0px)
}
.main .feed .tweet-container #tweet-actions .submit {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.main .feed .tweet-container #tweet-actions .submit button {
  background: var(--color-twitter-blue);
  color: white;
  font-size: 15px;
  padding: 6px 12px;
  border-radius: 20px;
  margin-left: 10px;
}

/***************
  Twitter Feed
****************/

.main .feed .see-new-tweets {
  background: rgb(245, 248, 250);
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main .feed .see-new-tweets p {
  color: var(--color-twitter-blue);
  cursor: pointer;
}



/**************
  MEDIA QUERIES
***************/
@media screen and (max-width: 1150px) {
  .navbar {
    padding: 0 20px;
  grid-template-areas:
    " links links links . . bird . search search search actions actions"    
  }  
  .main {
    padding: 60px 20px;
  grid-template-areas:
  "left-col left-col left-col feed feed feed feed feed feed right-col right-col right-col"    
  }
}
@media screen and (max-width: 900px) {
  .navbar {
  grid-template-areas:
    "links links links links . . bird search search search actions actions"    
  }  
  .main {
    padding: 60px 20px;
  grid-template-areas:
  "left-col left-col left-col left-col feed feed feed feed feed right-col right-col right-col"    
  }  
  .navbar .links li.active span::before {
    margin-left: -25px
  }    
}
@media screen and (max-width: 740px) {
  .navbar {
  grid-template-areas:
    "links links links links . . . . . . . bird"    
  }  
  .search,
  .actions {
    display: none;
  }
  .left-col,
  .right-col {
    display: none;
  }
  .main {
    padding: 60px 20px;
  grid-template-areas:
  ". feed feed feed feed feed feed feed feed feed feed ."    
  }    
}

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.