Skip to content

Commit

Permalink
responsive done
Browse files Browse the repository at this point in the history
  • Loading branch information
@aliramezani747
aliramezani747 committed Apr 22, 2024
1 parent 1b42bb0 commit f1fb974
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 93 deletions.
96 changes: 48 additions & 48 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,102 +10,102 @@
<body>
<div class="main-container">
<header>
<img src="./img/logo-final2 2.png" alt="">
<img src="./img/1577 2.png" alt="">
<img class="image"src="./img/logo-final2 2.png" alt="">
<img class="image" src="./img/1577 2.png" alt="">
</header>
<main>
<section class="first">
<div class="season">
<img src="./img/بهــارستــون 2.png">
<img class="image" src="./img/بهــارستــون 2.png">
<div class="register">
<p>از بهار به تابستون&nbsp | &nbsp اینترنت +ADSL2</p>
<p class="text">از بهار به تابستون&nbsp | &nbsp اینترنت +ADSL2</p>
</div>
<div>
<button class="button2">ثبت نام</button>
<button class="button1">اطلاعات بیشتر</button>
<button class="button2 btn">ثبت نام</button>
<button class="button1 btn">اطلاعات بیشتر</button>
</div>
</div>
<img src="./img/enhanced-image (18) 2.png" alt="">
<img class="image" src="./img/enhanced-image (18) 2.png" alt="">
</section>
<section class="second">
<div class="card">
<img src="./img/3.png" alt="">
<p>مقرون به صرفه</p>
<img class="image" src="./img/3.png" alt="">
<p class="text">مقرون به صرفه</p>
</div>
<div class="card">
<img src="./img/Layer 2 copy.png" alt="">
<p>کیفیت بالا</p>
<img class="image" src="./img/Layer 2 copy.png" alt="">
<p class="text">کیفیت بالا</p>
</div>
<div class="card">
<img src="./img/Vector Smart Object.png" alt="">
<p>نصب سریع</p>
<img class="image" src="./img/Vector Smart Object.png" alt="">
<p class="text">نصب سریع</p>
</div>
</section>

