.png)
Introduction:
Embark on a journey of UI/UX mastery with our in-depth tutorial on creating a captivating exercise app UI. This step-by-step guide is designed to empower you with the skills to build a sleek and user-friendly fitness application interface using HTML, CSS, and JavaScript. Whether you're a seasoned developer looking to expand your skill set or a newcomer eager to learn, our comprehensive tutorial will walk you through the process of designing an intuitive exercise app that not only enhances user engagement but also showcases your proficiency in web development. Join us today and unlock the secrets to crafting an appealing and functional UI that will elevate the fitness app experience for users.
Html Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Excercise App Ui</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="bg1">
<h2>16 <span>| 24</span></h2>
<p>Goals Completed</p>
</div>
<div class="bg1">
<h2><i class="fas fa-battery-three-quarters"></i></h2>
<p>Respiration</p>
</div>
<div class="bg2">
<h2><i class="fas fa-running"></i></h2>
<p>Miles</p>
</div>
<div class="bg1">
<h2>37 °C</h2>
<p>Temperature</p>
</div>
<div class="bg1">
<h2><i class="fas fa-bed"></i></h2>
<p>Sleep Keep</p>
</div>
<div class="bg2">
<h2>75 <span>bpm</span></h2>
<p>Heart Rate</p>
</div>
<div class="bg1">
<h2>170 <span>lbs</span></h2>
<p>Weight</p>
</div>
<div class="bg1">
<h2>24 <span>%</span></h2>
<p>Fat Percentage</p>
</div>
<div class="bg2">
<h2>90 <span>mgdl</span></h2>
<p>Blood Glucose</p>
</div>
<div class="bg2">
<h2>2080 <span>kcal</span></h2>
<p>AVG Consumption</p>
</div>
<div class="bg2">
<h2><i class="fas fa-dumbbell"></i></h2>
<p>Workouts</p>
</div>
<div class="bg2">
<h2>61 <span>%</span></h2>
<p>Body Hydration</p>
</div>
</div>
</body>
</html>
Css Code:
@import url("https://fonts.googleapis.com/
css2?family=Nunito:wght@300;400&display=swap");
:root {
--main-color: #42515c;
--text-color: #ecebf4;
--dark-text-color: #293842;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--main-color);
color: var(--text-color);
font-family: "Nunito", sans-serif;
min-height: 100vh;
}
h2 {
font-size: 2.75rem;
font-weight: 300;
margin: 0.625rem;
}
h2 span {
font-size: 2rem;
}
p {
font-size: 1.25rem;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.container > div {
cursor: pointer;
height: 210px;
background-size: cover;
background-attachment: fixed;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
transition: all 0.5s ease-out;
}
.container > div:hover {
opacity: 0.7;
transform: scale(0.98);
}
.bg1 {
background-image: url("https://images.unsplash.com/
photo-1599447333424-272c8fa5466f?ixid=
MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=
rb-1.2.1&auto=format&fit=crop&w=1350&q=80");
text-shadow: 1px 1px 2px var(--main-color);
}
.bg2 {
background: var(--text-color) url("https://images.unsplash.com/
photo-1529686159790-3246c5082afb?ixlib=rb-1.2.1&ixid=
MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=
format&fit=crop&w=1350&q=80");
color: var(--dark-text-color);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.container > div:first-of-type,
.container > div:nth-of-type(6),
.container > div:nth-of-type(9),
.container > div:nth-of-type(10) {
grid-column: span 2;
}
@media (min-width: 768px) {
.container {
grid-template-columns: repeat(4, 1fr);
}
}
