Html & Css
today we learn the some basic project of the html and css this project is upload on my github project
github repository link - https://github.com/gauravghuge7/deopulgoan
above is the my village and we just create a design on my village
today we write the basic html like below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- this is the linking the css page -->
<link rel="stylesheet" href="./style.css">
<!-- this is the title for tiny top heading -->
<title> डिजिटल देवपुळ </title>
<!-- this is the font of the english writing -->
<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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
this is the my head tag only and copy the font from the google fonts
and linking the css file from external css this css create in my current directory
and we just gave a title for the dacument that display on the web site normal rectangular tab
In easy language we know the tab change in the chrome browser in that tab change we gave a name this name in html we called title
<title> डिजिटल देवपुळ </title>
this is the type of the title syntax
as in body tab we create a just navbar like below and we write two content in the navbar that is heading name and unordered list
<nav>
<p> देवपुळ </p>
<ul>
<li><a id="about" href="">About Us</a></li>
<li><a id="contact" href="">Contact Us</a></li>
</ul>
</nav>
this is the output like below and we just set the alignment and the coloring and border
for setting this tab we just add some css like every syntax as
nav {
background-color: rgb(247, 215, 172); /* this is the setting the background */
padding-top: 20px;
display: flex;
justify-content: space-around;
}
background-color: rgb(247, 215, 172);
this above property is set for the background color of the navbar
padding-top: 20px;
this is the displaying the proper content in web site from upper side mostly the half content are displayed
display: flex;
this is the content to display to horizonal in navbar like horizontal
justify-content: space-around;
this is the proper content display because the content is touch from left and right side to corner this property is set to proper in the content
this below property is set the font size of the p tag and make the heading in p tag content to see content in p tag scroll upside
nav p {
font-size: 70px;
}
this is the displaying content in unordered list
nav ul {
display: flex;
gap: 30px;
font-family: "Poppins", sans-serif;
}
this is the property to display content horizontally and
display: flex;
below property is to display gap in content like space in the two words
gap: 30px;
the font family is relate to the head tag content because the fonts are copied from google fonts
font-family: "Poppins", sans-serif;
below this is the content that require the font which is write in the head tag of the html page and this is change at any time when we required different font
<!-- this is the font of the english writing -->
<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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
as we declared i am started the project and i have gave you all content of the project