|
Web dasturlash”
|
| bet | 3/3 | | Sana | 25.10.2022 | | Hajmi | 1.54 Mb. | | #28044 |
Bog'liq paradigma Yangiboyev Zokir Hisobot, 11-amaliy mashg‘ulot, Akrom, Амелий № 3, JQ Koьп таш этиш 2022-2023 uzb, Maruza-1, 1-lab Ravshan, Амелий №1, 4 lab Ravshan, 3-seminar mashg‘ulot Mavzu O‘qish darslarida ilmiy–ommabop asar, KRIPTOGRAFIK USULLAR OQUV QOLLANMA, 1.1, 1-M, Tenglamalar tizimi ko’rinishidagi ekonometrik model
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;
}
}
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/
|
| |
