DEV Community

Miss_code_creaker
Miss_code_creaker

Posted on

task

#01 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Task-1</title>
    <link rel="stylesheet" href="./style/style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <header>
      <nav class="navbar-container">
        <div class="nav-left">
          <img src="./images/icon/najot-ta'lim logo.svg" alt="logo" />
        </div>
        <div class="nav-right">
          <ul class="nav-links">
            <li><a href="#">Kurslar</a></li>
            <li><a href="#">Blog</a></li>
          </ul>
          <button class="nav-btn">Kirish</button>
        </div>
      </nav>

      <section class="hero container">
        <div class="text">
          <h1>
            Kasblarni <br />
            <strong>“Najot Ta’lim”</strong>da <br />
            o‘rganing
          </h1>
          <h4>
            O‘zingizga qulay vaqtda, joyda va uslubda <br />zamonaviy kasblarni
            o‘rganing.
          </h4>
          <button>Kurslarni ko‘rish</button>
        </div>

        <div class="photo-container">
          <img src="./images/Students male.png" alt="students" />
          <div class="background"></div>
        </div>
      </section>
    </header>

    <!-------------main section----------->
    <main>
      <section id="about">

        <div class="about-top">

          <h2>Bizning afzalliklarimiz</h2>
        </div>

        <div class="about-wrapper">
          <div class="about-card">
            <div class="content">
              <img src="./images/icon/icon1.svg" alt="icon" />
              <div class="about-text">
                <h4>Onlayn akademiya</h4>
                <p>
                  «Najot Ta’lim» digital academy — bu zamonaviy kasblar
                  o‘qitiladigan onlayn 
                  akademiya. Qayerda bo‘lishingizdan qat’i nazar: uydami yo
                  mehmonda, 
                  daladami yo safarda — o‘zingizga qulay tarzda va vaqtda bilim
                  olishingiz 
                  mumkin, internet va noutbuk bo‘lsa bas.
                </p>
              </div>
            </div>
          </div>
            <div class="about-card">
              <div class="content">
                <img src="./images/icon/icon3.svg" alt="icon" />
                <div class="about-text">
                  <h4>O‘z ishining ustalari</h4>
                  <p>
                    Darslar katta tajribaga ega malakali mutaxassislar tomonidan
                    tayyorlangan. O‘z ishining ustalaridan yanada ishonchli
                    bilim va tajribaga ega bo’lasiz
                  </p>
                </div>
              </div>
            </div>
              <div class="about-card">
                <div class="content">
                  <img src="./images/icon/icon2.svg" alt="icon" />
                  <div class="about-text">
                    <h4>Shunchaki kurs emas</h4>
                    <p>
                      Har bir o‘quv kursi shunday ishlab chiqilganki, ularni
                      muvaffaqiyatli 
                      yakunlab, siz zamonaviy kasb egasiga aylanishingiz va shu sohada
                      o‘z 
                      faoliyatingizni boshlashingiz mumkin. Hammasi o‘z qo‘lingizda.
                    </p>
                  </div>
                </div>
              </div>

                <div class="about-card">
                  <div class="content">
                    <img src="./images/icon/icon4.svg" alt="icon" />
                    <div class="about-text">
                      <h4>Interaktiv darslar</h4>
                      <p>
                        Darslarni o‘zlashtirish davrida sizda savollar tug‘ilishi tabiiy
                        holat. Mentorlarga murojaat qilishingiz, o’zgizni
                        qiziqtirgan savollarizga javob olishingiz va tavsiyalar
                        olishingiz mumkin
                      </p>
                    </div>
                  </div>
                </div>
              </div>


          <div class="icon-container">
            <span class="icon-text">Ko‘proq</span>
             <img src="./images/icon/ko'proq icon.png" alt="icon" />
          </div>
        </div>
      </section>



      <section id="process">
        <div class="container">
          <div class="wrapper">
            <div class="left">
              <h1>Yo‘nalishlar bo‘yicha kurslar</h1>
              <p>Zamonaviy sohalardan birini o‘rganing va talabgir kasb egasi bo‘ling!</p>
            </div>
          </div>
        </div>

        <div class="process_wrapper">
          <div class="process_card">
            <div class="content">
              <strong>Foundation dasturlash</strong>
              <p>Akbarshox Sattorov</p>
            </div>
          </div>

          <div class="process_card">
            <div class="content">
              <strong>Grafik dizayn bootcamp</strong>
              <p>Dilshodbek Ismoilov</p>
            </div>
          </div>


          <div class="process_card">
            <div class="content">
              <strong>.NET asoslari</strong>
              <p>Farxod Dadajanov</p>
            </div>
          </div>

          <div class="process_card">
            <div class="content">
              <strong>DevOps asoslari</strong>
              <p>Azimjon</p>
            </div>
          </div>

          <div class="process_card">
            <div class="content">
              <strong>Foundation dizayn</strong>
              <p>Dilshodbek Ismoilov</p>
            </div>
          </div>

          <div class="process_card">
            <div class="content">
              <strong>Kopirayting</strong>
              <p>Abduazim Rustamxo’jayev</p>
            </div>
          </div>


          <div class="process_card">
            <div class="content">
              <strong>Java asoslari</strong>
              <p>Shaxriyor Ergashev</p>
            </div>
          </div>


          <div class="process_card">
            <div class="content">
              <strong>Moushn dizayn</strong>
              <p>Shavkat Abduxalilov</p>
            </div>
          </div>
        </div>

          <div class="icon-container">
          <span>Barcha kurslarni ko‘rish</span>
          </div>
        </div>
    </section>

