Skip to content

Instantly share code, notes, and snippets.

@anLpk

anLpk/index.html

Created December 7, 2020 03:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anLpk/50874f3bcb28fabb030d4a7f44ec411e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anLpk/50874f3bcb28fabb030d4a7f44ec411e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>
Frontend Mentor | [Social Media Dashboard with Theme Switcher Master]
</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
</head>
<body id="dark-theme" class="light-theme">
<div class="all-containers darktext">
<header>
<div class="intro-text">
<h1 id="intro-title">Social Media Dashboard</h1>
<p>Total Followers: 23,004</p>
</div>
<hr />
<div class="theme-switcher">
<p>Dark Mode</p>
<label class="switch">
<input type="checkbox" checked />
<span class="slider round"></span>
</label>
</div>
</header>
<section class="first-part">
<div class="first-container container light dark">
<p class="user-name">
<img src="images/icon-facebook.svg" alt="icon-facebook" />@nathanf
</p>
<h1>1987</h1>
<h2>Followers</h2>
<p class="arrow-up">
<img class="row-icon" src="images/icon-up.svg" alt="icon-up" /> 12
Today
</p>
</div>
<div class="second-container container light dark">
<p class="user-name">
<img src="images/icon-twitter.svg" alt="icon-twitter" />@nathanf
</p>
<h1>1044</h1>
<h2>Followers</h2>
<p class="arrow-up">
<img class="row-icon" src="images/icon-up.svg" alt="icon-up" />99
Today
</p>
</div>
<div class="third-container container light dark">
<p class="user-name">
<img
src="images/icon-instagram.svg"
alt="icon-instagram"
/>@realnathanf
</p>
<h1>11k</h1>
<h2>Followers</h2>
<p class="arrow-up">
<img class="row-icon" src="images/icon-up.svg" alt="icon-up" />1099
Today
</p>
</div>
<div class="fourth-container container light dark">
<p class="user-name">
<img src="images/icon-youtube.svg" alt="icon-youtube" />Nathan F.
</p>
<h1>8239</h1>
<h2>Subscribers</h2>
<p class="arrow-down">
<img
class="row-icon"
src="images/icon-down.svg"
alt="icon-down"
/>144 Today
</p>
</div>
</section>
<h1 id="second-title">Overview - Today</h1>
<section class="second-part">
<div class="box light dark">
<div class="box-2">
<p class="title-2">Page Views</p>
<p class="icon">
<img src="images/icon-facebook.svg" alt="icon-facebook" />
</p>
</div>
<div class="box-2">
<h3>87</h3>
<p class="arrow-up-2">
<img class="row-icon-t" src="images/icon-up.svg" alt="icon-up" />
3%
</p>
</div>
</div>
<div class="box light dark">
<div class="box-2">
<p class="title-2">Likes</p>
<p class="icon">
<img src="images/icon-facebook.svg" alt="icon-facebook" />
</p>
</div>
<div class="box-2">
<h3>52</h3>
<p class="arrow-down-2">
<img
class="row-icon-t"
src="images/icon-down.svg"
alt="icon-down"
/>2%
</p>
</div>
</div>
<div class="box light dark">
<div class="box-2">
<p class="title-2">Likes</p>
<p class="icon">
<img src="images/icon-instagram.svg" alt="icon-instagram" />
</p>
</div>
<div class="box-2">
<h3>5462</h3>
<p class="arrow-up-2">
<img
class="row-icon-t"
src="images/icon-up.svg"
alt="icon-up"
/>2257%
</p>
</div>
</div>
<div class="box light dark">
<div class="box-2">
<p class="title-2">Profile Views</p>
<p class="icon">
<img src="images/icon-instagram.svg" alt="icon-instagram" />
</p>
</div>
<div class="box-2">
<h3>52k</h3>
<p class="arrow-up-2">
<img
class="row-icon-t"
src="images/icon-up.svg"
alt="icon-up"
/>1375%
</p>
</div>
</div>
<div class="box light dark">
<div class="box-2">
<p class="title-2">Retweets</p>
<p class="icon">
<img src="images/icon-twitter.svg" alt="icon-twitter" />
</p>
</div>
<div class="box-2">
<h3>117</h3>
<p class="arrow-up-2">
<img
class="row-icon-t"
src="images/icon-up.svg"
alt="icon-up"
/>303%
</p>
</div>
</div>
<div class="box light dark">
<div class="box-2">
<p class="title-2">Likes</p>
<p class="icon">
<img src="images/icon-twitter.svg" alt="icon-twitter" />
</p>
</div>
<div class="box-2">
<h3>507</h3>
<p class="arrow-up-2">
<img
class="row-icon-t"
src="images/icon-up.svg"
alt="icon-up"
/>553%
</p>
</div>
</div>
<div class="box light dark">
<div class="box-2">
<p class="title-2">Likes</p>
<p class="icon">
<img src="images/icon-youtube.svg" alt="icon-youtube" />
</p>
</div>
<div class="box-2">
<h3>107</h3>
<p class="arrow-down-2">
<img
class="row-icon-t"
src="images/icon-down.svg"
alt="icon-down"
/>19%
</p>
</div>
</div>
<div class="box light dark">
<div class="box-2">
<p class="title-2">Total Views</p>
<p class="icon">
<img src="images/icon-youtube.svg" alt="icon-youtube" />
</p>
</div>
<div class="box-2">
<h3>1407</h3>
<p class="arrow-down-2">
<img
class="row-icon-t"
src="images/icon-down.svg"
alt="icon-down"
/>12%
</p>
</div>
</div>
</section>
<footer>
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by <a href="https://github.com/anLpk">Anil Pak</a>.
</footer>
</div>
<script src="script.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment