Skip to content

Responsive View & UI Improvements #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ravisharma607 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Responsive View & UI Improvements #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 84 additions & 67 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,43 +7,52 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HarryFitness - The best fitness gym in the town</title>
<link rel="stylesheet" href="style.css">
<script src="timer.js"></script>
<link rel="stylesheet" href="utils.css">
</head>

<body class='overflow-x-hidden'>
<div class="container mx-auto">
<header>
<nav class="flex justify-between">
<div class="logo font-bold flex items-center text-blue">HarryFitness</div>
<ul class="navbar flex items-center">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact Us</li>
<li><button class="btn">Join Now</button></li>
</ul>
<nav class="nav flex justify-between">
<div class="logo font-bold flex items-center text-blue">
<h3><a href="#">Harry<span>Fitness</span></a></h3>
</div>
<div class="flex items-center">
<ul class="links navbar items-center">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div class="flex items-center">
<ul class="action flex items-center">
<li><button class="btn">Join Now</button></li>
<li class="menu flex" id="menu"><ion-icon name="menu"></ion-icon></li>
</ul>
</div>
</div>
</nav>
<hr>
</header>
<main class="min-h-screen">
<section class="section1">
<div class="flex">
<div class="flex contentbox">
<div class="topleft flex flex-col justify-center px-2">
<div class=" text-center">
<div class="text-center">
<img class="dumbellimg" src="dumbell.png" alt="">
</div>
<h1 class="my-1 text-center">The best fitness Gym in the town is here</h1>
<p class=" text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur
<p class="desc text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consequuntur
error corporis fugit dolore adipisci aperiam omnis nisi dolores hic eius in ex id iure, ea
sunt asperiores et voluptatibus dignissimos autem maiores molestias dolor rem delectus
quidem! Inventore.</p>
<!-- Display the countdown timer in an element -->
<p class="deal text-center">The deal ends in <span id="demo"></span></p>
<div class="buttons">
<button class="btn">Join now</button>
<button class="btn">Contact Us</button>
</div>
<!-- Display the countdown timer in an element -->
<p class="deal text-center">The deal ends in <span id="demo"></span></p>
<div class="buttons">
<button class="btn">Join now</button>
<button class="btn">Contact Us</button>
</div>
</div>
<div class="topright flex justify-center">
<img class="gymimg" src="gym.png" alt="">
Expand Down Expand Up @@ -99,54 +108,55 @@ <h2>Enterprise</h2>
<h1 class="text-center my-2">Compare Plans</h1>
<div class="container plantable">
<table class="table text-center">
<thead>
<tr>
<th></th><th>Free</th>
<th>Pro</th>
<th>Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="text-start">Public</th>
<td>Yes</svg></td>
<td>Yes</svg></td>
<td>Yes</svg></td>
</tr>
<tr>
<th scope="row" class="text-start">Private</th>
<td>-</td>
<td>Yes</svg></td>
<td>Yes</svg></td>
</tr>
</tbody>

<tbody>
<tr>
<th scope="row" class="text-start">Permissions</th>
<td>Yes</svg></td>
<td>Yes</svg></td>
<td>Yes</svg></td>
</tr>
<tr>
<th scope="row" class="text-start">Sharing</th>
<td>-</td>
<td>Yes</svg></td>
<td>Yes</svg></td>
</tr>
<tr>
<th scope="row" class="text-start">Unlimited members</th>
<td>-</td>
<td>Yes</svg></td>
<td>Yes</svg></td>
</tr>
<tr>
<th scope="row" class="text-start">Extra security</th>
<td>-</td>
<td>-</td>
<td>Yes</svg></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
<th>Free</th>
<th>Pro</th>
<th>Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="text-start">Public</th>
<td>Yes</svg></td>
<td>Yes</svg></td>
<td>Yes</svg></td>
</tr>
<tr>
<th scope="row" class="text-start">Private</th>
<td>-</td>
<td>Yes</svg></td>
<td>Yes</svg></td>
</tr>
</tbody>

<tbody>
<tr>
<th scope="row" class="text-start">Permissions</th>
<td>Yes</svg></td>
<td>Yes</svg></td>
<td>Yes</svg></td>
</tr>
<tr>
<th scope="row" class="text-start">Sharing</th>
<td>-</td>
<td>Yes</svg></td>
<td>Yes</svg></td>
</tr>
<tr>
<th scope="row" class="text-start">Unlimited members</th>
<td>-</td>
<td>Yes</svg></td>
<td>Yes</svg></td>
</tr>
<tr>
<th scope="row" class="text-start">Extra security</th>
<td>-</td>
<td>-</td>
<td>Yes</svg></td>
</tr>
</tbody>
</table>
</section>
<hr>
Expand All @@ -156,6 +166,13 @@ <h1 class="text-center my-2">Compare Plans</h1>
</footer>

</div>


<script src="timer.js"></script>

<!-- Icons Link -->
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>

</html>
Loading