1-amaliy ishi 1-amaliy ish Html bilan ishlash



Download 1,1 Mb.
bet2/2
Sana31.12.2021
Hajmi1,1 Mb.
#265238
1   2
Bog'liq
Web amaliy 1-topshiriq

link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
<link rel="SHORTCOUT ICON" href="img/logoImg.png" type="image/x-icon">
<link rel="stylesheet" href="css/style.css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
head>
<body>

<div class="loader-bg">
<div class="loader">
<div class="loader-item">div>
<div class="loader-item">div>
<div class="loader-item">div>
<div class="loader-item">div>
<div class="loader-item">div>
<div class="loader-item">div>
<div class="loader-item">div>
<div class="loader-item">div>
div>
div>


<nav class="navbar">
<div class="inner-width">
<a href="#home" class="logo">a>
<button class="menu-toggler">
<span>span>
<span>span>
<span>span>
button>
<div class="navbar-menu">
<a href="#home">Homea>
<a href="#about">Abouta>
<a href="#services">Servicesa>
<a href="#education">Educationa>
<a href="#works">Worksa>
<a href="#contact">Contacta>
div>
div>
nav>



<section id="home">
<div class="inner-width">
<div class="content">
<h1>Hi I'mh1>
<div class="sm">
<a href="#" class="fab fa-facebook-f">a>
<a href="#" class="fab fa-twitter">a>
<a href="#" class="fab fa-instagram">a>
<a href="#" class="fab fa-linkedin-in">a>
<a href="#" class="fab fa-youtube">a>
<a href="#" class="fab fa-telegram">a>
div>
<div class="buttons">
<a href="#">Contact mea>
<a href="#">Download CVa>
div>
div>
div>
section>


<section id="about">
<div class="inner-width">
<h1 class="section-title">Abouth1>
<div class="about-content">
<img data-aos="fade-right" data-aos-duration="800" src="img/123.jpg" alt="About-picture" class="about-pic">
<div class="about-text">
<h2>Abduqodirov Sardorbekh2>
<h3>
<span>Developerspan>
<span>Designerspan>
<span>Site Creatorspan>
h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, consequatur. Ex temporibus placeat, illum repudiandae corporis assumenda facilis in illo alias. Fugiat dolorum aut odit enim accusamus minima odio recusandae consectetur quia ipsam assumenda voluptas ipsa tempore, quibusdam quasi libero doloribus deleniti commodi distinctio tempora obcaecati, sint pariatur beatae laborum! Iure cupiditate eius, dolore ipsum velit minus porro ex excepturi sed ducimus tenetur tempore corporis adipisci aliquid in officia et!
p>
div>
div>

<div class="skills">
<div class="skill">
<div class="skill-info">
<span>HTMLspan>
<span>90%span>
div>
<div class="skill-bar html">div>
div>

<div class="skill">
<div class="skill-info">
<span>CSSspan>
<span>80%span>
div>
<div class="skill-bar css">div>
div>

<div class="skill">
<div class="skill-info">
<span>JavaScriptspan>
<span>60%span>
div>
<div class="skill-bar js">div>
div>

<div class="skill">
<div class="skill-info">
<span>Bootstrapspan>
<span>70%span>
div>
<div class="skill-bar bootstrapt">div>
div>

<div class="skill">
<div class="skill-info">
<span>SASS (SCSS)span>
<span>80%span>
div>
<div class="skill-bar sass">div>
div>

<div class="skill">
<div class="skill-info">
<span>MySQLspan>
<span>30%span>
div>
<div class="skill-bar mysql">div>
div>

div>
div>
section>


<section id="services" class="dark">
<div class="inner-width">
<h1 class="section-title">Servicesh1>
<div class="services">
<div data-aos="flip-left" data-aos-duration="800" class="service">
<i class="icon fas fa-paint-brush">i>
<h4>Designh4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.p>
div>

<div data-aos="flip-down" data-aos-duration="800" class="service">
<i class="icon fas fa-pager">i>
<h4>Build Websiteh4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.p>
div>

<div data-aos="flip-right" data-aos-duration="800" class="service">
<i class="icon fas fa-database">i>
<h4>Manage Databaseh4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.p>
div>

<div data-aos="flip-left" data-aos-duration="800" class="service">
<i class="icon fab fa-android">i>
<h4>Android Appsh4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.p>
div>

<div data-aos="flip-up" data-aos-duration="800" class="service">
<i class="icon fas fa-credit-card">i>
<h4>UI Designh4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.p>
div>

<div data-aos="flip-right" data-aos-duration="800" class="service">
<i class="icon fas fa-keyboard">i>
<h4>Edit Textsh4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.p>
div>
div>
div>
section>


<section id="education">
<div class="inner-width">
<h1 class="section-title">Education & Experienceh1>
<div class="time-line">
<div data-aos="flip-down" data-aos-duration="800" class="block">
<h4>2017-2016h4>
<h3>Middle school No50h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Beatae quidem provident soluta quae ab itaque nulla
libero aperiam nemo dolorem!p>
div>

<div data-aos="flip-down" data-aos-duration="800" class="block">
<h4>2016-2019h4>
<h3>Academic Lyseumh3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Beatae quidem provident soluta quae ab itaque nulla
libero aperiam nemo dolorem!p>
div>

<div data-aos="flip-down" data-aos-duration="800" class="block">
<h4>2019-2023h4>
<h3>University of Information Technologiesh3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Beatae quidem provident soluta quae ab itaque nulla
libero aperiam nemo dolorem!p>
div>

