#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>

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;
}

#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>

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;
}

#Dars 11 #HTML #CSS
#Mavzu: Psevda selectorlar
#Admin: @JASUR_6355
#Kanal: @Python_videodarslar🧑🏻‍💻

HTMl kodi, papkani arxivdan chiqarib ishlatib korishingiz mumkin, index faylga kiring

YouTube da kanalga qo'shilishingizni maslahat beraman

#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;
}

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>

#Dars 13 #HTML #CSS
#Mavzu: Animatsiyalar
#Admin: @JASUR_6355
#Kanal: @Python_videodarslar🧑🏻‍💻

arxiv fayli ikkalasini umumiy bitta papkaga chiqariladi

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;
}

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>

#Dars 14 #HTML #CSS
#Mavzu: SubMenu lar
#Admin: @JASUR_6355
#Kanal: @Python_videodarslar🧑🏻‍💻

arxiv fayli ikkalasini umumiy bitta papkaga chiqariladi