Skip to content

Commit

Permalink
formating the finished project..
Browse files Browse the repository at this point in the history
  • Loading branch information
@shahidafridi-321
shahidafridi-321 committed Jul 3, 2024
1 parent 0135579 commit ec55f26
Show file tree
Hide file tree
Showing 2 changed files with 269 additions and 188 deletions.
282 changes: 146 additions & 136 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,183 +1,191 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<meta href="https://shahidafridi-321.github.io/Admin-Dashboard/">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<title>Admin Dashboard</title>
</head>

<body>
<div class="main-container">
<header class="header">

<div class="header-top">
<img src="icons/search_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="" class="search-icon">
<input type="search" name="" id="searchbar">
<img src="icons/notifications_active_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<div class="profile-pic">
<img src="images/desired-outcome-narrow.png" alt="">
<div class="header-top">
<img src="icons/search_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="" class="search-icon">
<input type="search" name="" id="searchbar">
<img src="icons/notifications_active_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<div class="profile-pic">
<img src="images/desired-outcome-narrow.png" alt="">
</div>
<p class="name">Morgan Oakley</p>
</div>
<p class="name">Morgan Oakley</p>
</div>

<div class="header-bottom">
<div class="header-bottom">

<div class="profile-container">
<div class="profile-pic">
<img src="images/desired-outcome-narrow.png" alt="">
<div class="profile-container">
<div class="profile-pic">
<img src="images/desired-outcome-narrow.png" alt="">
</div>
<div class="description">
<p class="message">Hi there.</p>
<p class="name">Morgan Oakley(@morgon)</p>
</div>
</div>
<div class="description">
<p class="message">Hi there.</p>
<p class="name">Morgan Oakley(@morgon)</p>

<div class="buttons-container">
<button class="new">New</button>
<button class="upload">Upload</button>
<button class="share">Share</button>
</div>
</div>

<div class="buttons-container">
<button class="new">New</button>
<button class="upload">Upload</button>
<button class="share">Share</button>
</div>

</div>

</header>

<div class="main-content">
<div class="project-container">
<h2 class="level-2-titles">Your Projects</h2>
<div class="projects">
<div class="card">
<h2>Super Cool Project</h2>
<p>
Sed tempus ut lacus scelerisque.Suspendisse sollicitudin nibh erat,id facilisis felis accumsan nec.
</p>
<div class="icons">
<img src="icons/heart_plus_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<img src="icons/visibility_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<img src="icons/share_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<div class="main-content">
<div class="project-container">
<h2 class="level-2-titles">Your Projects</h2>
<div class="projects">
<div class="card">
<h2>Super Cool Project</h2>
<p>
Sed tempus ut lacus scelerisque.Suspendisse sollicitudin nibh erat,id facilisis felis accumsan nec.
</p>
<div class="icons">
<img src="icons/heart_plus_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<img src="icons/visibility_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<img src="icons/share_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
</div>
</div>
</div>
<div class="card">
<h2>Impossible App</h2>
<p>
In hac habitasse platea dictumst. Vivamus dictum rutrum arcu, a placerat velit sagittis id.
</p>
<div class="icons">
<img src="icons/heart_plus_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<img src="icons/visibility_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<img src="icons/share_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<div class="card">
<h2>Impossible App</h2>
<p>
In hac habitasse platea dictumst. Vivamus dictum rutrum arcu, a placerat velit sagittis id.
</p>
<div class="icons">
<img src="icons/heart_plus_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<img src="icons/visibility_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<img src="icons/share_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
</div>
</div>
</div>
<div class="card">
<h2>Ad Blocker</h2>
<p>
Quisque eget rutrum nisl. Nam augue justo, cursus vitae metus vel,pharetra hendrerit felis.Aliquam sed malesuada eros.
</p>
<div class="icons">
<img src="icons/heart_plus_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<img src="icons/visibility_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<img src="icons/share_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<div class="card">
<h2>Ad Blocker</h2>
<p>
Quisque eget rutrum nisl. Nam augue justo, cursus vitae metus vel,pharetra hendrerit felis.Aliquam sed
malesuada eros.
</p>
<div class="icons">
<img src="icons/heart_plus_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<img src="icons/visibility_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<img src="icons/share_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
</div>
</div>
</div>
<div class="card">
<h2>Less Cool Project</h2>
<p>Perferendis, hic doloremque alias expedita optiotatis magni necessitatibus, ab odit laboriosam </p>
<div class="icons">
<img src="icons/heart_plus_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<img src="icons/visibility_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<img src="icons/share_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<div class="card">
<h2>Less Cool Project</h2>
<p>Perferendis, hic doloremque alias expedita optiotatis magni necessitatibus, ab odit laboriosam </p>
<div class="icons">
<img src="icons/heart_plus_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<img src="icons/visibility_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<img src="icons/share_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
</div>
</div>
</div>
<div class="card">
<h2>Easy Peasy App</h2>
<p>Deserunt corrupti rem, ab odit laboriosam molestiae fuga odio voluptatum. Atque facere cum quia quaerat quas.</p>
<div class="icons">
<img src="icons/heart_plus_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<img src="icons/visibility_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<img src="icons/share_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<div class="card">
<h2>Easy Peasy App</h2>
<p>Deserunt corrupti rem, ab odit laboriosam molestiae fuga odio voluptatum. Atque facere cum quia quaerat
quas.</p>
<div class="icons">
<img src="icons/heart_plus_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<img src="icons/visibility_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<img src="icons/share_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
</div>
</div>
</div>
<div class="card">
<h2>Money Maker</h2>
<p>Lorem taque unde nam veritatis magni necessitatibus, ab odit laboriosam ia quaerat quas.</p>
<div class="icons">
<img src="icons/heart_plus_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<img src="icons/visibility_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<img src="icons/share_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<div class="card">
<h2>Money Maker</h2>
<p>Lorem taque unde nam veritatis magni necessitatibus, ab odit laboriosam ia quaerat quas.</p>
<div class="icons">
<img src="icons/heart_plus_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<img src="icons/visibility_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<img src="icons/share_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="annoucement">
<h2 class="level-2-titles">Annoucements</h2>
<div class="annoucement-card">
<h2>Site Maintenance</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga non magni earum perferendis, reprehenderit harum?</p>