<div data-aos="flip-down" data-aos-duration="800" class="block">
<h4>2019-2020h4>
<h3>PDP Academy - FrontEndh3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Beatae quidem provident soluta quae ab itaque nulla
libero aperiam nemo dolorem!p>
div>

<div data-aos="flip-down" data-aos-duration="800" class="block">
<h4>2020-2021h4>
<h3>PDP Academy - BackEndh3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Beatae quidem provident soluta quae ab itaque nulla
libero aperiam nemo dolorem!p>
div>

<div data-aos="flip-down" data-aos-duration="800" class="block">
<h4>2020-2021h4>
<h3>Full Stack Developmenth3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Beatae quidem provident soluta quae ab itaque nulla
libero aperiam nemo dolorem!p>
div>
div>
div>
section>


<section id="works" class="dark">
<div class="inner-width">
<h1 class="section-title">Worksh1>
<div class="works">
<a data-aos="flip-right" data-aos-duration="800" href="images/works/1.jpg" class="work">
<img src="images/works/1.jpg" alt="folder-works first-pic">
<div class="info">
<h3>Works titleh3>
<div class="cat">Music, Headsetdiv>
div>
a>

<a data-aos="flip-down" data-aos-duration="800" href="images/works/2.jpg" class="work">
<img src="images/works/2.jpg" alt="folder-works second-pic">
<div class="info">
<h3>Works titleh3>
<div class="cat">Music, Headsetdiv>
div>
a>

<a data-aos="flip-left" data-aos-duration="800" href="images/works/3.jpg" class="work">
<img src="images/works/3.jpg" alt="folder-works third-pic">
<div class="info">
<h3>Works titleh3>
<div class="cat">Music, Headsetdiv>
div>
a>

<a data-aos="flip-right" data-aos-duration="800" href="images/works/4.jpg" class="work">
<img src="images/works/4.jpg" alt="folder-works first-pic">
<div class="info">
<h3>Works titleh3>
<div class="cat">Music, Headsetdiv>
div>
a>

<a data-aos="flip-up" data-aos-duration="800" href="images/works/5.jpg" class="work">
<img src="images/works/5.jpg" alt="folder-works first-pic">
<div class="info">
<h3>Works titleh3>
<div class="cat">Music, Headsetdiv>
div>
a>

<a data-aos="flip-left" data-aos-duration="800" href="images/works/6.jpg" class="work">
<img src="images/works/6.jpg" alt="folder-works first-pic">
<div class="info">
<h3>Works titlessh3>
<div class="cat">Music, Headsetdiv>
div>
a>
div>
div>
section>


<section id="contact">
<div class="inner-width">
<h1 class="section-title">Contact (Get in touch)h1>
<div class="contact-info">
<div class="item">
<i class="fas fa-mobile-alt">i>
+998973271605
div>

<div class="item">
<i class="fas fa-envelope">i>
<p style="font-size: 13px !important">abduqodirov.sardor1605@gmail.comp>
div>

<div class="item">
<i class="fas fa-map-marker-alt">i>
Tashkent, Uzbekiston
div>
div>

<form action="#" class="contact-form">
<input type="text" class="nameZone" placeholder="Your Full Name" required>
<input type="email" class="emailZone" placeholder="Your Email" required>
<input type="text" class="subjectZone" placeholder="Subject" required>
<textarea class="messageZone" placeholder="Message" required minlength="20">textarea>
<input type="submit" value="Send Message" class="btn">
form>
div>
section>


<footer>
<div class="inner-width">
<div class="copyright">
© 2020 | Created & Designed By <a href="#about">Sardorbeka>
div>
<div class="sm">
<a href="#" class="fab fa-facebook-f">a>
<a href="#" class="fab fa-twitter">a>
<a href="#" class="fab fa-instagram">a>
<a href="#" class="fab fa-linkedin-in">a>
<a href="#" class="fab fa-youtube">a>
<a href="#" class="fab fa-telegram">a>
div>
div>
footer>


<button class="goTop fas fa-arrow-up">button>
body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js">script>
<script src="js/script.js">script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js">script>
<script>
AOS.init();
script>
html>
Download 1,1 Mb.

Do'stlaringiz bilan baham:
1   2




Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©hozir.org 2024
ma'muriyatiga murojaat qiling

kiriting | ro'yxatdan o'tish
    Bosh sahifa
юртда тантана
Боғда битган
Бугун юртда
Эшитганлар жилманглар
Эшитмадим деманглар
битган бодомлар
Yangiariq tumani
qitish marakazi
Raqamli texnologiyalar
ilishida muhokamadan
tasdiqqa tavsiya
tavsiya etilgan
iqtisodiyot kafedrasi
steiermarkischen landesregierung
asarlaringizni yuboring
o'zingizning asarlaringizni
Iltimos faqat
faqat o'zingizning
steierm rkischen
landesregierung fachabteilung
rkischen landesregierung
hamshira loyihasi
loyihasi mavsum
faolyatining oqibatlari
asosiy adabiyotlar
fakulteti ahborot
ahborot havfsizligi
havfsizligi kafedrasi
fanidan bo’yicha
fakulteti iqtisodiyot
boshqaruv fakulteti
chiqarishda boshqaruv
ishlab chiqarishda
iqtisodiyot fakultet
multiservis tarmoqlari
fanidan asosiy
Uzbek fanidan
mavzulari potok
asosidagi multiservis
'aliyyil a'ziym
billahil 'aliyyil
illaa billahil
quvvata illaa
falah' deganida
Kompyuter savodxonligi
bo’yicha mustaqil
'alal falah'
Hayya 'alal
'alas soloh
Hayya 'alas
mavsum boyicha


yuklab olish