filipe/website-casa-cidalisa
1
0
Fork 0
Code Issues Pull requests Activity

logos and stuff

Browse source
This commit is contained in:
Filipe Medeiros 2024-09-28 21:31:22 +02:00
parent 29caf2e71a
commit 3e1a854d85
Signed by: filipe
GPG key ID: 9533BD5467CC1E78
6 changed files with 83 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/social-image.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3 MiB

BIN
src/assets/Frente 6 Bartolomeu.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 MiB

After

Width:  |  Height:  |  Size: 11 MiB

BIN
src/assets/facebook-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
src/assets/instagram-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.6 KiB

120
src/pages/index.astro
View file

@ -7,27 +7,29 @@ import Photo3 from "../assets/imagem 3.png";
import Logo from "../assets/logo.svg";
import Map from "../assets/mapa.png";
import LogoAirbnb from "../assets/logo-airbnb.svg";
import IconFacebook from "../assets/facebook-logo.png";
import IconInstagram from "../assets/instagram-logo.png";
import LogoBooking from "../assets/logo-booking.svg";
const optimizedBackgroundImage = await getImage({ src: HeroImage });
const logoImage = await getImage({ src: Logo });
const reviews = [
{
quote: "Adorei estender-me na rede e balançar-me, com Santa Maria no horizonte.",
name: "Ana",
country: "Portugal",
},
{
quote: "O fim de tarde no quintal foi maravilhoso. Pássaros e mais pássaros e um vitelo mugiu ali ao lado.",
name: "Ana",
country: "Portugal",
},
{
quote: "Adorei estender-me na rede e balançar-me, com Santa Maria no horizonte.",
name: "Ana",
country: "Portugal",
},
];
// const reviews = [
// {
// quote: "Adorei estender-me na rede e balançar-me, com Santa Maria no horizonte.",
// name: "Ana",
// country: "Portugal",
// },
// {
// quote: "O fim de tarde no quintal foi maravilhoso. Pássaros e mais pássaros e um vitelo mugiu ali ao lado.",
// name: "Ana",
// country: "Portugal",
// },
// {
// quote: "Adorei estender-me na rede e balançar-me, com Santa Maria no horizonte.",
// name: "Ana",
// country: "Portugal",
// },
// ];
---
<!doctype html>
@ -39,6 +41,15 @@ const reviews = [
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>Casa Cidalisa</title>
<meta property="og:title" content="CASA CIDALISA" />
<meta
property="og:description"
content="Relaxe no paraíso escondido de São Miguel. Sossegada vivenda nos Açores, com jardim e quintal, entre o mar e a montanha. Ideal para quatro pessoas."
/>
<meta
property="og:image"
content={`${Astro.url.origin}/social-image.jpeg`}
/>
<style>
@font-face {
font-family: "Cinzel";
@ -55,7 +66,7 @@ const reviews = [
</head>
<body class="m-0 text-night bg-seasalt font-montserrat">
<nav
class="flex justify-center sm:justify-center max-sm:bg-green p-5 sticky sm:absolute sm:w-full top-0"
class="flex justify-center sm:justify-center max-sm:bg-green p-5 sticky sm:absolute sm:w-full top-0 z-10"
>
<Image src={Logo} alt="TODO" class="sr-only" />
<div
@ -78,7 +89,7 @@ const reviews = [
}}
>
<h1
class="text-seasalt text-[50px] p-5 sm:text-center font-medium leading-[60px] sm:max-w-4xl sm:mx-auto"
class="text-seasalt drop-shadow-[0_0_40px_black] text-[50px] p-5 sm:text-center font-medium leading-[60px] sm:max-w-4xl sm:mx-auto"
>
Relaxe no paraíso escondido de São Miguel.
</h1>
@ -108,6 +119,31 @@ const reviews = [
</a>
</div>
<ul
class="absolute max-sm:top-28 right-5 flex gap-4 bottom-6 sm:right-6 sm:gap-6"
>
<li>
<a
href="https://www.facebook.com/profile.php?id=61565634925731"
>
<Image
src={IconFacebook}
alt="TODO"
class="h-8 w-auto"
/>
</a>
</li>
<li>
<a href="https://www.instagram.com/casacidalisa/">
<Image
src={IconInstagram}
alt="TODO"
class="h-8 w-auto"
/>
</a>
</li>
</ul>
<Image src={HeroImage} alt="TODO" class="sr-only" />
</header>
@ -116,7 +152,9 @@ const reviews = [
<section
class="py-8 sm:py-20 max-sm:*:ms-5 max-sm:*:me-16 max-sm:*:max-w-prose [&>h2]:text-2xl max-sm:[&>img]:w-[95%] max-sm:[&>img]:mx-auto [&_b]:font-medium sm:grid sm:grid-cols-2 sm:grid-rows-[content_2fr_1fr_1fr_2fr] sm:gap-8 lg:gap-20"
>
<h2 class="max-sm:mb-7 sm:col-span-2 sm:ps-10 lg:pl-28">
<h2
class="!max-w-full !me-0 max-xs:!text-xl max-sm:mb-7 sm:col-span-2 sm:ps-10 lg:ps-28"
>
Bem-vindo à <span class="font-cinzel">Casa Cidalisa</span>
</h2>
@ -262,28 +300,28 @@ const reviews = [
</footer>
</main>
<script>
function scrollReviews(right = true) {
document
.querySelector("#review-list")
.scrollBy({ left: right ? 40 : -40, behavior: "smooth" });
}
<!-- <script>
// function scrollReviews(right = true) {
// document
// .querySelector("#review-list")
// .scrollBy({ left: right ? 40 : -40, behavior: "smooth" });
// }
(
document.querySelector(
"#scroll-reviews-left-button",
) as HTMLButtonElement
).addEventListener("click", () => {
scrollReviews(false);
});
// (
// document.querySelector(
// "#scroll-reviews-left-button",
// ) as HTMLButtonElement
// ).addEventListener("click", () => {
// scrollReviews(false);
// });
(
document.querySelector(
"#scroll-reviews-right-button",
) as HTMLButtonElement
).addEventListener("click", () => {
scrollReviews();
});
</script>
// (
// document.querySelector(
// "#scroll-reviews-right-button",
// ) as HTMLButtonElement
// ).addEventListener("click", () => {
// scrollReviews();
// });
</script> -->
</body>
</html>

4
tailwind.config.mjs
View file

@ -15,6 +15,10 @@ export default {
fontFamily: {
cinzel: 'Cinzel',
montserrat: 'Montserrat'
},
screens: {
xs: '455px'
}
},
},