1-amaliy ishi 1-amaliy ish Html bilan ishlash

Download 1,1 Mb.

bet	2/2
Sana	31.12.2021
Hajmi	1,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