Fitness Project (9th May 2023)
1)
Mobile View
Desktop view
2) Solution:
1st with Mobile view
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>Fitness Project</title>
<!-- google-fonts imports -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<!-- All these fonts are from google-fonts and these should always be above our custom
styles -->
<!-- This is our custom styles -->
<link rel="stylesheet" href="styles/styles.css">
<!-- ./styles because style.css is inside the styles folder -->
<!-- This is the media-query styles -->
<link rel="stylesheet" href="styles/styles.mediaquery.css">
<!-- media-query styles should always be linked after/below our custom styles -->
</head>
<!-- This page is divided into 2 main secttions -->
<body>
<!-- This is the first section of the page-->
<!-- This section will have horizontal padding of app-padding-x and verical padding of
padding-y-lg -->
<section class="app-padding-x padding-y-lg">
<h1 class="text-xl text-deepgreen text-bold">Join our Community</h1>
<h2 class="text-md text-lightgreen text-semibold">30-day, hassle-free money back
gurantee</h2>
<p class="text-xs text-gray text-regular margin-y-lg">Gain access to our full catalog
of workouts along with
expert
trainers. Perfect for
anyone
who is serious
about becoming and staying fit.</p>
</section>
<!-- This is the second section of the page and this second is divided into 2 main
divisions with the help of div -->
<section id="bottom-container">
<!-- This is the 1st Division -->
<!-- This division will have background-color: deep green, horizontal padding
of app-padding-x and vertical padding of padding-y-md-->
<div class="bg-deepgreen app-padding-x text-white padding-y-md">
<h2 class="text-l text-semibold margin-y-md">Monthly Subscription</h2>
<div id="price-container">
<span>$29</span>
<span class="text-md">per month</span>
</div>
<p class="text-sm padding-x-lg" id="full-access-desc">Full access for less than
$1 a day</p>
<div class="margin-bottom-lg">
<button class="button button-green">Sign Up</button>
</div>
</div>
<!--This is the 2nd Division-->
<!-- This division will have background-color: light green, horizontal padding
app-padding-x, vertical padding padding-y-md and text-white-->
<div class="bg-lightgreen app-padding-x padding-y-md text-white">
<h2 class="text-l margin-y-md text-semibold">Why Us</h2>
<ul class="text-xs" id="feature-list">
<li>Unlimited access to 300+ gyms</li>
<li>Multiple workout formats</li>
<li>At home live workouts</li>
<li>At centre group classes</li>
<li>Personalized workout plans</li>
<li>Personalized diet plans</li>
<li>On demand private trainers</li>
</ul>
</div>
</section>
</body>
</html>
style.css file inside the styles folder:
/* :root means the entire HTML file */
:root {
font-family: 'Open Sans', sans-serif;
/* this font-family is copied from google-fonts and is working because of the google-font
imports links inside the head tag */
}
body {
margin: 0;
/* body has some default margin so we are making it 0 */
text-align: center;
}
/* The below text classes are all text-utility classes */
/* we will always use font-size property in em and em is calculated taking immediate
parent as the reference. In this project we have not given any font size to any
tag so we will use the font-size of root as the reference and the font size of root
is 16px */
.text-xl {
font-size: 2.62em;
/* 16x2.625 = 42px */
}
.text-l {
font-size: 2.25;
/* 16x2.25 = 36px */
}
.text-md {
font-size: 2em;
/* 16x2 = 32px */
}
.text-sm {
font-size: 1.75;
/* 16x1.75 = 28px */
}
.text-xs {
font-size: 1.5;
/* 16x1.5 = 24px */
}
/* All these values 42px, 36 px, 32px, 28px, 24px are font-values given in the question. */
.app-padding-x {
padding-left: 28px;
padding-right: 28px;
}
.padding-x-lg {
padding-left: 30px;
padding-right: 30px;
}
/* padding-x means padding in horizontal axis */
/* below text classes are utility classes of text/font color */
.text-white {
color: #fff;
}
.text-gray {
color: #ababad;
}
.text-deepgreen {
color: #4ca399;
}
.text-lightgreen {
color: #c1de2f;
}
/* below classes are background utility classes */
.bg-deepgreen {
background-color: #2bb3b1;
}
.bg-lightgreen {
background-color: #4abebd;
}
/* some utility classes for padding */
/* padding-y means top and bottom (vertical padding) */
.padding-y-xl {
padding-top: 40px;
padding-bottom: 40px;
}
.padding-y-lg {
padding-top: 30px;
padding-bottom: 30px;
}
.padding-y-md {
padding-top: 20px;
padding-bottom: 20px;
}
.padding-y-sm {
padding-top: 10px;
padding-bottom: 10px;
}
/* Below text classes are utility classes for font-weight */
.text-bold {
font-weight: 700;
}
.text-semibold {
font-weight: 600;
}
.text-regular {
font-weight: 400;
}
/* Margin utility classes */
.margin-y-xl {
margin-top: 40px;
margin-bottom: 40px;
}
.margin-y-lg {
margin-top: 30px;
margin-bottom: 30px;
}
.margin-y-md {
margin-top: 20px;
margin-bottom: 20px;
}
.margin-y-sm {
margin-top: 10px;
margin-bottom: 10px;
}
/* To give font-size to a specific child only */
#price-container>span:first-child {
font-size: 70px
}
#price-container>span {
display: block;
/* so that whatever content is beside this item comes to the next line. */
}
#feature-list {
list-style: none;
padding-left: 0;
}
#feature-list>li {
margin-bottom: 12px;
/* at the end of each list item there will be a margin of 10px in the bottom */
}
#feature-list>li:last-child {
margin-bottom: 0;
/* we don't need the margin bottom of 10px after the last li item. */
}
/* Now comes the styling of button */
.button {
font-size: 1em;
/* 16x1.75 = 28px */
padding: 1.1em 4em;
/* 1.1em is for the vertical padding and 4em is for the horizontal padding */
font-weight: regular;
border-radius: .5em;
/* 16x0.5 = 8 px */
border: 0;
}
/* in case of buttons we should always give the padding in em */
/* this means that these styles will only apply to those elements which has BOTH .button
class and .button green class */
.button.button-green {
background-color: #bfdf32;
color: #fff;
box-shadow: 0px 3px 6px #00000029;
}
/* margin-bottom utilities */
.margin-bottom-lg {
margin-bottom: 30px;
}
2nd mediaquery.css file inside the styles folder for desktop view:
body {
text-align: left;
}
/* we are a min-width: 576px,
and this is the break-point. This means any device screen which has width>=576px
these properties will apply to them. If width of the device screen is < 576px, the default
styles will apply to them */
@media screen and (min-width:576px) {
#bottom-container {
display: flex;
flex-wrap: wrap;
}
#bottom-container>div {
flex-basis: 50%;
/* flex-basis sets the area in the primary-axis. In this case the area is width. */
box-sizing: border-box;
/* The CSS box-sizing property allows us to include the padding and border in an
element's total width and height. If you set box-sizing: border-box; on an element, padding
and border are included in the width and height */
}
.app-padding-x {
padding-left: 90px;
padding-right: 90px;
}
#full-access-desc {
padding: 0;
}
#price-container>span {
display: inline;
}
}
Comments
Post a Comment