<html>
<head>
<style>
body {
background:#ffe;
color:gray;
}
.one{
height:35%;
width:auto;
background-color:#909090;
color:#ffe;
padding:15px;
text-align:left;
}
.one h1{
margin-left:15%;
margin-top:5%;
}
.two{
height:55%;
width:70%;
background-color:#bdee34;
color:#fff;
text-align:center;
}
.th3{
background-color:#cfffff;
position: absolute;
left:70%; top:50%;
width:25%;; height:45%;
border:10px solid #009909;
margin:25px;
padding:10px;
}
.nav{
background-color:#009909;
height:8%;
width:auto;padding:5px;
}
.nav ul {
text-decoration:none;
padding:0%;
margin:0%;
}
.nav ul li
{
float:right;
text-decoration:none;
list-style-type:none;
margin-top:1%;
margin-right:3%;
}
.nav a{
text-decoration:none;
color:#ffe;padding:15%;
}
.nav a:hover{
background-color:#ffe;
border-radius:5%;
color:#000;
}
.fotaer{
height:5%;
width:auto;
background-color:#cfffff;
color:#008;
padding:15px;
text-align:center;
margin-top:5%;
}
</style>
<title> my first web </title>
</head>
<body>
<div class="one">
<h1> MY First Web</h1>
</div>
<div class="nav">
<ul>
<li> <a href="http://google.com" target="_blank"> google </a></li>
<li> <a href="http://google.com" target="_blank"> youtube </a></li>
<li> <a href="http://google.com" target="_blank"> facebock </a></li>
<li> <a href="http://google.com" target="_blank"> telegram </a></li>
<li> <a href="http://google.com" target="_blank"> home </a></li>
<li> <a href="http://google.com" target="_blank"> about </a></li>
</ul>
</div>
<div class="two">
<h2> welcom to my web </h2>
<img src="new.jpg" height="120" width="120" />
<p>
<br /> ูุง ุชุบุฑู ูู ู ุงุถูู
<br />ููุงู ุญูุงุฉ ุชูุชุธุฑู ูุฃุดูุงุก ุฌู ููุฉ ูุฌุจ ุฃู ุชูุนููุง
<br /> ููุฑุญ ูุจูุฑ ูุงุฏุฑ ุนูู ู ุญู ูู ุญุฒู ู ุฑุฑุช ุจู
<br />ุซู ุจุฑุจู ุซู ุจููุณู.
</p>
</div>
<div class="th3">
<p>
ุฅู ุงูุฃุดุฎุงุต ุงูุฐูู ูุชุณู ูู ุจูุฏุฑ ุนุงู ู ู ุงูู ุจุงุฏุฑุฉ ูู ูุฒูู ุจุฏุงุฎููู ุชูู "ุงููุฏุฑุฉ ุนูู ุงูุงุณุชุฌุงุจุฉ ุงูุญุฑุฉ" ุฃู ุงููุฏุฑุฉ ุนูู ุงุฎุชูุงุฑ ูุชุญุฏูุฏ ููุนูุฉ ุงุณุชุฌุงุจุงุชูู . ุฅููู ูุง ููููู ุจุงูููู ุนูู ุงูุธุฑููุ ุฃู ุงูุฃุญูุงูุ ุฃู ุงูุจูุฆุฉ ุงูู ุญูุทุฉ ุจูู ููุชูู ูููุง ุจุฃููุง ุงูุณุจุจ ูู ุณููููู ุ ูุณููููู ูู ูุชูุฌุฉ ุงุฎุชูุงุฑูู ุงููุงุนูุ ููุณุชูุฏ ุฅูู ููู ูู ุ ูููุณ ูุชูุฌุฉ ุงูุธุฑููุ ููุง ูุณุชูุฏ ุฅูู ู ุดุงุนุฑูู .
</p>
</div>
<div class="fotaer">
this web is dev by programer femo @2016
</div>
</body>
</html>
<head>
<style>
body {
background:#ffe;
color:gray;
}
.one{
height:35%;
width:auto;
background-color:#909090;
color:#ffe;
padding:15px;
text-align:left;
}
.one h1{
margin-left:15%;
margin-top:5%;
}
.two{
height:55%;
width:70%;
background-color:#bdee34;
color:#fff;
text-align:center;
}
.th3{
background-color:#cfffff;
position: absolute;
left:70%; top:50%;
width:25%;; height:45%;
border:10px solid #009909;
margin:25px;
padding:10px;
}
.nav{
background-color:#009909;
height:8%;
width:auto;padding:5px;
}
.nav ul {
text-decoration:none;
padding:0%;
margin:0%;
}
.nav ul li
{
float:right;
text-decoration:none;
list-style-type:none;
margin-top:1%;
margin-right:3%;
}
.nav a{
text-decoration:none;
color:#ffe;padding:15%;
}
.nav a:hover{
background-color:#ffe;
border-radius:5%;
color:#000;
}
.fotaer{
height:5%;
width:auto;
background-color:#cfffff;
color:#008;
padding:15px;
text-align:center;
margin-top:5%;
}
</style>
<title> my first web </title>
</head>
<body>
<div class="one">
<h1> MY First Web</h1>
</div>
<div class="nav">
<ul>
<li> <a href="http://google.com" target="_blank"> google </a></li>
<li> <a href="http://google.com" target="_blank"> youtube </a></li>
<li> <a href="http://google.com" target="_blank"> facebock </a></li>
<li> <a href="http://google.com" target="_blank"> telegram </a></li>
<li> <a href="http://google.com" target="_blank"> home </a></li>
<li> <a href="http://google.com" target="_blank"> about </a></li>
</ul>
</div>
<div class="two">
<h2> welcom to my web </h2>
<img src="new.jpg" height="120" width="120" />
<p>
<br /> ูุง ุชุบุฑู ูู ู ุงุถูู
<br />ููุงู ุญูุงุฉ ุชูุชุธุฑู ูุฃุดูุงุก ุฌู ููุฉ ูุฌุจ ุฃู ุชูุนููุง
<br /> ููุฑุญ ูุจูุฑ ูุงุฏุฑ ุนูู ู ุญู ูู ุญุฒู ู ุฑุฑุช ุจู
<br />ุซู ุจุฑุจู ุซู ุจููุณู.
</p>
</div>
<div class="th3">
<p>
ุฅู ุงูุฃุดุฎุงุต ุงูุฐูู ูุชุณู ูู ุจูุฏุฑ ุนุงู ู ู ุงูู ุจุงุฏุฑุฉ ูู ูุฒูู ุจุฏุงุฎููู ุชูู "ุงููุฏุฑุฉ ุนูู ุงูุงุณุชุฌุงุจุฉ ุงูุญุฑุฉ" ุฃู ุงููุฏุฑุฉ ุนูู ุงุฎุชูุงุฑ ูุชุญุฏูุฏ ููุนูุฉ ุงุณุชุฌุงุจุงุชูู . ุฅููู ูุง ููููู ุจุงูููู ุนูู ุงูุธุฑููุ ุฃู ุงูุฃุญูุงูุ ุฃู ุงูุจูุฆุฉ ุงูู ุญูุทุฉ ุจูู ููุชูู ูููุง ุจุฃููุง ุงูุณุจุจ ูู ุณููููู ุ ูุณููููู ูู ูุชูุฌุฉ ุงุฎุชูุงุฑูู ุงููุงุนูุ ููุณุชูุฏ ุฅูู ููู ูู ุ ูููุณ ูุชูุฌุฉ ุงูุธุฑููุ ููุง ูุณุชูุฏ ุฅูู ู ุดุงุนุฑูู .
</p>
</div>
<div class="fotaer">
this web is dev by programer femo @2016
</div>
</body>
</html>
๐Create ๐ Programmer๐ยฉ
#ุฌู
ุงุนุฉ_ุงูููุจ||ุฎุงุตูุฉ ุงูุถู
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: #000;
}
p{
color: #ffe;
}
div {
background-color: #4dff88;
width: 400px;
height: 150px;
padding: 20px;
box-shadow: 8px 8px 8px #ccccb3;
}
</style>
</head>
<body>
<p>ุจูุฐุง ุงูุฏุฑุณ ุฑุงุญ ุงูุถุญ ุฎุงุตูุฉ ุญููุฉ ูููู ุงุณู ูุฉ ุงูุถู -shadow</p>
<br>
<div>
ุงูุถู ุฑุงุญ ูููู ุงุณูู ููู ูู ููุณุงุฑ ูููุฏุฑ ูุญุทู ููู ุงูุฏู
</div>
</body>
</html>
<html>
<head>
<style>
body{
background-color: #000;
}
p{
color: #ffe;
}
div {
background-color: #4dff88;
width: 400px;
height: 150px;
padding: 20px;
box-shadow: 8px 8px 8px #ccccb3;
}
</style>
</head>
<body>
<p>ุจูุฐุง ุงูุฏุฑุณ ุฑุงุญ ุงูุถุญ ุฎุงุตูุฉ ุญููุฉ ูููู ุงุณู ูุฉ ุงูุถู -shadow</p>
<br>
<div>
ุงูุถู ุฑุงุญ ูููู ุงุณูู ููู ูู ููุณุงุฑ ูููุฏุฑ ูุญุทู ููู ุงูุฏู
</div>
</body>
</html>
๐Create ๐ Programmer๐ยฉ
#transition
<!DOCTYPE html>
<html>
<head>
<style>
body{
color:#ffe;
background: #000;
text-align:center;
}
div {
width: 50px;
height: 50px;
background: #4d4dff;
transition: width 2s;
}
div:hover {
width: 150px;
}
.div1{
width: 50px;
height: 50px;
background: #4d4dff;
transition: width 2s, height 4s;
}
.div1:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<p>
ุจุงูุจุฏุงูู ุงุณุชุฎุฏู ูู ุฎุงุตูุฉ ูููุฑ ููู ุงูุฑูุงุจุท ูุนูู ู ู ูููู ุน ุฑุงุจุท ูุชุบูุฑ ูููุฉ ูุณู ููุฏุฑูุณุชุฎุฏู ุฎุงุตูุฉ ูููุฑ ููู ุงูุฏู ูุนูู ูุฎูู ุงูุฏู ูุชุญุฑู ููุชุบูุฑ ุญุฌู ู ู ู ูููู ุนููู ู ุซูุง ูุฐุง ุงูุฏู ุญุฌู ู 50 ู ู ุงููู ุนููู ุฑุงุญ ูุตูุฑ ุญุฌู ู 150 ูุงูููุช ู ุงู ุชุญุฑูู ุงูุญุฌู ุญุฏุฏุชู ุจุฎุงุตูุฉ ุงูุชุฑุงูุฒุดู ุซุงููุชูู
</p>
<div>ุงุถุบุท ููุง ูุณูู ูุชุญุฑู ุจุงูุนุฑุถ </div>
<br>
<br>
<div class="div1">ุงุถุบุท ููุง ูุณูู ูุชุญุฑู ุจุงูุทูู ูุงูุนุฑุถ </div>
</body>
</html>
<html>
<head>
<style>
body{
color:#ffe;
background: #000;
text-align:center;
}
div {
width: 50px;
height: 50px;
background: #4d4dff;
transition: width 2s;
}
div:hover {
width: 150px;
}
.div1{
width: 50px;
height: 50px;
background: #4d4dff;
transition: width 2s, height 4s;
}
.div1:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<p>
ุจุงูุจุฏุงูู ุงุณุชุฎุฏู ูู ุฎุงุตูุฉ ูููุฑ ููู ุงูุฑูุงุจุท ูุนูู ู ู ูููู ุน ุฑุงุจุท ูุชุบูุฑ ูููุฉ ูุณู ููุฏุฑูุณุชุฎุฏู ุฎุงุตูุฉ ูููุฑ ููู ุงูุฏู ูุนูู ูุฎูู ุงูุฏู ูุชุญุฑู ููุชุบูุฑ ุญุฌู ู ู ู ูููู ุนููู ู ุซูุง ูุฐุง ุงูุฏู ุญุฌู ู 50 ู ู ุงููู ุนููู ุฑุงุญ ูุตูุฑ ุญุฌู ู 150 ูุงูููุช ู ุงู ุชุญุฑูู ุงูุญุฌู ุญุฏุฏุชู ุจุฎุงุตูุฉ ุงูุชุฑุงูุฒุดู ุซุงููุชูู
</p>
<div>ุงุถุบุท ููุง ูุณูู ูุชุญุฑู ุจุงูุนุฑุถ </div>
<br>
<br>
<div class="div1">ุงุถุบุท ููุง ูุณูู ูุชุญุฑู ุจุงูุทูู ูุงูุนุฑุถ </div>
</body>
</html>
๐Create ๐ Programmer๐ยฉ
#web_transition
<!DOCTYPE html>
<html>
<head>
<style>
body{
background: #000;
color:#ffe;
}
div {
width: 100px;
height: 100px;
background: #ff99ff;
transition: width 2s, height 2s, transform 2s;margin-left:180px;
}
div:hover {
background: #4d79ff;
width: 250px;
height: 250px;
transform: rotate(180deg);
}
</style>
</head>
<body>
<p>ูุฐุง ุงูู ุซุงู ุชุทุจูู ุน ุฎุงุตูุฉ ุชุฑุงูุฒููุฑู ุงูู ููู ุชุฎูู ุงูุฏู ูุฏูุฑ ุจ180
ุฏุฑุฌู ูููุฏุฑ ูุฎููู 90 ุงู 360 ุฏุฑุฌู ุงุฏูุฑ ุญูู ููุณูุฉ
</p>
<div></div>
<p>ูู ู ูุธุบุท ุน ุฏู ุฑุงุญ ูุชุบูุฑ ูููุฉ ู ู ุงูุจููุณุฌู ููุฃุฒุฑู </p>
</body>
</html>
<html>
<head>
<style>
body{
background: #000;
color:#ffe;
}
div {
width: 100px;
height: 100px;
background: #ff99ff;
transition: width 2s, height 2s, transform 2s;margin-left:180px;
}
div:hover {
background: #4d79ff;
width: 250px;
height: 250px;
transform: rotate(180deg);
}
</style>
</head>
<body>
<p>ูุฐุง ุงูู ุซุงู ุชุทุจูู ุน ุฎุงุตูุฉ ุชุฑุงูุฒููุฑู ุงูู ููู ุชุฎูู ุงูุฏู ูุฏูุฑ ุจ180
ุฏุฑุฌู ูููุฏุฑ ูุฎููู 90 ุงู 360 ุฏุฑุฌู ุงุฏูุฑ ุญูู ููุณูุฉ
</p>
<div></div>
<p>ูู ู ูุธุบุท ุน ุฏู ุฑุงุญ ูุชุบูุฑ ูููุฉ ู ู ุงูุจููุณุฌู ููุฃุฒุฑู </p>
</body>
</html>