Scribd
Carica
16 visualizzazioni18 pagine

Cssdemo HTML

Demo css

Caricato da

ashish.matwan
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato TXT, PDF, TXT o leggi online su Scribd
16 visualizzazioni18 pagine

Cssdemo HTML

Demo css

Caricato da

ashish.matwan
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato TXT, PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 18

<!

DOCTYPE html>
<html>
<head>
<title>
External stylesheet
</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="fafaiconstylesheetxg.com">
</head>
<body>
<div id="dark">
</div>

</body>
</html>

Div

Body{
Background-image:url(../image/rose.jpg);
Background-size:100% 800px;
Background-repeat:no-repeat;
Margin:0;
Padding:0;
Background-attachment:fixed;
}

#dark{
Width:100%;
Height:678px;
Background-color:rgba(0,0,0.5);
}

/*start nav coding*/


Nav{
width:100%;
Height:200px;
Float:left;
Background-color:rgba(0,0,0,0.8);
Box-size:border-box;
Padding:50px;

#welcome{
Font-size:50px;
Color:white;
Text-align:centre;
padding:0;
Margin:0;
}

#menu{
Width:600px;
Height:100px;
Backgroud-color:red;
Box-sizing:border-box;
Margin-top:5px;
}

#nav_items{
Width:700px;
Height:70px;
Box-sizing:border-box;
Border-width:2px;
Border-style:solid;
Border-color:white;
Text-align:center;
}

A{
Color:white;
Text-decoration:none;
Font-family:sens-serif;

}
/*end nav coding*/

/*start homepage nav coding*/

home_section{
Width:700px;
Height:407px;
Box-sizing:border-box;
Float:right;
Background-image:url(../image/abc.png);
}

#logo{
Width:180px;
height:120px;
Box-sizing:border-box;
Border-width:1px;
Border-style:solid;
Border-color:white;
Margin-top:100px;
}

#logo_text{
Margin:0;
Padding:0;
Font-family:vardhana;
Margin-top:-20px;
Color:white;
Font-size:120px;
}

#domain{
Color:white;
Font-family:vardhana;
Font-size:50px;
Text-align:center;
Margin-left:40px;
Margin:0;
Padding:0;
}

/*end home page nav coding*/

/*start login page nav coding*/

#domain_name{
Margin:0;
Padding:0;
Color:white;
Text-align:center;
Font-size:40px;
Font-family:sens-serif;
}

/*end login page nav coding*/

/*start login page section coding*/


Feildset{
Width:100px;
Height:50px;
Border-color:white;
Border-style:solid;
Border-width:2px;
Margin-left:180px;
Padding:20px;
}

#login_section{padding:60px;
Width:700px;
Height:407px;
Box-sizing:border-box;
Float:right;
Background-image:url(../image/abc.png);
Padding:60px;
}
Legend{
Font-family:century-gothic;
Color:white;
Font-size:30px;
Font-weight:bold;
}

#login_form{
Font-family:century-gothic;
Color:white;
Font-size:20px;
}

#Username{
Width:100%;
Height:30px;
Background-color:inherit;
Border:none;
Border-width:1px;
Border-style:solid;
Border-color:white;
Color:white;
Font-size:10px;
Margin-bottom:20px;
}
#password{
Width:100%;
Height:30px;
Background-color:inherit;
Border:none;
Border-width:1px;
Border-style:solid;
Border-color:white;
Color:white;
Font-size:10px;
}

#login_button{
Width:100px;
Height:40px;
Float:right;
Margin-top:20px;
Background-color:inherit;
Border:none;
Border-width:1px;
Border-style:solid;
Border-color:white;
Color:white;
Font-family:century-gothic;
}

/*end login page section coding*/

/*start contact page section coding*/

#contact{
Font-size:20px;
Color:white;
Font-style:normal;
Font-family:century-gothic;
Line-height:40px;
}

#brands{
Widht:100%;
Height:500px;
Float:left;
Border-sizing:border-box;
Background-color:rgba(255,255,255,0.8);
}

/*end contact page section coding*/

/*start product page section coding*/

#product_section{
Width:100%;
Height:1900px;
Border-style:solid;
Border-width:2px;
Border-color:red;
Float:left;
Box-sizing:border-box;

#brand_heading{
Text-align:center;
Font-style:century-gothic;
Font-size:40px;

