Skip to content

Instantly share code, notes, and snippets.

@enijaward

enijaward/Twitter: Source Code Secret

Last active April 8, 2020 09:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save enijaward/4d5224de67e11c49bccff55c37af36e3 to your computer and use it in GitHub Desktop.
Save enijaward/4d5224de67e11c49bccff55c37af36e3 to your computer and use it in GitHub Desktop.
Download ZIP
HTML & CSS for Twitter Website
Raw
entertainment.html
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Twitter</title>
<link href="css/style.css" type = "text/css" rel= "stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/9bc13e3a60.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">
</head>
<!-- Side navigation -->
<div class="sidenav">
<a class="iconphoto" href="index.html"><i class="fab fa-twitter"></i></a>
<a class="iconphoto" href="index.html"><i class="fas fa-home"></i></a>
<a class="iconphoto" href="hashtags.html"><i class="fas fa-hashtag"></i></a>
<a class="iconphoto" href="profile.html"><i class="fas fa-user"></i></a>
</div>
<body>
<header class="hashtags">
<nav class="hashtagnav">
<ul>
<li><a href ="hashtags.html"><strong>News</strong></a></li>
<li><a href ="sports.html"><strong>Sports</strong></a></li>
<li><a href ="entertainment.html"><strong>Entertainment</strong></a></li>
</ul>
</nav>
</header>
<div id="wrapper2">
<aside class = "whole">
<aside class="hashtagsaside">
<h1>You might like</h1>
<hr>
<img class="iconphoto2" src="images/profileimage22.png" alt="profile photo">
<p><strong>Bella Thorne <button class="btnplus"><i class="fas fa-plus"></i></button></strong></p>
<p>@bellathrone</p>
<hr>
<img class="iconphoto2" src="images/profileimage24.png" alt="profile photo">
<p><strong>Stella Hudgens <button class="btnplus"> <i class="fas fa-plus"></i></button></strong></p>
<p>@stella</p>
<hr>
<img class="iconphoto2" src="images/profileimage15.png" alt="profile photo">
<p><strong>Michael Knox <button class="btnplus"><i class="fas fa-plus"></i></button></strong></p>
<p>@michaelknocks12</p>
<hr>
<h2 class="h2trends">show more</h2>
</aside>
</aside>
<div class="hashtagsheader2">
<h1>What's Happening in Entertianment?</h1>
</div>
<main class="hashtagsheader">
<img src="images/ent1.jpg" alt="family guy and bobs burgers">
<h2>How Broadcast Networks Are Scrambling Amidst Coronavirus Pandemic</h2>
<p>With no signs of when production can resume amid the global coronavirus crisis, the Big Four broadcast networks are considering everything as they address summer schedules filled with holes. Go inside the scramble: <a href="https://www.hollywoodreporter.com/live-feed/a-puzzle-all-pieces-broadcast-networks-scramble-program-an-uncertain-future-1288828?utm_medium=social&utm_source=twitter" target="_blank">(view full article)</a></p>
<div class="graybox2">
</div>
<p>Televison · Today</p>
<img src="images/ent2.jpg" alt="tiger photo">
<h2>'Tiger King's' Jeff Lowe Says a New Episode of the Hit Docuseries Is Coming Next Week</h2>
<p>A bonus episode from the docuseries/cultural sensation is set to hit Netflix next week, according to zoo owner Jeff Lowe. Los Angeles Dodgers player Justin Turner posted a video of Lowe and his wife Lauren sharing the news. "Netflix is adding one more episode. It will be on next week. They’re filming here tomorrow,” Lowe said. “Take care, stay safe, and put your mask on.” <a href="https://www.complex.com/pop-culture/2020/04/jeff-lowe-says-netflix-to-release-new-tiger-king-episode?utm_campaign=complexmag&utm_source=twitter.com&utm_medium=social/" target="_blank">(view full article)</a></p>
<div class="graybox2">
</div>
<p>Celebrity · Today</p>
<img src="images/ent3.jpg" alt="issa rae">
<h2>Issa Rae Is Leveling Up</h2>
<p>Ahead of #InsecureHBO season 4, actor-writer-producer and April cover star,
@IssaRae, talks to @GerrickKennedy about why she never considered herself an actress — and how she's growing with intention. <a href="https://www.teenvogue.com/story/issa-rae-april-2020?utm_medium=social&utm_brand=tv&mbid=social_twitter&utm_social-type=owned&utm_source=twitter" target="_blank">(view full article)</a></p>
<div class="graybox2">
</div>
<p>Food · 7 hours ago </p>
<img src="images/ent4.jpg" alt="chips">
<h2>Choose three: Salty snack edition</h2>
<p>Following a prompt by
@_Matty_H_, chip enthusiasts are narrowing down their top three must-haves out of a list of 12 popular salty snacks. <a href="https://twitter.com/_Matty_H_/status/1246596389607530496" target="_blank">(view full article)</a></p>
<div class="graybox2">
</div>
<p>Schitt's Creek · 9 hours ago </p>
<img src="images/ent5.jpg" alt="television show">
<h2>Fans gear up for the Schitt's Creek series finale</h2>
<p>It has earned multiple Emmy Award nominations and a celebrity following that includes singer Mariah Carey and NBA star Steph Curry. Schitt's Creek wraps its sixth and final season tonight, and its rare dose of good-natured comedy has many fans turning to the Canadian sitcom for respite during particularly dark times. <a href="https://www.cbc.ca/news/entertainment/schitts-creek-finale-1.5522962" target="_blank">(view full article)</a></p>
<div class="graybox2">
</div>
<p>Gaming · 10 hours ago </p>
<img src="images/ent6.jpg" alt="animal crossing">
<h2>Animal Crossing's golden tools can also break</h2>
<p>Most of the tools in Animal Crossing: New Horizons on Switch will break. How long they last before they break varies depending on the tool type. As you play the game you’ll upgrade from Flimsy tools to Golden tools, though this will take a while. In the meantime, it’s important to note how much life your tools have before you go on a huge fishing adventure or set off to an island.
<a href="https://www.polygon.com/animal-crossing-new-horizons-switch-acnh-guide/2020/3/31/21194209/durability-list-broken-breaking-shovel-axe-fishing-rod-watering-can-slingshot-bug-net" target="_blank">(view full article)</a></p>
<div class="graybox2">
</div>
<p>Celebrity · 16 hours ago </p>
<img src="images/ent7.jpg" alt="selena gomez">
<h2>Selena Gomez opens up about bipolar diagnosis for the first time</h2>
<p>The singer appeared on Friday's episode 'Bright Minded' with Miley Cyrus, and revealed she's recently been diagnosed with bipolar disorder. But after learning everything she can, she's no longer afraid of the diagnosis. <a href="https://www.elle.com/uk/life-and-culture/a32048593/selena-gomez-bipolar/" target="_blank">(view full article)</a></p>
<p>Come back soon for more!</p>
</main>
</div> <!-- end div -->
</body>
</html>
Raw
hashtags.html
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Twitter</title>
<link href="css/style.css" type = "text/css" rel= "stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/9bc13e3a60.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">
</head>
<!-- Side navigation -->
<div class="sidenav">
<a class="iconphoto" href="index.html"><i class="fab fa-twitter"></i></a>
<a class="iconphoto" href="index.html"><i class="fas fa-home"></i></a>
<a class="iconphoto" href="hashtags.html"><i class="fas fa-hashtag"></i></a>
<a class="iconphoto" href="profile.html"><i class="fas fa-user"></i></a>
</div>
<body>
<header class="hashtags">
<nav class="hashtagnav">
<ul>
<li><a href ="hashtags.html"><strong>News</strong></a></li>
<li><a href ="sports.html"><strong>Sports</strong></a></li>
<li><a href ="entertainment.html"><strong>Entertainment</strong></a></li>
</ul>
</nav>
</header>
<div id="wrapper2">
<aside class = "whole">
<aside class="hashtagsaside">
<h1>You might like</h1>
<hr>
<img class="iconphoto2" src="images/profileimage22.png" alt="profile photo">
<p><strong>Bella Thorne <button class="btnplus"><i class="fas fa-plus"></i></button></strong></p>
<p>@bellathrone</p>
<hr>
<img class="iconphoto2" src="images/profileimage24.png" alt="profile photo">
<p><strong>Stella Hudgens <button class="btnplus"> <i class="fas fa-plus"></i></button></strong></p>
<p>@stella</p>
<hr>
<img class="iconphoto2" src="images/profileimage15.png" alt="profile photo">
<p><strong>Michael Knox <button class="btnplus"><i class="fas fa-plus"></i></button></strong></p>
<p>@michaelknocks12</p>
<hr>
<h2 class="h2trends">show more</h2>
</aside>
</aside>
<div class="hashtagsheader2">
<h1>What's Happening in News?</h1>
</div>
<main class="hashtagsheader">
<img src="images/lab.jpg" alt="corona virus">
<h2>Coronavirus: China records first day with no deaths since January</h2>
<p>The total number of global cases is nearing 1.3 million, including more than 70,000 fatalities. Over 270,000 patients are reported to have recovered. Get the latest updates from around the world. More than 284,000 people have recovered, according to the Center for Systems Science and Engineering (CSSE) at Johns Hopkins University. <a href="https://nypost.com/2020/04/07/china-reports-zero-coronavirus-deaths-for-first-time-since-january/" target="_blank">(view full article)</a></p>
<div class="graybox2">
</div>
<p>Corona Virus · Today</p>
<img src="images/uk.jpg" alt="boris johnson">
<h2>Boris Johnson moved to intensive care as coronavirus symptoms worsen</h2>
<p>The UK prime minister was admitted to hospital for tests on Sunday, 10 days after testing positive for coronavirus. On Monday, a Downing Street statement said that Johnson’s condition “has worsened and, on the advice of his medical team, he has been moved to the Intensive Care Unit at the hospital.” Johnson has asked Foreign Secretary Dominic Raab to stand in "where necessary". <a href="https://www.bbc.com/news/uk-52192604" target="_blank">(view full article)</a></p>
<div class="graybox2">
</div>
<p>World News · 7 hours ago </p>
<img src="images/news1.jpeg" alt="andrew cuomo">
<h2>New York Gov. Andrew Cuomo doubles maximum fine for breaking social distancing rules to $1,000</h2>
<p>New York Gov. Andrew Cuomo said Monday he is doubling to $1,000 the maximum fine for violating the state’s strict social distancing rules during the coronavirus outbreak. The reason: Too many New Yorkers aren’t taking the rules seriously, he said. <a href="https://www.cnbc.com/2020/04/06/coronavirus-in-new-york-cuomo-doubles-max-fine-for-breaking-social-distancing-rules.html" target="_blank">(view full article)</a></p>
<div class="graybox2">
</div>
<p>World News · 7 hours ago </p>
<img src="images/shooting.jpg" alt="russia">
<h2>Man shoots five people dead in Russia after dispute over noise levels</h2>
<p>In the village of Yelatma in the Ryazan region — located 200 km (124 miles) southeast of Moscow — a man killed four men and one woman on Saturday night for talking loudly outside his house amid Russia's nationwide self-isolation order. The suspect was later arrested. <a href="https://www.themoscowtimes.com/2020/04/05/russian-man-shoots-kills-5-neighbors-over-noise-complaint-reports-a69874" target="_blank">(view full article)</a></p>
<div class="graybox2">
</div>
<p>World News · 7 hours ago </p>
<img src="images/jp.jpg" alt="jp morgan">
<h2>JPMorgan Chase CEO expects 'bad recession' and financial strain akin to 2008</h2>
<p>In his annual letter to shareholders, CEO and Chairman Jamie Dimon laid out what he expects will happen as a result of the pandemic, stating that the bank "cannot be immune to the effects of this kind of stress." In the most adverse scenario that was run, GDP would be "down as much as 35%" and last through 2020, with unemployment "peaking at 14% in the fourth quarter." <a href="https://www.cnbc.com/2020/04/06/jamie-dimon-details-jpmorgans-strength-in-annual-letter-says-us-can-emerge-from-crisis-stronger.html" target="_blank">(view full article)</a></p>
<div class="graybox2">
</div>
<p>US News · 17 hours ago </p>
<img src="images/ent8.jpg" alt="texas abortion">
<h2>Appeals court sides with Texas on abortion restrictions during the coronavirus pandemic</h2>
<p>A federal appeals court ruled Tuesday that Texas can enforce an executive order restricting abortion access in the state during the coronavirus outbreak. <a href="https://www.iheartradio.ca/610cktb/1.11692363" target="_blank">(view full article)</a></p>
<p>Come back soon for moreS!</p>
</main>
</div> <!-- end div -->
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Twitter</title>
<link href="css/style.css" type = "text/css" rel= "stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/9bc13e3a60.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">
</head>
<!-- Side navigation -->
<div class="sidenav">
<a class="iconphoto" href="index.html"><i class="fab fa-twitter"></i></a>
<a class="iconphoto" href="index.html"><i class="fas fa-home"></i></a>
<a class="iconphoto" href="hashtags.html"><i class="fas fa-hashtag"></i></a>
<a class="iconphoto" href="profile.html"><i class="fas fa-user"></i></a>
</div>
<body>
<!-- title page & search bar -->
<header>
<div class="topnav">
<input type="text" placeholder="Search Twitter">
<h1>Home</h1>
</div>
</header>
<div id="wrapper">
<!-- moved aside BEFORE the "what's on your mind?" so it would be placed before and not after it. kept float, played with display block, display inline, and or clear both. -->
<aside>
<h1>Trends for you</h1>
<hr>
<p>Trending in the United States</p>
<h2>Hunter Hayes</h2>
<p>2,863 tweets</p>
<hr>
<h2>#CallOfTheWild</h2>
<p>In Theaters Friday</p>
<hr>
<h2>Kehlani</h2>
<p>19.8k tweets</p>
<hr>
<h2>#TheBachelor</h2>
<p>Trending with: #VictoriaF, #victoriafuller, Victoria</p>
<hr>
<p>Trending in WA</p>
<h2>Nine Lives</h2>
<p>2,000 tweets</p>
<hr>
<h2>#LoseAnArgumentIn3Words</h2>
<p>3.1k tweeks</p>
<hr>
<h2 class="h2trends">show more</h2>
</aside>
<main class="home2">
<input type="text" placeholder="What's on your mind?">
<i class="fas fa-camera-retro"></i>
<i class="fas fa-poll"></i>
<i class="far fa-smile"></i>
<div class="graybox">
</div>
</main>
<div class="home3">
<img class="iconphoto" src="images/profileimage9.png" alt="profile photo">
<p><strong>Alyssa Fuller</strong> @alyssafuller - 41m</p>
<p><pre>
'Cause you are that someone,
That gets me like no one else,
Right when I need it the most,
And I'll be the one you rely on,
Your shoulder to cry on,
A friend through the highs and the lows.
</pre></p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/profileimage29.png" alt="profile photo">
<p><strong>Coco</strong> @wordsbycoco - 56m</p>
<p>
<pre class="photovideo">
Americans & Koreans Swap School Lunches. Check this out! &#128512;
<video controls>
<source src="images/video1.mp4" type="video/mp4">
</video>
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/profileimage20.png" alt="profile photo">
<p><strong>Mike Gander</strong> @bklynmike2 - 23m</p>
<p>
<pre>
be more like your dog:
center all activities around meals & naps &#128054; &#128062;
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/profileimage12.png" alt="profile photo">
<p><strong>Zen Essentials</strong> @ZenEssentials - 25min</p>
<p>
<pre>
The trouble is, you think you have time.
— Jack Kornfield
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/profileimage28.png" alt="profile photo">
<p><strong>Warda L.</strong> @pammydsc - 25 min</p>
<p>
<pre class="photovideo">
Me and my team have been working on a project that
centers around being inclusive in tech companies.
<img class="photovideo2" src="images/gif2.gif" alt="inclusive gif">
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/profileimage10.png" alt="profile photo">
<p><strong>Han Son</strong> @hanson - 28 min</p>
<p>
<pre>
its year 2025, netflix is making a series of the novel "dumb husky
and his white cat shizun", scarlet johanson will play as shi mei,
no further information for now.
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/profileimage11.png" alt="profile photo">
<p><strong>Kevin</strong> @kevd23a - 30 min</p>
<p>
<pre class="photovideo">
"Can you guess my ethnicity?" Check out our latest! &#128516; &#128170;
<video controls>
<source src="images/video4.mp4" type="video/mp4">
</video>
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/profilephoto3.png" alt="profile photo">
<p><strong>Colby A.</strong> @coldsbe - 43 min</p>
<p>
<pre class="photovideo">
Tonight! 7pm-5pm, Lawson State!
<img class="photovideo2" src="images/men.jpg" alt="group of men">
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/profilephoto4.png" alt="profile photo">
<p><strong>Amanda</strong> @amandafevn - 43 min</p>
<p>
<pre class="photovideo">
#imok i think &#128517;
<img class="photovideo2" src="images/meme2.png" alt="meme final paper">
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/profilephoto8.png" alt="profile photo">
<p><strong>euphoria</strong> @euphotiaHBO - 46 min</p>
<p>
<pre>
okay real talk what do you want to see for season two?!
like what kind of content can i serve &#129488;
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/profileimage19.png" alt="profile photo">
<p><strong>Brenda H.</strong> @brendspeaks - 50 min</p>
<p>
<pre class="photovideo">
Networking event! RSVP at the link in my bio. Hope to see you!
<img class="photovideo2" src="images/gif5.gif" alt="networking gif">
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/profileimage31.png" alt="profile photo">
<p><strong>Will R.</strong> @willren - 1 hr</p>
<p>
<pre>
Consciousness is all around you. It is you. You have
the power to be a co-creator in this reality. Once you
fully claim this power, nobody can take it away from you.
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/profileimage30.png" alt="profile photo">
<p><strong>Sabrina Wal</strong> @sabswal - 1 hr</p>
<p>
<pre>
Bay Area residents in lockdown all over the bay are keeping each
other company by singing, dancing and playing music from the
balconies. Let's celebrate the resilience of ordinary
people. #bayarealockdown &#129505; &#129505;
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/profileimage5.png" alt="profile photo">
<p><strong>Tin</strong> @tinight - 43 min</p>
<p>
<pre class="photovideo">
Womens rights are human rights. Will we see you today?
<img class="photovideo2" src="images/protest.jpg" alt="womens rights">
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/profilephoto.png" alt="profile photo">
<p><strong>Cynthia</strong> @cynthiamachaela - 2 hrs</p>
<p>
<pre class="photovideo">
I've been loving this video for motivation. How to Study Effectively
for School or College! &#128218;
<video controls>
<source src="images/video6.mp4" type="video/mp4">
</video>
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/profilephoto6.png" alt="profile photo">
<p><strong>Jackson</strong> @jackssprw - 2 hrs</p>
<p>
<pre class="photovideo">
Earth day is coming up! Me and some classmates created a quiz to test
your knowledge. Find the link in my bio &#129309; &#127759;
<img class="photovideo2" src="images/gif7.gif" alt="earth day">
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/profilephoto7.png" alt="profile photo">
<p><strong>Antiki</strong> @antia - 8 hrs</p>
<p>
<pre class="photovideo">
the fact that America seems to be rejecting the "free healthcare"
candidate during a global pandemic is something I am finding
hard to digest.
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<p>No more tweets to see!</p>
<p></p>
<p></p>
</div>
</div> <!-- end div -->
</body>
</html>
Raw
likes.html
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Twitter</title>
<link href="css/style.css" type = "text/css" rel= "stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/9bc13e3a60.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">
</head>
<!-- Side navigation -->
<div class="sidenav">
<a class="iconphoto" href="index.html"><i class="fab fa-twitter"></i></a>
<a class="iconphoto" href="index.html"><i class="fas fa-home"></i></a>
<a class="iconphoto" href="hashtags.html"><i class="fas fa-hashtag"></i></a>
<a class="iconphoto" href="profile.html"><i class="fas fa-user"></i></a>
</div>
<body>
<header>
<div class="topnav">
<input type="text" placeholder="Search Twitter">
<!-- <h1><i class="fas fa-arrow-left"></i> Chilombo <i class="fas fa-check"></i></h1> -->
<h1><a class="fas fa-arrow-left" href="index.html"></a> Chilombo <i class="fas fa-check"></i></h1>
<!-- <button class="btnplus"><i class="fas fa-plus"></i></button> -->
</div>
</header>
<div id="wrapper">
<aside class = "whole">
<aside class="profileimages">
<img class="profileimages1" src="images/jhene1.jpg" alt="profile photo">
<img class="profileimages1" src="images/jhene9.jpg" alt="profile photo">
<img class="profileimages1" src="images/jhene10.jpg" alt="profile photo">
<img class="profileimages1" src="images/jhene4.jpg" alt="profile photo">
<img class="profileimages1" src="images/jhene5.jpg" alt="profile photo">
<img class="profileimages1" src="images/profileimage4.jpg" alt="profile photo">
</aside>
<aside class="profile">
<h1>You might like</h1>
<hr>
<img class="iconphoto2" src="images/profileimage22.png" alt="profile photo">
<p><strong>Bella Thorne <button class="btnplus"><i class="fas fa-plus"></i></button></strong></p>
<p>@bellathrone</p>
<hr>
<img class="iconphoto2" src="images/profileimage24.png" alt="profile photo">
<p><strong>Stella Hudgens <button class="btnplus"> <i class="fas fa-plus"></i></button></strong></p>
<p>@stella</p>
<hr>
<img class="iconphoto2" src="images/profileimage15.png" alt="profile photo">
<p><strong>Michael Knox <button class="btnplus"><i class="fas fa-plus"></i></button></strong></p>
<p>@michaelknocks12</p>
<hr>
<h2 class="h2trends">show more</h2>
</aside>
<aside class="profile2">
<h1>Trends for you</h1>
<hr>
<p>Trending in the United States</p>
<h2>Hunter Hayes</h2>
<p>2,863 tweets</p>
<hr>
<h2>#CallOfTheWild</h2>
<p>In Theaters Friday</p>
<hr>
<h2>Kehlani</h2>
<p>19.8k tweets</p>
<hr>
<h2>#TheBachelor</h2>
<p>Trending with: #VictoriaF, #victoriafuller, Victoria</p>
<hr>
<p>Trending in WA</p>
<h2>Nine Lives</h2>
<p>2,000 tweets</p>
<hr>
<h2>#LoseAnArgumentIn3Words</h2>
<p>3.1k tweeks</p>
<hr>
<h2 class="h2trends">show more</h2>
</aside>
</aside>
<main class="profileheader">
<img src="images/jhene.jpg" alt="Jhene Aiko">
<h2>Chilombo</h2>
<p>@JheneAiko</p>
<p>Jhené Aiko Efuru Chilombo #PennyPen <i class="fas fa-pen"></i> <i class="fas fa-heart"></i></p>
<p><i class="fa fa-map-marker" style="font-size:15px"></i> Los Angeles <i class="fa fa-link"></i> jheneaiko.com <i class="fas fa-burn"></i> Born March 16, 1988 <i class="far fa-calendar-alt"></i> Joined Febuary 2009</p>
<p><strong>765</strong> Following <strong> 2M</strong> Followers</p>
<nav>
<ul>
<li><a href ="profile.html"><strong>Tweets</strong></a></li>
<li><a href ="replies.html"><strong>Replies</strong></a></li>
<li><a href ="media.html"><strong>Media</strong></a></li>
<li><a href ="likes.html"><strong>Likes</strong></a></li>
</ul>
</nav>
<hr>
<div class="home3">
<img class="iconphoto" src="images/profileimage31.png" alt="profile photo">
<p><strong>Will R.</strong> @willren - 1 hr</p>
<p>
<pre>
Consciousness is all around you. It is you. You have
the power to be a co-creator in this reality. Once you
fully claim this power, nobody can take it away from you.
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/profileimage15.png" alt="profile photo">
<p><strong>Napeh</strong> @napehjh - 1 hr</p>
<p>
<pre>
On #WorldHealthDay, we thank the tireless health care workers
fighting COVID-19, and we see clearly why protecting the health
of Americans requires U.S. global leadership—to coordinate an
international response, strengthen health systems everywhere,
and prevent the next pandemic. &#128151; &#129309;
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/profileimage29.png" alt="profile photo">
<p><strong>Coco</strong> @wordsbycoco - 56m</p>
<p>
<pre class="photovideo">
Americans & Koreans Swap School Lunches. Check this out! &#128512;
<video controls>
<source src="images/video1.mp4" type="video/mp4">
</video>
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/profileimage12.png" alt="profile photo">
<p><strong>Zen Essentials</strong> @ZenEssentials - 25min</p>
<p>
<pre>
The trouble is, you think you have time.
— Jack Kornfield
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/profilephoto6.png" alt="profile photo">
<p><strong>Jackson</strong> @jackssprw - 2 hrs</p>
<p>
<pre class="photovideo">
baby fever for your timeline &#129319; &#129329;
<img class="photovideo2" src="images/gif11.gif" alt="profile photo">
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/profileimage17.png" alt="profile photo">
<p><strong>Aloandra</strong> @wowalo - 1 hr</p>
<p>
<pre>
Our earth is too damaged and had enough tolerating humans’ behavior.
We’ve been sadly taking it for granted. The way I see it, this Pandemic
is just a mother nature’s self-healing process. We are the virus. &#128266;
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/profileimage5.png" alt="profile photo">
<p><strong>Tin</strong> @tinight - 43 min</p>
<p>
<pre class="photovideo">
Womens rights are human rights. Will we see you today?
<img class="photovideo2" src="images/protest.jpg" alt="profile photo">
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/profilephoto.png" alt="profile photo">
<p><strong>Cin</strong> @cintaoos - 1 hr</p>
<p>
<pre>
I'm the queen of one-pot meals! &#128587; super easy casserole:
Rice (any kind) + chopped broccoli + chopped mushrooms + cheese.
Add all of these to a casserole dish plus salt, pepper, spices
(flavored salt works too Thumbs up). Add some oil, twice as much
water as dry ingredients. Bake. Done! &#128588;
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/profileimage20.png" alt="profile photo">
<p><strong>Ken</strong> @kendang - 2 hrs</p>
<p>
<pre class="photovideo">
#mood &#129367; Comment your favorite food place!
<img class="photovideo2" src="images/gif12.gif" alt="profile photo">
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/profilephoto7.png" alt="profile photo">
<p><strong>Antiki</strong> @antia - 8 hrs</p>
<p>
<pre class="photovideo">
the fact that America seems to be rejecting the "free healthcare"
candidate during a global pandemic is something I am finding
hard to digest.
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
</main>
</div>
</div> <!-- end div -->
</body>
</html>
Raw
media.html
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Twitter</title>
<link href="css/style.css" type = "text/css" rel= "stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/9bc13e3a60.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">
</head>
<!-- Side navigation -->
<div class="sidenav">
<a class="iconphoto" href="index.html"><i class="fab fa-twitter"></i></a>
<a class="iconphoto" href="index.html"><i class="fas fa-home"></i></a>
<a class="iconphoto" href="hashtags.html"><i class="fas fa-hashtag"></i></a>
<a class="iconphoto" href="profile.html"><i class="fas fa-user"></i></a>
</div>
<body>
<header>
<div class="topnav">
<input type="text" placeholder="Search Twitter">
<!-- <h1><i class="fas fa-arrow-left"></i> Chilombo <i class="fas fa-check"></i></h1> -->
<h1><a class="fas fa-arrow-left" href="index.html"></a> Chilombo <i class="fas fa-check"></i></h1>
<!-- <button class="btnplus"><i class="fas fa-plus"></i></button> -->
</div>
</header>
<div id="wrapper">
<aside class = "whole">
<aside class="profileimages">
<img class="profileimages1" src="images/jhene1.jpg" alt="profile photo">
<img class="profileimages1" src="images/jhene9.jpg" alt="profile photo">
<img class="profileimages1" src="images/jhene10.jpg" alt="profile photo">
<img class="profileimages1" src="images/jhene4.jpg" alt="profile photo">
<img class="profileimages1" src="images/jhene5.jpg" alt="profile photo">
<img class="profileimages1" src="images/profileimage4.jpg" alt="profile photo">
</aside>
<aside class="profile">
<h1>You might like</h1>
<hr>
<img class="iconphoto2" src="images/profileimage22.png" alt="profile photo">
<p><strong>Bella Thorne <button class="btnplus"><i class="fas fa-plus"></i></button></strong></p>
<p>@bellathrone</p>
<hr>
<img class="iconphoto2" src="images/profileimage24.png" alt="profile photo">
<p><strong>Stella Hudgens <button class="btnplus"> <i class="fas fa-plus"></i></button></strong></p>
<p>@stella</p>
<hr>
<img class="iconphoto2" src="images/profileimage15.png" alt="profile photo">
<p><strong>Michael Knox <button class="btnplus"><i class="fas fa-plus"></i></button></strong></p>
<p>@michaelknocks12</p>
<hr>
<h2 class="h2trends">show more</h2>
</aside>
<aside class="profile2">
<h1>Trends for you</h1>
<hr>
<p>Trending in the United States</p>
<h2>Hunter Hayes</h2>
<p>2,863 tweets</p>
<hr>
<h2>#CallOfTheWild</h2>
<p>In Theaters Friday</p>
<hr>
<h2>Kehlani</h2>
<p>19.8k tweets</p>
<hr>
<h2>#TheBachelor</h2>
<p>Trending with: #VictoriaF, #victoriafuller, Victoria</p>
<hr>
<p>Trending in WA</p>
<h2>Nine Lives</h2>
<p>2,000 tweets</p>
<hr>
<h2>#LoseAnArgumentIn3Words</h2>
<p>3.1k tweeks</p>
<hr>
<h2 class="h2trends">show more</h2>
</aside>
</aside>
<main class="profileheader">
<img src="images/jhene.jpg" alt="Jhene Aiko">
<h2>Chilombo</h2>
<p>@JheneAiko</p>
<p>Jhené Aiko Efuru Chilombo #PennyPen <i class="fas fa-pen"></i> <i class="fas fa-heart"></i></p>
<p><i class="fa fa-map-marker" style="font-size:15px"></i> Los Angeles <i class="fa fa-link"></i> jheneaiko.com <i class="fas fa-burn"></i> Born March 16, 1988 <i class="far fa-calendar-alt"></i> Joined Febuary 2009</p>
<p><strong>765</strong> Following <strong> 2M</strong> Followers</p>
<nav>
<ul>
<li><a href ="profile.html"><strong>Tweets</strong></a></li>
<li><a href ="replies.html"><strong>Replies</strong></a></li>
<li><a href ="media.html"><strong>Media</strong></a></li>
<li><a href ="likes.html"><strong>Likes</strong></a></li>
</ul>
</nav>
<hr>
<div class="home4">
<img class="iconphoto5" src="images/jhene8.png" alt="profile photo">
<p><strong>Chilombo</strong> @JheneAiko - 41m</p>
<pre class = "pre2">
91'
<img src="images/baby.jpg" alt="profile photo">
</pre>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/jhene8.png" alt="profile photo">
<p><strong>Chilombo</strong> @jheneaiko - 52 min</p>
<p>
<pre class="photovideo">
Check me out on Harper's BAZAAR, link in bio! &#128140;
<video controls>
<source src="images/video7.mp4" type="video/mp4">
</video>
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto5" src="images/jhene8.png" alt="profile photo">
<p><strong>Chilombo</strong> @JheneAiko - 60 min </p>
<pre class = "pre2">
#throwback #alwaysremember &#128149; &#128522;
<img src="images/gif10.gif" alt="profile photo">
</pre>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/jhene8.png" alt="profile photo">
<p><strong>Chilombo</strong> @jheneaiko - 14 hours</p>
<p>
<pre class="photovideo">
ELLE spent the Morning with me, my Tarot Cards, and my
beloved Cats! Link in bio &#128582;
<video controls>
<source src="images/video8.mp4" type="video/mp4">
</video>
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto5" src="images/jhene8.png" alt="profile photo">
<p><strong>Chilombo</strong> @JheneAiko - 24 hours</p>
<pre class = "pre2">
<img src="images/jhene11.jpg" alt="profile photo">
</pre>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto5" src="images/jhene8.png" alt="profile photo">
<p><strong>Chilombo</strong> @JheneAiko - 2 days</p>
<pre class = "pre2">
Coming soon! #CarTest &#128663; ⁦w/ @ElliottWilson #TIDAL #CHILOMBO &#128147;
<img src="images/jhene12.jpg" alt="profile photo">
</pre>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto5" src="images/jhene8.png" alt="profile photo">
<p><strong>Chilombo</strong> @JheneAiko - 2 days</p>
<pre class = "pre2">
caption this &#128514; &#128557;
<img src="images/gif8.gif" alt="profile photo">
</pre>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/jhene8.png" alt="profile photo">
<p><strong>Chilombo</strong> @jheneaiko - 4 days</p>
<p>
<pre class="photovideo">
My Makeup turotial: True Portrait Foundation | KVD Vegan Beauty &#128139;
<video controls>
<source src="images/video9.mp4" type="video/mp4">
</video>
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto5" src="images/jhene8.png" alt="profile photo">
<p><strong>Chilombo</strong> @JheneAiko - 5 days</p>
<pre class = "pre2">
<img src="images/jhene13.jpg" alt="profile photo">
</pre>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
</div>
</main>
</div> <!-- end div -->
</body>
</html>
Raw
profile.html
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Twitter</title>
<link href="css/style.css" type = "text/css" rel= "stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/9bc13e3a60.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">
</head>
<!-- Side navigation -->
<div class="sidenav">
<a class="iconphoto" href="index.html"><i class="fab fa-twitter"></i></a>
<a class="iconphoto" href="index.html"><i class="fas fa-home"></i></a>
<a class="iconphoto" href="hashtags.html"><i class="fas fa-hashtag"></i></a>
<a class="iconphoto" href="profile.html"><i class="fas fa-user"></i></a>
</div>
<body>
<header>
<div class="topnav">
<input type="text" placeholder="Search Twitter">
<!-- <h1><i class="fas fa-arrow-left"></i> Chilombo <i class="fas fa-check"></i></h1> -->
<h1><a class="fas fa-arrow-left" href="index.html"></a> Chilombo <i class="fas fa-check"></i></h1>
<!-- <button class="btnplus"><i class="fas fa-plus"></i></button> -->
</div>
</header>
<div id="wrapper">
<aside class = "whole">
<aside class="profileimages">
<img class="profileimages1" src="images/jhene1.jpg" alt="profile photo">
<img class="profileimages1" src="images/jhene9.jpg" alt="profile photo">
<img class="profileimages1" src="images/jhene10.jpg" alt="profile photo">
<img class="profileimages1" src="images/jhene4.jpg" alt="profile photo">
<img class="profileimages1" src="images/jhene5.jpg" alt="profile photo">
<img class="profileimages1" src="images/profileimage4.jpg" alt="profile photo">
</aside>
<aside class="profile">
<h1>You might like</h1>
<hr>
<img class="iconphoto2" src="images/profileimage22.png" alt="profile photo">
<p><strong>Bella Thorne <button class="btnplus"><i class="fas fa-plus"></i></button></strong></p>
<p>@bellathrone</p>
<hr>
<img class="iconphoto2" src="images/profileimage24.png" alt="profile photo">
<p><strong>Stella Hudgens <button class="btnplus"> <i class="fas fa-plus"></i></button></strong></p>
<p>@stella</p>
<hr>
<img class="iconphoto2" src="images/profileimage15.png" alt="profile photo">
<p><strong>Michael Knox <button class="btnplus"><i class="fas fa-plus"></i></button></strong></p>
<p>@michaelknocks12</p>
<hr>
<h2 class="h2trends">show more</h2>
</aside>
<aside class="profile2">
<h1>Trends for you</h1>
<hr>
<p>Trending in the United States</p>
<h2>Hunter Hayes</h2>
<p>2,863 tweets</p>
<hr>
<h2>#CallOfTheWild</h2>
<p>In Theaters Friday</p>
<hr>
<h2>Kehlani</h2>
<p>19.8k tweets</p>
<hr>
<h2>#TheBachelor</h2>
<p>Trending with: #VictoriaF, #victoriafuller, Victoria</p>
<hr>
<p>Trending in WA</p>
<h2>Nine Lives</h2>
<p>2,000 tweets</p>
<hr>
<h2>#LoseAnArgumentIn3Words</h2>
<p>3.1k tweeks</p>
<hr>
<h2 class="h2trends">show more</h2>
</aside>
</aside>
<main class="profileheader">
<img src="images/jhene.jpg" alt="Jhene Aiko">
<h2>Chilombo</h2>
<p>@JheneAiko</p>
<p>Jhené Aiko Efuru Chilombo #PennyPen <i class="fas fa-pen"></i> <i class="fas fa-heart"></i></p>
<p><i class="fa fa-map-marker" style="font-size:15px"></i> Los Angeles <i class="fa fa-link"></i> jheneaiko.com <i class="fas fa-burn"></i> Born March 16, 1988 <i class="far fa-calendar-alt"></i> Joined Febuary 2009</p>
<p><strong>765</strong> Following <strong> 2M</strong> Followers</p>
<nav>
<ul>
<li><a href ="profile.html"><strong>Tweets</strong></a></li>
<li><a href ="replies.html"><strong>Replies</strong></a></li>
<li><a href ="media.html"><strong>Media</strong></a></li>
<li><a href ="likes.html"><strong>Likes</strong></a></li>
</ul>
</nav>
<hr>
<div class="home3">
<img class="iconphoto" src="images/jhene8.png" alt="profile photo">
<p><strong>Chilombo</strong> @jheneaiko - 5 mins</p>
<p>
<pre>
thank you so much to everyone who has bought tickets to
#TheMagicHourTour Sunrise! &#127872; As a gift to you, your ticket
includes a physical copy of the #Chilombo CD! &#128156;
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/jhene8.png" alt="profile photo">
<p><strong>Chilombo</strong> @jheneaiko - 15 mins</p>
<p>
<pre>
look at how far you have come
And look at all that you have going
Look at who you have become
Baby you gotta keep going!
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/jhene8.png" alt="profile photo">
<p><strong>Chilombo</strong> @jheneaiko - 1 hr</p>
<p>
<pre>
be present. &#128522;
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/jhene8.png" alt="profile photo">
<p><strong>Chilombo</strong> @jheneaiko - 2 hrs</p>
<p>
<pre>
10k hours is conversation explaining to someone u love that time is
of the essence... &#128346; when u know what it's like to lose someone
very close to you, you know the importance of spending time with the
people u love. &#128156;
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/jhene8.png" alt="profile photo">
<p><strong>Chilombo</strong> @jheneaiko - 2 hrs</p>
<p>
<pre>
s/o to my dad, Dr. Chill for writing out my track list for me &#128525;
#CHILOMBO #June26 &#128197;
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto" src="images/jhene8.png" alt="profile photo">
<p><strong>Chilombo</strong> @jheneaiko - 5 hrs</p>
<p>
<pre>
we all suffer & go through things we often feel no one else
understands.. but the more we share w/ each other, the more
we learn about each other & the more we learn, the more we
relate... the less we judge, the more we will heal... the
more we will love. &#128261; &#128149;
</pre>
</p>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
</div>
</main>
</div> <!-- end div -->
</body>
</html>
Raw
replies.html
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Twitter</title>
<link href="css/style.css" type = "text/css" rel= "stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/9bc13e3a60.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">
</head>
<!-- Side navigation -->
<div class="sidenav">
<a class="iconphoto" href="index.html"><i class="fab fa-twitter"></i></a>
<a class="iconphoto" href="index.html"><i class="fas fa-home"></i></a>
<a class="iconphoto" href="hashtags.html"><i class="fas fa-hashtag"></i></a>
<a class="iconphoto" href="profile.html"><i class="fas fa-user"></i></a>
</div>
<body>
<header>
<div class="topnav">
<input type="text" placeholder="Search Twitter">
<!-- <h1><i class="fas fa-arrow-left"></i> Chilombo <i class="fas fa-check"></i></h1> -->
<h1><a class="fas fa-arrow-left" href="index.html"></a> Chilombo <i class="fas fa-check"></i></h1>
<!-- <button class="btnplus"><i class="fas fa-plus"></i></button> -->
</div>
</header>
<div id="wrapper">
<aside class = "whole">
<aside class="profileimages">
<img class="profileimages1" src="images/jhene1.jpg" alt="profile photo">
<img class="profileimages1" src="images/jhene9.jpg" alt="profile photo">
<img class="profileimages1" src="images/jhene10.jpg" alt="profile photo">
<img class="profileimages1" src="images/jhene4.jpg" alt="profile photo">
<img class="profileimages1" src="images/jhene5.jpg" alt="profile photo">
<img class="profileimages1" src="images/profileimage4.jpg" alt="profile photo">
</aside>
<aside class="profile">
<h1>You might like</h1>
<hr>
<img class="iconphoto2" src="images/profileimage22.png" alt="profile photo">
<p><strong>Bella Thorne <button class="btnplus"><i class="fas fa-plus"></i></button></strong></p>
<p>@bellathrone</p>
<hr>
<img class="iconphoto2" src="images/profileimage24.png" alt="profile photo">
<p><strong>Stella Hudgens <button class="btnplus"> <i class="fas fa-plus"></i></button></strong></p>
<p>@stella</p>
<hr>
<img class="iconphoto2" src="images/profileimage15.png" alt="profile photo">
<p><strong>Michael Knox <button class="btnplus"><i class="fas fa-plus"></i></button></strong></p>
<p>@michaelknocks12</p>
<hr>
<h2 class="h2trends">show more</h2>
</aside>
<aside class="profile2">
<h1>Trends for you</h1>
<hr>
<p>Trending in the United States</p>
<h2>Hunter Hayes</h2>
<p>2,863 tweets</p>
<hr>
<h2>#CallOfTheWild</h2>
<p>In Theaters Friday</p>
<hr>
<h2>Kehlani</h2>
<p>19.8k tweets</p>
<hr>
<h2>#TheBachelor</h2>
<p>Trending with: #VictoriaF, #victoriafuller, Victoria</p>
<hr>
<p>Trending in WA</p>
<h2>Nine Lives</h2>
<p>2,000 tweets</p>
<hr>
<h2>#LoseAnArgumentIn3Words</h2>
<p>3.1k tweeks</p>
<hr>
<h2 class="h2trends">show more</h2>
</aside>
</aside>
<main class="profileheader">
<img src="images/jhene.jpg" alt="Jhene Aiko">
<h2>Chilombo</h2>
<p>@JheneAiko</p>
<p>Jhené Aiko Efuru Chilombo #PennyPen <i class="fas fa-pen"></i> <i class="fas fa-heart"></i></p>
<p><i class="fa fa-map-marker" style="font-size:15px"></i> Los Angeles <i class="fa fa-link"></i> jheneaiko.com <i class="fas fa-burn"></i> Born March 16, 1988 <i class="far fa-calendar-alt"></i> Joined Febuary 2009</p>
<p><strong>765</strong> Following <strong> 2M</strong> Followers</p>
<nav>
<ul>
<li><a href ="profile.html"><strong>Tweets</strong></a></li>
<li><a href ="replies.html"><strong>Replies</strong></a></li>
<li><a href ="media.html"><strong>Media</strong></a></li>
<li><a href ="likes.html"><strong>Likes</strong></a></li>
</ul>
</nav>
<hr>
<div class="home3">
<img class="iconphoto5" src="images/profileimage23.png" alt="profile photo">
<p><strong>Steph</strong> @lourvectrl - 13m</p>
<pre>
@JheneAiko #AskJhene have you seen parasite? if so,
what are your thoughts?
</pre>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<img class="iconphoto5" src="images/jhene8.png" alt="profile photo">
<p><strong>Chilombo</strong> @JheneAiko - 13m</p>
<pre>
@lourvectrl yes i did! i was thinking about that movie for like 3 days
after watching it. the wins were well deserved in my opinion &#128515;
</pre>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto5" src="images/profileimage5.png" alt="profile photo">
<p><strong>Tin</strong> @tinight - 13m</p>
<pre>
@JheneAiko #AskJhene Waiting for you to drop the skincare regimen sis.
</pre>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<img class="iconphoto5" src="images/jhene8.png" alt="profile photo">
<p><strong>Chilombo</strong> @JheneAiko - 13m</p>
<pre>
@tinight working on something for you &#129310; annual laser treatments
can get expensive...i personally havent gotten any in a couple of years.
instead i'm working on some things... some affordable solutions &#128536;
</pre>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto5" src="images/profilephoto.png" alt="profile photo">
<p><strong>Linda</strong> @ehander - 43m</p>
<pre>
@JheneAiko honestly love everything single song, each one is a
different vibe, there’s so much emotion involved, and I feel more
at peace than I ever have listening to your music &#129505;
</pre>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<img class="iconphoto5" src="images/jhene8.png" alt="profile photo">
<p><strong>Chilombo</strong> @JheneAiko - 13m</p>
<pre>
@ehander wow, thank you for listening!! &#127801; &#127804;
</pre>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
<img class="iconphoto5" src="images/profilephoto1.png" alt="profile photo">
<p><strong>Yvette</strong> @yvettelongs - 13m</p>
<pre>
@JheneAiko #askjhene what chakra(s) does LOVE & Magic Hour
speak to? because those two really do something to me! &#129505;
</pre>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<img class="iconphoto5" src="images/jhene8.png" alt="profile photo">
<p><strong>Chilombo</strong> @JheneAiko - 13m</p>
<pre>
@yvettelongs LOVE is in F (heart chakra) and Magic Hour is in
A (brow or "third eye" chakra)! &#128522;
</pre>
<button class="btn"><i class="fa fa-reply"></i></button>
<button class="btn"><i class="fa fa-retweet"></i></button>
<button class="btn"><i class="fa fa-heart"></i></button>
<hr>
</div>
</main>
</div> <!-- end div -->
</body>
</html>
Raw
sports.html
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Twitter</title>
<link href="css/style.css" type = "text/css" rel= "stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/9bc13e3a60.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">
</head>
<!-- Side navigation -->
<div class="sidenav">
<a class="iconphoto" href="index.html"><i class="fab fa-twitter"></i></a>
<a class="iconphoto" href="index.html"><i class="fas fa-home"></i></a>
<a class="iconphoto" href="hashtags.html"><i class="fas fa-hashtag"></i></a>
<a class="iconphoto" href="profile.html"><i class="fas fa-user"></i></a>
</div>
<body>
<header class="hashtags">
<nav class="hashtagnav">
<ul>
<li><a href ="hashtags.html"><strong>News</strong></a></li>
<li><a href ="sports.html"><strong>Sports</strong></a></li>
<li><a href ="entertainment.html"><strong>Entertainment</strong></a></li>
</ul>
</nav>
</header>
<div id="wrapper2">
<aside class = "whole">
<aside class="hashtagsaside">
<h1>You might like</h1>
<hr>
<img class="iconphoto2" src="images/profileimage22.png" alt="profile photo">
<p><strong>Bella Thorne <button class="btnplus"><i class="fas fa-plus"></i></button></strong></p>
<p>@bellathrone</p>
<hr>
<img class="iconphoto2" src="images/profileimage24.png" alt="profile photo">
<p><strong>Stella Hudgens <button class="btnplus"> <i class="fas fa-plus"></i></button></strong></p>
<p>@stella</p>
<hr>
<img class="iconphoto2" src="images/profileimage15.png" alt="profile photo">
<p><strong>Michael Knox <button class="btnplus"><i class="fas fa-plus"></i></button></strong></p>
<p>@michaelknocks12</p>
<hr>
<h2 class="h2trends">show more</h2>
</aside>
</aside>
<div class="hashtagsheader2">
<h1>What's Happening in Sports?</h1>
</div>
<main class="hashtagsheader">
<img src="images/sports1.jpg" alt="Jhene Aiko">
<h2>The Rams and Chargers will share the Hard Knocks stage this year, ESPN reports</h2>
<p>HBO plans to make the Los Angeles Rams and Los Angeles Chargers the co-subjects of "Hard Knocks" if training camp takes place this summer, sources told ESPN's Adam Schefter. Two teams have never been featured simultaneously on the docuseries, which gives viewers an intimate look at what an NFL training camp is like. <a href="https://www.thescore.com/news/1969166" target="_blank">(view full article)</a></p>
<div class="graybox2">
</div>
<p>In memoriam · Today</p>
<img src="images/sports2.jpg" alt="Jhene Aiko">
<h2>Detroit Tigers legend Al Kaline has died at age 85, report says</h2>
<p>Famer Al Kaline — one of the greatest and most beloved players of his era, and a Detroit Tiger legend — has died at the age of 85. A family friend tells the Free Press that Kaline recently suffered a stroke, but no official cause of death has been reported. <a href="https://mlb.nbcsports.com/2020/04/06/hall-of-famer-al-kaline-dies-at-85/" target="_blank">(view full article)</a></p>
<div class="graybox2">
</div>
<p>Bundeslinga · This morning </p>
<img src="images/sports3.jpg" alt="m">
<h2>Thomas Müller signs a contract extension with Bayern Munich until 2023</h2>
<p>Thomas Muller has signed a contract extension at Bayern Munich until 2023, the club announced on Tuesday. Muller, 30, flirted with a move away from the Allianz Arena in late 2019, but has now committed his future to Bayern. <a href="https://www.espn.com/soccer/soccer-transfers/story/4083201/thomas-muller-extends-contract-with-bayern-munich-until-2023" target="_blank">(view full article)</a></p>
<div class="graybox2">
</div>
<p>Premier League · 7 hours ago </p>
<img src="images/sports4.jpg" alt="m">
<h2>FA chairman says English football could ‘lose clubs and leagues’ due to pandemic</h2>
<p>Greg Clarke said that he is in support of finishing the season and warned of economic challenges that clubs could face due to the coronavirus crisis. The Football Association chairman urged all the stakeholders to step up and “share the pain” to keep the game alive. <a href="https://www.mirror.co.uk/sport/football/news/fa-chief-greg-clarke-issues-21828761" target="_blank">(view full article)</a></p>
<div class="graybox2">
</div>
<p>NCAA basketball · 9 hours ago </p>
<img src="images/sports5.jpg" alt="m">
<h2>Tennessee vs. South Carolina: Who would get the win?</h2>
<p>Pat Summitt's era or Dawn Staley's era? While many would choose the Lady Vols over the Gamecocks, there's plenty of discussion over which SEC team would come out victorious in a matchup. <a href="https://www.mirror.co.uk/sport/football/news/fa-chief-greg-clarke-issues-21828761" target="_blank">(view full article)</a></p>
<div class="graybox2">
</div>
<p>Wrestling · 16 hours ago </p>
<img src="images/sports6.jpg" alt="m">
<h2>WrestleMania 36: All the action from the two-day spectacle</h2>
<p>Brock Lesnar, The Undertaker, Charlotte Flair and more superstars brought the intensity to the historic two-part event. Catch up on all the highlights from both action-packed nights right here. <a href="https://www.wwe.com/shows/wrestlemania/wrestlemania-36" target="_blank">(view full article)</a></p>
<p>Come back soon for more!</p>
</main>
</div> <!-- end div -->
</body>
</html>
Raw
stylesheet
* {
margin: 0px;
padding: 0px;
font-family: 'Noto Sans JP', sans-serif;
zoom: 100%;
}
body {
background-color:white;
}
main {
width: 600px;
float: left;
margin-bottom: 20px;
margin-top: 20px;
display: inline;
}
#wrapper {
/* without nav, = 980 */
width: 978px;
margin: 20px auto;
background-color: white;
border-left: : 1px solid #F4F8FB;
border-left: : 1px solid #F4F8FB;
padding-bottom: 30px;
}
#wrapper2 {
width: 978px;
height: 700px;
margin: 20px auto;
background-color: white;
padding-left: 0px;
padding-top: 0px;
margin-top: 0px;
border-left: : 1px solid #F4F8FB;
border-left: : 1px solid #F4F8FB;
}
.profileheader {
float: left;
width: 600px;
margin-bottom: 20px;
border: 1px solid #F4F8FB;
}
.hashtagsheader {
float: left;
width: 600px;
margin-bottom: 20px;
margin-top: 20px;
border: 1px solid #F4F8FB;
border-top: none;
}
.hashtagsheader2 {
float: left;
width: 600px;
margin-top: 90px;
border-top: none;
}
.hashtagsheader h2 {
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
}
.hashtagsheader p {
padding-left: 10px;
padding-right: 10px;
padding-top: 15px;
padding-bottom: 15px;
}
/* The sidebar menu */
.sidenav {
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 85px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: white;
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
margin: 0px;
align-content: center;
}
/* The navigation menu links */
.sidenav a {
padding: 6px 0px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #f1f1f1;
}
/* Style page content */
.main {
margin-left: 160px; /* Same as the width of the sidebar */
padding: 0px 10px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/* end navigation! */
/* start search bar */
/* Add a black background color to the top navigation bar */
.topnav {
background-color: white;
padding-bottom: 5px;
/* width: 940px; */
/* padding-top: 50px; */
}
/* Style the links inside the navigation bar */
.topnav a {
color: black;
text-align: center;
text-decoration: none;
font-size: 17px;
clear: both;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Style the "active" element to highlight the current page */
.topnav a.active {
background-color: #2196F3;
color: white;
}
/* Style the search box inside the navigation bar */
.topnav input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 16px;
font-size: 17px;
color: black;
}
/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px) {
.topnav a, .topnav input[type=text] {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
/* topnav hashtags page */
}
.topnav2 {
background-color: white;
height: 60px;
text-align: center;
width: 601px;
padding-bottom: 0px;
margin-bottom: 0px;
padding-top: 0px;
margin-top: 0px;
padding-right: 130px;
display: inline;
}
/* Style the links inside the navigation bar */
.topnav2 a {
color: black;
text-align: center;
text-decoration: none;
font-size: 17px;
clear: both;
margin-right:100px;
}
/* Change the color of links on hover */
.topnav2 a:hover {
background-color: #ddd;
color: black;
}
/* Style the "active" element to highlight the current page */
.topnav2 a.active {
background-color: #2196F3;
color: white;
}
/* Style the search box inside the navigation bar */
.topnav2 input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 16px;
font-size: 17px;
color: black;
}
/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px) {
.topnav2 a, .topnav2 input[type=text] {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav2 input[type=text] {
border: 1px solid #ccc;
}
}
/* end search bar */
h1 {
font-size: 20px;
color: black;
margin: 5px;
line-height: 12px;
height:12px;
display: block;
}
header {
width:978px;
margin: 0 139px 0 142px;
text-align: left;
top: 0;
border: 1px solid #F4F8FB;
position: fixed;
/* when we use pisition: fixed, things will break. */
font-size: 10px;
background-color: white;
height: 50px;
line-height: 50px;
}
.hashtags {
width:600px;
margin: 0 139px 0 142px;
padding-bottom: 0px;
margin-bottom: 0px;
float: left;
border: 1px solid #F4F8FB;
/* text-align: left; */
top: 0;
border: 1px solid #F4F8FB;
position: fixed;
font-size: 10px;
background-color: white;
height: 50px;
line-height: 50px;
}
input {
padding-left: 40px;
padding-top: 40px;
padding-bottom: 40px;
color: #D0D0D0;
font-size: 25px;
border: none;
clear: both;
}
.home h1 {
padding: 0px;
margin: 0px;
display: inline;
}
.home2 {
float: left;
margin-bottom: 0px;
border-top: 1px solid #F4F8FB;
border-left: 1px solid #F4F8FB;
border-bottom: 1px solid #F4F8FB;
width: 400px;
}
.home2 p {
padding: 40px;
color: #D0D0D0;
font-size: 25px;
}
.home3 {
float: left;
border-left: 1px solid #F4F8FB;
border-right: 1px solid #F4F8FB;
border-bottom: 1px solid #F4F8FB;
}
.home3 p {
width: 580px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0px;
margin-bottom: 0px;
}
.home4 {
border-left: : 1px solid #F4F8FB;
border-right: : 1px solid #F4F8FB;
width: 580px;
float: left;
width: 600px;
margin-bottom: 20px;
margin-top: 20px;
padding: 10px;
}
.graybox {
width: 601px;
height:25px;
background-color: #E7ECF0;
display: block;
}
.graybox2 {
width: 601px;
height:15px;
background-color: #E7ECF0;
display: block;
}
aside {
width: 350px;
background-color: #F4F8FB;
float: right;
clear: both;
border-radius: 12px;
margin: 20px auto;
margin-top: 45px;
}
.whole {
width: 270px;
background-color: white;
float: right;
border-radius: 12px;
display: inline;
margin: 0px;
padding: 0px;
}
h1 {
padding: 15px;
}
aside h2, p {
padding-left: 15px;
padding-right: 15px;
padding-bottom: 8px;
padding-top: 8px;
font-size: 15px;
}
.profile {
width: 350px;
background-color: #F4F8FB;
float: right;
border-radius: 12px;
margin-bottom: 20px;
margin-top: 5px;
margin-left: 10px;
clear: both;
}
.hashtagsaside {
width: 350px;
background-color: #F4F8FB;
float: right;
border-radius: 12px;
margin-bottom: 20px;
margin-top: 5px;
margin-left: 10px;
position: fixed;
}
.profile h1 {
padding: 15px;
}
.profile h2, p {
padding-left: 15px;
padding-right: 15px;
padding-bottom: 8px;
padding-top: 8px;
font-size: 15px;
}
.profile2 {
width: 350px;
background-color: #F4F8FB;
float: right;
border-radius: 12px;
margin-bottom: 20px;
margin-top: 5px;
margin-left: 10px;
clear: both;
}
.profile2 h1 {
padding: 15px;
}
.profile2 h2, p {
padding-left: 15px;
padding-right: 15px;
padding-bottom: 8px;
padding-top: 8px;
font-size: 15px;
}
/* this is the first aside */
.profileimages {
width: 350px;
background-color: #F4F8FB;
float: right;
border-radius: 12px;
margin-bottom: 5px;
padding: 0px;
margin-left: 10px;
margin-top: 60px;
}
.profileimages h1 {
padding: 15px;
}
.profileimages h2, p {
padding-left: 15px;
padding-right: 15px;
padding-bottom: 8px;
padding-top: 8px;
font-size: 15px;
}
.profileimages1 {
height: 88px;
width: 110px;
padding: 3px;
margin: 0px;
max-width: 100%;
}
.h2trends {
padding-left: 15px;
padding-right: 15px;
margin-bottom: 15px;
padding-top: 40px;
font-size: 15px;
color: #1DB6F2;
}
.profileheader h2 {
padding-left: 15px;
padding-top: 20px;
clear: both;
}
.home2 img {
float: right;
width: 600px;
}
.iconphoto {
float: left;
width: 40px;
height:40px;
padding-right: 20px;
padding-top: 20px;
padding-left: 30px;
margin-left: 10px;
position: center;
border-radius: 6px;
}
.iconphoto2 {
float: left;
width: 40px;
height:40px;
padding-right: 20px;
padding-left: 20px;
padding-top: 20px;
}
.iconphoto5 {
float: left;
width: 40px;
height:40px;
padding-right: 20px;
padding-top: 20px;
padding-left: 5px;
margin-left: 10px;
position: center;
border-radius: 6px;
display: inline;
}
img {
float: left;
padding-right: 20px;
max-width: 100%;
/* padding-bottom: 20px; */
}
.me {
float: left;
width: 40px;
height:40px;
}
pre {
padding-top: 5px;
padding-left: 57px;
font-size: 15px;
clear: both;
}
.photovideo {
padding-top: 5px;
padding-left: 64px;
font-size: 15px;
clear: both;
}
.photovideo2 {
padding-top: 5px;
padding-left: 64px;
font-size: 15px;
clear: both;
padding-bottom: 10px;
}
.pre2 {
margin-top: 0px;
font-size: 15px;
padding-top: 0px;
margin-top: 0px;
display: inline;
margin-left: 0px;
padding-left: 0px;
margin-right: 10px;
}
.pre3 {
margin-top: 0px;
font-size: 15px;
padding-top: 0px;
margin-top: 0px;
padding-left: 10px;
margin-right: 10px;
}
/* Style buttons */
.btn {
background-color: white;
border: none;
color: #1DB6F2;
padding: 0px 50px 20px 100px; /* Some padding */
font-size: 16px; /* Set a font size */
cursor: pointer; /* Mouse pointer on hover */
}
/* Darker background on mouse-over */
.btn:hover {
color: RoyalBlue;
}
.btnplus {
background-color: #F4F8FB;
border: none;
color: #F4F8FB;
font-size: 16px; /* Set a font size */
cursor: pointer; /* Mouse pointer on hover */
display: inline;
}
.btn {
background-color: white;
border: none;
color: #1DB6F2;
padding: 0px 50px 20px 100px; /* Some padding */
font-size: 16px; /* Set a font size */
cursor: pointer; /* Mouse pointer on hover */
}
hr {
margin: 10px;
}
pre img {
float: center;
width: 500px;
height:400px;
padding-right: 20px;
padding-top: 20px;
padding-left: 30px;
}
.home3 img {
float: left;
padding-right: 20px;
padding-top: 20px;
padding-left: 0px;
}
.home4 img {
float: left;
padding-right: 20px;
padding-top: 20px;
padding-left: 0px;
padding-bottom: 10px;
}
/* nav for profile page */
nav {
height: 50px;
width: 580px;
background: white;
line-height: 50px;
font-size: 16px;
margin-top: 30px;
}
nav ul { /* this means your list items inside the nav. */
list-style-type: none;
margin: 10px;
}
nav li { /* this means the li inside the nav */
float: left;
width: 25%; /* IMPPRTANT FOR PRACTICAL TEST. If my container is at 100%, if there's 5 list items then the width is 20 %. If we had 4 list items, the list is 25%.*/
text-align: center;
/* font-size: .9em; */
}
nav a {
text-decoration: none;
color: gray;
}
nav a:hover {
background-color: #E8F5FE;
color: #1DB6F2;
padding: 25px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 23px;
}
/* nav on hashtags page */
.hashtagnav {
height: 50px;
width: 601px;
background: white;
line-height: 50px;
font-size: 16px;
text-align: center;
padding-top: 0px;
padding-bottom: 15px;
margin-top: 0px;
border: 1px solid #F4F8FB;
}
.hashtagnav ul { /* this means your list items inside the nav. */
list-style-type: none;
text-align: center;
}
.hashtagnav li { /* this means the li inside the nav */
width: 31%;
text-align: center;
/* font-size: .9em; */
}
.hashtagnav a {
text-decoration: none;
color: gray;
text-align: center;
}
.hashtagnav a:hover {
background-color: #E8F5FE;
color: #1DB6F2;
padding-top: 20px;
padding-bottom: 18px;
padding-left: 50px;
padding-right: 50px;
}
.sidenav + .fa, .fas, .far, .fab {
color: #1DB6F2;
padding: 5px;
}
.fa, .fas, .far, .fab {
color: #1DB6F2;
padding: 6px;
}
video {
width: 450px;
height: 300px;
clear: both;
padding-left: 10px;
padding-right: 10px;
padding-top: 0px;
padding-bottom: 20px;
decoration: none;
border: none;
}
.btn + .fas {
float: left;
color: #E7ECF0;
size: 30px;
padding-left: 30px;
padding-bottom: 20px;
.fas + .fas {
float: left;
color: #E7ECF0;
size: 30px;
}
.fa-arrow-left {
color: #1DB6F2;
}
.hashtag {
padding: 10px;
margin: 20px;
color: red;
}
.new {
padding: 30px;
font-size: 50px;
}
.profileimages2 {
width: 110px;
padding: 3px;
margin: 0px;
max-width: 100%;
float: right;
}
.titles {
padding-bottom: 0px;
margin-bottom: 0px;
}
.hashtagh2 {
padding: 20px;
display: inline;
}
fas fa-grip-lines-vertical {
padding-left: 30px;
}
.media {
float: left;
padding-right: 50px;
max-width: 100%;
/* padding-bottom: 20px; */
}
i {
padding-left: 30px;
}
.hashtagsheader h3 {
padding-left: 20px;
margin
}
img + h2 {
font-size: 10px;
}
.top {
padding-top: 20px;
}
.whatshappening {
float: left;
width: 600px;
margin-bottom: 20px;
margin-top: 100px;
border-top: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment