Desktop Design

Mobile Design

Social media dashboard with theme switcher

<h3 _ngcontent-hvi-c4="" class="sub-text"> Overview - Today </h3>

<h4 _ngcontent-hvi-c4=""> Challenge by <a _ngcontent-hvi-c4="" href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. </h4>

<span _ngcontent-hvi-c4="" class="sub-text"> @nathanf </span>

<p _ngcontent-hvi-c4="" class="sub-text">followers</p>

<span _ngcontent-hvi-c4="" class="up"> 12 Today</span>

<span _ngcontent-hvi-c4="" class="up"> 99 Today</span>

<span _ngcontent-hvi-c4="" class="sub-text"> @realnathanf </span>

<span _ngcontent-hvi-c4="" class="up"> 1099 Today</span>

<span _ngcontent-hvi-c4="" class="sub-text"> Nathan F. </span>

<span _ngcontent-hvi-c4="" class="down"> 144 Today</span>

<section _ngcontent-hvi-c4="" class="section"><div _ngcontent-hvi-c4="" class="title"><h3 _ngcontent-hvi-c4="" class="sub-text"> Overview - Today </h3></div></section>

<div _ngcontent-hvi-c4="" class="views"><p _ngcontent-hvi-c4="" class="sub-text thead">Page Views</p><h2 _ngcontent-hvi-c4="" class="tr">87</h2></div>

<div _ngcontent-hvi-c4="" class="views"><p _ngcontent-hvi-c4="" class="sub-text thead">Likes</p><h2 _ngcontent-hvi-c4="" class="tr">52</h2></div>

<div _ngcontent-hvi-c4="" class="views"><p _ngcontent-hvi-c4="" class="sub-text thead">Likes</p><h2 _ngcontent-hvi-c4="" class="tr">5462</h2></div>

<div _ngcontent-hvi-c4="" class="views"><p _ngcontent-hvi-c4="" class="sub-text thead">Profile Views</p><h2 _ngcontent-hvi-c4="" class="tr">52k</h2></div>

<div _ngcontent-hvi-c4="" class="views"><p _ngcontent-hvi-c4="" class="sub-text thead">Retweets</p><h2 _ngcontent-hvi-c4="" class="tr">117</h2></div>

<div _ngcontent-hvi-c4="" class="views"><p _ngcontent-hvi-c4="" class="sub-text thead">Likes</p><h2 _ngcontent-hvi-c4="" class="tr">117</h2></div>

<div _ngcontent-hvi-c4="" class="views"><p _ngcontent-hvi-c4="" class="sub-text thead">Likes</p><h2 _ngcontent-hvi-c4="" class="tr">107</h2></div>

<div _ngcontent-hvi-c4="" class="views"><p _ngcontent-hvi-c4="" class="sub-text thead">Total Views</p><h2 _ngcontent-hvi-c4="" class="tr">1407</h2></div>

hvi-c4=``><div _ngcontent-hvi-c4=`` class=`attribution dark-mode`><div _

ark-mode`><div _ngcontent-hvi-c4=`` class=`container`><div _

ontainer`><div _ngcontent-hvi-c4=`` class=`patternTop`></div>

op`></div><header _ngcontent-hvi-c4=`` id=`header` class=`section`><div _

`section`><div _ngcontent-hvi-c4=`` class=`title`><h3 _n

s=`title`><h3 _ngcontent-hvi-c4=``>Social

board</h3><p _ngcontent-hvi-c4=`` class=`sub-text`>Total

</p></div><div _ngcontent-hvi-c4=`` id=`swicth`><div _

=`swicth`><div _ngcontent-hvi-c4=`` class=`dflex`><div _

s=`dflex`><div _ngcontent-hvi-c4=`` class=`text sub-text`> Dark

ode </div><div _ngcontent-hvi-c4=`` class=`swicth-div`><input

icth-div`><input _ngcontent-hvi-c4=`` type=`checkbox` id=`darkmode`><label

darkmode`><label _ngcontent-hvi-c4=`` for=`darkmode`></labe

></header><section _ngcontent-hvi-c4=`` id=`social` class=`section sections-card`><div _

ons-card`><div _ngcontent-hvi-c4=`` class=`card social-card`><div _