#brand-pic{
Width:200px;
Height:80px
Border-width:2px;
Border-style:solid;
Border-color:white;
Box-sizing:border-box;
Float:left;
Margin:30px;
Margin-top:10px;
Background-color:white;
}

#search{
Width:160px;
Height:30px;
Float:left;
Margin-left:20%;
Margin-right:20%;
Border:none;
Border-width:2px;
Border-style:solid;
Border-color:#ccc;
Font-size:18px;
Padding:10px;
Background-image:url(../search.png);
Background-size:40px 40px;
Background-repeat:no-repeat;
Background-position:right;

#zest_products{
Width:100px;
Height:1500px;
Float:left;
Box-sizing:border-box;
Background-color:rgba(0,0,0,0.8);

#zest{
Text-align:center;
Color:white;
Font-style:century-gothic;
Font-size:30px;

#zest_product_pics{
Width:250px;
Height:320px;
Float:left;
Border-width:2px;
Border-style:solid;
Border-color;white;
Box-sizing:border-box;
Margin:30px;
}

#dove_products{
Width:100px;
Height:1500px;
Float:left;
Box-sizing:border-box;
Background-color:rgba(0,0,0,0.8);

#dove{
Text-align:center;
Color:white;
Font-style:century-gothic;
Font-size:30px;

#dove_product_pics{
Width:250px;
Height:320px;
Float:left;
Border-width:2px;
Border-style:solid;
Border-color;white;
Box-sizing:border-box;
Margin:30px;
}

#beauty_products{
Width:100px;
Height:320px;
Float:left;
Box-sizing:border-box;
Background-color:rgba(0,0,0,0.8);

#beauty{
Text-align:center;
Color:white;
Font-style:century-gothic;
Font-size:30px;

#beauty_product_pics{
Width:250px;
Height:300px;
Float:left;
Border-width:2px;
Border-style:solid;
Border-color;white;
Box-sizing:border-box;
Margin:30px;
}

#product_name{
Color:white;
Text-align:center;
Padding:0;
Margin:0;
Font-family:sens-serif;
Font-size;20PX;
Margin-top:10px;

}
#product_price{padding:0;
Margin:0;
Color:white;
Margin:10px;
Font-family:sans-serif;
Float:right;
}

product_buy{padding:0;
Margin:0;
Color:white;
Margin:10px;
Font-family:sans-serif;
Float:right;
}
/*end product page section coding*/

