Skip to content

Commit

Permalink
Ajoût de differeent taille Px
Browse files Browse the repository at this point in the history 
J'ai modifié les continues pour facilisté la navigation sur tablette 1024px à 768px et mobile 767px à 320px
En terme de navigation tablette, j'ai modifier ( main ) en mettent en colonne mon ( Accomodtions ) et mon ( Popular ),
et aussi j'ai mis tout mes article de mon ( Popular ) en colonne.

Et en navigation mobile, j'ai mis tout mes article et Nav en colonne plus une modification du bouton search en une icone magnifying-glass
  • Loading branch information
@Arystho
Arystho committed May 10, 2024
1 parent 04ff2c7 commit e9b1f20
Show file tree
Hide file tree
Showing 2 changed files with 117 additions and 26 deletions.
124 changes: 107 additions & 17 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ h1,h2{
}

h3{
font-size: 16px;
font-size: 15px;
}

a{
Expand All @@ -52,6 +52,10 @@ p{
/* Ici ajoutes aussi le style des a et des p et des h3 */

/* header */
#search .fa-magnifying-glass{
display: none;
border-radius: 0 12px 12px 0;
}
header{
max-width: 1440px;
margin: auto;
Expand Down Expand Up @@ -129,9 +133,12 @@ main section div h2{
}

#search div a{
display: flex;
gap: 5px;
padding: 10px;
border-radius: 7px;
border: 1px solid var(--red)
border: 1px solid var(--red);
align-items: center;
}

#search div a:hover,
Expand All @@ -144,40 +151,41 @@ main section div h2{
display: flex;
margin: 35px 35px 35px 0;
gap: 24px;
flex-wrap: wrap;
}

#search i{
color: var(--red);
}

/* section-2-accommodations */
#accommodations{
/* section-2-accomodations */
#accomodations{
display: flex;
gap: 40px;
}

#accommodations #font{
#accomodations #font{
background: var(--lightgrey);
padding: 40px;
border-radius: 12px;
margin-top: 40px;
flex: 2;
}

#accommodations #list{
#accomodations #list{
display: flex;
gap: 20px;
flex-wrap: wrap;
margin-top: 40px;
}

#accommodations #list a{
#accomodations #list a{
background: var(--white);
border-radius: 12px;
flex: 1 0 30%;
}

#accommodations article{
#accomodations article{
padding: 5px;
position: relative;
}
Expand All @@ -186,7 +194,7 @@ main section div h2{
padding: 15px 0 0 0;
}

#accommodations > div > a{
#accomodations > div > a{
display: inline-block;
margin-top: 25px;
padding: 10px;
Expand All @@ -200,18 +208,22 @@ main section div h2{
transition: all 0.2s ease-in-out;
}

#accommodations img{
#accomodations img{
width:100%;
border-radius: 12px 12px 0 0;
height: 160px;
object-fit: cover;
}

#accomodations #font a:hover{
color: var(--red);
}

.recommanded::after{
content: 'recommanded';
position: absolute;
top: 10px;
left: 149px;
right: 5%;
background: var(--red);
color: var(--white);
border-radius: 4px;
Expand Down Expand Up @@ -285,7 +297,7 @@ main section div h2{
}

#discover img{
width: 322px;
width: 100%;
height: 380px;
}

Expand All @@ -294,6 +306,7 @@ main section div h2{
display: flex;
gap: 40px;
margin-top: 40px;
;
}

#activities h3{
Expand All @@ -314,6 +327,9 @@ main section div h2{
filter: grayscale(0.8);
transition: all 0.2s ease-in-out;
}
#activities > div a{
flex: 1 0 20%;
}

/* footer */
footer{
Expand Down Expand Up @@ -349,8 +365,6 @@ footer > p{

}

/* Sur le footer p on va faire un lien plus direct footer > p */

footer article h2{
font-size: 18px;
display: flex;
Expand All @@ -361,6 +375,84 @@ footer article ul li a:hover{
color: var(--red);
}

/* Responsive tablette - 1024px à 768px */
@media screen and (max-width:1024px){

/* Accomodation */
#accomodations{
flex-direction: column;
}
.recommanded::after{
right: 5%;
}
#popular .popular div{
padding-left: 10px;
}
#popular .popular .star{
padding-left: 0;
}

/* Discover */
#discover{
font-size: 100%;
}
#activities > div a{
flex: 1 0 40%;
}

/* Responsive mobile - 767px à 320px */
}
@media screen and (max-width:767px){

/* header */
header{
flex-direction: column;
/* align-items: center; */
}
header a{
align-items: baseline;
display: flex;
justify-content: center;
}


/* main */
#search .fa-magnifying-glass{
display: block;
border-radius: 0 7px 7px 0;
}
#search button{
display: none;
}
.recommanded::after{
right: 5%;
}
main #accomodations{
flex-direction: column-reverse;
display: flex;
}
#accomodations #list{
flex-direction: column;
}
#popular #most .most{
height: 170px;
}

/* activities */
#activities > div a{
flex: 1 0 100%;
}

/* footer */
footer div {
flex-direction: column;
margin-top: 10px;
}
footer div article{
margin-top: 40px;
}
}

/* Pas bon il faut trouver une autre solution */


Expand All @@ -373,6 +465,4 @@ footer article ul li a:hover{
*/




/* Sur le footer p on va faire un lien plus direct footer > p */
19 changes: 10 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,9 @@ <h1>Find dream accommodation for your vacation</h1>
<!-- utilisation de la balise form -->
<form action="#">
<i class="fa-solid fa-location-dot"></i>
<input type="search" id="#" placeholder="Madrid, spain">
<button><span class="desktop"></span>search</button>
<input type="search" id="placeholder" placeholder="Madrid, spain">
<button><span class="desktop"></span>search</button>
<a href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
</form>
<div>
<h2>Filters</h2>
Expand All @@ -37,8 +38,8 @@ <h2>Filters</h2>
<a href="#"><i class="fa-solid fa-city"></i> Cities</a>
</div>
<p><i class="fa-solid fa-circle-info"></i>More than 500 accomodations in this city</p>
</section>
<section id="accommodations" class="container-widht-1440">
</section>
<section id="accomodations" class="container-widht-1440">
<div id="font">
<h2>Accomodations in Madrid</h2>
<div id="list">
Expand Down Expand Up @@ -165,7 +166,7 @@ <h3>Retiro Park</h3>
<div>
<h3>Gran-Via</h3>
<p>Stay from $68/night</p>
<div>
<div class="star">
<i class="fa-solid fa-star rouge"></i>
<i class="fa-solid fa-star rouge"></i>
<i class="fa-solid fa-star rouge"></i>
Expand All @@ -181,7 +182,7 @@ <h3>Gran-Via</h3>
<div>
<h3>Puerta del Sol</h3>
<p>Stay from $52/night</p>
<div>
<div class="star">
<i class="fa-solid fa-star rouge"></i>
<i class="fa-solid fa-star rouge"></i>
<i class="fa-solid fa-star rouge"></i>
Expand All @@ -193,8 +194,8 @@ <h3>Puerta del Sol</h3>
</a>
</div>
</aside>
</section>
<section id="discover" class="container-widht-1440">
</section>
<section id="discover" class="container-widht-1440">
<div id="activities">
<h2>Discover all activities around here</h2>
<div>
Expand Down Expand Up @@ -224,7 +225,7 @@ <h3>City activities</h3>
</a>
</div>
</div>
</section>
</section>
</main>
<footer>
<div>
Expand Down

0 comments on commit e9b1f20

Please sign in to comment.