ial-card`><div _ngcontent-hvi-c4=`` class=`header-color fb-card`></div>

rd`></div><a _ngcontent-hvi-c4=`` href=`#` class=`user-link`><span

ser-link`><span _ngcontent-hvi-c4=``><svg x

vg></span><span _ngcontent-hvi-c4=`` class=`sub-text`> @nath

/span></a><h1 _ngcontent-hvi-c4=``>1987</

>1987</h1><div _ngcontent-hvi-c4=`` class=`followers`><p _ng

ollowers`><p _ngcontent-hvi-c4=`` class=`sub-text`>follow

lowers</p><div _ngcontent-hvi-c4=`` class=`change-direction`><span

irection`><span _ngcontent-hvi-c4=``><svg x

vg></span><span _ngcontent-hvi-c4=`` class=`up`> 12 To

div></div><div _ngcontent-hvi-c4=`` class=`card social-card`><div _

ial-card`><div _ngcontent-hvi-c4=`` class=`header-color twr-card`></div>

/span></a><h1 _ngcontent-hvi-c4=``>1044</

>1044</h1><div _ngcontent-hvi-c4=`` class=`followers`><p _ng

vg></span><span _ngcontent-hvi-c4=`` class=`up`> 99 To

ial-card`><div _ngcontent-hvi-c4=`` class=`header-color inst-card`></div>

vg></span><span _ngcontent-hvi-c4=`` class=`sub-text`> @real

/span></a><h1 _ngcontent-hvi-c4=``>11K</h

`>11K</h1><div _ngcontent-hvi-c4=`` class=`followers`><p _ng

vg></span><span _ngcontent-hvi-c4=`` class=`up`> 1099

ial-card`><div _ngcontent-hvi-c4=`` class=`header-color ytb-card`></div>

vg></span><span _ngcontent-hvi-c4=`` class=`sub-text`> Natha

/span></a><h1 _ngcontent-hvi-c4=``>8239</

>8239</h1><div _ngcontent-hvi-c4=`` class=`followers`><p _ng

vg></span><span _ngcontent-hvi-c4=`` class=`down`> 144 T

</section><section _ngcontent-hvi-c4=`` class=`section`><div _

s=`title`><h3 _ngcontent-hvi-c4=`` class=`sub-text`> Overv

</section><section _ngcontent-hvi-c4=`` id=`overview` class=`section sections-card`><div _

ons-card`><div _ngcontent-hvi-c4=`` class=`card overview-card`><div _

iew-card`><div _ngcontent-hvi-c4=`` class=`views`><p

s=`views`><p _ngcontent-hvi-c4=`` class=`sub-text thead`>Page V

Views</p><h2 _ngcontent-hvi-c4=`` class=`tr`>87</h2

/h2></div><div _ngcontent-hvi-c4=`` class=`changed`><div _

`changed`><div _ngcontent-hvi-c4=`` class=`icon thead`><span

on thead`><span _ngcontent-hvi-c4=``><svg x

pan></div><div _ngcontent-hvi-c4=`` class=`views-raiting tr`><span

iting tr`><span _ngcontent-hvi-c4=``><svg x

vg></span><span _ngcontent-hvi-c4=`` class=`up`>3%</sp

div></div><div _ngcontent-hvi-c4=`` class=`card overview-card`><div _

iew-card`><div _ngcontent-hvi-c4=`` class=`views`><p _ng

s=`views`><p _ngcontent-hvi-c4=`` class=`sub-text thead`>Likes<

>Likes</p><h2 _ngcontent-hvi-c4=`` class=`tr`>52</h2

vg></span><span _ngcontent-hvi-c4=`` class=`down`>3%</sp

>Likes</p><h2 _ngcontent-hvi-c4=`` class=`tr`>5462</

20`><defs><linearGradient id=`a` x1=`100%` x2=`0%` y1=`0%` y2=`100%`><stop

s=`views`><p _ngcontent-hvi-c4=`` class=`sub-text thead`>Profil

Views</p><h2 _ngcontent-hvi-c4=`` class=`tr`>52k</h

Please log in to post a comment

Community feedback

Social Media Dashboard with Angular and SASS

Solution retrospective

Please log in to post a comment

Community feedback

Join our Discord community