Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/homepage filters #28

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
107 changes: 107 additions & 0 deletions FrontEnd/assets/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,28 @@ li:hover {
text-align: center;
margin-bottom: 1em;
}

.filters {
text-align: center;
margin-bottom: 40px;
}

.filter-button {
width: 165px;
border-radius: 50px;
margin-right: 12px;
height: 40px;
border: 1px solid #1D6154;
background: #ffffff;
color: #1D6154;
font-size: 16px;
}

/* .active, .filter-button:hover {
background: #1D6154;
color: #ffffff;
} */

.gallery {
width: 100%;
display: grid;
Expand Down Expand Up @@ -186,3 +208,88 @@ footer nav ul {
margin: 2em
}

/****** Code css page login *********/
.body {
overflow-x: hidden;
margin: 40px;
}

#login {
text-align: center;
}

.log {
cursor: pointer;
}

.title {
padding-bottom: 30px;
}

.email {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 40px;
}

.email1 {
display: flex;
position: relative;
right: 17%;
padding-bottom: 7px;
}

input {
width: 379px;
background: #ffffff;
border: 1px solid #ffffff;
box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09);
height: 51px;
}

.password {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 37px;
}

.pass1 {
display: flex;
position: relative;
right: 15%;
padding-bottom: 6px;
}

.buttonLog {
display: flex;
flex-direction: column;
align-items: center;
}

.bt1 {
border-radius: 60px;
width: 179px;
height: 36px;
background: #1D6154;
color: white;
margin-bottom: 37px;
}

.mdp {
text-decoration: none;
text-decoration-line: underline;
color: #3D3D3D;
padding-bottom: 55%;
}

.footer {
position: relative;
left: 85%;
}

.footer1 {
text-decoration: none;
color: #000000;
}
153 changes: 60 additions & 93 deletions FrontEnd/index.html
Original file line number Diff line number Diff line change
@@ -1,109 +1,76 @@
<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="UTF-8">
<title>Sophie Bluel - Architecte d'intérieur</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Work+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Work+Sans&display=swap"
rel="stylesheet">
<meta name="description" content="">
<link rel="stylesheet" href="./assets/style.css">
</head>

