Hello friends, in this article, you will learn how to create Gym Website page using HTML and CSS. I have shared so many snippet based on how to create a Responsive Website with HTML and CSS. In this tutorial, I have created a Website page with HTML and CSS.
Web pages are one way to share information over the internet. When designing a web page, you need to start by figuring out what type of content you want to present to your audience. To design an attractive site, it’s helpful for people who understand how browsers display web pages and how people read them on their screens. Web pages are the simplest way to share your thoughts, ideas, and products with your customers. It’s important that webpages are designed well to attract, engage and convince the visitors.
HTML is the language that web browsers read and understand to display web content on a user’s screen. It is the most basic set of instructions for telling a browser how to display text, images, videos, and other media on a webpage. HTML is the markup language that web pages are written in. It is a set of tags that is used to create the structure and layout of a webpage. It also provides semantics for content, meaning you can tell what certain elements mean and how they should be styled by your browser.
Below is the video tutorials. watch and practices
CSS stands for Cascading Style Sheets, which dictate how HTML elements should look on your screen. CSS can alter aspects like color, position, spacing between elements, or many other features in order to make your website more aesthetically pleasing or functional in some way. CSS (Cascading Style Sheets) is a language used for styling and laying out HTML pages, with which you can control the appearance of an HTML document or parts of it without altering the underlying HTML. Create a Website With HTML and CSS for Beginners
Web pages are the backbone of the internet. They are what everyone sees and interacts with when they visit a website. Web pages can be created using HTML and CSS. Webpage: A web page (or website) can be defined as a document that has been designed to appear when accessed via a web browser. The term “web page” was coined in 1993 by Sir Tim Berners-Lee who invented the World Wide Web.
In the HTML body section contains all the content for your webpage, while the head section contains information about your webpage, such as metadata and scripts. CSS stands for Cascading Style Sheets, which are used to control how HTML elements are displayed on a webpage. Web design is the art of graphic design for the web. Web designers use HTML and CSS to create a website’s content, structure, and appearance. Learn to Build a Website with HTML and CSS.
You can create a website with HTML and CSS. You will find out how to create a website, start a web design career, and more. Learn how to create a website with HTML and CSS with this course. You will learn the basics of web design, how to build a simple website, and most importantly, have fun! With just a little bit of HTML and CSS knowledge, you can create your own website. This course teaches the basics of HTML and CSS, so you can start building your own sites today.
Source Code
If you like this Gym Web Page, then feel free to use it in your project. First, you have to create two files. One of them is HTML, and the other is CSS. after creating the files, paste the code provided below.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FitNess - Home | By Code Info</title>
<link rel="stylesheet" href="style.css">
<!-- Font Awesome Iocns cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>
</head>
<body>
<header class="header">
<a href="#" class="logo">
<i class="fas fa-dumbbell"></i>FitNess
</a>
<nav class="navbar">
<a href="#">Home</a>
<a href="#">Services</a>
<a href="#">Contact</a>
<a href="#">Pricing</a>
<a href="#">|</a>
<a href="#">Login</a>
<a href="#" class="btn">Sign Up</a>
</nav>
</header>
<section class="home">
<div class="max-width">
<div class="home-content">
<h3>help for ideal <br> body fitness</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, numquam, sequi assumenda nam, vel nihil repudiandae omnis eveniet est excepturi atque molestias at dolores fugit!</p>
<button class="btn">Get started</button>
</div>
<div class="home-image">
<img src="/images/bg.jpg" alt="">
</div>
</div>
</section>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you have to create a file with .css extension.
CSS CODE:
/* Google Font*/
@import url('https://fonts.googleapis.com/css2?family=Philosopher:wght@700&family=Poppins:wght@300;400;500&display=swap');
*{
margin: 0;
padding: 0;
outline: none;
border: none;
text-decoration: none;
box-sizing: border-box;
transition: 0.2s linear;
text-transform: capitalize;
font-family: "Poppins", sans-serif;
}
body{
background: #000;
}
.btn{
margin-top: 2rem;
width: 150px;
padding: 12px;
color: #fff;
background: tomato;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
}
.btn:hover{
background: rgba(212, 48, 48, 0.76);
transition: 0.4s;
}
/* Header */
.header{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 1.5rem 8%;
display: flex;
align-items: center;
color: #fff;
justify-content: space-between;
}
.header .logo{
font-size: 22px;
font-weight: bolder;
color: #fff;
padding-right: 10px;
margin-right: 20rem;
}
.header .logo i{
color: #fff;
padding: 0.5rem;
}
.header .navbar a{
font-size: 1.1rem;
margin: 0 1rem;
color: #fff;
}
.header .navbar a:hover{
color: #baa6cf;
}
.header .btn{
background: transparent;
color: tomato;
border: 1px solid tomato;
font-size: 12px;
padding: 8px;
}
/* Home Section */
.max-width{
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
section{
padding: 50px 0 50px 0;
}
.home{
display: flex;
}
.home .max-width{
width: 100%;
display: flex;
}
.home .home-content{
width: 50%;
padding: 2rem;
}
.home h3{
color: #fff;
margin-top: 6rem;
font-size: 5rem;
font-family: 'Philosopher', sans-serif;
}
.home p{
color: rgb(194, 191, 191);
margin-top: 1rem;
font-size: 12px;
}
.home .home-image{
width: 50%;
}
.home .home-image img{
width: 100%;
height: 100%;
}
I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for visiting.