<section class="third">
<div>
<div class="card">
<img src="./img/a copy 5.png" alt="">
<p>مجری توسعه جدیدترین زیرساخت های ارتباطی از جمله فیبرنوری</p>
<img class="image" src="./img/a copy 5.png" alt="">
<p class="text">مجری توسعه جدیدترین زیرساخت های ارتباطی از جمله فیبرنوری</p>
</div>
<div class="card">
<img src="./img/Group 38 2.png" alt="">
<img class="image" src="./img/Group 38 2.png" alt="">
</div>
<div class="card">
<img src="./img/a copy 5.png" alt="">
<p>پشتیبانی 24 ساعته در تمامی روزهای هفته</p>
<img class="image" src="./img/a copy 5.png" alt="">
<p class="text">پشتیبانی 24 ساعته در تمامی روزهای هفته</p>
</div>
</div>
<div>
<div class="card">
<img src="./img/a copy 5.png" alt="">
<p> (UNSP)دارنده پروانه یکپارچه شبکه و خدمات</p>
<img class="image" src="./img/a copy 5.png" alt="">
<p class="text"> (UNSP)دارنده پروانه یکپارچه شبکه و خدمات</p>
</div>
<div class="card">
<img src="./img/a copy 5.png" alt="">
<p>طرح های متنوع و متناسب با نیاز و مصرف کاربران</p>
<img class="image" src="./img/a copy 5.png" alt="">
<p class="text">طرح های متنوع و متناسب با نیاز و مصرف کاربران</p>
</div>
<div class="card">
<img src="./img/a copy 5.png" alt="">
<p> بیش از 1500 پاپ سایت و مرکز مخابراتی فعال </p>
<div class="card">
<img class="image" src="./img/a copy 5.png" alt="">
<p class="text"> بیش از 1500 پاپ سایت و مرکز مخابراتی فعال </p>
</div>
</div>
</section>
<section class="Fourth">
<div>
<img src="./img/جشنواره 1.png" alt="">
<img class="image" src="./img/جشنواره 1.png" alt="">
</div>
<div>
<div class="cards">
<P> ۳۰۰ گیگ بین الملل </P>
<P> معادل ۶۰۰ گیگ داخلی </P>
<P> ماهه ۳ </P>
<P> ۹۰ هزار تومان </P>
<button> خرید سرویس </button>
<P class="text"> ۳۰۰ گیگ بین الملل </P>
<P class="text"> معادل ۶۰۰ گیگ داخلی </P>
<P class="text"> ماهه ۳ </P>
<P class="text"> ۹۰ هزار تومان </P>
<button class="btn"> خرید سرویس </button>
</div>
<div class="cards">
<P> ۳۰۰ گیگ بین الملل </P>
<P> معادل ۶۰۰ گیگ داخلی </P>
<P> ماهه ۳ </P>
<P> ۹۰ هزار تومان </P>
<button> خرید سرویس </button>
<P class="text"> ۳۰۰ گیگ بین الملل </P>
<P class="text"> معادل ۶۰۰ گیگ داخلی </P>
<P class="text"> ماهه ۳ </P>
<P class="text"> ۹۰ هزار تومان </P>
<button class="btn"> خرید سرویس </button>
</div>
<div class="cards">
<P> ۳۰۰ گیگ بین الملل </P>
<P> معادل ۶۰۰ گیگ داخلی </P>
<P> ماهه ۳ </P>
<P> ۹۰ هزار تومان </P>
<button> خرید سرویس </button>
<P class="text"> ۳۰۰ گیگ بین الملل </P>
<P class="text"> معادل ۶۰۰ گیگ داخلی </P>
<P class="text"> ماهه ۳ </P>
<P class="text"> ۹۰ هزار تومان </P>
<button class="btn"> خرید سرویس </button>
</div>
<div class="cards">
<P> ۳۰۰ گیگ بین الملل </P>
<P> معادل ۶۰۰ گیگ داخلی </P>
<P> ماهه ۳ </P>
<P> ۹۰ هزار تومان </P>
<button> خرید سرویس </button>
<P class="text"> ۳۰۰ گیگ بین الملل </P>
<P class="text"> معادل ۶۰۰ گیگ داخلی </P>
<P class="text"> ماهه ۳ </P>
<P class="text"> ۹۰ هزار تومان </P>
<button class="btn"> خرید سرویس </button>
</div>
</div>
<p class="f">برای خرید سرویس فرم زیر را پر کنید</p>
<p class="text">برای خرید سرویس فرم زیر را پر کنید</p>
</section>
<section class="fifth">
<div class="accordion">
Expand All @@ -131,7 +131,7 @@ <h1>سوالات متداول</h1>
</section>
</main>
<footer>
<p> دارای مجوز UNSP به شماره ۱۰۰-۱۳۰-۱۵ در تاریخ ۱۴۰۲/۰۵/۰۹ از سازمان تنظیم مقررات و ارتباطات رادیویی</p>
<p class="text"> دارای مجوز UNSP به شماره ۱۰۰-۱۳۰-۱۵ در تاریخ ۱۴۰۲/۰۵/۰۹ از سازمان تنظیم مقررات و ارتباطات رادیویی</p>
</footer>
</div>
</body>
Expand Down
93 changes: 48 additions & 45 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,34 +7,38 @@ body {
@font-face {
font-family: 'MyCustomFont';
src: url('./font/IRANYekanWebRegular.woff') format('woff');
font-size: 16px;

}

.main-container {
width: 100%;
max-width: 1900px;
margin: 0px auto;
font-size: 16px;
font-family: 'MyCustomFont';
}

header{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
background-color: #E9E8EB;
padding: 50px 60px 0px 60px;
}


main .first {
display: flex;
flex-wrap: wrap;
justify-content: center;
background-color: #E9E8EB;
border-radius: 0px 0px 115px 115px;
}


main .first .season {
width: 50%;
/*width: 50%;*/
display: flex;
flex-direction: column;
justify-content: center;
Expand All @@ -45,13 +49,11 @@ main .first .season {
main .first .register {
display: flex;
flex-direction: row;
font-size: 2.2em;
font-weight: bold;
color: #286444;
}

main .first .button1 {
font-size: 1.2em;
padding: 5px 20px;
border-radius: 10px;
background-color: #bb1613;
Expand All @@ -60,7 +62,6 @@ main .first .button1 {
}

main .first .button2 {
font-size: 1.2em;
padding: 5px 55px;
border-radius: 10px;
background-color: #286444;
Expand All @@ -74,7 +75,7 @@ main .second {
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 0 20%;
margin: 3% 20%;
}

main .second .card {
Expand All @@ -88,7 +89,6 @@ main .second .card {
}

main .second p {
font-size: 1.5em;
color: #bb1613;
font-weight: bold;
}
Expand All @@ -98,20 +98,17 @@ main .third div {
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: auto;
}

main .third .card {
width: 30%;
width: 27%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: auto;
}

main .third p {
font-size: 1.4em;
color: #286444;
text-align: justify;
}
Expand Down Expand Up @@ -143,7 +140,6 @@ main .Fourth div {
}

main .Fourth button {
font-size: 1.4em;
font-family: 'MyCustomFont';
background-color: #bb1613;
color: #ffffff;
Expand All @@ -158,7 +154,6 @@ main .Fourth div p {

main .Fourth P {
background-color: #FFFF;
font-size: 1.4em;
}

main .fifth {
Expand Down Expand Up @@ -257,49 +252,57 @@ footer {
footer p {
background-color: #bb1613;
color: #ffffff;
font-size: 1.1em;
padding: 10px 80px;
border-radius: 0px 0px 30px 30px;
}

/* media query */
@media screen and (max-width:900px){
main {

}
main .fourth div .cards {

}

@media screen and (max-width:1600px){
.main-container {width: 100%;}
.main-container .image {}
.main-container .text {font-size: 1.5em;}
.main-container .btn {font-size: 1.5em;}

}
@media screen and (max-width:1200px){
.main-container {width: 100%;}
.main-container .image {width: 75%;}
.main-container .text {font-size: 1.4em;}
.main-container .btn {font-size: 1.4em;}

@media screen and (max-width:600px){
main .menu {
display: none;
}
}

main {

}
@media screen and (max-width:960px){
.main-container {width: 100%;}
.main-container .image {width: 60%;}
.main-container .text {font-size: 1.3em;}
.main-container .btn {font-size: 1.3em;}

main .first .season {
width: 50%;
}
}

main .Fourth .cards {
width: 50%;
}
main .second .card {
width: 33%;
}
@media screen and (max-width:720px){
.main-container {width: 100%;}
.main-container .image {width: 45%}
.main-container .text {font-size: 1.2em;}
.main-container .btn {font-size: 1.2em;}

header {
flex-direction: row;
margin-top: 10px;
text-align: center;
}
}

.main-container p {
font-size: 1em;
}
@media screen and (max-width:480px){
.main-container {width: 100%;}
.main-container .image {width : 60%;}
.main-container .text {font-size: 1.1em;}
.main-container .btn {font-size: 1.1em;}
main .Fourth .cards {width: 50%;}

}

@media screen and (max-width:300px){
.main-container {width: 100%;}
.main-container .image {width : 30%;}
.main-container .text {font-size: 1em;}
.main-container .btn {font-size: 1em;}
main .Fourth .cards {width: 50%;}

}

0 comments on commit f1fb974

Please sign in to comment.