JSFiddle - React, Tailwind, and code Playground
by Jonno Kennedy
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Ultimate Brisbane Getaway</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css">
<style>
body {
font-family: 'Avenir', sans-serif;
}
.hero {
background-image: url('https://source.unsplash.com/random/1600x900');
background-size: cover;
background-position: center;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
.hero .title {
animation: fadeInDown 1.5s ease-in-out;
}
.hero .subtitle {
animation: fadeInUp 1.5s ease-in-out;
}
@keyframes fadeInDown {
0% { opacity: 0; transform: translateY(-50px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
0% { opacity: 0; transform: translateY(50px); }
100% { opacity: 1; transform: translateY(0); }
}
.section {
padding: 4rem 1.5rem;
}
.services {
background-color: #f5f5f5;
}
.footer {
background-color: #363636;
color: white;
}
.footer a {
color: #f5f5f5;
}
</style>
</head>
<body>
<!-- Hero Section -->
<section class="hero is-fullheight">
<div class="hero-body">
<div class="container">
<h1 class="title is-1">Welcome to The Ultimate Brisbane Getaway</h1>
<p class="subtitle is-4">Experience unparalleled luxury and comfort in the heart of Brisbane</p>
</div>
</div>
</section>
<!-- About Section -->
<section class="section">
<div class="container">
<div class="columns">
<div class="column...