<!--
~ Created this in more than 16+ hours
- More info on GitHub ;)
-->
<div class="dash">
<!-- HEADER -->
<header class="header">
<h1 class="header__heading"><a href="https://github.com/AbubakerSaeed/dashboard-ui-n20" target="_blank" rel="noreferrer noopener">DI</a></h1>
<div class="header__search">
<div class="header__search-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
</div>
<div class="header__options">
<button class="header__pro">GO PRO</button>
<a href="#" class="header__link">Log in</a>
<a href="#" class="header__link">Sign up</a>
</div>
</header>
<!-- BODY -->
<div class="body">
<!-- SIDEBAR -->
<div class="sidebar">
<div class="sidebar__icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
</div>
<div class="sidebar__icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</div>
<div class="sidebar__icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 4v12l-4-2-4 2V4M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</div>
<div class="sidebar__icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
</div>
<div class="sidebar__icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
</svg>
</div>
<div class="sidebar__icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</div>
</div>
<!-- MAIN -->
<main class="main">
<!-- COL-1 -->
<div class="main__col-1">
<!-- HEADING -->
<div>
<h2 class="main__heading"><span style="background: linear-gradient(to bottom, hsl(247, 88%, 70%), hsl(282, 82%, 51%)); box-shadow: 0 2px 12px hsla(247, 88%, 70%, .3)">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#fff">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg>
</span> Abubaker Saeed</h2>
<p class="main__desc">Mixtures of places that I've visited & traveled which are worth to check out again ^_^</p>
<p class="main__sub"><span>Profile Collaborators:</span> <span>Cloud Strife & Jack Sparrow</span></p>
</div>
<!-- LIST -->
<div class="main__list-heading-wrap">
<h2 class="main__list-heading ss-heading">Recently Visit</h2>
<a href="#" class="ss-show">show all</a>
</div>
<ul class="main__list">
<li class="main__list-item">
<div>
<p class="main__list-content">Center Point</p>
</div>
</li>
<li class="main__list-item">
<div class="main__list-content-wrap">
<p class="main__list-content">Masmak Fortress</p>
<p class="main__list-sub">My Favorite</p>
</div>
</li>
<li class="main__list-item">
<div class="main__list-item-image">
<img src="https://images.unsplash.com/photo-1470218091926-22a08a325802?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=40&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=40" alt="">
</div>
<div class="main__list-content-wrap">
<p class="main__list-content">Wadi Namar Waterfall</p>
<p class="main__list-sub">Relaxing</p>
</div>
</li>
<li class="main__list-item">
<div class="main__list-content-wrap">
<p class="main__list-content">Wadi Hanifah</p>
<p class="main__list-sub">At Last</p>
</div>
</li>
<li class="main__list-item">
<div class="main__list-content-wrap">
<p class="main__list-content">Heet Cave</p>
<p class="main__list-sub">Loved</p>
</div>
</li>
<li class="main__list-item">
<div class="main__list-item-image">
<img src="https://images.unsplash.com/photo-1575279146056-963c4a35627b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=40&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=40" alt="">
</div>
<div class="main__list-content-wrap">
<p class="main__list-content">Janadriyah Cultural & Heritage Festival</p>
<p class="main__list-sub">Cold</p>
</div>
</li>
</ul>
</div>
<!-- COL-2 -->
<div class="main__col-2">
<!-- CARDS -->
<div class="main__cards-container">
<div class="main__cards-container-heading-wrap">
<h2 class="main__cards-container-heading ss-heading">Traveling Plans</h2>
<a href="#" class="ss-show">show all</a>
</div>
<ul class="main__cards">
<li class="main__card" style="--hue: 25">
<div class="main__card-image-container">
<img src="https://images.unsplash.com/photo-1542037104857-ffbb0b9155fb?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=140&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=220" alt="" class="main__card-image">
</div>
<h3 class="main__card-heading">Daman-e-Koh</h3>
<p class="main__card-heading-sub">Pakistan</p>
<p class="main__card-heading-type">Visit</p>
</li>
<li class="main__card" style="--hue: 250">
<div class="main__card-image-container">
<img src="https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=140&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=220" alt="" class="main__card-image">
</div>
<h3 class="main__card-heading">Mahodand Lake</h3>
<p class="main__card-heading-sub">Pakistan</p>
<p class="main__card-heading-type">Visit</p>
</li>
<li class="main__card" style="--hue: 231;">
<div class="main__card-image-container">
<img src="https://images.unsplash.com/photo-1519677100203-a0e668c92439?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=140&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=220" alt="" class="main__card-image">
</div>
<h3 class="main__card-heading">London</h3>
<p class="main__card-heading-sub">England</p>
<p class="main__card-heading-type">Work</p>
</li>
</ul>
<div class="main__cards-pagination">
<span class="ss-dots">
<span></span>
<span></span>
<span></span>
</span>
<div class="main__cards-buttons">
<button style="opacity: .4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</button>
<button>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
</div>
</div>
<!-- CROSSING -->
<div class="main__crossing-container">
<div class="main__crossing-image">
<img src="https://images.unsplash.com/photo-1595064085577-7c2ef98ec311?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=70&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=70" alt="">
</div>
<div class="main__crossing-current">
<p class="main__crossing-upper">
Now crossing
</p>
<h3 class="main__crossing-heading">
Center Point
</h3>
</div>
</div>
<!-- DISCOVER -->
<div class="main__discover">
<div class="main__discover-heading-container">
<h3 class="main__discover-heading ss-heading">Discover More Places</h3>
<a href="#" class="ss-show">show all</a>
</div>
<ul class="main__discover-places">
<li class="main__discover-place">
<h4 class="main__discover-place-heading">Riyadh Zoo</h4>
<p class="main__discover-place-sub">Zoo</p>
<div class="main__discover__more">
<div class="main__discover__more-svg" style="background: linear-gradient(20deg, hsla(0, 60%, 50%, .2), hsla(20, 60%, 50%, .3));">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<defs>
<linearGradient id="myGradient1" gradientTransform="rotate(20)">
<stop offset="0%" stop-color="hsl(0, 60%, 50%)" />
<stop offset="50%" stop-color="hsl(20, 60%, 50%)" />
</linearGradient>
</defs>
<path d="M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009 17v-5.764a1 1 0 00-.553-.894l-4-2z" fill="url(#myGradient1)" />
</svg>
</div>
<span class="ss-dots">
<span></span>
<span></span>
<span></span>
</span>
</div>
</li>
<li class=" main__discover-place">
<h4 class="main__discover-place-heading">Snow City</h4>
<p class="main__discover-place-sub">Amusement park</p>
<div class="main__discover__more">
<div class="main__discover__more-svg" style="background: linear-gradient(20deg, hsla(280, 60%, 50%, .2), hsla(300, 60%, 50%, .3));">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<defs>
<linearGradient id="myGradient2" gradientTransform="rotate(20)">
<stop offset="0%" stop-color="hsl(280, 60%, 50%)" />
<stop offset="50%" stop-color="hsl(300, 60%, 50%)" />
</linearGradient>
</defs>
<path d="M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009 17v-5.764a1 1 0 00-.553-.894l-4-2z" fill="url(#myGradient2)" />
</svg>
</div>
<span class="ss-dots">
<span></span>
<span></span>
<span></span>
</span>
</div>
</li>
<li class="main__discover-place">
<h4 class="main__discover-place-heading">Safforiland</h4>
<p class="main__discover-place-sub">Amusement Park</p>
<div class="main__discover__more">
<div class="main__discover__more-svg" style="background: linear-gradient(20deg, hsla(210, 60%, 50%, .2), hsla(230, 60%, 50%, .3));">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<defs>
<linearGradient id="myGradient3" gradientTransform="rotate(20)">
<stop offset="0%" stop-color="hsl(210, 60%, 50%)" />
<stop offset="50%" stop-color="hsl(230, 60%, 50%)" />
</linearGradient>
</defs>
<path d="M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009 17v-5.764a1 1 0 00-.553-.894l-4-2z" fill="url(#myGradient3)" />
</svg>
</div>
<span class="ss-dots">
<span></span>
<span></span>
<span></span>
</span>
</div>
</li>
<li class="main__discover-place">
<h4 class="main__discover-place-heading">Nahda Park</h4>
<p class="main__discover-place-sub">Park and Garden</p>
<div class="main__discover__more">
<div class="main__discover__more-svg" style="background: linear-gradient(20deg, hsla(120, 60%, 50%, .2), hsla(140, 60%, 50%, .3));">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<defs>
<linearGradient id="myGradient4" gradientTransform="rotate(20)">
<stop offset="0%" stop-color="hsl(120, 60%, 50%)" />
<stop offset="50%" stop-color="hsl(140, 60%, 50%)" />
</linearGradient>
</defs>
<path d="M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009 17v-5.764a1 1 0 00-.553-.894l-4-2z" fill="url(#myGradient4)" />
</svg>
</div>
<span class="ss-dots">
<span></span>
<span></span>
<span></span>
</span>
</div>
</li>
<div class="main__discover-right">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</div>
</ul>
</div>
<!-- FOOTER -->
<footer class="main__footer">
<a href="#" class="main__footer-more ss-show">...more <span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span></a>
<div class="main__info">
<a href="https://twitter.com/AbubakerSaeed96/status/1329417170368016385" target="_blank" rel="noreferrer noopener" class="main__info-link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter">
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
</svg>
</a>
<a href="https://github.com/AbubakerSaeed/dashboard-ui-n20" target="_blank" rel="noreferrer noopener" class="main__info-link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github">
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
</svg>
</a>
<a href="https://dribbble.com/shots/14615615-Dashboard-UI" target="_blank" rel="noreferrer noopener" class="main__info-link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-dribbble">
<circle cx="12" cy="12" r="10"></circle>
<path d="M8.56 2.75c4.37 6.03 6.02 9.42 8.03 17.72m2.54-15.38c-3.72 4.35-8.94 5.66-16.88 5.85m19.5 1.9c-3.5-.93-6.63-.82-8.94 0-2.58.92-5.01 2.86-7.44 6.32"></path>
</svg>
</a>
<p class="main__cp" style="font-size: 1.4rem; text-align: center; ">
Copyright © <a href="https://twitter.com/AbubakerSaeed96" target="_blank" rel="noreferrer noopener" class="main__info-link" style="border-bottom: 1px solid hsla(270, 10%, 50%, .4);">Abubaker Saeed.</a>
</p>
<p class="main__cr">
<a href="https://colorpick.vercel.app" target="_blank" rel="noreferrer noopener">
<img src="https://colorpick.vercel.app/assets/white-with-name.png" alt="" height="50rem">
</a>
</p>
</div>
</footer>
</div>
</main>
</div>
</div>/*
===========================================
BEST VIEWED FULL SCREEN
codepen.io/AbubakerSaeed/full/eYzavLE
===========================================
*//*
======================================================
THE PROJECT IS OPEN-SOURCE ON GITHUB (MIT-LICENSE)
github.com/AbubakerSaeed/dashboard-ui-n20
======================================================
*/
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.