<!DOCTYPE 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=, initial-scale=1.0" />
<link rel="stylesheet" href="vibe.css" type="text/css" />
<title>Vibe Place</title>
</head>
<body>
<nav>
<p>Home</p>
<p>Cafe</p>
<p>About</p>
<p>Blog</p>
</nav>
<!--Introduction-->
<header>
<h1>The Vibe Place</h1>
<p>chill, talk, eat, or do whatever, you can always come here!</p>
<img src="https://images.unsplash.com/photo-1517701986616-711a9d625afe?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
<img src="https://images.unsplash.com/photo-1550434605-d1a3cb21158e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
<img src="https://images.unsplash.com/photo-1564241832494-0ccac22a072c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=736&q=80">
<img src="https://images.unsplash.com/photo-1529179307417-ca83d48bd790?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
<img src="https://images.unsplash.com/photo-1606617556970-b9cddf4c1319?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
</header>
<!--Info-->
<section class="info">
<div>
<h2>It's a place known for its enjoyment!</h2>
<p>
An award winning plaza where you do nothing but relax and have fun
</p>
</div>
<div>
<div>
<ion-icon name="people-outline"></ion-icon>
<h2>+1200 visitors a day/night!</h2>
</div>
<div>
<ion-icon name="time-outline"></ion-icon>
<h2>24/7 buisness!</h2>
</div>
<div>
<ion-icon name="trophy-outline"></ion-icon>
<h2>10 plaza awards!</h2>
</div>
</div>
</section>
<!--Cafe-->
<section class="cafe">
<h1>Enjoy our everlasting drinks and food galore!</h1>
<p>We have everything to excite your tastebuds!</p>
<h2>Popular dishes</h2>
<div class="food-container">
<img class="hidden" src="https://images.unsplash.com/photo-1624855600799-ac8e8bddd1da?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"/>
<img class="hidden" src="https://images.unsplash.com/photo-1547755986-37898ce06c5b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
<img class="hidden" src="https://plus.unsplash.com/premium_photo-1663840277962-99df8edd62a0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"/>
<img class="hidden" src="https://plus.unsplash.com/premium_photo-1668771085141-82507d6154d5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
<img class="hidden" src="https://images.unsplash.com/photo-1623595119708-26b1f7300075?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=383&q=80">
<img class="hidden" src="https://images.unsplash.com/photo-1562967916-eb82221dfb92?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80">
</div>
<br>
<h2>Popular drinks</h2>
<div class="food-container">
<img class="hidden" src="https://images.unsplash.com/photo-1625748121823-21f4613fc8fc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
<img class="hidden" src="https://images.unsplash.com/photo-1637178035222-a08f2d4dd1a3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=378&q=80">
<img class="hidden" src="https://images.unsplash.com/photo-1623084921164-4a8c5c37a912?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
<img class="hidden" src="https://images.unsplash.com/photo-1624781740834-fbfbf5fd221a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
<img class="hidden" src="https://images.unsplash.com/photo-1605199910378-edb0c0709ab4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
<img class="hidden" src="https://images.unsplash.com/photo-1597481499666-130f8eb2c9cd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
</div>
</section>
<!--Arcade-->
<section class="arcade">
<div>
<h1>More of a gamer? we got what you need!</h1>
<p>Over 200+ arcades and games with brands such as playstation, nintendo, and Xbox!</p>
</div>
<div class="gaming">
<img src="https://images.unsplash.com/photo-1570466451714-07738b7d4184?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=703&q=80">
<img src="https://images.unsplash.com/photo-1625805866449-3589fe3f71a3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
<img src="https://images.unsplash.com/photo-1585676264910-f3b939b562d0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
</div>
</section>
<section class="music">
<h1>Music playlist</h1>
<br>
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/3iJN1S4nQid1Fmdkk9n4ue?utm_source=generator&theme=0" width="100%" height="380" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
</section>
<!--Contats-->
<footer>
<h2>About the website and author</h2>
<p>This website is a remake of the first ever website i made last year, and as
a contribution and showcase to show how much i've grown over the last year i've decided to remake it with
the skills i now have and mastered. Before this website used to be plain and white with only text and links,
but now it's filled with creativity. I decided to make the ux design simple, because i didn't want to take
too long making this website. That's all, and i hope you have a happy new year!
</p>
</footer>
</body>
<script
type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
></script>
<script src="vibe.js"></script>
</html> @import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Lobster&family=Lora:ital@0;1&family=Poppins:wght@300;400&family=Unbounded&display=swap');
html, body {
width: 100%;
height: 100%;
margin: 0;
}
section {
padding-bottom: 5rem;
}
* {
font-family: 'Poppins';
}
nav {
display: flex;
gap: 10%;
align-items: center;
justify-content: flex-end;
background-color: #e9c46a;
}
nav > p:hover {
font-weight: bold;
cursor: pointer
}
nav > ion-icon {
font-size: 23px;
}
header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #e9c46a;
height: 50rem;
}
header > h1 {
font-size: 50px;
}
header > img {
width: 100px;
position: absolute;
z-index: 0;
animation: reveal 1s;
}
@keyframes reveal {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
header > img:nth-child(6) {
transform: translate(-400px, 200px) rotate(30deg);
}
header > img:nth-child(7) {
transform: translateY(-300px);
}
header > img:nth-child(3) {
transform: translate(400px, 200px) rotate(-30deg);
}
header > img:nth-child(4) {
transform: translate(-400px, -200px) rotate(-30deg);
}
header > img:nth-child(5) {
transform: translate(400px, -200px) rotate(30deg);
}
.info {
display: flex;
gap: 60px;
flex-direction: column;
justify-content: center;
background-color: #001d3d;
color: white;
}
.info > div:nth-child(1) {
display: flex;
flex-direction: column;
align-items: center;
}
.info > div:nth-child(2) {
display: flex;
align-items: center;
gap: 30px;
}
.info > div:nth-child(2) > div {
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
width: 100%;
gap: 10px;
text-align: center;
}
.info > div ion-icon {
font-size: 40px;
}
.cafe {
display: grid;
place-items: center;
background-color: #ffcdb2;
}
.cafe > div > img{
width: 200px;
border-radius: 5px;
cursor: pointer;
}
.cafe > div > img:nth-child(1){
transition: 600ms;
}
.cafe > div > img:nth-child(2){
transition: 600ms;
}
.cafe > div > img:nth-child(3){
transition: 640ms;
}
.cafe > div > img:nth-child(4){
transition: 680ms;
}
.cafe > div > img:nth-child(5){
transition: 700ms;
}
.cafe > div > img:nth-child(6){
transition: 740ms;
}
.food-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.arcade > div > h1 {
text-align: center;
}
.arcade {
display: grid;
place-items: center;
background-color: #e5e5f7;
opacity: 0.8;
background-color: #5e548e;
}
.gaming > img {
width: 250px;
}
footer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.music {
text-align: center;
background-color: #06d6a0;
}
.music > h1 {
margin: 0;
}
.hidden {
opacity: 0;
transform: translateX(-100%);
}
.show {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 750px) {
header > img:nth-child(6) {
transform: translate(-200px, 200px) rotate(30deg);
}
header > img:nth-child(3) {
transform: translate(200px, 200px) rotate(-30deg);
}
header > img:nth-child(4) {
transform: translate(-200px, -200px) rotate(-30deg);
}
header > img:nth-child(5) {
transform: translate(200px, -200px) rotate(30deg);
}
}
@media (max-width: 670px) {
.cafe > div > img {
width: 100px;
}
header > img {
width: 60px;
}
.arcade > div > img {
display: none;
}
}var hidden = document.querySelectorAll('.hidden');
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
console.log(entry);
if (entry.isIntersecting) {
entry.target.classList.add("show");
} else {
entry.target.classList.remove("show");
}
});
});
hidden.forEach((el) => observer.observe(el));
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.