• Footer
  • Xulosa
  • Web dasturlash”




    Download 1.54 Mb.
    bet3/3
    Sana25.10.2022
    Hajmi1.54 Mb.
    #28044
    1   2   3
    Bog'liq
    paradigma
    Yangiboyev Zokir Hisobot, 11-amaliy mashg‘ulot

    Main section



    2-rasm Main secition -asosiy qism


    Mobil versiyasi:

    3-rasm. Mobile versiya.
    Stillar quyida ko’rsatilgan
    .black-door{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: #000000aa;
    z-index: 8;
    }

    .fa-bars{


    display: none;
    color: #FFFFFF;
    font-size: 30px;
    cursor: pointer;
    }

    .mobile-menu{


    display: none;
    transform: translateX(-1%);
    position: fixed;
    top: 0;
    text-align: center;
    padding: 50px 10px 0 12px;
    color: #FFFFFF;
    width: 65%;
    height: 100%;
    background-color: #000000;
    z-index: 15;
    }

    /* .mobile-menu-ex{
    transform: translateX(0%);
    } */

    .mobile-menu-site-logo{


    display: block;
    margin-bottom: 80px;
    }

    .mobile-menu-item{


    margin-bottom: 30px;
    }

    .mobile-menu-item a{


    font-size: 1.6rem;
    line-height: normal;
    text-decoration: none;
    color: #FFFFFF;
    }

    /* main */
    .hero{
    /* height: calc(100vh - 74px); */
    padding-top: 120px;
    text-align: center;
    }

    .hero-title{


    font-style: normal;
    font-weight: 400;
    font-size: 64px;
    line-height: 75px;
    /* identical to box height */
    text-align: center;
    color: #FFFFFF;
    margin-bottom: 26px;
    }

    .hero-subtitle{


    width: 268px;
    display: inline-block;
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 140%;
    /* or 22px */
    text-align: center;
    text-transform: lowercase;
    color: #FFFFFF;
    }

    .earth-img{


    width: 100%;
    }

    /* info section */
    .info-box {
    /* width: 50%; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    }

    .sunning{


    margin-top: 20px;
    color: rgba(188, 170, 9, 0.822);
    background-color: rgba(188, 170, 9, 0.822);
    box-shadow: 2px 2px 200px 200px rgba(188, 170, 9, 0.822);
    }
    .info-title-box{
    color: #FFFFFF;
    }

    .top-info{


    margin-bottom: 200px;
    }

    .top-info-title{


    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 140%;
    margin-bottom: 2.2rem;
    text-transform: uppercase;
    }

    .info-table{


    border-collapse: collapse;
    }

    .info-tdate{


    padding: 5px 20px 5px 0;
    font-style: normal;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 179.69%;
    }

    .info-tdate-value{


    padding-right: 140px;
    }

    .bottom-info-text{


    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 29px;
    }

    .img-rocket{


    width: 544px;
    height: 1200px;
    }

    .footer{
    color: #FFFFFF;


    padding: 50px 0;
    text-align: center;
    }

    .footer-list{


    margin: 20px 0;
    text-decoration: none;
    }

    .footer-item{


    margin: 10px 0;
    }

    .footer-link{


    color: #FFFFFF;
    }

    @media(max-width: 1300px) {
    .info-box {
    flex-direction: column;
    row-gap: 40px;
    justify-content: center;
    }
    }

    @media(max-width: 940px) {
    .img-rocket{
    width: 500px;
    }
    }

    @media(max-width: 740px) {
    .site-header{
    margin-top: 0px;
    }
    .hero{
    padding-top: 50px;
    margin-bottom: 5rem;
    }
    .info-tdate-value{
    padding-right: 20px;
    }
    .nav{
    display: none;
    }
    .assistant-nav{
    display: none;
    }
    .fa-bars{
    display: block;
    }
    .img-rocket{
    width: 400px;
    height: 800px;
    }
    }

    @media(max-width: 740px){
    .img-rocket{
    width: 300px;
    }
    }

    Footer



    4-rasm. Footer.

    Stillari:


    .footer{
    color: #FFFFFF;
    padding: 50px 0;
    text-align: center;
    }

    .footer-list{


    margin: 20px 0;
    text-decoration: none;
    }

    .footer-item{


    margin: 10px 0;
    }

    .footer-link{


    color: #FFFFFF;
    }


    Java script
    const sr = ScrollReveal({
    origin: 'top',
    distance: '60px',
    duration: "2000",
    delay: "400",
    reset: true,
    })

    sr.reveal(".hero-title")


    sr.reveal(".hero-subtitle", {delay: 1000})
    sr.reveal(".earth-img", {delay: 1000, origin: 'bottom', interval: 100, distance:"40px"})
    sr.reveal(".img-rocket", {delay: 2, origin: 'right', interval: 1, distance:"90px"})
    sr.reveal(".top-info-title", {delay: 500, origin: 'bottom', interval: 100, distance:"90px"})
    sr.reveal(".info-table", {delay: 500, origin: 'bottom', interval: 500, distance:"90px"})
    sr.reveal(".bottom-info-text", {delay: 400, origin: 'left', interval: 500, distance:"90px"})

    let BlackDoorEl = document.querySelector(".black-door")


    let MobileMenuIconEl = document.querySelector(".fa-bars")
    let MobileMenuEl = document.querySelector(".mobile-menu")

    MobileMenuIconEl.addEventListener("click", function(){


    MobileMenuEl.style.display = "block"
    BlackDoorEl.style.display = "block"
    })
    BlackDoorEl.addEventListener("click",function(){
    MobileMenuEl.style.display = "none"
    BlackDoorEl.style.display = "none"
    })

    Xulosa


    Men bu loyihani qilish davomida dizayn bilan ishlash, rasmlarni to’g’ri joylashtirish shriftlarni to’g’ri tanlash va ishlatishni, ranglar bilan ishlash va ularni to’ri tanlashni googldan ma’lumot qidirishni ma’lumotlarni to’g’ri ishlatishni, html va css larni yanada chuquroq va yanada chuquroq bilib oldim.




    Foydalanilgan adabiyotlar:


    • https://www.w3schools.com/

    • https://scrollrevealjs.org/guide/hello-world.html

    • https://fontawesome.com/

    • https://cdnjs.com/libraries/font-awesome

    • https://www.youtube.com/

    • https://fonts.google.com/

    Download 1.54 Mb.
    1   2   3




    Download 1.54 Mb.