<body>
<header>
<h1>Sophie Bluel <span>Architecte d'inteérieur</span></h1>
<nav>
<ul>
<li>projets</li>
<li>contact</li>
<li>login</li>
<li><img src="./assets/icons/instagram.png" alt="Instagram"></li>
</ul>
</nav>
</header>
<main>
<section id="introduction">
<figure>
<img src="./assets/images/sophie-bluel.png" alt="">
</figure>
<article>
<h2>Designer d'espace</h2>
<p>Je raconte votre histoire, je valorise vos idées. Je vous accompagne de la conception à la livraison finale du chantier.</p>
<p>Chaque projet sera étudié en commun, de façon à mettre en valeur les volumes, les matières et les couleurs dans le respect de l’esprit des lieux et le choix adapté des matériaux. Le suivi du chantier sera assuré dans le souci du détail, le respect du planning et du budget.</p>
<p>En cas de besoin, une équipe pluridisciplinaire peut-être constituée : architecte DPLG, décorateur(trice)</p>
</article>
</section>
<section id="portfolio">
<h2>Mes Projets</h2>
<div class="gallery">
<figure>
<img src="assets/images/abajour-tahina.png" alt="Abajour Tahina">
<figcaption>Abajour Tahina</figcaption>
</figure>
<figure>
<img src="assets/images/appartement-paris-v.png" alt="Appartement Paris V">
<figcaption>Appartement Paris V</figcaption>
</figure>
<figure>
<img src="assets/images/restaurant-sushisen-londres.png" alt="Restaurant Sushisen - Londres">
<figcaption>Restaurant Sushisen - Londres</figcaption>
</figure>
<figure>
<img src="assets/images/la-balisiere.png" alt="Villa “La Balisiere” - Port Louis">
<figcaption>Villa “La Balisiere” - Port Louis</figcaption>
</figure>
<figure>
<img src="assets/images/structures-thermopolis.png" alt="Structures Thermopolis">
<figcaption>Structures Thermopolis</figcaption>
</figure>
<header>
<h1>Sophie Bluel <span>Architecte d'inteérieur</span></h1>
<nav>
<ul>
<li>projets</li>
<li>contact</li>
<li class="log">login</li>
<li><img src="./assets/icons/instagram.png" alt="Instagram"></li>
</ul>
</nav>
</header>
<main>
<section id="introduction">
<figure>
<img src="assets/images/appartement-paris-x.png" alt="Appartement Paris X">
<figcaption>Appartement Paris X</figcaption>
<img src="./assets/images/sophie-bluel.png" alt="">
</figure>
<figure>
<img src="assets/images/le-coteau-cassis.png" alt="Pavillon “Le coteau” - Cassis">
<figcaption>Pavillon “Le coteau” - Cassis</figcaption>
</figure>
<figure>
<img src="assets/images/villa-ferneze.png" alt="Villa Ferneze - Isola d’Elba">
<figcaption>Villa Ferneze - Isola d’Elba</figcaption>
</figure>
<figure>
<img src="assets/images/appartement-paris-xviii.png" alt="Appartement Paris XVIII">
<figcaption>Appartement Paris XVIII</figcaption>
</figure>
<figure>
<img src="assets/images/bar-lullaby-paris.png" alt="Bar “Lullaby” - Paris">
<figcaption>Bar “Lullaby” - Paris</figcaption>
</figure>
<figure>
<img src="assets/images/hotel-first-arte-new-delhi.png" alt="Hotel First Arte - New Delhi">
<figcaption>Hotel First Arte - New Delhi</figcaption>
</figure>
</div>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Vous avez un projet ? Discutons-en !</p>
<form action="#" method="post">
<label for="name">Nom</label>
<input type="text" name="name" id="name">
<label for="email">Email</label>
<input type="email" name="email" id="email">
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
<input type="submit" value="Envoyer">
</form>
</section>
</main>
<article>
<h2>Designer d'espace</h2>
<p>Je raconte votre histoire, je valorise vos idées. Je vous accompagne de la conception à la livraison
finale du chantier.</p>
<p>Chaque projet sera étudié en commun, de façon à mettre en valeur les volumes, les matières et les
couleurs dans le respect de l’esprit des lieux et le choix adapté des matériaux. Le suivi du
chantier sera assuré dans le souci du détail, le respect du planning et du budget.</p>
<p>En cas de besoin, une équipe pluridisciplinaire peut-être constituée : architecte DPLG,
décorateur(trice)</p>
</article>
</section>
</section>
<section id="portfolio">
<h2>Mes Projets</h2>
<div class="filters"></div>
<div class="gallery">
</div>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Vous avez un projet ? Discutons-en !</p>
<form action="#" method="post">
<label for="name">Nom</label>
<input type="text" name="name" id="name">
<label for="email">Email</label>
<input type="email" name="email" id="email">
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
<input type="submit" value="Envoyer">
</form>
</section>
</main>

<footer>
<nav>
<ul>
<li>Mentions Légales</li>
</ul>
</nav>
</footer>
<footer>
<nav>
<ul>
<li>Mentions Légales</li>
</ul>
</nav>
</footer>
<script type="module" src="./js/index.js"></script>
</body>
</html>

</html>
31 changes: 31 additions & 0 deletions FrontEnd/js/api.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
// module api.js
export const getWorks = async () => {
const response = await fetch("http://localhost:5678/api/works");
return await response.json();
};

export const getCategories = async () => {
const response = await fetch("http://localhost:5678/api/categories");
return await response.json();
};

async function fetchUsers() {
let user = {
email: "[email protected]",
password: "S0phie",
};

let response = await fetch("http://localhost:5678/api/users/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(user),
});
if (response.ok === true) {
return response.json();
} else {
alert("Impossible de se connecter");
}
}
fetchUsers().then((user) => console.log(user));
Loading