Skip to content

Commit

Permalink
🏗 filters + hint icon
Browse files Browse the repository at this point in the history
  • Loading branch information
@gtnsimon
gtnsimon committed Oct 21, 2021
1 parent 2326c39 commit 299b7bb
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 49 deletions.
91 changes: 49 additions & 42 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,49 +73,56 @@ <h1 class="h1">Trouvez votre hébergement pour des vacances de rêve</h1>
</form>

<!-- Filtres -->
<article class="filters">
<header>
<h2 class="filters__title">Filtres</h2>
</header>
<article>
<div class="filters">
<header>
<h2 class="filters__title">Filtres</h2>
</header>

<ul class="filters__list">
<!-- Économique -->
<li>
<a href="#" class="filters__list__item" title="Économique">
<span class="filters__list__item__icon">
<i class="fas fa-search"></i>
</span>
<span>Économique</span>
</a>
</li>
<!-- Familial -->
<li>
<a href="#" class="filters__list__item" title="Familial">
<span class="filters__list__item__icon">
<i class="fas fa-child"></i>
</span>
<span>Familial</span>
</a>
</li>
<!-- Romantique -->
<li>
<a href="#" class="filters__list__item" title="Romantique">
<span class="filters__list__item__icon">
<i class="fas fa-heart"></i>
</span>
<span>Romantique</span>
</a>
</li>
<!-- Animaux autorisés -->
<li>
<a href="#" class="filters__list__item" title="Animaux autorisés">
<span class="filters__list__item__icon">
<i class="fas fa-dog"></i>
</span>
<span>Animaux autorisés</span>
</a>
</li>
</ul>
<ul class="filters__list">
<!-- Économique -->
<li>
<a href="#" class="filters__list__item" title="Économique">
<span class="filters__list__item__icon">
<i class="fas fa-money-bill-wave"></i>
</span>
<span class="filters__list__item__text">Économique</span>
</a>
</li>
<!-- Familial -->
<li>
<a href="#" class="filters__list__item" title="Familial">
<span class="filters__list__item__icon">
<i class="fas fa-child"></i>
</span>
<span class="filters__list__item__text">Familial</span>
</a>
</li>
<!-- Romantique -->
<li>
<a href="#" class="filters__list__item" title="Romantique">
<span class="filters__list__item__icon">
<i class="fas fa-heart"></i>
</span>
<span class="filters__list__item__text">Romantique</span>
</a>
</li>
<!-- Animaux autorisés -->
<li>
<a href="#" class="filters__list__item" title="Animaux autorisés">
<span class="filters__list__item__icon">
<i class="fas fa-dog"></i>
</span>
<span class="filters__list__item__text">Animaux autorisés</span>
</a>
</li>
</ul>
</div>

<div class="hint">
<i class="fas fa-info"></i>
<p>Plus de 500 logements sont disponibles dans cette ville</p>
</div>
</article>
</section>
</main>
Expand Down
68 changes: 61 additions & 7 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* STYLES COMMUNS */
body {
max-width: 1380px; /* taille max pour centrer le contenu sur les grands écrans */
max-width: 1378px; /* taille max pour centrer le contenu sur les grands écrans */
margin: 0 auto;

font-family: 'Raleway', sans-serif;
Expand Down Expand Up @@ -72,7 +72,7 @@ a {

.content {
margin-top: 45px;
padding: 0 20px;
padding: 0 20px 60px 20px;
}

/* RECHERCHE */
Expand Down Expand Up @@ -115,6 +115,7 @@ a {
bottom: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0 22px;

font-size: 18px;
Expand Down Expand Up @@ -154,12 +155,13 @@ a {
/* FILTRES */
.filters {
display: flex;
align-items: center;
align-items: flex-start;

margin-top: 30px;
}

.filters__title {
line-height: 50px;
font-size: 18px;
font-weight: 700;
}
Expand All @@ -174,7 +176,7 @@ a {
display: block;
position: relative;
margin: 5px 10px;
padding: 0 20px 0 70px;
padding: 0 20px 0 60px;

font-size: 18px;
font-weight: 700;
Expand All @@ -184,9 +186,12 @@ a {
color: #000 !important;
border: 2px solid #F2F2F2;
border-radius: 25px;

-webkit-tap-highlight-color: transparent;
}

.filters__list__item__icon {
z-index: 0;
position: absolute;
top: -2px;
left: -2px;
Expand All @@ -195,18 +200,62 @@ a {
font-size: 18px;
text-align: center;
background-color: #DEEBFF;
border-radius: 50%;
border-radius: 25px;
transition: width ease-out 150ms;
}

.filters__list__item:hover .filters__list__item__icon {
width: calc(100% + 4px);
right: -2px;
transition-timing-function: ease-in;
}

.filters__list__item__icon > i {
color: #0065FC;
line-height: 50px;
display: block;
width: 50px;
height: 50px;
}

.filters__list__item__text {
z-index: 1;
position: relative;
display: inline-block;
}

.hint {
display: inline-flex;
}

.hint > i {
flex: 0 0 24px;
display: inline-block;
width: 24px;
height: 24px;
font-size: 12px;
color: #0065FC;
line-height: 24px;
text-align: center;
border: 1px solid #F2F2F2;
border-radius: 50%;
}

.hint > p {
flex: 1;
display: inline-block;
padding-left: 12px;
line-height: 24px;
}

.filters + .hint {
margin-top: 35px;
}
/* FILTRES */

@media (max-width: 767.98px) {
body {
padding-top: 20px;
padding-top: 24px;
}

.header {
Expand All @@ -218,6 +267,7 @@ a {
}

.header__logo {
height: 50px;
margin-left: 0;
}

Expand Down Expand Up @@ -269,9 +319,13 @@ a {
}

.filters__list {
margin-left: 0;
margin-left: -10px;

margin-top: 12px;
}

.filters__title {
line-height: normal;
}

}

0 comments on commit 299b7bb

Please sign in to comment.