Here is the index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portolio Dashboard</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="app-container">
<div class="app-header">
<div class="app-header-left">
<span class="app-icon"></span>
<p class="app-name">Portfolio</p>
<div class="search-wrapper">
<input type="text" class="search-input" placeholder="Search">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-search"
viewBox="0 0 24 24">
<defs></defs>
<circle cx="11" cy="11" r="8"></circle>
<path d="M21 21l-4.35-4.35"></path>
</svg>
</div>
</div>
<div class="app-header-right">
<button class="mode-switch" title="Switch Theme">
<svg class="moon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" width="24" height="24" viewBox="0 0 24 24">
<defs></defs>
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
</svg>
</button>
<button class="add-btn" title="Add New Projec">
<svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19" />
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
</button>
<button class="notification-btn">
<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-bell">
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
<path d="M13.73 21a2 2 0 0 1-3.46 0" />
</svg>
</button>
<button class="profile-btn">
<img src="https://techlead.co.in/wp-content/uploads/2023/02/dp.jpeg" alt="">
<span>The TechLead</span>
</button>
</div>
<button class="messages-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-message-circle">
<path
d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
</svg>
</button>
</div>
<div class="app-content">
<div class="app-sidebar">
<a href="" class="app-sidebar-link active">
<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-home">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
<polyline points="9 22 9 12 15 12 15 22" />
</svg>
</a>
<a href="" class="app-sidebar-link">
<svg class="link-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="feather feather-pie-chart" viewBox="0 0 24 24">
<defs />
<path d="M21.21 15.89A10 10 0 118 2.83M22 12A10 10 0 0012 2v10z" />
</svg>
</a>
<a href="" class="app-sidebar-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-calendar">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
<line x1="16" y1="2" x2="16" y2="6" />
<line x1="8" y1="2" x2="8" y2="6" />
<line x1="3" y1="10" x2="21" y2="10" />
</svg>
</a>
<a href="" class="app-sidebar-link">
<svg class="link-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="feather feather-settings" viewBox="0 0 24 24">
<defs />
<circle cx="12" cy="12" r="3" />
<path
d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" />
</svg>
</a>
</div>
<div class="projects-section">
<div class="projects-section-header">
<p>Projects</p>
<p class="time">December, 12</p>
</div>
<div class="projects-section-line">
<div class="projects-status">
<div class="item-status">
<span class="status-number">45</span>
<spn class="status-type">In Progress</spn>
</div>
<div class="item-status">
<span class="status-number">24</span>
<spn class="status-type">Upcoming</spn>
</div>
<div class="item-status">
<span class="status-number">62</span>
<spn class="status-type">Total Projects</spn>
</div>
</div>
<div class="view-actions">
<button class="view-btn list-view" title="List View">
<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-list">
<line x1="8" y1="6" x2="21" y2="6" />
<line x1="8" y1="12" x2="21" y2="12" />
<line x1="8" y1="18" x2="21" y2="18" />
<line x1="3" y1="6" x2="3.01" y2="6" />
<line x1="3" y1="12" x2="3.01" y2="12" />
<line x1="3" y1="18" x2="3.01" y2="18" />
</svg>
</button>
<button class="view-btn grid-view active" title="Grid View">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-grid">
<rect x="3" y="3" width="7" height="7" />
<rect x="14" y="3" width="7" height="7" />
<rect x="14" y="14" width="7" height="7" />
<rect x="3" y="14" width="7" height="7" />
</svg>
</button>
</div>
</div>
<div class="project-boxes jsGridView">
<div class="project-box-wrapper">
<div class="project-box" style="background-color: #fee4cb;">
<div class="project-box-header">
<span>December 10, 2022</span>
<div class="more-wrapper">
<button class="project-btn-more">
<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-more-vertical">
<circle cx="12" cy="12" r="1" />
<circle cx="12" cy="5" r="1" />
<circle cx="12" cy="19" r="1" />
</svg>
</button>
</div>
</div>
<div class="project-box-content-header">
<p class="box-content-header">Web Designing</p>
<p class="box-content-subheader">Prototyping</p>
</div>
<div class="box-progress-wrapper">
<p class="box-progress-header">Progress</p>
<div class="box-progress-bar">
<span class="box-progress" style="width: 60%; background-color: #ff942e;"></span>
</div>
<p class="box-progress-percentage">60%</p>
</div>
<div class="project-box-footer">
<div class="participants">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80"
alt="participant">
<img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fG1hbnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60"
alt="participant">
<button class="add-participant" style="color: #ff942e;">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<path d="M12 5v14M5 12h14" />
</svg>
</button>
</div>
<div class="days-left" style="color: #ff942e;">2 days Left</div>
</div>
</div>
</div>
<div class="project-box-wrapper">
<div class="project-box" style="background-color: #e9e7fd;">
<div class="project-box-header">
<span>December 10, 2020</span>
<div class="more-wrapper">
<button class="project-btn-more">
<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-more-vertical">
<circle cx="12" cy="12" r="1" />
<circle cx="12" cy="5" r="1" />
<circle cx="12" cy="19" r="1" />
</svg>
</button>
</div>
</div>
<div class="project-box-content-header">
<p class="box-content-header">Testing</p>
<p class="box-content-subheader">Prototyping</p>
</div>
<div class="box-progress-wrapper">
<p class="box-progress-header">Progress</p>
<div class="box-progress-bar">
<span class="box-progress" style="width: 50%; background-color: #4f3ff0"></span>
</div>
<p class="box-progress-percentage">50%</p>
</div>
<div class="project-box-footer">
<div class="participants">
<img src="https://images.unsplash.com/photo-1596815064285-45ed8a9c0463?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1215&q=80"
alt="participant">
<img src="https://images.unsplash.com/photo-1583195764036-6dc248ac07d9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2555&q=80"
alt="participant">
<button class="add-participant" style="color: #4f3ff0;">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<path d="M12 5v14M5 12h14" />
</svg>
</button>
</div>
<div class="days-left" style="color: #4f3ff0;">
2 Days Left
</div>
</div>
</div>
</div>
<div class="project-box-wrapper">
<div class="project-box">
<div class="project-box-header">
<span>December 10, 2020</span>
<div class="more-wrapper">
<button class="project-btn-more">
<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-more-vertical">
<circle cx="12" cy="12" r="1" />
<circle cx="12" cy="5" r="1" />
<circle cx="12" cy="19" r="1" />
</svg>
</button>
</div>
</div>
<div class="project-box-content-header">
<p class="box-content-header">Svg Animations</p>
<p class="box-content-subheader">Prototyping</p>
</div>
<div class="box-progress-wrapper">
<p class="box-progress-header">Progress</p>
<div class="box-progress-bar">
<span class="box-progress" style="width: 80%; background-color: #096c86"></span>
</div>
<p class="box-progress-percentage">80%</p>
</div>
<div class="project-box-footer">
<div class="participants">
<img src="https://images.unsplash.com/photo-1587628604439-3b9a0aa7a163?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjR8fHdvbWFufGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60"
alt="participant">
<img src="https://images.unsplash.com/photo-1596815064285-45ed8a9c0463?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1215&q=80"
alt="participant">
<button class="add-participant" style="color: #096c86;">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<path d="M12 5v14M5 12h14" />
</svg>
</button>
</div>
<div class="days-left" style="color: #096c86;">
2 Days Left
</div>
</div>
</div>
</div>
<div class="project-box-wrapper">
<div class="project-box" style="background-color: #ffd3e2;">
<div class="project-box-header">
<span>December 10, 2020</span>
<div class="more-wrapper">
<button class="project-btn-more">
<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-more-vertical">
<circle cx="12" cy="12" r="1" />
<circle cx="12" cy="5" r="1" />
<circle cx="12" cy="19" r="1" />
</svg>
</button>
</div>
</div>
<div class="project-box-content-header">
<p class="box-content-header">UI Development</p>
<p class="box-content-subheader">Prototyping</p>
</div>
<div class="box-progress-wrapper">
<p class="box-progress-header">Progress</p>
<div class="box-progress-bar">
<span class="box-progress" style="width: 20%; background-color: #df3670"></span>
</div>
<p class="box-progress-percentage">20%</p>
</div>
<div class="project-box-footer">
<div class="participants">
<img src="https://images.unsplash.com/photo-1600486913747-55e5470d6f40?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80"
alt="participant">
<img src="https://images.unsplash.com/photo-1587628604439-3b9a0aa7a163?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjR8fHdvbWFufGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60"
alt="participant">
<button class="add-participant" style="color: #df3670;">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<path d="M12 5v14M5 12h14" />
</svg>
</button>
</div>
<div class="days-left" style="color: #df3670;">
2 Days Left
</div>
</div>
</div>
</div>
<div class="project-box-wrapper">
<div class="project-box" style="background-color: #c8f7dc;">
<div class="project-box-header">
<span>December 10, 2020</span>
<div class="more-wrapper">
<button class="project-btn-more">
<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-more-vertical">
<circle cx="12" cy="12" r="1" />
<circle cx="12" cy="5" r="1" />
<circle cx="12" cy="19" r="1" />
</svg>
</button>
</div>
</div>
<div class="project-box-content-header">
<p class="box-content-header">Data Analysis</p>
<p class="box-content-subheader">Prototyping</p>
</div>
<div class="box-progress-wrapper">
<p class="box-progress-header">Progress</p>
<div class="box-progress-bar">
<span class="box-progress" style="width: 60%; background-color: #34c471"></span>
</div>
<p class="box-progress-percentage">60%</p>
</div>
<div class="project-box-footer">
<div class="participants">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80"
alt="participant">
<img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fG1hbnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60"
alt="participant">
<button class="add-participant" style="color: #34c471;">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<path d="M12 5v14M5 12h14" />
</svg>
</button>
</div>
<div class="days-left" style="color: #34c471;">
2 Days Left
</div>
</div>
</div>
</div>
<div class="project-box-wrapper">
<div class="project-box" style="background-color: #d5deff;">
<div class="project-box-header">
<span>December 10, 2020</span>
<div class="more-wrapper">
<button class="project-btn-more">
<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-more-vertical">
<circle cx="12" cy="12" r="1" />
<circle cx="12" cy="5" r="1" />
<circle cx="12" cy="19" r="1" />
</svg>
</button>
</div>
</div>
<div class="project-box-content-header">
<p class="box-content-header">Web Designing</p>
<p class="box-content-subheader">Prototyping</p>
</div>
<div class="box-progress-wrapper">
<p class="box-progress-header">Progress</p>
<div class="box-progress-bar">
<span class="box-progress" style="width: 40%; background-color: #4067f9"></span>
</div>
<p class="box-progress-percentage">40%</p>
</div>
<div class="project-box-footer">
<div class="participants">
<img src="https://images.unsplash.com/photo-1600486913747-55e5470d6f40?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80"
alt="participant">
<img src="https://images.unsplash.com/photo-1583195764036-6dc248ac07d9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2555&q=80"
alt="participant">
<button class="add-participant" style="color: #4067f9;">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<path d="M12 5v14M5 12h14" />
</svg>
</button>
</div>
<div class="days-left" style="color: #4067f9;">
2 Days Left
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Message section -->
<div class="messages-section">
<button class="messages-close">
<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-x-circle">
<circle cx="12" cy="12" r="10" />
<line x1="15" y1="9" x2="9" y2="15" />
<line x1="9" y1="9" x2="15" y2="15" />
</svg>
</button>
<div class="projects-section-header">
<p>Client Messages</p>
</div>
<div class="messages">
<div class="message-box">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80"
alt="profile image">
<div class="message-content">
<div class="message-header">
<div class="name">Stephanie</div>
<div class="star-checkbox">
<input type="checkbox" id="star-1">
<label for="star-1">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-star">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
</svg>
</label>
</div>
</div>
<p class="message-line">I got your first assignment. It wasquite good. We can continue with
the next assignment.</p>
<p class="message-line time">Dec, 12</p>
</div>
</div>
<div class="message-box">
<img src="https://images.unsplash.com/photo-1600486913747-55e5470d6f40?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80"
alt="profile image">
<div class="message-content">
<div class="message-header">
<div class="name">Mark</div>
<div class="star-checkbox">
<input type="checkbox" id="star-2">
<label for="star-2">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-star">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
</svg>
</label>
</div>
</div>
<p class="message-line">
Hey, can tell me about progress of project? I'm waiting for your response.
</p>
<p class="message-line time">
Dec, 12
</p>
</div>
</div>
<div class="message-box">
<img src="https://images.unsplash.com/photo-1543965170-4c01a586684e?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NDZ8fG1hbnxlbnwwfDB8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60"
alt="profile image">
<div class="message-content">
<div class="message-header">
<div class="name">David</div>
<div class="star-checkbox">
<input type="checkbox" id="star-3">
<label for="star-3">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-star">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
</svg>
</label>
</div>
</div>
<p class="message-line">
Awesome! 🤩 I like it. We can schedule a meeting for the next one.
</p>
<p class="message-line time">
Dec, 12
</p>
</div>
</div>
<div class="message-box">
<img src="https://images.unsplash.com/photo-1533993192821-2cce3a8267d1?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTl8fHdvbWFuJTIwbW9kZXJufGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60"
alt="profile image">
<div class="message-content">
<div class="message-header">
<div class="name">Jessica</div>
<div class="star-checkbox">
<input type="checkbox" id="star-4">
<label for="star-4">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-star">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
</svg>
</label>
</div>
</div>
<p class="message-line">
I am really impressed! Can't wait to see the final result.
</p>
<p class="message-line time">
Dec, 11
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>Here is the style.css file
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap");
* {
box-sizing: border-box;
}
:root {
--app-container: #f3f6fd;
--main-color: #1f1c2e;
--secondary-color: #4a4a4a;
--link-color: #1f1c2e;
--link-color-hover: #c3cff4;
--link-color-active: #fff;
--link-color-active-bg: #1f1c2e;
--projects-section: #fff;
--message-box-hover: #fafcff;
--message-box-border: #e9ebf0;
--more-list-bg: #fff;
--more-list-bg-hover: #f6fbff;
--more-list-shadow: rgba(209, 209, 209, 0.4);
--button-bg: #1f1c24;
--search-area-bg: #fff;
--star: #1ff1c2e;
--message-btn: #fff;
}
.dark:root {
--app-container: #1f1d2b;
--app-container: #111827;
--main-color: #fff;
--secondary-color: rgba(255, 255, 255, 0.8);
--projects-section: #1f2937;
--link-color: rgba(255, 255, 255, 0.8);
--link-color-hover: rgba(195, 207, 244, 0.1);
--link-color-active-bg: rgba(195, 207, 244, 0.2);
--button-bg: #1f2937;
--search-area-bg: #1f2937;
--message-box-hover: #243244;
--message-box-border: rgba(255, 255, 255, 0.1);
--star: #ffd92c;
--light-font: rgba(255, 255, 255, 0.8);
--more-list-bg: #2f3142;
--more-list-bg-hover: rgba(195, 207, 244, 0.1);
--more-list-shadow: rgba(195, 207, 244, 0.1);
--message-btn: rgba(195, 207, 244, 0.1);
}
html,
body {
width: 100%;
height: 100vh;
margin: 0;
}
body {
font-family: "DM Sans", sans-serif;
overflow: hidden;
display: flex;
justify-content: center;
background-color: var(--app-container);
}
button,
a {
cursor: pointer;
}
.app-container {
width: 100%;
display: flex;
flex-direction: column;
height: 100%;
background-color: var(--app-container);
transition: 0.2s;
max-width: 1800px;
}
.app-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 16px 24px;
position: relative;
}
.app-header-left,
.app-header-right {
display: flex;
align-items: center;
}
.app-header-left {
flex-grow: 1;
}
.app-header-right button {
margin-left: 10px;
}
.app-icon {
width: 26px;
height: 2px;
border-radius: 4px;
background-color: var(--main-color);
position: relative;
}
.app-icon:before,
.app-icon:after {
content: "";
position: absolute;
width: 12px;
height: 2px;
border-radius: 4px;
background-color: var(--main-color);
left: 50%;
transform: translateX(-50%);
}
.app-icon:before {
top: -6px;
}
.app-icon:after {
bottom: -6px;
}
.app-name {
color: var(--main-color);
margin: 0;
font-size: 20px;
line-height: 24px;
font-weight: 700;
margin: 0 32px;
}
.search-wrapper {
border-radius: 20px;
background-color: var(--search-area-bg);
padding-right: 12px;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 480px;
color: var(--light-font);
box-shadow: 0 2px 6px 0 rgba(136, 148, 171, 0.2), 0 24px 20px -24px rgba(71, 82, 107, 0.1);
overflow: hidden;
}
.dark .search-wrapper {
box-shadow: none;
}
.search-input {
border: none;
flex: 1;
outline: none;
height: 100%;
padding: 0 20px;
font-size: 16px;
background-color: var(--search-area-bg);
color: var(--main-color);
}
.search-input:placeholder {
color: var(--main-color);
opacity: 0.6;
}
.mode-switch {
background-color: transparent;
border: none;
padding: 0;
color: var(--main-color);
display: flex;
justify-content: center;
align-items: center;
}
.add-btn {
color: #fff;
background-color: var(--button-bg);
padding: 0;
border: 0;
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.notification-btn {
color: var(--main-color);
padding: 0;
border: 0;
background-color: transparent;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
}
.profile-btn {
padding: 0;
border: 0;
background-color: transparent;
display: flex;
align-items: center;
padding-left: 12px;
border-left: 2px solid #ddd;
}
.profile-btn img {
width: 32px;
height: 32px;
-o-object-fit: cover;
object-fit: cover;
border-radius: 50%;
margin-right: 4px;
}
.profile-btn span {
color: var(--main-color);
font-size: 16px;
line-height: 24px;
font-weight: 700;
}
.messages-btn {
border-radius: 4px 0 0 4px;
position: absolute;
right: 0;
top: 58px;
background-color: var(--message-btn);
border: none;
color: var(--main-color);
display: flex;
justify-content: center;
align-items: center;
padding: 4px;
display: none;
}
.app-content {
display: flex;
height: 100%;
overflow: hidden;
padding: 16px 24px 24px 0;
}
.app-sidebar {
padding: 40px 16px;
display: flex;
flex-direction: column;
align-items: center;
}
.app-sidebar-link {
color: var(--link-color);
margin: 16px 0;
transition: 0.2s;
border-radius: 50%;
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.app-sidebar-link:hover {
background-color: var(--link-color-hover);
color: var(--link-color-active);
}
.app-sidebar-link.active {
background-color: var(--link-color-active-bg);
color: var(--link-color-active);
}
.projects-section {
flex: 2;
background-color: var(--projects-section);
border-radius: 32px;
padding: 32px 32px 0 32px;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
}
.projects-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
color: var(--main-color);
}
.projects-section-header .time {
font-size: 20px;
}
.projects-section-header p {
font-size: 24px;
line-height: 32px;
font-weight: 700;
opacity: 0.9;
margin: 0;
color: var(--main-color);
}
.projects-section-line {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
color: var(--main-color);
}
.projects-status {
display: flex;
}
.item-status {
display: flex;
flex-direction: column;
margin-right: 16px;
}
.item-status:not(:last-child) .status-type:after {
content: "";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
border: 1px solid var(--secondary-color);
}
.status-number {
font-size: 24px;
line-height: 32px;
font-weight: 700;
color: var(--main-color);
}
.status-type {
position: relative;
padding-right: 24px;
color: var(--secondary-color);
}
.view-actions {
display: flex;
align-items: center;
}
.view-btn {
width: 36px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
padding: 6px;
border-radius: 4px;
background-color: transparent;
border: none;
color: var(--main-color);
margin-left: 8px;
transition: 0.2s;
}
.view-btn.active {
background-color: var(--link-color-active-bg);
color: var(--link-color-active);
}
.view-btn:not(.active):hover {
background-color: var(--link-color-hover);
color: var(--link-color-active);
}
.project-boxes {
margin: 0 -8px;
overflow-y: auto;
}
.project-boxes.jsGridView {
display: flex;
flex-wrap: wrap;
}
.project-boxes.jsGridView .project-box-wrapper {
width: 33.3%;
}
.project-boxes.jsListView .project-box {
display: flex;
border-radius: 10px;
position: relative;
}
.project-boxes.jsListView .project-bo>* {
margin-right: 24px;
}
.project-boxes.jsListView .more-wrapper {
position: absolute;
right: 16px;
top: 16px;
}
.project-boxes.jsListView .project-box-content-header {
order: 1;
max-width: 120px;
}
.project-boxes.jsListView .project-box-header {
order: 2;
}
.project-boxes.jsListView .project-box-footer {
order: 3;
padding-top: 0;
flex-direction: column;
justify-content: flex-start;
}
.project-boxes.jsListView .project-box-footer:after {
display: none;
}
.project-boxes.jsListView .participants {
margin-bottom: 8px;
}
.project-boxes.jsListView .project-box-content-header p {
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.project-boxes.jsListView .project-box-header>span {
position: absolute;
bottom: 16px;
left: 16px;
font-size: 12px;
}
.project-boxes.jsListView .box-progress-wrapper {
order: 3;
flex: 1;
}
.project-box {
--main-color-card: #dbf6fd;
border-radius: 30px;
padding: 16px;
background-color: var(--main-color-card);
}
.project-box-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
color: var(--main-color);
}
.project-box-header span {
color: #4a4a4a;
opacity: 0.7;
font-size: 14px;
line-height: 16px;
}
.project-box-content-header {
text-align: center;
margin-bottom: 16px;
}
.project-box-content-header p {
margin: 0;
}
.project-box-wrapper {
padding: 8px;
transition: 0.2s;
}
.project-btn-more {
padding: 0;
height: 14px;
width: 24px;
height: 24px;
position: relative;
background-color: transparent;
border: none;
flex-shrink: 0;
}
.more-wrapper {
position: relative;
}
.box-content-header {
font-size: 16px;
line-height: 24px;
font-weight: 700;
opacity: 0.7;
}
.box-content-subheader {
font-size: 14px;
line-height: 24px;
opacity: 0.7;
}
.box-progress {
display: block;
height: 4px;
border-radius: 6px;
}
.box-progress-bar {
width: 100%;
height: 4px;
border-radius: 6px;
overflow: hidden;
background-color: #fff;
margin: 8px 0;
}
.box-progress-header {
font-size: 14px;
font-weight: 700;
line-height: 16px;
margin: 0;
}
.box-progress-percentage {
text-align: right;
margin: 0;
font-size: 14px;
font-weight: 700;
line-height: 16px;
}
.project-box-footer {
display: flex;
justify-content: space-between;
padding-top: 16px;
position: relative;
}
.project-box-footer:after {
content: "";
position: absolute;
background-color: rgba(255, 255, 255, 0.6);
width: calc(100% + 32px);
top: 0;
left: -16px;
height: 1px;
}
.participants {
display: flex;
align-items: center;
}
.participants img {
width: 20px;
height: 20px;
border-radius: 50%;
overflow: hidden;
object-fit: cover;
-o-object-fit: cover;
}
.participants img:not(:first-child) {
margin-left: -8px;
}
.add-participant {
width: 20px;
height: 20px;
border-radius: 50%;
border: none;
background-color: rgba(255, 255, 255, 0.6);
margin-left: 6px;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
}
.days-left {
background-color: rgba(255, 255, 255, 0.6);
font-size: 12px;
border-radius: 20px;
flex-shrink: 0;
padding: 6px 16px;
font-weight: 700;
}
.mode-switch.active .moon {
fill: var(--main-color);
}
.messages-section {
flex-shrink: 0;
padding-bottom: 32px;
background-color: var(--projects-section);
margin-left: 24px;
flex: 1;
width: 100%;
border-radius: 30px;
position: relative;
overflow: auto;
transition: all 300ms cubic-bezier(0.19, 1, 0.56, 1);
}
.messages-section .messages-close {
position: absolute;
top: 12px;
right: 12px;
z-index: 3;
border: none;
background-color: transparent;
color: var(--main-color);
display: none;
}
.messages-section.show {
transform: translateX(0);
opacity: 1;
margin-left: 0;
}
.messages-section .projects-section-header {
position: sticky;
top: 0;
z-index: 1;
padding: 32px 24px 0 24px;
background-color: var(--projects-section);
}
.message-box {
border-top: 1px solid var(--message-box-border);
padding: 16px;
display: flex;
align-items: flex-start;
width: 100%;
}
.message-box:hover {
background-color: var(--message-box-hover);
border-top-color: var(--link-color-hover);
}
.message-box:hover+.message-box {
border-top-color: var(--link-color-hover);
}
.message-box img {
border-radius: 50%;
object-fit: cover;
-o-object-fit: cover;
width: 40px;
height: 40px;
}
.message-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.message-header .name {
font-size: 16px;
line-height: 24px;
font-weight: 700;
color: var(--main-color);
margin: 0;
}
.message-content {
padding-left: 16px;
width: 100%;
}
.star-checkbox input {
opacity: 0;
position: absolute;
width: 0;
height: 0;
}
.star-checkbox label {
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.dark .star-checkbox {
color: var(--secondary-color);
}
.dark .star-checkbox input:checked+label {
color: var(--star);
}
.star-checkbox input:checked+label svg {
fill: var(--star);
transition: 0.2s;
}
.message-line {
font-size: 14px;
line-height: 20px;
margin: 8px 0;
color: var(--secondary-color);
opacity: 0.7;
}
.message-line.time {
text-align: right;
margin-bottom: 0;
}
@media screen and (max-width: 980px) {
.project-boxes.jsGridView .project-box-wrapper {
width: 50%;
}
.status-number,
.status-type {
font-size: 14px;
}
.status-type:after {
width: 4px;
height: 4px;
}
.item-status {
margin-right: 0;
}
}
@media screen and (max-width: 880px) {
.messages-section {
transform: translateX(100%);
position: absolute;
opacity: 0;
top: 0;
z-index: 2;
height: 100%;
width: 100%;
}
.messages-section .messages-close {
display: block;
}
.messages-btn {
display: flex;
}
}
@media screen and (max-width: 720px) {
.app-name,
.profile-btn span {
display: none;
}
.add-btn,
.notification-btn,
.mode-switch {
width: 20px;
height: 20px;
}
.add-btn svg,
.notification-btn svg,
.mode-switch svg {
width: 16px;
height: 16px;
}
.app-header-right button {
margin-left: 4px;
}
}
@media screen and (max-width: 520px) {
.projects-section {
overflow: auto;
}
.project-boxes {
overflow-y: visible;
}
.app-sidebar,
.app-icon {
display: none;
}
.app-content {
padding: 16px 12px 24px 12px;
}
.status-number,
.status-type {
font-size: 10px;
}
.view-btn {
width: 24px;
height: 24px;
}
.app-header {
padding: 16px 10px;
}
.search-input {
max-width: 120px;
}
.project-boxes.jsGridView .project-box-wrapper {
width: 100%;
}
.projects-section {
padding: 24px 16px 0 16px;
}
.profile-btn img {
width: 24px;
height: 24px;
}
.app-header {
padding: 10px;
}
.projects-section-header p,
.projects-section-header .time {
font-size: 18px;
}
.status-type {
padding-right: 4px;
}
.status-type:after {
display: none;
}
.search-input {
font-size: 14px;
}
.messages-btn {
top: 48px;
}
.box-content-header {
font-size: 12px;
line-height: 16px;
}
.box-content-subheader {
font-size: 12px;
line-height: 16px;
}
.project-boxes.jsListView .project-box-header>span {
font-size: 10px;
}
.box-progress-header {
font-size: 12px;
}
.box-progress-percentage {
font-size: 10px;
}
.days-left {
font-size: 8px;
padding: 6px 6px;
text-align: center;
}
.project-boxes.jsListView .project-box>* {
margin-right: 10px;
}
.project-boxes.jsListView .more-wrapper {
right: 2px;
top: 10px;
}
}Here is the script.js file
document.addEventListener("DOMContentLoaded", () => {
let modeSwitch = document.querySelector(".mode-switch");
modeSwitch.addEventListener("click", () => {
document.documentElement.classList.toggle("dark")
})
let listView = document.querySelector(".list-view")
let gridView = document.querySelector(".grid-view")
let projectsList = document.querySelector(".project-boxes")
listView.addEventListener("click", () => {
gridView.classList.remove("active")
listView.classList.add("active")
projectsList.classList.remove("jsGridView")
projectsList.classList.add("jsListView")
})
gridView.addEventListener("click", () => {
gridView.classList.add("active")
listView.classList.remove("active")
projectsList.classList.add("jsGridView")
projectsList.classList.remove("jsListView")
})
document.querySelector(".messages-btn").addEventListener("click", () => {
document.querySelector(".messages-section").classList.add("show")
})
document.querySelector(".messages-close").addEventListener("click", () => {
document.querySelector(".messages-section").classList.remove("show")
})
})Happy coding 😍
онлайн займы на карту срочно [url=https://bystryj-zajm-na-kartu-bez-otkazov-onlajn.ru/]https://bystryj-zajm-na-kartu-bez-otkazov-onlajn.ru/[/url].
Hello guys! Good article The TechLead – Coding is FUN
О ссылке Mega сайт – мега платформа начала активно развиваться с момента исчезновения hydra. Благодаря хорошей подготовке и листингу на зарубежных сайтах мы смогли сделать, чтобы mega стала пуленепробиваемым сайтом, чего не смогли наши конкуренты. Мы вкладываем всю работу в развитие данного маркета, лучшие программисты Евразии работают день и ночь, чтобы ресурс имел превосходство над другими. MEGA сайт позволяет пользователям быть всегда на связи и молниеносно приобретать клады. Наш магазин оснащен системой защиты, которая модернизируется каждый день. Попробуй и ты качественый сервис, который заслуживает твоего внимания – Мега https://xn--mgasb-6za.com.
mega площадка
мега магазин
мега сайт даркнет ссылка
[url=https://xn--mg-8ma3631a.com]mega link [/url]
The TechLead – Coding is FUN
–
Хотите попасть на крупнейший в России сайт торговой площадки MEGA? Тогда стоит просто перейти по ссылке https://xn--mg-8ma3631a.com После потребуется только ввести капчу и пройти авторизацию или регистрацию на проекте. Займет это буквально минуту и вы быстро попадете на проект MEGA. Tor браузер для этого не нужен. При этом сама площадка гарантирует безопасность, анонимность и высокую скорость работы. Площадка mega mega darknet market предлагает своим пользователем доступ к своеобразному маркетплейсу, который позволяет купить любые товары буквально за несколько секунд. Главное тщательно изучить предложения и выбрать наиболее выгодное для себя. особенно стоит обратить внимание на отзывы на проекте, которые помогут подобрать надежного продавца.
[url=https://xn--meg-sb-yoc.com ]mega ссылка [/url]
Хотите найти место, где можно купить все, что угодно? Тогда вам подойдет сайт МЕГА mega даркнет, у нас вы можете покупать и продавать, совершенно не беспокоясь о своей анонимности. Лучшие условия на просторах мирового даркнета. Мы работаем по всем странам мира. На сайте Вы сможете найти для себя нужные вещи. мега магазин – это уникальная площадка и мы предоставляем вам ссылку на официальное зеркало MEGA от администрации проекта. Нужно только перейти по ней, зайти на сайт и подобрать нужные для себя вещи. Площадка полностью анонимна, работает 24/7, а кроме того, не требует соединения TOR или VPN. Достаточно перейти на МЕГА официальный сайт мега market и начать работу с проектом. Для этого понадобится простая регистрация, и буквально несколько кликов. А при возникновении любых трудностей вы всегда можете обратиться к администрации проекта.
[url=https://xn--meg-cla.com]мега магазин [/url]
система натяжных потолков
натяжные потолки цена [url=https://natyazhnye-potolki-moskva24.ru/]https://natyazhnye-potolki-moskva24.ru/[/url].
Купить шкаф на заказ
шкафы купе на заказ по индивидуальным размерам [url=https://www.shkafy-kupe-na-zakaz-po-razmeram.ru]https://www.shkafy-kupe-na-zakaz-po-razmeram.ru[/url].
основание для плитки
ремонт квартир в москве под ключ цена [url=http://www.ceny-na-otdelochnye-raboty.ru/]http://www.ceny-na-otdelochnye-raboty.ru/[/url].
Арбитр по преступным действиям
адвокат по уголовным делам экономические преступления [url=https://advokat-po-ehkonomicheskim-prestupleniyam.ru]https://advokat-po-ehkonomicheskim-prestupleniyam.ru[/url].
какая цена на ремонт квартиры
ремонт квартир стоимость за м2 москва [url=http://ceny-na-otdelku-kvartiry.ru/]http://ceny-na-otdelku-kvartiry.ru/[/url].
Оплата технической экспертизы строительства
строительно техническая экспертиза цена ее проведения [url=http://www.expertiza54.store/]http://www.expertiza54.store/[/url].
Вы найдете что-то для себя в стриптиз клубе
стриптиз клуб [url=https://hb-club11.ru]https://hb-club11.ru[/url].
Какие Факторы Существенно Влияют На Предлагаемую Цену Технической Экспертизы Строительных Объектов?
комплексная строительно техническая экспертиза цена [url=http://expertiza-54.store]http://expertiza-54.store[/url].
Заказывайте шины TOYO прямо сейчас – Все, что Вам нужно!
купить шины toyo open country [url=https://www.best-tyres1.ru]https://www.best-tyres1.ru[/url].
Hi!
Looking for a fast and easy way to invest your money? Try binary options trading! Our platform offers fast trades, secure transactions and returns of up to 900%. Start with just $10 and experience the thrill of investing for yourself. #binaryoptions #investing #profits
Earn every minute without limit of $100, $500, $1,000, with a minimum bet of $1.
Instant withdrawal!!!
WARNING! If you are trying to access the site from the following countries, you need to enable VPN which does not apply to the following countries!
Australia, Canada, USA, Japan, UK, EU (all countries), Israel, Russia, Iran, Iraq, Korea, Central African Republic, Congo, Cote d’Ivoire, Eritrea, Ethiopia, Lebanon, Liberia, Libya, Mali, Mauritius, Myanmar, New Zealand, Saint Vincent and the Grenadines, Somalia, Sudan, Syria, Vanuatu, Yemen, Zimbabwe.
Sign up and start earning from the first minute!
https://trkmad.com/101773
Крыша на века: выбор черепицы имеет значение
сайдинг цена металлический [url=http://www.metallocherepica24.ru/]http://www.metallocherepica24.ru/[/url].
Качественные финские дома
строительство финских каркасных домов под ключ проекты [url=https://www.finskie-doma78.ru]https://www.finskie-doma78.ru[/url].
Найдите бюджетное решение для Вашего дома
строительство финских каркасных домов под ключ в СПБ [url=https://finskie-doma98.ru]https://finskie-doma98.ru[/url].
Оригинальные финские дома из легких материалов
финский дом под ключ спб [url=http://finskie-doma198.ru/]http://finskie-doma198.ru/[/url].
Качественные и индивидуальные курсовые работы по доступным ценам
отчет по практике в школе [url=http://www.magistr-nsk.ru]http://www.magistr-nsk.ru[/url].
Техники почерковой экспертизы: что нужно знать
почерковедческая экспертиза [url=http://www.expertiza154.store]http://www.expertiza154.store[/url].
Оптимальное решение для приобретения курсовой работы – здесь и сейчас!
стоимость реферата [url=https://best-students.ru]https://best-students.ru[/url].
The TechLead – Coding is FUN
–
Hello guys! Nice Article! Please Read!
Чтобы начать пользоваться площадкой, вам необходимо зарегистрироваться на сайте. Просто кликните по активной ссылке mega магазин и вы окажетесь на официальном магазине MEGA. Здесь вы сможете насладиться безопасными и удобными покупками, а также, при желании, начать собственный бизнес, предлагая свои продукты на платформе. На площадке представлено большое количество карточек от разных продавцов, поэтому, проведя немного больше времени на поиск, вы сможете найти наиболее привилегированное предложение для себя. Не стоит останавливаться на первом попавшемся товаре. Ищите лучшее и обязательно найдете то, что ищете.
Помощь с дипломом на заказ
заказать чертеж [url=http://www.studlink.ru/]http://www.studlink.ru/[/url].
Купить качественную курсовую работу
контрольная работа по физике [url=https://www.magistr51.ru/]https://www.magistr51.ru/[/url].
Услуги барбекю кейтеринга
барбекю кейтеринг москва [url=http://www.barbekyu-kejtering.ru]http://www.barbekyu-kejtering.ru[/url].
Безупречные фуршетные наборы
фуршетные закуски заказать в москве [url=http://www.furshetnye-nabory-dostavka.ru]http://www.furshetnye-nabory-dostavka.ru[/url].
Фен Стайлер Дайсон: Уникальный Выбор Для Вашей Защиты Волос
дайсон стайлер купить [url=https://stayler-dyson.ru/]https://stayler-dyson.ru/[/url].
Hello guys! Nice article The TechLead – Coding is FUN
мега сб
[url=https://xn--mg-8ma3631a.com]мега сб[/url]
mega fo
мега ссылка
ссылка мега
mega darknet
mega nz
ph99bcoma
Коронарография: диагностика и профилактика сердечно-сосудистых заболеваний
коронарография сердца цена [url=https://www.k311.ru/]https://www.k311.ru/[/url].
Толкование результатов ангиографических исследований
мр ангиография [url=k311.ru/service/kardiologiya/angiografiya.html]k311.ru/service/kardiologiya/angiografiya.html[/url].
Как использовать Томографию Компьютерную
компьютерная томография зубов в москве [url=https://k311.ru/service/kompyuternaya-tomografiya]https://k311.ru/service/kompyuternaya-tomografiya[/url].
Займите деньги на Вашу Карту ЭТО Просто
займы с просрочками [url=https://cashtoday1.ru]https://cashtoday1.ru[/url].
Клининговая компания
Комплексная уборка [url=http://www.kleaning-msk.ru]http://www.kleaning-msk.ru[/url].
Современные стулья и столы – стильные и надежные
лучшие компьютерные кресла [url=http://www.lu11.ru/sortament/mebel/kompyuternye_kresla]http://www.lu11.ru/sortament/mebel/kompyuternye_kresla[/url].
Maximizing Efficiency with Digital Marketing
what is seo [url=https://cb-top.com]https://cb-top.com[/url].
Низкие цены на светодиодные светильники
светильник лед [url=svetodiodsvet1.ru]svetodiodsvet1.ru[/url].
Надежные материалы для строительства от интернет-магазина
строительный интернет магазин [url=http://stromat.ru/]http://stromat.ru/[/url].
Находите правду с детективным агентством
частное агентство детективы москва [url=http://www.ctekc.ru/]гаи пробить машину[/url].
Настоящие железнодорожные грузоперевозки по России
грузоперевозки по жд по россии [url=https://zhd-perevozki77.ru/]https://zhd-perevozki77.ru/[/url].
Оптимальное распределение грузов
авиаперевозка [url=https://www.aviaperevozki77.ru]https://www.aviaperevozki77.ru[/url].
TVH Запчасти для Обеспечения Надежности Вашего Погрузчика
продажа запчастей для спецтехники [url=https://запчасти-на-китайскую-спецтехнику.рф]https://запчасти-на-китайскую-спецтехнику.рф[/url].
Ремонтируйте свою квартиру с помощью нас
Ремонт Квартиры Своими Руками [url=http://www.allremont592.ru/]http://www.allremont592.ru/[/url].
Аренда яхты в Сочи: гордость и престиж
яхты сочи [url=https://arenda-yahty-sochi-1.ru/]https://arenda-yahty-sochi-1.ru/[/url].
Интернет-магазин строительных материалов
купить строительный [url=https://stromat.ru/]https://stromat.ru/[/url].
Захотели качественный клининг? Только с нами!
клининг санкт петербург [url=https://klining-spb-1.ru]https://klining-spb-1.ru[/url].
Лучшие цены для ландшафтного дизайна – ваш правильный выбор
ландшафтный дизайн цены москва [url=http://www.landshaftnyi-dizain-cena.ru/]http://www.landshaftnyi-dizain-cena.ru/[/url].
Качественное бурение и обслуживание скважин
бурение на воду цена под ключ [url=http://www.burenie-skvazhin99.ru/]http://www.burenie-skvazhin99.ru/[/url].
Качественное звуковое оборудование для актового зала
купить оборудование для актового зала школы [url=http://www.i-tec3.ru/]http://www.i-tec3.ru/[/url].
Цветы для Доставки в Челябинск для непревзойденных Воспоминаний
заказать цветы челябинск дешево [url=https://cvety77.ru]https://cvety77.ru[/url].
Качественное обучение теннису для начинающих
занятие теннисом [url=https://zanyatiya-tennisom-msk.ru]https://zanyatiya-tennisom-msk.ru[/url].
How to Get a Crypto License
crypto exchange license lithuania [url=http://www.cryptofinex.xyz]http://www.cryptofinex.xyz[/url].
Основы установки мягких отделочных панелей
стеновые панели из ткани купить [url=https://myagkipanel.ru/]https://myagkipanel.ru/[/url].
Интерьер без проблем с мягкими стеновыми панелями
мягкие настенные панели цена [url=http://myagpan.ru/]http://myagpan.ru/[/url].
Качественные результаты клининга с нашей клининговой компанией
Выездная химчистка [url=http://www.cleanfox.ru]http://www.cleanfox.ru[/url].
DIY
design your own stamp [url=stamp-maker.us]stamp-maker.us[/url].
Правильный выбор строительных материалов поможет добиться успеха
битумная мастика для гидроизоляции [url=http://www.stroitelniye-materiali-sonnat.ru/]http://www.stroitelniye-materiali-sonnat.ru/[/url].
Аренда склада: как и где начать?
ответ хранение груза [url=https://arenda-sklada-irkutsk.ru]https://arenda-sklada-irkutsk.ru[/url].
Which roulette games have the best RTP?
9 blazing diamonds casino game [url=bestenroulette.com]bestenroulette.com[/url].
The Ultimate Guide to Live Baccarat
lotus speed baccarat online slot [url=https://baccarat7.com]baccarat card game[/url].
Фен Дайсон – отличный выбор для качественного ухода за волосами
фен дайсон суперсоник [url=https://dyson-stylerr.com/]https://dyson-stylerr.com/[/url].
Надежные двухслойные жалюзи
жалюзи на окна красноярск цена [url=http://advice-ma.online/]http://advice-ma.online/[/url].
Зачем нужны каркасные дома?
дома каркасные спб [url=http://karkasnye-doma-pod-klyuch-78.ru/]http://karkasnye-doma-pod-klyuch-78.ru/[/url].
HostGator: HostGator is known for its affordable plans and reliable performance. They offer unlimited storage and bandwidth, a variety of hosting options, and excellent customer support.
Siteground: Siteground is known for its exceptional speed and advanced security features. They provide excellent customer support, automatic backups, and a user-friendly interface. [url=http://webward.pw/]http://webward.pw/[/url].
big top bonanza megaways [url=bigwinnerclub.com]big fishing fortune play online[/url].
Захватывающие возможности фена Дайсон
фен дайсон цена [url=http://www.dyson-stylerr.com]http://www.dyson-stylerr.com[/url].
Заказывайте изготовление памятника в Минске!
купить памятник [url=https://region35.ru/sakasat-pamyatniki-is-granita.htm/]https://region35.ru/sakasat-pamyatniki-is-granita.htm/[/url].
Купить товары для дома по доступной цене
трековые светильники novotech [url=https://lu15.ru/sortament/spoty_tochechnye_i_sistemy/trekovye_i_shinnye_sistemy/svetilniki/]https://lu15.ru/sortament/spoty_tochechnye_i_sistemy/trekovye_i_shinnye_sistemy/svetilniki/[/url].
Основы для эффективного похудения в домашних условиях
как похудеть быстро в домашних условиях мужчине [url=http://www.hudetdoma12.ru]http://www.hudetdoma12.ru[/url].
Облако 1С – мощная платформа для бизнеса
аренда 1с облако [url=http://www.423clouds.ru]http://www.423clouds.ru[/url].
Каркасные дома – преимущества и недостатки
каркасный дом [url=http://karkasnye-doma-pod-klyuch78.ru/]http://karkasnye-doma-pod-klyuch78.ru/[/url].
Как правильно выбрать каркасный дом?
каркасные дома под ключ в москве [url=https://karkasnye-doma-pod-klyuch77.ru]https://karkasnye-doma-pod-klyuch77.ru[/url].
Компетентное решение правовых вопросов
бесплатная юридическая консультация в москве [url=https://konsultaciya-advokata-msk495.ru]https://konsultaciya-advokata-msk495.ru[/url].
Найдите Лучший Выбор Цветов для Заказа
купить цветы рядом [url=https://www.dostavka-cvetov77.ru]https://www.dostavka-cvetov77.ru[/url].
Карниз для штор по мере необходимости
карниз с приводом для штор [url=https://www.prokarniz11.ru/]https://www.prokarniz11.ru/[/url].
Приобретите пряжу в Москве – мы всегда рады
магазин пряжи в москве недорого [url=https://www.klubok11.ru/]https://www.klubok11.ru/[/url].
crypto exchange license estonia [url=https://www.cryptoexlicense.com#crypto-license-in-lithuania]lithuania cryptocurrency exchange license[/url].
Дом каркасный – экологически чистая архитектура
каркасный дом под ключ недорого [url=http://www.karkasnye-doma-pod-klyuch77.ru/]http://www.karkasnye-doma-pod-klyuch77.ru/[/url].