Skip to content

Commit

Permalink
update contact
Browse files Browse the repository at this point in the history
  • Loading branch information
@margauxhaering
margauxhaering committed Nov 7, 2024
1 parent 74791b9 commit 04de695
Show file tree
Hide file tree
Showing 2 changed files with 197 additions and 2 deletions.
140 changes: 140 additions & 0 deletions assets/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1236,6 +1236,146 @@ Pre Loader
}



/* Main profile container */
.profile-container {
width: 80%;
max-width: 800px;
margin: 20px auto;
background-color: #fff;
border: 1px solid #dbdbdb;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
}

/* Profile header section */
.profile-header {
display: flex;
align-items: center;
padding-bottom: 20px;
border-bottom: 1px solid #dbdbdb;
margin-bottom: 20px;
}

.profile-header .profile-pic {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
margin-right: 20px;
}

.profile-header .profile-pic img {
width: 100%;
height: 100%;
object-fit: cover;
}

.profile-header .profile-info {
flex: 1;
}

.profile-info .profile-name {
font-size: 20px;
font-weight: bold;
color: #333;
}

.profile-info .profile-description {
color: #666;
margin-top: 5px;
font-size: 14px;
}

.profile-info .follow-btn {
margin-top: 10px;
padding: 8px 12px;
background-color: #0095f6;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

/* Grid of posts */
.posts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}

/* Individual post styling */
.insta-post {
background-color: #fff;
border: 1px solid #dbdbdb;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.insta-post img {
width: 100%;
height: 250px;
object-fit: cover;
}

.insta-actions {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}

.insta-actions i {
font-size: 20px;
margin-right: 10px;
cursor: pointer;
}

.insta-actions .likes {
font-weight: bold;
color: #333;
}



@media (max-width: 480px) {
/* Stack posts in 1 column for small screens */
.posts-grid {
grid-template-columns: 1fr;
}

.profile-container {
padding: 15px;
}

.profile-header {
flex-direction: column;
align-items: center;
text-align: center;
}

.profile-header .profile-pic {
width: 50px;
height: 50px;
margin-bottom: 10px;
}

.profile-info .profile-name {
font-size: 16px;
}

.profile-info .profile-description {
font-size: 12px;
}

.profile-info .follow-btn {
padding: 6px 10px;
font-size: 14px;
}
}

/*
---------------------------------------------
responsive
Expand Down
59 changes: 57 additions & 2 deletions contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,8 +82,8 @@ <h2>Pour passer commande...</h2>
<br><br><div>
<a href="https://www.instagram.com/lamadeleinemasquee" target="_blank"><i class="fa-brands fa-instagram"></i></a>
&nbsp;&nbsp;&nbsp; <a href="https://www.facebook.com/lamadeleinemasquee" target="_blank"><i class="fa-brands fa-facebook"></i></a>
&nbsp;&nbsp;&nbsp; <a href="+33 6 43 67 16 67"> <i class="fa-brands fa-whatsapp"></i></a>
&nbsp;&nbsp;&nbsp; <a href="mailto:[email protected]"> <i class="fa-brands fa-enveloppe"></i></a>
&nbsp;&nbsp;&nbsp; <a href="tel:+33643671667"> <i class="fa-brands fa-whatsapp"></i></a>
&nbsp;&nbsp;&nbsp; <a href="mailto:[email protected]"> <i class="fa-regular fa-envelope"></i></a>
<br></div>

</div>
Expand All @@ -92,6 +92,61 @@ <h2>Pour passer commande...</h2>
<br><br> Livraison gratuite dans le 1,6,7eme <br> 5e dans les autres arrondissements <br>10e dans les villes adjointes.
<br><br> Click&Collect disponible sur rdv à l'abbaye Saint Victor</div>


<div class="profile-container">
<!-- Profile Header -->
<div class="profile-header">
<div class="profile-pic">
<img src="/assets/images/logo.png" alt="Profile Picture">
</div>
<div class="profile-info">
<div class="profile-name">lamadeleinemasquee</div>
<button class="follow-btn"> <a class="follow-btn" style="font-size:15px;" target="_blank" href='https:www.instagram.com/lamadeleinemasquee/'> Follow</a></button>
</div>
</div>

<!-- Grid of Posts -->
<div class="posts-grid">
<!-- Post 1 -->
<div class="insta-post">
<a href="https:www.instagram.com/lamadeleinemasquee" target="_blank">
<img src="/assets/images/1.png" alt="Post Image">
</a>
<div class="insta-actions">
<div>
Le coffret GEMINI.
Les 2 cotés de la madeleine sont...
</div>
</div>
</div>

<!-- Post 2 -->
<div class="insta-post">
<a href="https:www.instagram.com/lamadeleinemasquee" target="_blank">
<img src="/assets/images/2.png" alt="Post Image" href='https:www.instagram.com/lamadeleinemasquee'></a>
<div class="insta-actions">
<div>
C’est bon, c’est aujourd’hui… complet...
</div>

</div>
</div>

<!-- Post 3 -->
<div class="insta-post">
<a href="https:www.instagram.com/lamadeleinemasquee" target="_blank">
<img src="/assets/images/3.png" alt="Post Image" href='https:www.instagram.com/lamadeleinemasquee'></a>
<div class="insta-actions">
<div>
Le printemps arrive !
</div>

</div>
</div>
</div>
</div>


</div>

</div>
Expand Down

0 comments on commit 04de695

Please sign in to comment.