CSS HTML
CSS HTML
DOCKTYPE html>
<html>
<head>
<title>ASHISH XG</title>
<style>
Header{
Width:100%;
Height:50px
Border-width:1px;
Border-style:solid;
Float:left;
Padding:6px
Box-sizing:border-box
}
Body{padding:0;
Margin:0;
}
#Brand{padding:0;
Margin:0;
Font-family:sens-serif;
Float:left;
}
#tag_line{float:right;
Padding:0;
Margin:0;
}
Nav{
Width:110px;
Height:120px;
Background-color:blue;
Float:left;
Box-sizing:border-box;
Padding:30px;
}
#seach{width:100px;
Height:50px;
Box-sizing:border-box;
Float:left;
Border:none;
Margin-right:3px;
Font-size:16px;
Padding:5px;
}
#search-btm{width:100px;
Height:20px;
Float:left;
Box-sizing:border-box;
Border:none;
Font-size:17px;
}
#menu_table{width:100px;
Height:50px;
Float:right;
Background-color:
Box-sizing:border-box;
}
#menu_iten{width:20%;
Background-color:white;
text-align:Center;
}
A{
Text-decoration:none;
Color:black;
Font-family:century gothic;
}
Footer{
Height:100px;
Width:250px;
Border-sizing:border-box;
Background-color:black;
Float:left;
}
#contact_us{
Width:400%;
Height:250px;
Border-sizing:border-box;
Float:left;
Border-style:solid;
Border-width:1px;
Padding:10px;
Padding-left:30px;
}
#social_links{
Width:400%;
Height:250px;
Border-sizing:border-box;
Float:right;
Border-style:solid;
Border-width:1px;
}
#contact_title{
Color:white;
Font-family:century-gothic;
Font-weight:normal;
}
#contact_details{
Color:white;
Font-size:20px;
Font-family:sens-serif;
Font-style:normal;
Font-weight:normal;
Margin-bottom:10px;
}
#social_logo{
Width:60px;
}
#developer{
Color:white;
Float:left;
Font-family:cenrury_gothic;
Margin-top:200px;
Margin-left:125px;
}
</style>
</head>
<body>
<header>
<h1 id=“brand_name”>ASHISHXG</h1>
<p id=“tag_line”>SHOP MORE AND
EXPLORE MORE</p>
</header>
<nav>
<form>
<a href=“#”><input type=“search”
place_holder=“seach product here”
name=“search” id=“search”></a>
<a href=“#”><input type=“submit”
value=“search” id=“search-btn></a>
<f/orm>
<table id=“menu_table”>
<tr>
<td id=“menu_item”><a
href=“#”>home</a></td>
<td id=“menu_item”><a href=“#”>new
deal</a></td>
<td id=“menu_item”><a
href=“#”>offers</a></td>
<td id=“menu_item”><a
href=“#”>pages</a></td>
<td id=“menu_item”><a href=“#”>more
info</a></td>
</tr></table>
</nav>
<section>
</section>
<footer>
</footer>
<div id=“contact_us”>
<h1 id=“contact_title”>contact us</h1>
<address
id=“contact_detail”>website:ashishxg.com
</address>
<address id=“contact_detail”>phone no:
+91 9816542102</address>
<address id=“contact_detail”>email-id :
[email protected]</addres
s>
<address id=“contact_detail”>address :
sangrah Himachal Pradesh</address>
</div>
<div id=“developer”>developed by :
ashishxg</div>
<div id=“social_links”>
<h1 id=“contact_title”>follow us</h1>
<a href=“ashish.abcfb.com”><img
src=“image/abc.png”
id=“social_logo”></a>
<a href=“ashish.insta.com”><img
src=“image/bcd.png”
id=“social_logo”></a>
<a href=“ashish.linkdin.com”><img
src=“image/bcd.png”
id=“social_logo”></a>
</div>
</body>
</html>
H1[align=center]{
Color:white
}
Nesting selector-
Nav>h1{
Color:white;
}
Div{width:200px;
Height:200px;
Margin:20px;
Background-color:red;
}
Astric selector:-
*{
Color:red;
}
Multiple selector:-
Div,nav,header{
width:200px;
Height:200px;
Margin:20px;
Background-color:red;
Margin:0 auto;
Overflow:scroll;
Overflow-x:hidden;
Overflow-y:scroll;
}
Nav{width:200px;
Height:200px;
Background-color:red;
}
H1:after{
Content:”chauhan”
}
H1{
Cursor:pointer;
}
H1::first-line{
Color:red;
Text-decoration:underline;
}
H1::selection{
Color:white;
Background-color:red;
Color:white;
}