La Pension Féline
Création d'une maquette de site web pour une pension pour chats sur Figma, suivie de la réalisation de cette maquette en no-code à l'aide de Pinegrow.
La Pension Féline
Création d'une maquette de site web pour une pension pour chats sur Figma, suivie de la réalisation de cette maquette en no-code à l'aide de Pinegrow.
HTML & CSS
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>New page</title>
<link href="css/theme.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dongle:700,400,300&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:900,800,700,600,500,400,300,200,100&display=swap">
</head>
<body style="min-width: 1340px;">
<header style="align-items: center; margin-right: 25px; margin-left: 25px; grid-template-columns: 1fr 1fr; grid-template-rows: 100px; justify-content: space-between; position: absolute;">
<nav style="display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 159px; align-items: center;">
<a style="font-family: 'Dongle', sans-serif; font-size: 64px; color: white; font-weight: 700; letter-spacing: 1px; text-decoration: none; padding-left: 25px; padding-right: 25px; text-shadow: 1px 1px 2px #000000; width: 390px;">La Pension Féline</a>
<ul style="display: flex; justify-content: flex-end; text-decoration: none; list-style-type: none;">
<li style="text-align: center; min-width: 165px;"><a href="" style="text-decoration: none; font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 700; padding-left: 25px; padding-right: 25px; letter-spacing: 1px; text-transform: capitalize; color: white; text-shadow: 1px 1px 2px #000000;">À propos</a>
</li>
<li style="text-align: center;">
<a href="" style="text-decoration: none; font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 700; padding-left: 25px; padding-right: 25px; letter-spacing: 1px; text-transform: capitalize; color: white; text-shadow: 1px 1px 2px #000000;">Infrastructure</a>
</li>
<li style="text-align: center;">
<a href="" style="text-decoration: none; font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 700; padding-left: 25px; padding-right: 25px; letter-spacing: 1px; text-transform: capitalize; color: white; text-shadow: 1px 1px 2px #000000;">Nourriture</a>
</li>
<li style="text-align: center;">
<a href="" style="text-decoration: none; font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 700; padding-left: 25px; padding-right: 25px; letter-spacing: 1px; text-transform: capitalize; color: white; text-shadow: 1px 1px 2px #000000;">Tarifs</a>
</li>
<li style="text-align: center;">
<a href="" style="text-decoration: none; font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 700; padding-left: 25px; padding-right: 25px; letter-spacing: 1px; text-transform: capitalize; color: white; text-shadow: 1px 1px 2px #000000;">Contact</a>
</li>
</ul>
</nav>
</header>
<main style="height: 1438px;">
<div style="display: flex; flex-direction: column; align-items: flex-end; height: 719px; background-repeat: no-repeat; background-image: url('img/Try-the-Hotel-Out.jpg'); background-size: cover; background-position: 0px; justify-content: flex-end; padding-bottom: 2rem;">
<h1 style="font-family: 'Inter', sans-serif; font-size: 40px; font-weight: 700; margin-top: 0; margin-bottom: 0; margin-right: 6rem; color: white; z-index: 2; letter-spacing: 1px;">Pension pour chat à Liège</h1>
<div style="display: flex; align-items: center; justify-content: flex-end; margin-right: 6rem; z-index: 1;">
<h2 style="font-family: 'Inter', sans-serif; font-weight: 600; font-size: 30px; letter-spacing: 1PX; background-color: #8DAE65; padding: 1.5rem 3rem; width: 270px; text-align: center; border-radius: 8px; margin-left: 30px; margin-top: 0.5em; margin-bottom: 0.5em; color: white; border: 3px solid #8dae65;">Réserver</h2>
<h2 style="font-family: 'Inter', sans-serif; font-weight: 600; font-size: 30px; letter-spacing: 1PX; background-color: 8DAE65; padding: 1.5rem 3rem; width: 270px; text-align: center; border-radius: 8px; border-width: 3px; border-style: solid; margin-left: 30px; margin-top: 0.5em; margin-bottom: 0.5em; color: white;">F.A.Q.</h2>
</div>
</div>
<div data-empty-placeholder style="background-image: url('img/Vector%201.png'); background-repeat: no-repeat; width: 782px; height: 346px; position: absolute; top: 450px; right: 0px;"></div>
<img src="img/PngItem_415477.png" style="position: absolute; top: 333px; transform: rotate(-1deg); left: 110px;" width="445" height="502">
<h2 style="font-family: 'Inter', sans-serif; font-weight: 900; font-size: 64px; text-transform: uppercase; letter-spacing: 6px; left: 190px; transform: rotate(10deg); z-index: 2; color: white; text-shadow: 2px 2px #000000; position: absolute; top: 190px;">Bienvenue ! </h2>
<div style="height: 604px; margin-top: 113px; display: flex; align-items: center; overflow: auto;">
<div style="display: flex; flex-direction: column; height: 420px; justify-content: space-between; align-items: center; margin-left: 77px; margin-right: 77px;">
<img src="img/220726-cat-theo-elise-ew-636p-6cd3b0.jpg" style="width: 280px; height: 280px; border-radius: 100%; border: 7px solid #658dae; object-fit: cover;">
<p style="width: 330px; font-family: 'Inter', sans-serif; color: 4B4B4B; font-size: 24px; font-weight: 600; letter-spacing: 1px; line-height: 135%; text-align: center; margin-bottom: 0; margin-top: 0; height: 100px;">“ J’ai même reçu quelques gourmandises quand j’étais sage ! ”</p>
</div>
<div style="display: flex; flex-direction: column; height: 420px; justify-content: space-between; align-items: center; margin-left: 77px; margin-right: 77px;">
<img src="img/best-girl-cat-names-1606245046.jpg" style="width: 280px; height: 280px; border-radius: 100%; border: 7px solid #658dae; object-fit: cover;">
<p style="width: 330px; font-family: 'Inter', sans-serif; color: 4B4B4B; font-size: 24px; font-weight: 600; letter-spacing: 1px; line-height: 135%; text-align: center; margin-bottom: 0; margin-top: 0; height: 100px;">“ Les meilleures vacances de ma vie. Vivement les prochaines. ”</p>
</div>
<div style="display: flex; flex-direction: column; height: 420px; justify-content: space-between; align-items: center; margin-left: 77px; margin-right: 77px;">
<img src="img/FELV-cat.jpg" style="width: 280px; height: 280px; border-radius: 100%; border: 7px solid #658dae; object-fit: cover;">
<p style="width: 330px; font-family: 'Inter', sans-serif; color: 4B4B4B; font-size: 24px; font-weight: 600; letter-spacing: 1px; line-height: 135%; text-align: center; margin-bottom: 0; margin-top: 0; height: 100px;">“ Un endroit très calme, ça change de chez moi. J’ai pu me reposer. ”</p>
</div>
<div style="display: flex; flex-direction: column; height: 420px; justify-content: space-between; align-items: center; margin-left: 77px; margin-right: 77px;">
<img src="img/17grumpycat-1-videoSixteenByNine3000.jpg" style="width: 280px; height: 280px; border-radius: 100%; border: 7px solid #658dae; object-fit: cover;">
<p style="width: 330px; font-family: 'Inter', sans-serif; color: 4B4B4B; font-size: 24px; font-weight: 600; letter-spacing: 1px; line-height: 135%; text-align: center; margin-bottom: 0; margin-top: 0; height: 100px;">“ Ouai... c’était sympa. ”</p>
</div>
<div style="display: flex; flex-direction: column; height: 420px; justify-content: space-between; align-items: center; margin-left: 77px; margin-right: 77px;">
<img src="img/large-cat-breed-1553197454.jpg" style="width: 280px; height: 280px; border-radius: 100%; border: 7px solid #658dae; object-fit: cover;">
<p style="width: 330px; font-family: 'Inter', sans-serif; color: 4B4B4B; font-size: 24px; font-weight: 600; letter-spacing: 1px; line-height: 135%; text-align: center; margin-bottom: 0; margin-top: 0; height: 100px;">“ Il y avait tant d’autres chats, j’ai fait plein de nouvelles rencontres. ”</p>
</div>
<div style="display: flex; flex-direction: column; height: 420px; justify-content: space-between; align-items: center; margin-left: 77px; margin-right: 77px;">
<img src="img/domestic-cat-lies-in-a-basket-with-a-knitted-royalty-free-image-1592337336.jpg" style="width: 280px; height: 280px; border-radius: 100%; border: 7px solid #658dae; object-fit: cover;">
<p style="width: 330px; font-family: 'Inter', sans-serif; color: 4B4B4B; font-size: 24px; font-weight: 600; letter-spacing: 1px; line-height: 135%; text-align: center; margin-bottom: 0; margin-top: 0; height: 100px;">“ J’y ai rencontré mon âme soeur, j’espère la revoir la prochaine fois ! ”</p>
</div>
<div style="display: flex; flex-direction: column; height: 420px; justify-content: space-between; align-items: center; margin-left: 77px; margin-right: 77px;">
<img src="img/shutterstock_750360994-1.jpg" style="width: 280px; height: 280px; border-radius: 100%; border: 7px solid #658dae; object-fit: cover;">
<p style="width: 330px; font-family: 'Inter', sans-serif; color: 4B4B4B; font-size: 24px; font-weight: 600; letter-spacing: 1px; line-height: 135%; text-align: center; margin-bottom: 0; margin-top: 0; height: 100px;">“ J’ai pas vu le temps passer. ”</p>
</div>
</div>
</main>
<footer style="height: 203px; background-color: #AE658D;">
<div style="display: flex; align-items: center; justify-content: center; height: 203px;">
<div style="padding-left: 40px; padding-right: 40px;">
<img src="img/cat-01.svg" width="101" height="107" style="background-repeat: no-repeat; transform: rotateY(180deg);">
</div>
<div style="padding-left: 40px; padding-right: 40px; display: flex; align-items: center;">
<img src="img/Vector.svg" width="25" height="20.3" style="margin-right: 20px;">
<a href="" style="font-family: 'Inter', sans-serif; color: white; font-weight: 600; font-size: 20px; letter-spacing: 1px; text-decoration: none;">@pensionfeline</a>
</div>
<div style="padding-left: 40px; padding-right: 40px; display: flex; align-items: center;">
<img src="img/Vector-1.svg" width="21.89" height="21.89" style="margin-right: 20px;">
<a href="" style="font-family: 'Inter', sans-serif; color: white; font-weight: 600; font-size: 20px; letter-spacing: 1px; text-decoration: none;">@pensionfeline</a>
</div>
<div style="padding-left: 40px; padding-right: 40px; display: flex; align-items: center;">
<img src="img/Vector-2.svg" width="21.89" height="21.89" style="margin-right: 20px;">
<a href="" style="font-family: 'Inter', sans-serif; color: white; font-weight: 600; font-size: 20px; letter-spacing: 1px; text-decoration: none;">@pensionfeline</a>
</div>
<div style="padding-left: 40px; padding-right: 40px;">
<img src="img/cat-01.svg" width="101" height="107" style="background-repeat: no-repeat;">
</div>
</div>
</footer>
</body>
</html>