Footer{
Width:100%;
Height:80px;
Box-sizing:border-box;
Float:left;
Background-color:rgba(255,255,255,0.8);
Text-align:center;

Home page

<!DOCTYPE html>
<html>
<head>
<meta lang="en-US">
<meta charset="utf-8">
<meta name="keywords" content="beautyproducts, beauty, beautyproducts.com">
<meta name="description" content="hello everyone here is the information about new
beauty products arrivals">

<meta name="author" content="ashishxg.com">


<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Homepage
</title>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div id="dark">
</div>
<!--start nav coding-->
<nav>
<h1 id="welcome">welcome</h1>
<table id="menu" align="center" cellspacing="20px">
<tr>
<td id="nav_items"><a href="index.html">home<a></td>
<td id="nav_items"><a href="product.html">products<a></td>
<td id="nav_items"><a href="contact.html">contact<a></td>
<td id="nav_items"><a href="#">about<a></td>
<td id="nav_items"><a href="login.html">contact<a></td>
</tr>
</table>
</nav>
<!--end nav coding-->

<!--start section coding-->


<section home_section>
<center>
<div id="logo">
<h1 id="logo_text">XG</h1>
<p id="domain">beautyprodutsxg.com</p>

</div>
</section>
</center>

<!--end section conding-->


</body>
</html>

LOGIN PAGE

<!DOCTYPE html>
<html>
<head>
<meta lang="en-US">
<meta charset="utf-8">
<meta name="keywords" content="beautyproducts, beauty, beautyproducts.com">
<meta name="description" content="hello everyone here is the information about new
beauty products arrivals">

<meta name="author" content="ashishxg.com">


<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Homepage
</title>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div id="dark">
</div>
<!--start nav coding-->
<nav>
<h1 id="domain_name">beautyprodutsxg.com</h1>
<table id="menu" align="center" cellspacing="20px">
<tr>
<td id="nav_items"><a href="index.html">home<a></td>
<td id="nav_items"><a href="product.html">products<a></td>
<td id="nav_items"><a href="contact.html">contact<a></td>
<td id="nav_items"><a href="#">about<a></td>
<td id="nav_items"><a href="login.html">contact<a></td>
</tr>
</table>
</nav>
<!--end nav coding-->

<!--start section coding-->

<section id="login_section">
<center>
<feildset>
<legend>
login
</legend>
<form id="login_form">
Username
<br>
<input type="text" name="username" id="username"><br>
Password<br>
<input type="password" name="password" id="password">
<br>
<input type="submit" value="login now" id="login_button">
</form>

</fieldset>
</center>
</section>

<!--end section conding-->


</body>
</html>

Contact page
<!DOCTYPE html>
<html>
<head>
<meta lang="en-US">
<meta charset="utf-8">
<meta name="keywords" content="beautyproducts, beauty, beautyproducts.com">
<meta name="description" content="hello everyone here is the information about new
beauty products arrivals">

<meta name="author" content="ashishxg.com">


<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Homepage
</title>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div id="dark">
</div>
<!--start nav coding-->
<nav>
<h1 id="domain_name">beautyprodutsxg.com</h1>
<table id="menu" align="center" cellspacing="20px">
<tr>
<td id="nav_items"><a href="index.html">home<a></td>
<td id="nav_items"><a href="product.html">products<a></td>
<td id="nav_items"><a href="contact.html">contact<a></td>
<td id="nav_items"><a href="#">about<a></td>
<td id="nav_items"><a href="login.html">contact<a></td>
</tr>
</table>
</nav>
<!--end nav coding-->

<!--start section coding-->

<section id="login_section">
<center>
<feildset>
<legend>
Contact us
</legend>
<address id="contact">
Village : sangrah, district : sirmaur, Himachal Pradesh <br>
Contact no. +91 9816542102<br>
Email id : [email protected]<br>
Website : ashishxgbeautyproducts.com

</address>

</fieldset>
</center>
</section>

<!--end section conding-->


</body>
</html>
Products page

<!DOCTYPE html>
<html>
<head>
<meta lang="en-US">
<meta charset="utf-8">
<meta name="keywords" content="beautyproducts, beauty, beautyproducts.com">
<meta name="description" content="hello everyone here is the information about new
beauty products arrivals">

<meta name="author" content="ashishxg.com">


<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Homepage
</title>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div id="dark">
</div>
<!--start nav coding-->
<nav>
<h1 id="domain_name">beautyprodutsxg.com</h1>
<table id="menu" align="center" cellspacing="20px">
<tr>
<td id="nav_items"><a href="index.html">home<a></td>
<td id="nav_items"><a href="product.html">products<a></td>
<td id="nav_items"><a href="contact.html">contact<a></td>
<td id="nav_items"><a href="#">about<a></td>
<td id="nav_items"><a href="login.html">contact<a></td>
</tr>
</table>
</nav>
<!--end nav coding-->

<!--start section coding-->

<section id="product_section">

<div id="brands">

<h1 id="brand_heading">
choose your brand
</h1>
</div>
<a href="#zest_product"><div id="brand-pic"><Img src="image/abcd1.png" alt="zest"
width="100%" height="79%"/></div></a>

<a href="#dove_product"><div id="brand-pic"><Img src="image/abcd2.png" alt="dove"


width="100%" height="79%"/</div></a>

<a href="#beauty_product"><div id="brand-pic"><Img src="image/abcd3.png"


alt="apple" width="100%" height="79%"/</div></a>

<a href="#apple_product"><div id="brand-pic"><Img src="image/abcd4.png" alt="mi"


width="100%" height="72%"/</div></a>

<a href="#mi_product"><div id="brand-pic"><Img src="image/abcd5.jpg" alt="vivo"


width="100%" height="72%"/</div></a>

<form>
<input type="search" name="search" id="search" place_holder="search your brand
here">

<div id="zest_product">

<h1 id="zest">ZEST PRODUCTS</h1>

<div id="zest_proucts_pics">
<img src="image/soap.jpg" width="100%">
<p id="product_name">detol soap</p>
<p id="product_price">price : <i class="fas fa-ruppe-sign"></i>499</p>
<p id="product_buy"><i class="fas fa-shopping-cart"></i>buy now !</p>

</div>
<div id="zest_proucts_pics"><img src="image/a.jpg" width="100%">
<p id="product_name">detol soap</p></div>
<div id="zest_proucts_pics"><img src="image/b.jpg" width="100%"></div>
<div id="zest_proucts_pics"><img src="image/c.jpg" width="100%"></div>

</div>

<div id="dove_product">

<h1 id="dove">DOVE PRODUCTS</h1>

<div id="dove_proucts_pics"><img src="image/d.jpg" width="100%"></div>


<div id="dove_proucts_pics"><img src="image/e.jpg" width="100%"></div>
<div id="dove_proucts_pics"><img src="image/f.jpg" width="100%"></div>
<div id="dove_proucts_pics"><img src="image/g.jpg" width="100%"></div>

</div>

<div id="beauty_product">

<h1 id="beauty">beauty PRODUCTS</h1>

<div id="beauty_proucts_pics"><img src="image/i.jpg" width="100%"></div>


<div id="beauty_proucts_pics"><img src="image/h.jpg" width="100%"></div>
<div id="beauty_proucts_pics"><img src="image/j.jpg" width="100%"></div>
<div id="beauty_proucts_pics"><img src="image/k.jpg" width="100%"></div>

</div>

</form>

</section>

<!--end section conding-->

<footer>
<h4 id="">developed by : ashishxg</h4>
</footer>

</body>
</html>

Body{
Background-image:url(image/abc.jpg);
Background-size:100%,800px;
Background-repeat:no-repeat;
Background-position:top right;
Height:1000px;
Background-attachment:fixed;
Text-transform:capitalize;

H1{text-indent:20px;}
#dark{
Width:300px;
Height300px;
Background-color:blue;
Border-width:2px;
Border-style:solid;
Border-color:red;
Box-shadow:0px,10px,10px,0px;
Background-color:blue;
Border-radius:20px/10px; or 1px2px3px5px;
Border-top-right-radius:10px;
Display:none;

}
Span{
Width:100px;
Height:100px;
Background-color:red;
Display:block;

Ul{
list-style:squre;
}

Li{float:left;
Display:inline-block;
Border-width:2px;
Border-style:solid;
Border-color:red;
Width:100px;
Height:50px;

}
body{margin:0px
Padding:0px;
}

Li{
Width:200px;
Height:50px;
Background-color:black;
Color:white;
Display:inline-block;
Text-align:center;
Padding-top:10px;
Box-sizing:border-box;
Font-size:19px;
Font-family:sens-serif;

Li:hover{
Background-color:red;
Border-radius:50px;
Transition:0.5s;

}
Li:hover a{
Transition:1s;
Font-style:20px;
Color:yellow;
}

#Div2{
Width:100px;
Height:100px;
Background-color:red;

}
#div2:hover{
Background-color:red;
}

Ul{list-style:none;
Margin:0px
Padding:0px;

A{
Text-decpration:none;
Color:white;
Background-color:black;

Nav{
Width:100%;
}
<!DOCTYPE html>
<html lang="eng">
<head>
<title>
External stylesheet
</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="fafaiconstylesheetxg.com">
</head>
<body>
<div id="dark">
</div>
<span>hello Ashish xg<span>

<ul>
<li><a href="#">home</a></li>
<li><a href="#">page</a></li>
<li><a href="#">tag</a></li>
<li><a href="#">new</a></li>
<li><a href="#">data</a></li>
<li><a href="#">apple</a></li>

</ul>

<nav>
<ul>
<li>home</li>
<li><ashish/li>
<li>apple</li>
<li>new</li>
<li>data</li>

</ul>

</nav>
<div id="div2">
</div>
</body>
</html>

#one:focus{
Background-color:blue;
Outline-style:none;}

A:active{color:green;
Font-size:50px;
}

A:visited{color:yellow;}

#two:checked{
Width:100px;
Height:100px;
Background-color:sky-blue;
Color:white;

#one:disabled{
Width:100px;
Height:100px;
Background-color:skyblue;}

P:empty{
Width:100px;
Height:100px;
Background-color:skyblue;

p:Fist-child{
Width:100px;
Height:100px;
Background-color:skyblue;
}

p:Fist-of-type{
Width:100px;
Height:100px;
Background-color:red;
}

}
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8">
<title>
Ashishxg
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form>
<input type="text" disabled="disabled" id="one">

</form>
<a href="#">click on me</a>
<a href="#">here</a>

<form>
<input type="checkbox" id="two">

</form>
<div>
<p><p/>
p>apple text<p/>
</div>

</body>
</html>

Potrebbero piacerti anche