• Selektor turlari CSS da teg va attributlar yo’q, uning o’rnini maxsus kodlar egallaydi va ular selektor, xususiyat va qiymat
  • .birodar
  • Dastur natijasi Loyha Dastur kodi: Html
  • Dastur natijasi Loyha Dastur kodi. Html
    		•

    Amaliy qism Dastur kodi




    Download 0.98 Mb.
    bet6/7
    Sana08.06.2023
    Hajmi0.98 Mb.
    #70993
    1   2   3   4   5   6   7
    Bog'liq
    CSS
    15, баён кирилда, Samatov, SHAMSIDDINOV ISAQJON, KT Laboratoriya ishi 4, 4-7-lab S.T, Заголовок отчета, mobiledan manga tushga test, loyiha ishi 2 cmestir, add, 4 Amaliy ish Operatsion tizimda Windows OT parolga asoslangan autentifikatsiya, 4.10, Fizika” fani bo’yicha, Ulugʻbek.M Akademik yozuv Reklama matni mustaqil ta\'lim 2, 1-Amaliyot ishi
    Amaliy qism

    Dastur kodi.
    Html

    DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task 1title>
    <link rel="stylesheet" href="css/stayle1.css">
    head>

    <body>
    <div class="container">
    <div class="box">
    <div class="logo">
    <img id="chi" src="/1.webp" alt="">
    div>
    <h1>2h1>
    <h3>Mobile deviceh3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing.p>
    div>
    <div class="box">
    <div class="logo">
    <img src="/2.jpg" alt="">
    div>
    <h1>4h1>
    <h3>Chrome devicesh3>
    <p>Lorem ipsum consectetur p>
    div>
    <div class="box">
    <div class="logo">
    <img id="chi2" src="/3.jpg" alt="">
    div>
    <h1>1h1>
    <h3>Chrome devices for meetingsh3>
    <p>Lorem ipsum dolor sit amet consecteturp>
    div>
    div>
    body>

    html>

    Css
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

    .container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    }

    .box {
    width: 22%;
    height: 380px;
    border: 2px solid rgba(159, 156, 156, 0.843);
    margin-left: 50px;
    text-align: center;
    }

    img {
    width: 90px;
    height: 90px;
    }

    .logo {

    text-align: center;
    margin: 15px 0px;
    }

    #chi {
    width: 55px;
    }

    #chi2 {
    width: 100px;
    height: 90px;
    }

    p {
    font-weight: 550;
    color: rgba(150, 144, 144, 0.724);
    }

    h3 {
    margin: 25px;
    }

    Dastur natijasi


    1. Loyha

    Dastur kodi:
    Html

    DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task 2title>
    <link rel="stylesheet" href="css/stayle2.css">
    head>

    <body>
    <div class="container">
    <div class="box">
    <p>Web development <b>//b>p>
    <h1>Frontend developmenth1>
    <div class="box2">
    <div class="box1">
    <h6>Dars vaqtih6>
    <h3>2 soath3>
    div>
    <div class="box1">
    <h6>Davomiyligih6>
    <h3>3 oyh3>
    div>
    div>
    <div class="clr">div>
    <h6> Kurs narxih6>
    <h2>500 000 so'mh2>
    div>

    <div class="box">
    <p>Web development <b>//b>p>
    <h1>Beckend developmenth1>
    <div class="box2">
    <div class="box1">
    <h6>Dars vaqtih6>
    <h3>2 soath3>
    div>
    <div class="box1">
    <h6>Davomiyligih6>
    <h3>6 oyh3>
    div>
    div>
    <div class="clr">div>
    <h6> Kurs narxih6>
    <h2>600 000 so'mh2>
    div>
    <div class="box">
    <p>Web development <b>//b>p>
    <h1>Android developmenth1>
    <div class="box2">
    <div class="box1">
    <h6>Dars vaqtih6>
    <h3>2 soath3>
    div>
    <div class="box1">
    <h6>Davomiyligih6>
    <h3>6 oyh3>
    div>
    div>
    <div class="clr">div>
    <h6> Kurs narxih6>
    <h2>600 000 so'mh2>
    div>
    div>

    body>

    html>
    Css
    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    }
    .container{
    width: 100vw;
    height: 100vh;
    background-color:rgba(207, 227, 231, 0.663);
    display: flex;
    justify-content: center;

     
    }
    .box{
    width: 250px;
    height: 280px;
    border: 4px solid white;
    background-color: white;
    margin: 10px;
    padding: 10px;
    margin-top: 50px;

    }
    h1{
    font-weight:500;
    margin: 15px auto;
    }
    .box1{
    margin-right: 50px ;
    margin-bottom: 20px;
    }

    .box2{
    display: flex ;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(167, 163, 163, 0.763);
    }
    .clr {
    clear: both;
    }
    h6{
    font-weight: 300;
    color: rgb(67, 66, 66);
    }
    b{
    color:rgb(43, 157, 43) ;
    }
    p{
    font-weight: 550;
    font-size: 15px;
    }

    Dastur natijasi


    1. Loyha


    Dastur kodi.
    Html
    DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task 3title>
    <link rel="stylesheet" href="css/stayle3.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    head>

    <body>
    <div class="container">
    <div class="box">
    <div class="img">
    <img src="/3.1.jpg" alt="">
    div>
    <div class="malumot">
    <div class="text">
    <p><i class="fa-solid fa-user">i> Charos saidovap>
    <h3>Qanday qilib oshxonani idishlarini uzoq mudat saqlash mumkin?h3>
    <h4>Oshxona idishlarini saqlash bo'yicha tafsiyalarh4>
    div>
    <div class="ico">
    <div class="left">
    <i class="fa-solid fa-thumbs-up">i>
    <i class="fa-solid fa-thumbs-down" id="margin">i>
    <i class="fa-sharp fa-solid fa-eye">i>
    div>
    <div class="right">
    <i class="fa-sharp fa-solid fa-bookmark">i>
    div>
    div>
    div>

    div>
    <div class="box">
    <div class="img">
    <img src="/3 2.jpg" alt="">
    div>
    <div class="malumot">
    <div class="text">
    <p><i class="fa-solid fa-user">i> Dilshod Hoshimov p>
    <h3>O'rmon yong'og'i iste'mol uchun foydalimi?h3>
    <h4>O'rmon yong'og'i haqida h4>
    div>
    <div class="ico">
    <div class="left">
    <i class="fa-solid fa-thumbs-up">i>
    <i class="fa-solid fa-thumbs-down" id="margin">i>
    <i class="fa-sharp fa-solid fa-eye">i>
    div>
    <div class="right">
    <i class="fa-regular fa-bookmark">i>
    div>
    div>
    div>
    div>
    <div class="box">
    <div class="img">
    <img src="/3.3.jpg" alt="">
    div>
    <div class="malumot">
    <div class="text">
    <p><i class="fa-solid fa-user">i> Dilshod Hoshimovp>
    <h3>Qanday qilib yuz niqoblarini uy sharoitida tikish mumkin?h3>
    <h4> h4>
    div>
    <div class="ico">
    <div class="left">
    <i class="fa-solid fa-thumbs-up">i>
    <i class="fa-solid fa-thumbs-down" id="margin">i>
    <i class="fa-sharp fa-solid fa-eye">i>
    div>
    <div class="right">
    <i class="fa-regular fa-bookmark">i>
    div>
    div>
    div>

    div>
    div>
    body>

    html>

    Css
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    }

    .container {

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    }

    .box {

    width: 720px;
    display: flex;
    font-size: 15px;
    margin: 5px;
    }

    .malumot {
    margin: 10px 25px;
    }

    h3 {
    margin: 20px 0;
    }

    h4 {
    margin: 20px 0;
    font-weight: 570;
    font-size: 13px;
    color: rgb(172, 167, 167);
    }

    .top {
    display: flex;
    color: rgba(200, 193, 193, 0.781);
    }

    img {
    width: 330px;
    height: 200px;
    }
    .text{
    height: 160px;
    }

    .ico {
    display: flex;
    justify-content: space-between;
    align-items: center;
    }

    p {
    color: rgba(200, 193, 193, 0.781);

    }

    .left {
    color: rgba(200, 193, 193, 0.781);
    }

    #margin {
    margin: 0 30px;
    }

    .right {
    color: rgba(41, 40, 40, 0.569);
    }
    i{
    margin-right: 5px;
    }



    Download 0.98 Mb.
    1   2   3   4   5   6   7




    Download 0.98 Mb.