Archived
update gcimmopro add container + image + text + responsve
This commit is contained in:
nessar committed
1 parent
025e2a22aa
commit
e06194fac2
7 files changed
+223
-36
No files matched your search
+2
-2
@@ -1,2 +1,2 @@
|
||||
/style.css
|
||||
/style.css.map
|
||||
scss/style.css
|
||||
scss/style.css.map
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
+78
-5
@@ -8,17 +8,88 @@
|
||||
<meta name=" description"
|
||||
content="GC Immobilier, l’agence immobilière de Commerce et d’Entreprise. Implantée sur Bordeaux et sa Métropole et spécialisée dans les transactions de commerces, GC Immobilier vous conseille et vous accompagne dans la réussite de vos projets. Acteur de proximité, nous agissons comme un véritable partenaire et sommes à vos côtés de la rédaction du cahier des charges (ou de l’expression de besoin) jusqu’à la signature du bail ou du contrat de vente. GC Immobilier est reconnu pour son professionnalisme et la garantie du respect d’étapes clés pour répondre à vos besoins : Ecouter, analyser, valoriser, conseiller et accompagner." />
|
||||
<title>Agence GC Immo Bordeaux</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="./scss/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script src="./infiniteScroll.js"></script>
|
||||
<div class="container">
|
||||
<div class="container" id="container">
|
||||
<section>
|
||||
<h1>Bien 1</h1>
|
||||
<div class="content">
|
||||
<img class="image" src="./images/photo.jpg" />
|
||||
<div class="info">
|
||||
<div class="text">
|
||||
<h3 class="title">GC Immobilier, l’agence immobilière de Commerce et d’Entreprise</h3>
|
||||
<div class="desc">
|
||||
GC Immobilier, l’agence immobilière de Commerce et d’Entreprise. Implantée
|
||||
sur Bordeaux et sa Métropole et spécialisée dans les transactions de commerces,
|
||||
GC Immobilier vous conseille et vous accompagne dans la réussite de vos projets.
|
||||
Acteur de proximité, nous agissons comme un véritable partenaire et sommes à vos côtés
|
||||
de la rédaction du cahier des charges (ou de l’expression de besoin) jusqu’à la
|
||||
signature
|
||||
du bail ou du contrat de vente. GC Immobilier est reconnu pour son professionnalisme et
|
||||
la
|
||||
garantie du respect d’étapes clés pour répondre à vos besoins :
|
||||
Ecouter, analyser, valoriser, conseiller et accompagner.
|
||||
GC Immobilier, l’agence immobilière de Commerce et d’Entreprise. Implantée
|
||||
sur Bordeaux et sa Métropole et spécialisée dans les transactions de commerces,
|
||||
GC Immobilier vous conseille et vous accompagne dans la réussite de vos projets.
|
||||
Acteur de proximité, nous agissons comme un véritable partenaire et sommes à vos côtés
|
||||
de la rédaction du cahier des charges (ou de l’expression de besoin) jusqu’à la
|
||||
signature
|
||||
du bail ou du contrat de vente. GC Immobilier est reconnu pour son professionnalisme et
|
||||
la
|
||||
garantie du respect d’étapes clés pour répondre à vos besoins :
|
||||
Ecouter, analyser, valoriser, conseiller et accompagner.
|
||||
GC Immobilier, l’agence immobilière de Commerce et d’Entreprise. Implantée
|
||||
sur Bordeaux et sa Métropole et spécialisée dans les transactions de commerces,
|
||||
GC Immobilier vous conseille et vous accompagne dans la réussite de vos projets.
|
||||
Acteur de proximité, nous agissons comme un véritable partenaire et sommes à vos côtés
|
||||
de la rédaction du cahier des charges (ou de l’expression de besoin) jusqu’à la
|
||||
signature
|
||||
du bail ou du contrat de vente. GC Immobilier est reconnu pour son professionnalisme et
|
||||
la
|
||||
garantie du respect d’étapes clés pour répondre à vos besoins :
|
||||
Ecouter, analyser, valoriser, conseiller et accompagner.
|
||||
GC Immobilier, l’agence immobilière de Commerce et d’Entreprise. Implantée
|
||||
sur Bordeaux et sa Métropole et spécialisée dans les transactions de commerces,
|
||||
GC Immobilier vous conseille et vous accompagne dans la réussite de vos projets.
|
||||
Acteur de proximité, nous agissons comme un véritable partenaire et sommes à vos côtés
|
||||
de la rédaction du cahier des charges (ou de l’expression de besoin) jusqu’à la
|
||||
signature
|
||||
du bail ou du contrat de vente. GC Immobilier est reconnu pour son professionnalisme et
|
||||
la
|
||||
garantie du respect d’étapes clés pour répondre à vos besoins :
|
||||
Ecouter, analyser, valoriser, conseiller et accompagner.
|
||||
GC Immobilier, l’agence immobilière de Commerce et d’Entreprise. Implantée
|
||||
sur Bordeaux et sa Métropole et spécialisée dans les transactions de commerces,
|
||||
GC Immobilier vous conseille et vous accompagne dans la réussite de vos projets.
|
||||
Acteur de proximité, nous agissons comme un véritable partenaire et sommes à vos côtés
|
||||
de la rédaction du cahier des charges (ou de l’expression de besoin) jusqu’à la
|
||||
signature
|
||||
du bail ou du contrat de vente. GC Immobilier est reconnu pour son professionnalisme et
|
||||
la
|
||||
garantie du respect d’étapes clés pour répondre à vos besoins :
|
||||
Ecouter, analyser, valoriser, conseiller et accompagner.
|
||||
</div>
|
||||
</div>
|
||||
<iframe class="map" style="border:0" loading="lazy" allowfullscreen
|
||||
src="https://www.google.com/maps/embed/v1/place?q=15 rue saint cartherine&zoom=14&key=AIzaSyDd9pZN1imW6UF9O8Bh1Wy3CXt8vXgBnGw"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Bien 2</h1>
|
||||
<div class="content">
|
||||
<div class="image skeleton-anim"></div>
|
||||
<div class="info">
|
||||
<h3 class="title skeleton-title skeleton-anim"></h3>
|
||||
<p class="skeleton-text skeleton-anim"></p>
|
||||
<p class="skeleton-text skeleton-anim"></p>
|
||||
<p class="skeleton-text skeleton-anim"></p>
|
||||
<p class="skeleton-text skeleton-anim"></p>
|
||||
<p class="skeleton-text skeleton-anim"></p>
|
||||
<div class="map skeleton-anim" style="background: #4c4c4c;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Bien 3</h1>
|
||||
@@ -29,4 +100,6 @@
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script src="./infiniteScroll.js"></script>
|
||||
|
||||
</html>
|
||||
+7
-3
@@ -1,7 +1,11 @@
|
||||
let lastKnownScrollPosition = 0;
|
||||
let ticking = false;
|
||||
|
||||
document.addEventListener('scroll', function (e) {
|
||||
lastKnownScrollPosition = window.scrollY;
|
||||
console.log(window.scrollY);
|
||||
let container = document.getElementById("container");
|
||||
|
||||
container.addEventListener('scroll', function (e) {
|
||||
let lastElementIndex = container.children.length - 1;
|
||||
if (container.children.item(lastElementIndex - 1).getBoundingClientRect().y == 0) {
|
||||
console.log("avant dernier");
|
||||
}
|
||||
});
|
||||
+136
@@ -0,0 +1,136 @@
|
||||
body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
background-image: url(../images/background.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
scroll-snap-type: y mandatory;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100vw;
|
||||
height: 90vh;
|
||||
scroll-snap-align: start;
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: white;
|
||||
height: 80vh;
|
||||
width: 80vw;
|
||||
border-radius: 30px;
|
||||
@media screen and (max-width: 767px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.image {
|
||||
height: 40%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
border-radius: 30px 30px 0 0;
|
||||
background: #4c4c4c;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 767px) {
|
||||
.image {
|
||||
height: 100%;
|
||||
width: 40%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
border-radius: 30px 0 0 30px;
|
||||
background: #4c4c4c;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-direction: column;
|
||||
@media screen and (max-width: 767px) {
|
||||
padding: 5%;
|
||||
width: 90%;
|
||||
height: 55%;
|
||||
}
|
||||
@media screen and (min-width: 767px) {
|
||||
margin-right: 3%;
|
||||
width: 55%;
|
||||
height: 100%;
|
||||
}
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
height: 50%;
|
||||
.title {
|
||||
max-height: 30%;
|
||||
font-size: 20px;
|
||||
line-height: 22px;
|
||||
font-weight: bold;
|
||||
color: gray;
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2; /* number of lines to show */
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.desc {
|
||||
max-height: 70%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 6; /* number of lines to show */
|
||||
-webkit-box-orient: vertical;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.map {
|
||||
height: 45%;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
.skeleton-text:nth-of-type(#{$i}) {
|
||||
width: percentage((random(40) + 30) / 100);
|
||||
}
|
||||
}
|
||||
.skeleton-anim {
|
||||
animation: skeleton 0.8s ease-in-out infinite alternate;
|
||||
}
|
||||
@keyframes skeleton {
|
||||
to {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
.skeleton-title,
|
||||
.skeleton-text {
|
||||
background: #4c4c4c;
|
||||
animation: skeleton 0.8s ease-in-out infinite alternate;
|
||||
}
|
||||
.skeleton-title {
|
||||
height: 35px;
|
||||
width: 75%;
|
||||
}
|
||||
.skeleton-text {
|
||||
margin-top: 10px;
|
||||
height: 15px;
|
||||
}
|
||||
-26
@@ -1,26 +0,0 @@
|
||||
body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
scroll-snap-type: y mandatory;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
scroll-snap-align: start;
|
||||
h1 {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 15em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user