Skip to content

Commit

Permalink
do responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@aliramezani747
aliramezani747 committed Apr 28, 2024
1 parent 77e8d3c commit 3259224
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 51 deletions.
10 changes: 5 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
<div>
<div class="card">
<img class="image3" src="./img/a copy 5.png" alt="">
<p class="text3"> (UNSP)دارنده پروانه یکپارچه شبکه و خدمات</p>
<p class="text3"> دارنده پروانه یکپارچه شبکه و خدمات (UNSP) </p>
</div>
<div class="card">
<img class="image3" src="./img/a copy 5.png" alt="">
Expand All @@ -79,28 +79,28 @@
<div class="cards">
<P class="text4"> ۳۰۰ گیگ بین الملل </P>
<P class="text4"> معادل ۶۰۰ گیگ داخلی </P>
<P class="text4"> ماهه ۳ </P>
<P class="text4"> ۳ ماهه </P>
<P class="text4"> ۹۰ هزار تومان </P>
<button class="btn"> خرید سرویس </button>
</div>
<div class="cards">
<P class="text4"> ۳۰۰ گیگ بین الملل </P>
<P class="text4"> معادل ۶۰۰ گیگ داخلی </P>
<P class="text4"> ماهه ۳ </P>
<P class="text4"> ۳ ماهه </P>
<P class="text4"> ۹۰ هزار تومان </P>
<button class="btn"> خرید سرویس </button>
</div>
<div class="cards">
<P class="text4"> ۳۰۰ گیگ بین الملل </P>
<P class="text4"> معادل ۶۰۰ گیگ داخلی </P>
<P class="text4"> ماهه ۳ </P>
<P class="text4"> ۳ ماهه </P>
<P class="text4"> ۹۰ هزار تومان </P>
<button class="btn"> خرید سرویس </button>
</div>
<div class="cards">
<P class="text4"> ۳۰۰ گیگ بین الملل </P>
<P class="text4"> معادل ۶۰۰ گیگ داخلی </P>
<P class="text4"> ماهه ۳ </P>
<P class="text4"> ۳ ماهه </P>
<P class="text4"> ۹۰ هزار تومان </P>
<button class="btn"> خرید سرویس </button>
</div>
Expand Down
111 changes: 65 additions & 46 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ main .first .register {
color: #286444;
margin: 0px;
padding: 0px;
font-size: 2.6vw;
font-size: 2.1vw;
}