<!-- ----- Task - 2--------- -->

      <section id="work">

      <div class="work-container">
        <div class="wrapper">
          <div class="left">
            <h1>Bitiruvchilarimizning ish joylari:</h1>
            <p>Eng yaxshi bitiruvchilarimiz nufuzli tashkilot va kompaniyalarda faoliyat yuritadi. Zamonaviy kasb egalariga doim va har yerda talab yuqori bo‘ladi.</p>
          </div>
        </div>
      </div>


      <div class="work_wrapper">

        <div class="work_card">
          <img src="./images/icon-02/Epam01.svg" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/itechart02.svg" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/humo03.png" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/agrobank04.png" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/Davr bank05.svg" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/Texnomart06.svg" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/Soliq07.svg" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/uzcard08.svg" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/my-taxi09.svg" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/Mfactor10.svg" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/Jafton11.svg" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/Fido.studio12.png" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/Osmandagi bolalar13.png" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/Islom.uz14.svg" alt="logo">
        </div>

        <div class="work_card">
          <img src="./images/icon-02/Cnew15.svg" alt="logo">
        </div>
      </div>
    </section>


      <section id="comment">
        <div class="container">
          <div class="wrapper">
            <div class="left">
              <h1>Bitiruvchilarimizdan izohlar</h1>
              <p>Oʻquv kurslarimiz, ustozlar, qoʻlga kiritilgan bilim va koʻnikmalar, olingan natijalar haqida bitiruvchilarimizdan eshiting hamda ulardan kerakli tavsiyalar oling.</p>
            </div>
          </div>
        </div>

        <div class="comment container">
          <div class="comment_card">
            <button class="video_play">
              <img src="./images/icon-02/icon-pause.svg" alt="icon">
              <p>Video ko’rish</p>
            </button>
            <div class="text">
              <ul>
                <li>20.09.2022</li>
                <li>Grafik dizayner</li>
                <li>Sardor Abrorov</li>
              </ul>
            </div>
          </div>

          <div class="comment_card_play">
            <button class="video_play">
              <img src="./images/icon-02/icon-play.svg" alt="icon">
              <p>Video ko’rish</p>
            </button>
            <div class="text">
              <ul>
                <li>20.09.2022</li>
                <li>Grafik dizayner</li>
                <li>Maqsud Azimov</li>
              </ul>
            </div>
          </div>

          <div class="comment_card">
            <button class="video_play">
              <img src="./images/icon-02/icon-pause.svg" alt="icon">
              <p>Video ko’rish</p>
            </button>
            <div class="text">
              <ul>
                <li>20.09.2022</li>
                <li>Grafik dizayner</li>
                <li>Sardor Abrorov</li>
              </ul>
            </div>
          </div>

          <div class="comment_card">
            <button class="video_play">
              <img src="./images/icon-02/icon-pause.svg" alt="icon">
              <p>Video ko’rish</p>
            </button>
            <div class="text">
              <ul>
                <li>20.09.2022</li>
                <li>Grafik dizayner</li>
                <li>Sardor Abrorov</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="send">
          <img src="./images/icon-02/back_btn01.svg" alt="back">
          <p>1/4</p>
          <img src="./images/icon-02/btn02.svg" alt="send">
        </div>
      </section>


      <section class="block-f container">

        <div class="block-f_img">
          <img src="./images/Mask group.png" alt="mask group">
        </div>
        <div class="block-f_form">
          <h2>Yordam kerakmi?</h2>
          <p> <strong>FAQ</strong> boʻlimi ham sizga yordam bera olmadimi? Telefon raqamingizni yozib qoldiring, biz sizga qoʻngʻiroq qilamiz va birorta ham savolingiz javobsiz qolmasligiga harakat qilamiz.</p>
          <p>Ismingizni kiriting</p>
          <form>
            <input type="Alex(a)">
          </form>
          <p>Telefon raqamingizni kiriting</p>
          <form action="">
            <input type="text">
          </form>
          <h4>"So‘rov yuborish" tugmasini bosish orqali <strong>Platformadan foydalanish qoidalari</strong>ga rozilik bildirasiz.</h4>
          <button>So‘rov yuborish</button>
        </div>
      </section>
    </main>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

madsenmm profile image

I created a visually pleasing HTML color viewer

Tobias Mønster Madsen -

melanyss profile image

From Bartender to Developer: My Self-Taught Journey in Tech

Melanys -

supreethmv profile image

Discrete Digital Deception: Bits Fooling You

Supreeth Mysore Venkatesh -

maduayi profile image

PAIN:The other story of css

Michael Aduayi -