Scribd
Upload
5 views3 pages

Kapoya

The document contains a web page for a fitness studio menu, featuring HTML, CSS, and JavaScript code. It includes a layout with a sidebar, main content area, and buttons for various sections like attendance tracker and facility maintenance. The design utilizes a linear gradient background and responsive styling for a modern look.

Uploaded by

albercavisbal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views3 pages

Kapoya

The document contains a web page for a fitness studio menu, featuring HTML, CSS, and JavaScript code. It includes a layout with a sidebar, main content area, and buttons for various sections like attendance tracker and facility maintenance. The design utilizes a linear gradient background and responsive styling for a modern look.

Uploaded by

albercavisbal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

JS

function openSection(section) {
alert("Opening " + section + " section...");

CSS

body {
margin: 0;
font-family: Arial, sans-serif;
background: linear-gradient(to right, #a3b8e3, #5f7eaf);
color: #fff;
}

.container {
display: flex;
height: 100vh;
padding: 20px;
}

.sidebar {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 20px;
}

.profile-icon {
font-size: 40px;
margin-bottom: 20px;
}

.side-button, .back-button {
background-color: white;
border: none;
border-radius: 50%;
font-size: 20px;
padding: 10px;
margin: 10px 0;
color: black;
cursor: pointer;
}

.main-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}

.main-content h2 {
color: black;
margin-bottom: 10px;
}

.main-content p {
color: black;
margin-bottom: 20px;
}

.main-button {
background-color: #1c2a3a;
border: 2px solid white;
border-radius: 5px;
color: white;
font-size: 16px;
padding: 15px;
margin-bottom: 15px;
width: 500px;
height: 100px;
text-align: center;
cursor: pointer;
}

.back-text {
margin-top: 10px;
color: #ccc;
font-size: 14px;
}

.logo-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.logo {
width: 180px;
}

.logo-section h1 {
font-size: 32px;
text-align: center;
margin-top: 10px;
color: black;
}

.studio {
font-size: 20px;
color: #333;
}
.container {
display: flex;
height: 100vh;
padding-left: 40px;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fitness Studio Menu</title>
<link rel="stylesheet" href="fitness2.css">
</head>
<body>
<div style="display: flex; justify-content: space between;">

<div class="menu">
</div>
<div class="form" style="margin-left:40px;">

</div>
<div class="main-content">
<h2>Hello RMMCians!!!</h2>
<p>Ready for today's goals?</p>

<button class="main-button" onclick="openSection('attendance')">Attendance


Tracker</button>
<button class="main-button" onclick="openSection('maintenance')">Facility
Maintenance<br>And Upkeep</button>
<button class="main-button"
onclick="openSection('appointment')">Appointment</button>

<p class="back-text">Back</p>
</div>

<div class="center-text">
<h2>FITNESS<h2>

</h2>STUDIO<h2>
</div>
</div>

<script src="script.js"></script>
</body>
</html>

HTML

You might also like