My projects
#Dars 6 #HTML #CSS #Mavzu: CSS boshlang'ich #Admin: @JASUR_6355 #Kanal: @Python_videodarslar
<!DOCTYPE html>
<html>
<head>
<title>CSS bilan ishlash</title>
<style type="text/css">
h1
{
text-align: center;
color: red;
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: yellow;
}
#n1
{
color: blue;
font-family: monotype corsiva;
text-align: left;
text-indent: 30px;
}
p
{
color: green;
text-align: left;
font-family: algerian;
font-size: 30pt;
text-indent: 50px;
}
</style>
</head>
<body>
<h1>Salom</h1>
<h1 id="n1">Namangan</h1>
<h1>namangan1</h1>
<p>Python</p>
<p>videodarslar</p>
</body>
</html>
<html>
<head>
<title>CSS bilan ishlash</title>
<style type="text/css">
h1
{
text-align: center;
color: red;
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: yellow;
}
#n1
{
color: blue;
font-family: monotype corsiva;
text-align: left;
text-indent: 30px;
}
p
{
color: green;
text-align: left;
font-family: algerian;
font-size: 30pt;
text-indent: 50px;
}
</style>
</head>
<body>
<h1>Salom</h1>
<h1 id="n1">Namangan</h1>
<h1>namangan1</h1>
<p>Python</p>
<p>videodarslar</p>
</body>
</html>
Media is too big
VIEW IN TELEGRAM
#Dars 7 #HTML #CSS
#Mavzu: CSS Boxlar bilan ishlash
#Admin: @JASUR_6355
#Kanal: @Python_videodarslar🧑🏻💻
#Mavzu: CSS Boxlar bilan ishlash
#Admin: @JASUR_6355
#Kanal: @Python_videodarslar🧑🏻💻
My projects
#Dars 7 #HTML #CSS #Mavzu: CSS Boxlar bilan ishlash #Admin: @JASUR_6355 #Kanal: @Python_videodarslar🧑🏻💻
# Index.HTML
<!DOCTYPE html>
<html>
<head>
<title>Box mavzusi bilan tanishish</title>
<link rel="stylesheet" type="text/css" href="dizayn.css">
</head>
<body>
<div id="sayt">
<dir id="yuqori">
<p>yuqori</p>
</dir>
<div id="asosiy">
<h3>asosiy malumotlar</h3>
</div>
<div style="clear: both;">
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Box mavzusi bilan tanishish</title>
<link rel="stylesheet" type="text/css" href="dizayn.css">
</head>
<body>
<div id="sayt">
<dir id="yuqori">
<p>yuqori</p>
</dir>
<div id="asosiy">
<h3>asosiy malumotlar</h3>
</div>
<div style="clear: both;">
</div>
</div>
</body>
</html>
My projects
#Dars 7 #HTML #CSS #Mavzu: CSS Boxlar bilan ishlash #Admin: @JASUR_6355 #Kanal: @Python_videodarslar🧑🏻💻
# CSS kodi
*{margin: 0; padding: 0;}
.sayt
{
background: gray;
width: 1200px;
height: 500px;
border: 2px solid red;
border-radius: 25px;
margin: 15px auto;
}
.sarlavha
{
background: blue;
text-align: center;
font-size: 16pt;
font-family: algerian;
font-weight: none;
border-radius: 25px;
border:2px solid black;
}
.yigindi
{
float: left;
border-radius: 20px;
border: 2px solid pink;
}
.matn1
{
width: 1180px;
text-indent: 15px;
font-size: 16pt;
font-family: monotype corsiva;
font-weight: 30px;
padding: 10px;
text-align: justify;
}
.pic1
{
float: left;
width: 180px;
height: 100px;
border-radius: 15px;
border: 3px solid red;
}
.pic2
{
float: left;
width: 180px;
height: 100px;
border-radius: 15px;
border: 3px solid red;
}
.pic3
{
float: left;
width: 180px;
height: 100px;
border-radius: 15px;
border: 3px solid red;
}
.pic4
{
float: right;
width: 180px;
height: 300px;
border-radius: 15px;
border: 3px solid red;
}
.footer
{
width: 558px;
padding: 10px;
border: 0px solid black;
border-radius: 20px;
}
.birlashma
{
clear: both;
}
*{margin: 0; padding: 0;}
.sayt
{
background: gray;
width: 1200px;
height: 500px;
border: 2px solid red;
border-radius: 25px;
margin: 15px auto;
}
.sarlavha
{
background: blue;
text-align: center;
font-size: 16pt;
font-family: algerian;
font-weight: none;
border-radius: 25px;
border:2px solid black;
}
.yigindi
{
float: left;
border-radius: 20px;
border: 2px solid pink;
}
.matn1
{
width: 1180px;
text-indent: 15px;
font-size: 16pt;
font-family: monotype corsiva;
font-weight: 30px;
padding: 10px;
text-align: justify;
}
.pic1
{
float: left;
width: 180px;
height: 100px;
border-radius: 15px;
border: 3px solid red;
}
.pic2
{
float: left;
width: 180px;
height: 100px;
border-radius: 15px;
border: 3px solid red;
}
.pic3
{
float: left;
width: 180px;
height: 100px;
border-radius: 15px;
border: 3px solid red;
}
.pic4
{
float: right;
width: 180px;
height: 300px;
border-radius: 15px;
border: 3px solid red;
}
.footer
{
width: 558px;
padding: 10px;
border: 0px solid black;
border-radius: 20px;
}
.birlashma
{
clear: both;
}
My projects
Shu stildagi sayt yaratish uchun kod
HTML kodi:
<!DOCTYPE html>
<html>
<head>
<title>Gaz suv</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="sayt">
<div id="header">
<div class="hleft">
<h1>Jasurbek Gaz taminot kompaniyasi</h1>
</div>
<div class="hright">
<p>+99890 554 63 55
<br>+99833 300 42 46</p>
</div>
</div>
<div id="menu">
<div class="main">
</div>
<div class="main">
<a href="#"> Bosh sahifa</a>
</div>
<div class="main">
<a href="#">Jamiyat</a>
</div>
<div class="main">
<a href="#">Mahsulotlar</a>
</div>
<div class="main">
<a href="#">Bog'lanish</a>
</div>
<div class="main">
</div>
</div>
<div id="fon_home">
<p>Biz bilan uyingiz issiq</p>
</div>
<div class="aboutme">
<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 class="batafsil">
<a href="#">Batafsil</a>
</div>
</div>
<div class="boglanish">
<div class="markazlash">
<div class="aloqa">
<img src="image/c-1.png">
<a href="#">Mahsulotlar</a>
</div>
<div class="aloqa">
<img src="image/c-2.png">
<a href="#">Narxlar</a>
</div>
<div class="aloqa">
<img src="image/c-3.png">
<a href="#">Bizning mijozlar</a>
</div>
</div>
</div>
<div class="oila">
<p>Oilangiz uchun ekologik
<br>toza mahsulot</p>
</div>
<div class="ostki">
<div class="manzil">
<img src="image/f-1.png">
</div>
<div class="manzil_1">
<p class="jirniy">Namangan viloyat</p>
<p>To'raqo'g'on tuman</p>
</div>
<div class="email">
<img src="image/f-2.png">
</div>
<div class="email_1">
<p class="jirniy">E-mail:</p>
<p>jasurbektatu61219@gmail.com</p>
</div>
<div class="telefon">
<img src="image/f-3.png">
</div>
<div class="telefon_1">
<p class="jirniy">TEL:</p>
<p>+99890 554 63 55</p>
<p>+99833 300 42 46</p>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Gaz suv</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="sayt">
<div id="header">
<div class="hleft">
<h1>Jasurbek Gaz taminot kompaniyasi</h1>
</div>
<div class="hright">
<p>+99890 554 63 55
<br>+99833 300 42 46</p>
</div>
</div>
<div id="menu">
<div class="main">
</div>
<div class="main">
<a href="#"> Bosh sahifa</a>
</div>
<div class="main">
<a href="#">Jamiyat</a>
</div>
<div class="main">
<a href="#">Mahsulotlar</a>
</div>
<div class="main">
<a href="#">Bog'lanish</a>
</div>
<div class="main">
</div>
</div>
<div id="fon_home">
<p>Biz bilan uyingiz issiq</p>
</div>
<div class="aboutme">
<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 class="batafsil">
<a href="#">Batafsil</a>
</div>
</div>
<div class="boglanish">
<div class="markazlash">
<div class="aloqa">
<img src="image/c-1.png">
<a href="#">Mahsulotlar</a>
</div>
<div class="aloqa">
<img src="image/c-2.png">
<a href="#">Narxlar</a>
</div>
<div class="aloqa">
<img src="image/c-3.png">
<a href="#">Bizning mijozlar</a>
</div>
</div>
</div>
<div class="oila">
<p>Oilangiz uchun ekologik
<br>toza mahsulot</p>
</div>
<div class="ostki">
<div class="manzil">
<img src="image/f-1.png">
</div>
<div class="manzil_1">
<p class="jirniy">Namangan viloyat</p>
<p>To'raqo'g'on tuman</p>
</div>
<div class="email">
<img src="image/f-2.png">
</div>
<div class="email_1">
<p class="jirniy">E-mail:</p>
<p>jasurbektatu61219@gmail.com</p>
</div>
<div class="telefon">
<img src="image/f-3.png">
</div>
<div class="telefon_1">
<p class="jirniy">TEL:</p>
<p>+99890 554 63 55</p>
<p>+99833 300 42 46</p>
</div>
</div>
</div>
</body>
</html>
My projects
Shu stildagi sayt yaratish uchun kod
CSS kodi:
*{margin: 0; padding: 0;}
#sayt
{
margin: 5px auto;
width: 1300px;
border-top: 5px solid #ff880c;
border-left: 1px solid black;
border-right: 1px solid yellow;
}
#header
{
width: 1300px;
height: 185px;
background: white/*#d5c0a1*/ url(image/logo-ch.png) no-repeat right center;
background-position: 850px;
}
#header .hleft h1
{
text-indent: 350px;
line-height: 185px;
font-family: Monotype Corsiva;
color: #ff880c;
}
#header .hleft
{
float: left;
width: 850px;
height: 185px;
}
#header .hright
{
float: left;
width: 450px;
height: 185px;
}
#header .hright p
{
font-size: 16px;
text-align: center;
line-height: 50px;
font-family: Algerian;
}
#menu
{
background: #ff880c;
height: 45px;
}
#menu .main
{
width: 160px;
height: 45px;
float: left;
}
#menu .main a
{
line-height: 45px;
font-family: algerian;
font-size: 18px;
}
.main:hover
{
background-color: yellow;
margin-left: 10px;
}
.main a
{
text-decoration-line: none;
}
#fon_home
{
width: 1300px;
height: 300px;
background-image: url(image/qidiruv.png);
background-size: 1300px 300px;
}
#fon_home p
{
text-align: right;
line-height: 300px;
font-family: Monotype Corsiva;
font-size: 60px;
color: white;
padding-right: 60px;
}
.aboutme
{
width: 1300px;
height: 250px;
background-color: #ffffff
}
.aboutme p
{
text-align: justify;
padding: 5px;
color: #ff880c;
font-size: 25px;
}
.aboutme .batafsil
{
width: 100px;
height: 25px;
background-color: #ff880c;
margin-left: 800px;
}
.aboutme .batafsil a
{
font-size: 20px;
color: white;
text-decoration-line: none;
margin-left: 15px;
}
.boglanish
{
background-color: gray;
width: 1300px;
height: 220px;
}
.boglanish .markazlash
{
margin-left: 220px;
}
.boglanish .markazlash .aloqa
{
width: 200px;
height: 200px;
}
.boglanish .markazlash .aloqa
{
width: 200px;
height:200px;
float: left;
margin-left: 50px;
}
.boglanish .markazlash .aloqa img
{
padding: 40px;
margin-left: 10px;
width: 100px;
height: 80px;
}
.boglanish .markazlash .aloqa a
{
font-family: Algerian;
font-size: 20px;
padding: 20px;
text-transform: uppercase;
text-decoration-line: none;
}
.boglanish .markazlash .aloqa:hover
{
background-color: #555151;
}
.oila
{
background-image: url(image/eko.png);
width: 1300px;
height: 657px;
}
.oila p
{
padding-top: 300px;
padding-left: 140px;
font-size: 50px;
font-family: Monotype Corsiva;
color: white;
}
.ostki
{
width: 1300px;
height: 575px;
background-image:url(image/Layer.png);
}
.ostki .manzil
{
margin-left: 18px;
float: left;
margin-top: 10px;
}
.ostki .manzil_1
{
margin-left: 10px;
margin-top: 15px;
float: left;
}
.ostki .email
{
margin-left: 150px;
margin-top: 15px;
float: left;
}
.ostki .email_1
{
margin-left: 10px;
margin-top: 15px;
float: left;
}
.ostki .telefon
{
margin-left: 300px;
margin-top: 15px;
float: left;
}
.ostki .telefon_1
{
margin-top: 15px;
margin-left: 10px;
float: left;
}
*{margin: 0; padding: 0;}
#sayt
{
margin: 5px auto;
width: 1300px;
border-top: 5px solid #ff880c;
border-left: 1px solid black;
border-right: 1px solid yellow;
}
#header
{
width: 1300px;
height: 185px;
background: white/*#d5c0a1*/ url(image/logo-ch.png) no-repeat right center;
background-position: 850px;
}
#header .hleft h1
{
text-indent: 350px;
line-height: 185px;
font-family: Monotype Corsiva;
color: #ff880c;
}
#header .hleft
{
float: left;
width: 850px;
height: 185px;
}
#header .hright
{
float: left;
width: 450px;
height: 185px;
}
#header .hright p
{
font-size: 16px;
text-align: center;
line-height: 50px;
font-family: Algerian;
}
#menu
{
background: #ff880c;
height: 45px;
}
#menu .main
{
width: 160px;
height: 45px;
float: left;
}
#menu .main a
{
line-height: 45px;
font-family: algerian;
font-size: 18px;
}
.main:hover
{
background-color: yellow;
margin-left: 10px;
}
.main a
{
text-decoration-line: none;
}
#fon_home
{
width: 1300px;
height: 300px;
background-image: url(image/qidiruv.png);
background-size: 1300px 300px;
}
#fon_home p
{
text-align: right;
line-height: 300px;
font-family: Monotype Corsiva;
font-size: 60px;
color: white;
padding-right: 60px;
}
.aboutme
{
width: 1300px;
height: 250px;
background-color: #ffffff
}
.aboutme p
{
text-align: justify;
padding: 5px;
color: #ff880c;
font-size: 25px;
}
.aboutme .batafsil
{
width: 100px;
height: 25px;
background-color: #ff880c;
margin-left: 800px;
}
.aboutme .batafsil a
{
font-size: 20px;
color: white;
text-decoration-line: none;
margin-left: 15px;
}
.boglanish
{
background-color: gray;
width: 1300px;
height: 220px;
}
.boglanish .markazlash
{
margin-left: 220px;
}
.boglanish .markazlash .aloqa
{
width: 200px;
height: 200px;
}
.boglanish .markazlash .aloqa
{
width: 200px;
height:200px;
float: left;
margin-left: 50px;
}
.boglanish .markazlash .aloqa img
{
padding: 40px;
margin-left: 10px;
width: 100px;
height: 80px;
}
.boglanish .markazlash .aloqa a
{
font-family: Algerian;
font-size: 20px;
padding: 20px;
text-transform: uppercase;
text-decoration-line: none;
}
.boglanish .markazlash .aloqa:hover
{
background-color: #555151;
}
.oila
{
background-image: url(image/eko.png);
width: 1300px;
height: 657px;
}
.oila p
{
padding-top: 300px;
padding-left: 140px;
font-size: 50px;
font-family: Monotype Corsiva;
color: white;
}
.ostki
{
width: 1300px;
height: 575px;
background-image:url(image/Layer.png);
}
.ostki .manzil
{
margin-left: 18px;
float: left;
margin-top: 10px;
}
.ostki .manzil_1
{
margin-left: 10px;
margin-top: 15px;
float: left;
}
.ostki .email
{
margin-left: 150px;
margin-top: 15px;
float: left;
}
.ostki .email_1
{
margin-left: 10px;
margin-top: 15px;
float: left;
}
.ostki .telefon
{
margin-left: 300px;
margin-top: 15px;
float: left;
}
.ostki .telefon_1
{
margin-top: 15px;
margin-left: 10px;
float: left;
}
Media is too big
VIEW IN TELEGRAM
#Dars 9 #HTML #CSS
#Mavzu: CSS Menu hamda Class lar bilan ishlash
#Admin: @JASUR_6355
#Kanal: @Python_videodarslar🧑🏻💻
#Mavzu: CSS Menu hamda Class lar bilan ishlash
#Admin: @JASUR_6355
#Kanal: @Python_videodarslar🧑🏻💻
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