main .first .btnBox {
Expand Down Expand Up @@ -212,7 +212,7 @@ main .fifth {
margin: 0;
display: flex;
width: 100%;
font-size: 0.6em;
font-size: 0.9em;
cursor: pointer;
justify-content: space-between;
flex-direction: row-reverse;
Expand Down Expand Up @@ -265,6 +265,13 @@ main .fifth {
.accordion h1 {
font-size: 1em;
}
.accordion-item .accordion-item-title {
font-size: 0.6em;
}
.accordion-item .accordion-item-desc {
font-size: 0.6em;
}

}

footer {
Expand All @@ -285,54 +292,74 @@ footer p {

/* media query */

.main-container {width: 100%;}


header .image0 {width: 10%;}


main .first .image1 {width: 80%;}
main .first .text1


main .second .image2 {width: 30%;}
main .second .text2 {font-size: 1.3em;}

main .third .image3 {width: 15%;}
main .third .image4 {width: 65%;}
main .third .text3 {font-size: 1.3em;}

main .Fourth .image5 {width: 20%;}
main .Fourth .text4 {font-size: 1.1em;}

footer p {font-size: 1.3em;}

@media screen and (max-width:1600px){
.main-container {width: 100%;}


header .image0 {width: 15%;}
header .image0 {width: 10%;}


main .first .image1 {width: 100%;}
main .first .image1 {width: 80%;}
main .first .text1


main .second .image2 {width: 40%;}
main .second .image2 {width: 30%;}
main .second .text2 {font-size: 1.3em;}

main .third .image3 {width: 20%;}
main .third .image4 {width: 80%;}
main .third .image3 {width: 15%;}
main .third .image4 {width: 65%;}
main .third .text3 {font-size: 1.3em;}

main .Fourth .image5 {width: 30%;}
main .Fourth .image5 {width: 20%;}
main .Fourth .text4 {font-size: 1.1em;}

footer p {font-size: 1.3em;}


.main-container .text {font-size: 1.2em;}
.main-container .btn {font-size: 1.5em;}


}
@media screen and (max-width:1200px){
.main-container {width: 100%;}


header .image0 {width: 15%;}
header .image0 {width: 10%;}


main .first .image1 {width: 100%;}
main .first .image1 {width: 80%;}


main .second .image2 {width: 50%;}
main .second .image2 {width: 30%;}
main .second .text2 {font-size: 1.3em;}

main .third .image3 {width: 20%;}
main .third .image4 {width: 80%;}
main .third .image3 {width: 15%;}
main .third .image4 {width: 65%;}
main .third .text3 {font-size: 1.1em;}


main .Fourth .image5 {width: 40%;}
main .Fourth .image5 {width: 20%;}
main .Fourth .text4 {font-size: 1.3em;}

footer p {font-size: 1.3em;}
Expand All @@ -341,28 +368,26 @@ footer p {
.main-container .image {width: 80%;}
.main-container .text {font-size: 1.2em;}
.main-container .btn {font-size: 1.2em;}


}

@media screen and (max-width:960px){
.main-container {width: 100%;}


header .image0 {width: 15%;}
header .image0 {width: 10%;}


main .first .image1 {width: 100%;}
main .first .image1 {width: 80%;}


main .second .image2 {width: 50%;}
main .second .image2 {width: 30%;}
main .second .text2 {font-size: 0.9em;}

main .third .image3 {width: 20%;}
main .third .image4 {width: 80%;}
main .third .image3 {width: 15%;}
main .third .image4 {width: 65%;}
main .third .text3 {font-size: 0.7em;}

main .Fourth .image5 {width: 50%;}
main .Fourth .image5 {width: 20%;}
main .Fourth .text4 {font-size: 0.9em;}

footer p {font-size: 0.9em;}
Expand All @@ -372,28 +397,26 @@ footer p {
.main-container .image {width: 80%;}
.main-container .text {font-size: 1.2em;}
.main-container .btn {font-size: 1em;}


}

@media screen and (max-width:720px){
.main-container {width: 100%;}


header .image0 {width: 15%;}
header .image0 {width: 10%;}


main .first .image1 {width: 100%;}
main .first .image1 {width: 80%;}


main .second .image2 {width: 50%;}
main .second .image2 {width: 30%;}
main .second .text2 {font-size: 0.8em;}

main .third .image3 {width: 20%;}
main .third .image4 {width: 80%;}
main .third .image3 {width: 15%;}
main .third .image4 {width: 65%;}
main .third .text3 {font-size: 0.7em;}

main .Fourth .image5 {width: 50%;}
main .Fourth .image5 {width: 20%;}
main .Fourth .text4 {font-size: 0.8em;}

footer p {font-size: 0.7em;}
Expand All @@ -403,27 +426,26 @@ footer p {
.main-container .image {width: 100%}
.main-container .text {font-size: 1.2em;}
.main-container .btn {font-size: 0.8em;}

}

@media screen and (max-width:480px){
.main-container {width: 100%;}


header .image0 {width: 15%;}
header .image0 {width: 10%;}


main .first .image1 {width: 100%;}
main .first .image1 {width: 80%;}


main .second .image2 {width: 50%;}
main .second .image2 {width: 30%;}
main .second .text2 {font-size: 0.5em;}

main .third .image3 {width: 20%;}
main .third .image4 {width: 80%;}
main .third .image3 {width: 15%;}
main .third .image4 {width: 65%;}
main .third .text3 {font-size: 0.5em;}

main .Fourth .image5 {width: 50%;}
main .Fourth .image5 {width: 35%;}
main .Fourth .text4 {font-size: 0.7em;}

footer p {font-size: 0.7em;}
Expand All @@ -434,26 +456,24 @@ footer p {
.main-container .text {font-size: 0.8em;}
.main-container .btn {font-size: 0.7em;}
main .Fourth .cards {width: 40%;}


}

@media screen and (max-width:300px){
.main-container {width: 100%;}


header .image0 {width: 15%;}
header .image0 {width: 10%;}


main .first .image1 {width: 100%;}
main .first .image1 {width: 80%;}


main .second .image2 {width: 80%;}
main .second .text2 {font-size: 0.5em;}


main .third .image3 {width: 20%;}
main .third .image4 {width: 90%;}
main .third .image3 {width: 15%;}
main .third .image4 {width: 65%;}
main .third .text3 {font-size: 0.5em;}

main .Fourth .image5 {width: 40%;}
Expand All @@ -468,6 +488,5 @@ footer p {
.main-container .text {font-size: 1em;}
.main-container .btn {font-size: 0.5em;}
main .Fourth .cards {width: 40%;}


}

0 comments on commit 3259224

Please sign in to comment.