<h2>Community Share Day</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi repellat quas voluptatem, eaque modi dolore.</p>
<div class="annoucement">
<h2 class="level-2-titles">Annoucements</h2>
<div class="annoucement-card">
<h2>Site Maintenance</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga non magni earum perferendis, reprehenderit
harum?</p>

<h2>Community Share Day</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi repellat quas voluptatem, eaque modi dolore.
</p>

<h2>Update Privacy Policy</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias culpa porro tenetur earum id. Nihil.</p>
</div>
<div class="trending">
<h2 class="level-2-titles">Trending</h2>
<div class="trending-card">
<div class="profiles">
<div class="profile-pic">
<img src="images/desired-outcome-narrow.png" class="profile-pic" alt="">
</div>
<div class="description">
<p class="name">@tegan</p>
<p class="bio">World Peace Builder</p>
</div>
<h2>Update Privacy Policy</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias culpa porro tenetur earum id. Nihil.</p>
</div>
<div class="profiles">
<div class="profile-pic">
<img src="images/desired-outcome-narrow.png" class="profile-pic" alt="">
</div>
<div class="description">
<p class="name">@morgan</p>
<p class="bio">Super Cool Project</p>
<div class="trending">
<h2 class="level-2-titles">Trending</h2>
<div class="trending-card">
<div class="profiles">
<div class="profile-pic">
<img src="images/desired-outcome-narrow.png" class="profile-pic" alt="">
</div>
<div class="description">
<p class="name">@tegan</p>
<p class="bio">World Peace Builder</p>
</div>
</div>
<div class="profiles">
<div class="profile-pic">
<img src="images/desired-outcome-narrow.png" class="profile-pic" alt="">
</div>
<div class="description">
<p class="name">@morgan</p>
<p class="bio">Super Cool Project</p>
</div>
</div>
<div class="profiles">
<div class="profile-pic">
<img src="images/desired-outcome-narrow.png" class="profile-pic" alt="">
</div>
<div class="description">
<p class="name">@kendal</p>
<p class="bio">Life Changing App</p>
</div>
</div>
<div class="profiles">
<div class="profile-pic">
<img src="images/desired-outcome-narrow.png" class="profile-pic" alt="">
</div>
<div class="description">
<p class="name">@alex</p>
<p class="bio">No Traffic Maker</p>
</div>
</div>
</div>
</div>
<div class="profiles">
<div class="profile-pic">
<img src="images/desired-outcome-narrow.png" class="profile-pic" alt="">
</div>
<div class="description">
<p class="name">@kendal</p>
<p class="bio">Life Changing App</p>
</div>
</div>
<div class="profiles">
<div class="profile-pic">
<img src="images/desired-outcome-narrow.png" class="profile-pic" alt="">
</div>
<div class="description">
<p class="name">@alex</p>
<p class="bio">No Traffic Maker</p>
</div>
<div class="trending">

</div>
</div>
</div>
<div class="trending">

</div>
</div>
</div>


<aside class="sidebar">
<h2 ><img src="icons/dashboard_48dp_FILL0_wght400_GRAD0_opsz48.svg" alt="" > <a href="#">Dashboard</a></h2>
<h2><img src="icons/dashboard_48dp_FILL0_wght400_GRAD0_opsz48.svg" alt=""> <a href="#">Dashboard</a></h2>

<ul class=".nav">

<li>
<li>
<img src="icons/home_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<a href="#"> Home</a>
</li>
Expand All @@ -186,7 +194,8 @@ <h2 ><img src="icons/dashboard_48dp_FILL0_wght400_GRAD0_opsz48.svg" alt="" > <a
<a href="#">Profile</a>
</li>
<li>
<img src="icons/mode_comment_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="" style="color: white;"> <span>Messages</span>
<img src="icons/mode_comment_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt="" style="color: white;">
<span>Messages</span>
</li>
<li>
<img src="icons/schedule_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt=""> <a href="#">History</a>
Expand Down Expand Up @@ -218,4 +227,5 @@ <h2 ><img src="icons/dashboard_48dp_FILL0_wght400_GRAD0_opsz48.svg" alt="" > <a

</div>
</body>

</html>
Loading

0 comments on commit ec55f26

Please sign in to comment.