My projects
#Dars 9 #HTML #CSS #Mavzu: CSS Menu hamda Class lar bilan ishlash #Admin: @JASUR_6355 #Kanal: @Python_videodarslar🧑🏻💻
HTML kodi
<!DOCTYPE html>
<html>
<head>
<title>Claslar va css menyular bilan ishlash</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="sayt">
<div class="header">
<a href="#">About me</a>
<a href="#">Contact us</a>
<a href="#">FAQ</a>
<a href="#">Write our</a>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Claslar va css menyular bilan ishlash</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="sayt">
<div class="header">
<a href="#">About me</a>
<a href="#">Contact us</a>
<a href="#">FAQ</a>
<a href="#">Write our</a>
</div>
</div>
</body>
</html>
My projects
#Dars 9 #HTML #CSS #Mavzu: CSS Menu hamda Class lar bilan ishlash #Admin: @JASUR_6355 #Kanal: @Python_videodarslar🧑🏻💻
CSS kodi:
*{margin: 0 ; padding: 0}
#sayt
{
width: 1100px;
height: 700px;
border: 2px solid red;
border-radius: 30px;
margin: 30px auto;
}
#sayt .header
{
margin-top: 50px;
margin-left: 50px;
width: 400px;
height: 300px;
border: 2px solid orange;
border-radius: 25px;
}
#sayt .header a
{
display: block;
width: 120px;
text-decoration-line: none;
color: red;
border: 1px solid black;
}
#sayt .header a:hover
{
background: gray;
text-indent: 20px;
margin-left: 30px;
border-radius: 10px;
}
*{margin: 0 ; padding: 0}
#sayt
{
width: 1100px;
height: 700px;
border: 2px solid red;
border-radius: 30px;
margin: 30px auto;
}
#sayt .header
{
margin-top: 50px;
margin-left: 50px;
width: 400px;
height: 300px;
border: 2px solid orange;
border-radius: 25px;
}
#sayt .header a
{
display: block;
width: 120px;
text-decoration-line: none;
color: red;
border: 1px solid black;
}
#sayt .header a:hover
{
background: gray;
text-indent: 20px;
margin-left: 30px;
border-radius: 10px;
}
Media is too big
VIEW IN TELEGRAM
#Dars 10 #HTML #CSS
#Mavzu: Fonlar bilan ishlash (Background)
#Admin: @JASUR_6355
#Kanal: @Python_videodarslar🧑🏻💻
#Mavzu: Fonlar bilan ishlash (Background)
#Admin: @JASUR_6355
#Kanal: @Python_videodarslar🧑🏻💻
My projects
#Dars 10 #HTML #CSS #Mavzu: Fonlar bilan ishlash (Background) #Admin: @JASUR_6355 #Kanal: @Python_videodarslar🧑🏻💻
HTML kodi:
<!DOCTYPE html>
<html>
<head>
<title>Backgroundlar bilan ishlash</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="asosiy">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Backgroundlar bilan ishlash</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="asosiy">
</div>
</body>
</html>
My projects
#Dars 10 #HTML #CSS #Mavzu: Fonlar bilan ishlash (Background) #Admin: @JASUR_6355 #Kanal: @Python_videodarslar🧑🏻💻
CSS kodi:
*{margin:0; padding: 0}
.asosiy
{
width: 600px;
height: 350px;
border: 2px solid black;
margin: 20px auto;
border-radius: 30px;
background-image: url(img/winter.jpg);
background-repeat: no-repeat;
background-size: 300px 350px;
background-color: #ff880c;
box-shadow: 0px 0px 10px black;
}
*{margin:0; padding: 0}
.asosiy
{
width: 600px;
height: 350px;
border: 2px solid black;
margin: 20px auto;
border-radius: 30px;
background-image: url(img/winter.jpg);
background-repeat: no-repeat;
background-size: 300px 350px;
background-color: #ff880c;
box-shadow: 0px 0px 10px black;
}
My projects
#Dars 11 #HTML #CSS #Mavzu: Psevda selectorlar #Admin: @JASUR_6355 #Kanal: @Python_videodarslar🧑🏻💻
dars_11_psevda selektorlar.zip
110.4 KB
HTMl kodi, papkani arxivdan chiqarib ishlatib korishingiz mumkin, index faylga kiring
My projects
https://youtu.be/LYoOknr7PDc
YouTube da kanalga qo'shilishingizni maslahat beraman
My projects
#Dars 12 #HTML #CSS #Mavzu: Gradient #Admin: @JASUR_6355 #Kanal: @Python_videodarslar🧑🏻💻
CSS
*{margin:0; padding: 0;}
#sayt
{
width: 900px;
height: 500px;
border: 2px solid black;
margin: 30px auto;
background-color: black;
}
.header
{
height: 70px;
width: 900px;
background: linear-gradient(to right, orange,gray,yellow);
}
.content
{
height: 250px;
width: 900px;
}
*{margin:0; padding: 0;}
#sayt
{
width: 900px;
height: 500px;
border: 2px solid black;
margin: 30px auto;
background-color: black;
}
.header
{
height: 70px;
width: 900px;
background: linear-gradient(to right, orange,gray,yellow);
}
.content
{
height: 250px;
width: 900px;
}
My projects
#Dars 12 #HTML #CSS #Mavzu: Gradient #Admin: @JASUR_6355 #Kanal: @Python_videodarslar🧑🏻💻
HTML
<!DOCTYPE html>
<html>
<head>
<title>Gradientlar bilan ishlash</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="sayt">
<div class="header">
<div class="content">
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Gradientlar bilan ishlash</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="sayt">
<div class="header">
<div class="content">
</div>
</div>
</div>
</body>
</html>
My projects
#Dars 13 #HTML #CSS #Mavzu: Animatsiyalar #Admin: @JASUR_6355 #Kanal: @Python_videodarslar🧑🏻💻
day_13.zip
866 B
arxiv fayli ikkalasini umumiy bitta papkaga chiqariladi
My projects
#Dars 13 #HTML #CSS #Mavzu: Animatsiyalar #Admin: @JASUR_6355 #Kanal: @Python_videodarslar🧑🏻💻
CSS kodi:
*{margin:0; padding: 0}
.sayt
{
width: 1000px;
height: 600px;
border: 1px solid black;
margin:0px auto;
margin-top: 30px;
}
@keyframes matn_uchun
{
from{color: red; font-size: 20px;}
to{color: yellow; font-size: 40px;}
}
@keyframes harakat
{
15%{margin-left: 0px; margin-top: 153px;}
25%{margin-left: 150px; margin-top: 153px;}
50%{margin-left: 150px; margin-top: 253px;}
75%{margin-left: 0px; margin-top: 253px;}
100%{margin-left: 0px; margin-top: 153px;}
}
.matn
{
border:1px solid red;
height: 100px;
background: gray;
text-align: center;
line-height: 100px;
text-transform: uppercase;
font-size: 20px;
animation-name: matn_uchun;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-duration: 3s;
animation-fill-mode: forwards;
}
.shar
{
width: 50px;
height: 50px;
border: 2px solid blue;
border-radius: 25px;
background: blue;
position: absolute;
animation-name: harakat;
animation-delay: 1s;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
*{margin:0; padding: 0}
.sayt
{
width: 1000px;
height: 600px;
border: 1px solid black;
margin:0px auto;
margin-top: 30px;
}
@keyframes matn_uchun
{
from{color: red; font-size: 20px;}
to{color: yellow; font-size: 40px;}
}
@keyframes harakat
{
15%{margin-left: 0px; margin-top: 153px;}
25%{margin-left: 150px; margin-top: 153px;}
50%{margin-left: 150px; margin-top: 253px;}
75%{margin-left: 0px; margin-top: 253px;}
100%{margin-left: 0px; margin-top: 153px;}
}
.matn
{
border:1px solid red;
height: 100px;
background: gray;
text-align: center;
line-height: 100px;
text-transform: uppercase;
font-size: 20px;
animation-name: matn_uchun;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-duration: 3s;
animation-fill-mode: forwards;
}
.shar
{
width: 50px;
height: 50px;
border: 2px solid blue;
border-radius: 25px;
background: blue;
position: absolute;
animation-name: harakat;
animation-delay: 1s;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
My projects
#Dars 13 #HTML #CSS #Mavzu: Animatsiyalar #Admin: @JASUR_6355 #Kanal: @Python_videodarslar🧑🏻💻
HTML kodi:
<!DOCTYPE html>
<html>
<head>
<title>Animatsiyalar bilan ishlash</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="sayt">
<div class="matn">
<p>Python_videodarslar</p>
</div>
<div class="shar">
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Animatsiyalar bilan ishlash</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="sayt">
<div class="matn">
<p>Python_videodarslar</p>
</div>
<div class="shar">
</div>
</div>
</body>
</html>
My projects
#Dars 14 #HTML #CSS #Mavzu: SubMenu lar #Admin: @JASUR_6355 #Kanal: @Python_videodarslar🧑🏻💻
day_14.zip
1.2 KB
arxiv fayli ikkalasini umumiy bitta papkaga chiqariladi
My projects
#Dars 14 #HTML #CSS #Mavzu: SubMenu lar #Admin: @JASUR_6355 #Kanal: @Python_videodarslar🧑🏻💻
HTML kodi:
<!DOCTYPE html>
<html>
<head>
<title>Submenu lar bilan ishlash</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="sayt">
<div class="header">
<p>SAYT</p>
</div>
<div class="menyu">
<ul>
<li>
<a href="#">Bosh sahifa</a>
</li>
<li>
<a href="#">FAQ</a>
</li>
<li>
<a href="#">Bog'lanish</a>
</li>
<li>
<a href="#">Instagram</a>
<ul>
<li>
<a href="#">Telegram</a>
</li>
<li>
<a href="#">Facebook</a>
</li>
<li>
<a href="#">Twitter</a>
</li>
<li>
<a href="#">Vkontakte</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="matn">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Submenu lar bilan ishlash</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="sayt">
<div class="header">
<p>SAYT</p>
</div>
<div class="menyu">
<ul>
<li>
<a href="#">Bosh sahifa</a>
</li>
<li>
<a href="#">FAQ</a>
</li>
<li>
<a href="#">Bog'lanish</a>
</li>
<li>
<a href="#">Instagram</a>
<ul>
<li>
<a href="#">Telegram</a>
</li>
<li>
<a href="#">Facebook</a>
</li>
<li>
<a href="#">Twitter</a>
</li>
<li>
<a href="#">Vkontakte</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="matn">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>