<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 ."
}
}let main = document.querySelector('.main')
let tweetBox = document.querySelector('#tweet-box')
let tweetContainer = document.querySelector('.tweet-container')
let tweetBoxTop = document.querySelector('#tweet-box-top')
let tweetActions = document.querySelector('#tweet-actions')
let tweetBoxImage = document.querySelector('#tweet-box-img')
let tweetSubmitBtn = document.querySelector('#tweet-submit')
const resetTweetBox = () => {
tweetActions.style.display = 'none'
tweetBox.style.height = '40px'
tweetContainer.style.height = '70px'
tweetBoxImage.setAttribute('class', 'fas fa-image')
}
const expandTweetBox = () => {
tweetBox.style.height = '150px'
tweetActions.style.display = 'flex'
tweetContainer.style.height = '220px'
tweetBoxImage.setAttribute('class', 'fas fa-smile')
}
resetTweetBox()
tweetBox.addEventListener('focus', (e) => {
expandTweetBox()
})
document.addEventListener('click', (event) => {
if (event.target.closest('.tweet-container')) {
if (event.target.id === 'tweet-submit') {
// submit the tweet
}
} else {
resetTweetBox()
}
})
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.