<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern-UIX-Home-Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<nav class="main-menu">
<h1>Fitness App</h1>
<img class="logo"
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/4cfdcb5a-0137-4457-8be1-6e7bd1f29ebb"
alt="" />
<ul>
<li class="nav-item active">
<b></b>
<b></b>
<a href="#">
<i class="fa fa-house nav-icon"></i>
<span class="nav-text">Home</span>
</a>
</li>
<li class="nav-item">
<b></b>
<b></b>
<a href="#">
<i class="fa fa-user nav-icon"></i>
<span class="nav-text">Profile</span>
</a>
</li>
<li class="nav-item">
<b></b>
<b></b>
<a href="#">
<i class="fa fa-calendar-check nav-icon"></i>
<span class="nav-text">Schedule</span>
</a>
</li>
<li class="nav-item">
<b></b>
<b></b>
<a href="#">
<i class="fa fa-person-running nav-icon"></i>
<span class="nav-text">Activities</span>
</a>
</li>
<li class="nav-item">
<b></b>
<b></b>
<a href="#">
<i class="fa fa-sliders nav-icon"></i>
<span class="nav-text">Settings</span>
</a>
</li>
</ul>
</nav>
<section class="content">
<div class="left-content">
<div class="activities">
<h1>NyiraHabiyambere Annual Events & Activities</h1>
<div class="activity-container">
<div class="image-container img-one">
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/467cf682-03fb-4fae-b129-5d4f5db304dd"
alt="tennis" />
<div class="overlay">
<h3>Tennis</h3>
</div>
</div>
<div class="image-container img-two">
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/3bab6a71-c842-4a50-9fed-b4ce650cb478"
alt="hiking" />
<div class="overlay">
<h3>Hiking</h3>
</div>
</div>
<div class="image-container img-three">
<img src="./PXL_20231126_141839309.MP.jpg" alt="running" />
<div class="overlay">
<h3>Party</h3>
</div>
</div>
<div class="image-container img-four">
<img src="./trashed-1703605286-PXL_20231126_153840801.NIGHT.jpg" alt="cycling" />
<div class="overlay">
<h3>BrotherHood</h3>
</div>
</div>
<div class="image-container img-five">
<img src="./PXL_20231126_151246741.MP.jpg" alt="yoga" />
<div class="overlay">
<h3>Wine Timw</h3>
</div>
</div>
<div class="image-container img-six">
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/7568e0ff-edb5-43dd-bff5-aed405fc32d9"
alt="swimming" />
<div class="overlay">
<h3>Swimming</h3>
</div>
</div>
</div>
</div>
<div class="left-bottom">
<div class="weekly-schedule">
<h1>Weekly Schedule</h1>
<div class="calendar">
<div class="day-and-activity activity-one">
<div class="day">
<h1>13</h1>
<p>mon</p>
</div>
<div class="activity">
<h2>Swimming</h2>
<div class="participants">
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/c61daa1c-5881-43f8-a50f-62be3d235daf"
style="--i: 1" alt="" />
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/90affa88-8da0-40c8-abe7-f77ea355a9de"
style="--i: 2" alt="" />
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/07d4fa6f-6559-4874-b912-3968fdfe4e5e"
style="--i: 3" alt="" />
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/e082b965-bb88-4192-bce6-0eb8b0bf8e68"
style="--i: 4" alt="" />
</div>
</div>
<button class="btn">Join</button>
</div>
<div class="day-and-activity activity-two">
<div class="day">
<h1>15</h1>
<p>wed</p>
</div>
<div class="activity">
<h2>Yoga</h2>
<div class="participants">
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/c61daa1c-5881-43f8-a50f-62be3d235daf"
style="--i: 1" alt="" />
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/32037044-f076-433a-8a6e-9b80842f29c9"
style="--i: 2" alt="" />
</div>
</div>
<button class="btn">Join</button>
</div>
<div class="day-and-activity activity-three">
<div class="day">
<h1>17</h1>
<p>fri</p>
</div>
<div class="activity">
<h2>Tennis</h2>
<div class="participants">
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/32037044-f076-433a-8a6e-9b80842f29c9"
style="--i: 1" alt="" />
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/e082b965-bb88-4192-bce6-0eb8b0bf8e68"
style="--i: 2" alt="" />
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/c61daa1c-5881-43f8-a50f-62be3d235daf"
style="--i: 3" alt="" />
</div>
</div>
<button class="btn">Join</button>
</div>
<div class="day-and-activity activity-four">
<div class="day">
<h1>18</h1>
<p>sat</p>
</div>
<div class="activity">
<h2>Hiking</h2>
<div class="participants">
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/07d4fa6f-6559-4874-b912-3968fdfe4e5e"
style="--i: 1" alt="" />
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/32037044-f076-433a-8a6e-9b80842f29c9"
style="--i: 2" alt="" />
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/07d4fa6f-6559-4874-b912-3968fdfe4e5e"
alt="" />
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/c61daa1c-5881-43f8-a50f-62be3d235daf"
style="--i: 4" alt="" />
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/90affa88-8da0-40c8-abe7-f77ea355a9de"
style="--i: 5" alt="" />
</div>
</div>
<button class="btn">Join</button>
</div>
</div>
</div>
<div class="personal-bests">
<h1>Personal Bests</h1>
<div class="personal-bests-container">
<div class="best-item box-one">
<p>Fastest 5K Run: 22min</p>
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/242bbd8c-aaf8-4aee-a3e4-e0df62d1ab27"
alt="" />
</div>
<div class="best-item box-two">
<p>Longest Distance Cycling: 4 miles</p>
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/a3b3cb3a-5127-498b-91cc-a1d39499164a"
alt="" />
</div>
<div class="best-item box-three">
<p>Longest Roller-Skating: 2 hours</p>
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/e0ee8ffb-faa8-462a-b44d-0a18c1d9604c"
alt="" />
</div>
</div>
</div>
</div>
</div>
<div class="right-content">
<div class="user-info">
<div class="icon-container">
<i class="fa fa-bell nav-icon"></i>
<i class="fa fa-message nav-icon"></i>
</div>
<h4>Obed Uwihanganye</h4>
<img src="./user.jpg" alt="user" />
</div>
<div class="active-calories">
<h1 style="align-self: flex-start">Active Calories</h1>
<div class="active-calories-container">
<div class="box" style="--i: 85%">
<div class="circle">
<h2>85<small>%</small></h2>
</div>
</div>
<div class="calories-content">
<p><span>Today:</span> 400</p>
<p><span>This Week:</span> 3500</p>
<p><span>This Month:</span> 14000</p>
</div>
</div>
</div>
<div class="mobile-personal-bests">
<h1>Personal Bests</h1>
<div class="personal-bests-container">
<div class="best-item box-one">
<p>Fastest 5K Run: 22min</p>
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/05dfc444-9ed3-44cc-96af-a9cf195f5820"
alt="" />
</div>
<div class="best-item box-two">
<p>Longest Distance Cycling: 4 miles</p>
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/9ca170e9-1252-4fa6-8677-36493540c1f2"
alt="" />
</div>
<div class="best-item box-three">
<p>Longest Roller-Skating: 2 hours</p>
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/262d1611-ed4c-4297-981c-480cf7f95714"
alt="" />
</div>
</div>
</div>
<div class="friends-activity">
<h1>Friends Activity</h1>
<div class="card-container">
<div class="card">
<div class="card-user-info">
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/9290037d-a5b2-4f50-aea3-9f3f2b53b441"
alt="" />
<h2>Jane</h2>
</div>
<img class="card-img"
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/bef54506-ea45-4e42-a1b6-23a48f61c5e8"
alt="" />
<p>We completed the 30-Day Running Streak Challenge!🏃♀️🎉</p>
</div>
<div class="card card-two">
<div class="card-user-info">
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/42616ef2-ba96-49c7-80ea-c3cf1e2ecc89"
alt="" />
<h2>Mike</h2>
</div>
<img class="card-img"
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/2dcc1b94-06c5-4c62-b886-53b9e433fd44"
alt="" />
<p>I just set a new record in cycling: 30 miles!💪</p>
</div>
</div>
</div>
</div>
<div class="view-content">
<div class="row">
<div class="col-sm-12">
<h3 class="grouped-card-title">Related Tutorials</h3>
</div>
<div class="col-md-6 col-lg-3"><a href="/dsa/graph-dfs">
<div class="card card--even-spaced card--examples card--examples--blue card--examples--1">
<p class="card__title">DS & Algorithms</p>
<p class="card__description">Depth First Search (DFS)</p>
</div>
</a></div>
<div class="col-md-6 col-lg-3"><a href="/dsa/graph-adjacency-list">
<div class="card card--even-spaced card--examples card--examples--blue card--examples--2">
<p class="card__title">DS & Algorithms</p>
<p class="card__description">Adjacency List</p>
</div>
</a></div>
<div class="col-md-6 col-lg-3"><a href="/dsa/graph">
<div class="card card--even-spaced card--examples card--examples--blue card--examples--3">
<p class="card__title">DS & Algorithms</p>
<p class="card__description">Graph Data Stucture</p>
</div>
</a></div>
<div class="col-md-6 col-lg-3"><a href="/dsa/graph-bfs">
<div class="card card--even-spaced card--examples card--examples--blue card--examples--4">
<p class="card__title">DS & Algorithms</p>
<p class="card__description">Breadth first search</p>
</div>
</a></div>
</div>
</div>
<!-- Setups for card slider if you need copy codes -->
<!-- <footer ondrag="(Slider())">
<div class='cards-wrapper'>
<div class='cards'>
<button class='card card1' tabindex="-1">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 200">
<path d="M208 80c0-26.5 21.5-48 48-48h64c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48h-8v40h152c30.9 0 56 25.1 56 56v32h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48h-64c-26.5 0-48-21.5-48-48v-64c0-26.5 21.5-48 48-48h8v-32c0-4.4-3.6-8-8-8H312v40h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48h-64c-26.5 0-48-21.5-48-48v-64c0-26.5 21.5-48 48-48h8v-40H112c-4.4 0-8 3.6-8 8v32h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48v-64c0-26.5 21.5-48 48-48h8v-32c0-30.9 25.1-56 56-56h152v-40h-8c-26.5 0-48-21.5-48-48V80z"/>
</svg>
</div>
<h2>Card 1</h2>
<h4>Lorem</h4>
</button>
<button class='card card2' tabindex="-1">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 200">
<path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2s-6.3 25.5 4.1 33.7l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L477.4 348.9c1.7-9.4 2.6-19 2.6-28.9h64c17.7 0 32-14.3 32-32s-14.3-32-32-32h-64.3c-1.1-14.1-5-27.5-11.1-39.5.7-.6 1.4-1.2 2.1-1.9l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-.7.7-1.3 1.4-1.9 2.1-14.3-7.3-30.4-11.4-47.5-11.4H264c-8.3 0-16.3 1-24 2.8L38.8 5.1zM320 0c-53 0-96 43-96 96v3.6c0 15.7 12.7 28.4 28.4 28.4h135.2c15.7 0 28.4-12.7 28.4-28.4V96c0-53-43-96-96-96zM160.3 256H96c-17.7 0-32 14.3-32 32s14.3 32 32 32h64c0 24.6 5.5 47.8 15.4 68.6-2.2 1.3-4.2 2.9-6 4.8l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l63.1-63.1a159.2 159.2 0 0 0 90.3 39.6V335.5L166.7 227.3c-3.4 9-5.6 18.7-6.4 28.7zM336 479.2c36.6-3.6 69.7-19.6 94.8-43.8L336 360.7v118.5z"/>
</svg>
</div>
<h2>Card 2</h2>
<h4>Ipsum</h4>
</button>
<button class='card card3' tabindex="-1">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 200">
<path d="M308.5 135.3a22 22 0 0 0 6.2-25 171 171 0 0 0-7.6-15.5l-3.1-5.4c-3-5-6.3-9.9-9.8-14.6a22 22 0 0 0-24.7-7.1L241.3 77c-10.7-8.8-23-16-36.2-20.9l-6.1-29a21.9 21.9 0 0 0-18.5-17.8c-6.6-.9-13.3-1.3-20.1-1.3h-.7c-6.8 0-13.5.4-20.1 1.2A22 22 0 0 0 121.1 27L115 56.1c-13.3 5-25.5 12.1-36.2 20.9l-28.3-9.2c-9-3-19-.5-24.7 7.1-3.5 4.7-6.8 9.6-9.9 14.6l-3 5.3c-2.8 5-5.3 10.2-7.6 15.6a22.1 22.1 0 0 0 6.2 25l22.2 19.8a128.8 128.8 0 0 0 0 41.7l-22.2 19.8a22 22 0 0 0-6.2 25 187 187 0 0 0 7.6 15.6l3 5.2c3 5.1 6.3 9.9 9.9 14.6a22 22 0 0 0 24.7 7.1l28.2-9.3c10.7 8.8 23 16 36.2 20.9l6.1 29.1a21.9 21.9 0 0 0 18.5 17.8 172 172 0 0 0 40.8 0 22 22 0 0 0 18.5-17.8l6.1-29.1c13.3-5 25.5-12.1 36.2-20.9l28.2 9.3c9 3 19 .5 24.7-7.1 3.5-4.7 6.8-9.5 9.8-14.6l3.1-5.4a171 171 0 0 0 7.6-15.5c3.7-8.7.9-18.6-6.2-25l-22.2-19.8a131 131 0 0 0 0-41.8l22.2-19.8zM112 176a48 48 0 1 1 96 0 48 48 0 1 1-96 0zm392.7 324.5a22 22 0 0 0 25 6.2 171 171 0 0 0 15.5-7.6l5.4-3.1c5-3 9.9-6.3 14.6-9.8a22 22 0 0 0 7.1-24.7l-9.3-28.2c8.8-10.7 16-23 20.9-36.2L613 391a21.9 21.9 0 0 0 17.8-18.5 172 172 0 0 0 0-40.8 22 22 0 0 0-17.8-18.5l-29.1-6.2c-5-13.3-12.1-25.5-20.9-36.2l9.3-28.2c3-9 .5-19-7.1-24.7-4.7-3.5-9.6-6.8-14.6-9.9l-5.3-3c-5-2.8-10.2-5.3-15.6-7.6a22.1 22.1 0 0 0-25 6.2l-19.8 22.2a131 131 0 0 0-41.8 0l-19.8-22.2a22 22 0 0 0-25-6.2 187 187 0 0 0-15.6 7.6l-5.2 3a144 144 0 0 0-14.6 9.9 22 22 0 0 0-7.1 24.7l9.3 28.2c-8.8 10.7-16 23-20.9 36.2l-29.1 6a21.9 21.9 0 0 0-17.8 18.5 172 172 0 0 0 0 40.8 22 22 0 0 0 17.8 18.5l29.1 6.1c5 13.3 12.1 25.5 20.9 36.2l-9.3 28.2c-3 9-.5 19 7.1 24.7 4.7 3.5 9.5 6.8 14.6 9.8l5.4 3.1a171 171 0 0 0 15.5 7.6c8.7 3.7 18.6.9 25-6.2l19.8-22.2a131 131 0 0 0 41.8 0l19.8 22.2zM464 304a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"/>
</svg>
</div>
<h2>Card 3</h2>
<h4>dolor</h4>
</button>
<button class='card card4' tabindex="-1">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 200">
<path d="M176 24a24 24 0 1 0-48 0v40a64 64 0 0 0-64 64H24a24 24 0 1 0 0 48h40v56H24a24 24 0 1 0 0 48h40v56H24a24 24 0 1 0 0 48h40a64 64 0 0 0 64 64v40a24 24 0 1 0 48 0v-40h56v40a24 24 0 1 0 48 0v-40h56v40a24 24 0 1 0 48 0v-40a64 64 0 0 0 64-64h40a24 24 0 1 0 0-48h-40v-56h40a24 24 0 1 0 0-48h-40v-56h40a24 24 0 1 0 0-48h-40a64 64 0 0 0-64-64V24a24 24 0 1 0-48 0v40h-56V24a24 24 0 1 0-48 0v40h-56V24zm-16 104h192a32 32 0 0 1 32 32v192a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32zm192 32H160v192h192V160z"/>
</svg>
</div>
<h2>Card 4</h2>
<h4>sit amet</h4>
</button>
<button class='card card5' tabindex="-1">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 200">
<path d="M418.4 157.9A80 80 0 1 0 320 77.5l-183.8 73.6a80 80 0 1 0-22.1 129.3l145.6 127.4a80 80 0 1 0 120.9-42.2l37.8-207.7zm-262.1 74.3a78.3 78.3 0 0 0 3.7-21.7L343.8 137c3.6 3.5 7.4 6.7 11.6 9.5l-37.8 207.6a77.8 77.8 0 0 0-15.8 5.5L156.3 232.2z"/>
</svg>
</div>
<h2>Card 5</h2>
<h4>consectetur</h4>
</button>
</div>
<button class="arrow-btn arrow-btn-prev" tabindex="0">
<svg viewBox="0 0 256 512">
<path d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z" />
</svg>
</button>
<button class="arrow-btn arrow-btn-next" tabindex="0">
<svg viewBox="0 0 256 512">
<path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" />
</svg>
</button>
</div>
</footer> -->
</section>
</main>
<script src="app.js"></script>
</body>
</html>
Please Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.