Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

added project number 103#35

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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Closed
jeff-mz wants to merge1 commit intosolygambas:mainfromjeff-mz:main
Closed
Show file tree
Hide file tree
Changes fromall 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
15 changes: 15 additions & 0 deletions103-halloween-landing-page/README.MD
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
# HALLOWEEN LANDING PAGE

A funny and cool landing page for halloween with animated elements

## Screenshots

![alt text](images/hero.png)

## TECHNOLOGIES

- HTML AND CSS

- [Bootstrap](https://getbootstrap.com/)

- [cursor effect](https://github.com/tholman/cursor-effects)
Binary file added103-halloween-landing-page/images/bat.png
View file
Open in desktop
Loading
Sorry, something went wrong.Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added103-halloween-landing-page/images/ghost.png
View file
Open in desktop
Loading
Sorry, something went wrong.Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added103-halloween-landing-page/images/hero.png
View file
Open in desktop
Loading
Sorry, something went wrong.Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View file
Open in desktop
Loading
Sorry, something went wrong.Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View file
Open in desktop
Loading
Sorry, something went wrong.Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View file
Open in desktop
Loading
Sorry, something went wrong.Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
100 changes: 100 additions & 0 deletions103-halloween-landing-page/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Halloween 👻</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<link rel="stylesheet" href="./style.css">
</head>

<body>
<main style="background-color: #000; width: 100%;">
<header style="position: relative;">
<nav class="navbar navbar-expand-lg ">
<div class="container-fluid ms-5 my-4">
<a class="navbar-brand" href="#"><img src="./images/ghost.png" alt="Ghost icon"
class="img-fluid animated-logo"></a>
<button class="navbar-toggler text-bg-secondary border-0 btn-outline-danger" style="z-index: 10;"
type="button" data-bs-toggle="collapse" data-bs-target="#menuItems" aria-controls="menuItems"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon text-danger" style="z-index: 10;"></span>
</button>
<div class="collapse navbar-collapse" id="menuItems">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item mx-3">
<a class="nav-link text-white active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link text-white" href="#">Services</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link text-white" href="#">Success Stories </a>
</li>
<li class="nav-item mx-3">
<a class="nav-link text-white" href="#">Blog </a>
</li>
<li class="nav-item mx-3"><button type="button"
class="text-white btn btn-outline-danger ">Sign
up</button>
</li>
</ul>
</div>
</div>
</nav>
<img src="./images/side-ghost.png" alt="ghost icon" class="img-fluid"
style="position: absolute; top: 0; right: 0; z-index:2;">
</header>

<section class="container">
<!-- --------- CALL TO ACTION ----------- -->
<div class="row custom-bg">
<!-- <img src="./images/shape-bg.png" alt="shape of light" class="img-fluid " style="z-index: 1;"> -->
<article class="col-sm-12 col-md-6">
<h1 class="animated-text display-5 fw-bold text-white my-3">Halloween Products for your party
<span>
<img id="bat" src="./images/bat.png" alt="bat icon ">
</span>
</h1>
<p class="fs-5 text-white opacity-50 ">Search anything for your party and get fast and fast!</p>
<div class="my-4">
<button class="btn btn-danger me-3">Sign up </button>
<button class="btn btn-outline-danger ">View products </button>
</div>
<!-- ----------- BOX ---------------- -->
<div class="my-4 p-3 rounded-2" style="background-color: #EA6623;max-width: 350px;">
<i class="fa fa-gift" style="font-size:36px"></i>
<p class="fw-bold fs-3 mb-0">Rewards & bonus <span>
<i class="fa fa-chevron-circle-right" style="font-size:22px"></i>
</span></p>
<p class="fs-6">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem repellendus
possimus odio iusto id, sint doloribus tenetur.</p>
</div>
</article>

<!-- ----------------HALLOWEEN IMAGE ------------- -->
<article class="col-sm-12 col-md-6">
<div class="container"><img src="./images/illustration.png" class="img-fluid" alt="halloween icons"
style="background-blend-mode: screen;">
</div>
</article>
</div>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/cursor-effects@latest/dist/browser.js"></script>
<script>
window.addEventListener("load", (event) => {
new cursoreffects.emojiCursor({ emoji: ["🔥", "👻", "🎃", '🦇'] });
});
</script>

</body>

</html>
45 changes: 45 additions & 0 deletions103-halloween-landing-page/style.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
.btn-danger {
background-color: #ea6623;
}
.btn-outline-danger {
border-color: #ea6623;
color: #ea6623;
}

@media (min-width: 920px) {
main {
min-height: 100vh;
background: url(./images/shape-bg.png) -100px -100px / cover no-repeat;
}
}
.animated-logo {
animation: anime1 5s linear infinite;
}
@keyframes anime1 {
0% {
transform: translate(40px, 18px);
}
25% {
transform: translate(20px, 20px);
}
50% {
transform: translate(0px, 5px);
}
100% {
transform: translate(40px, 18px);
}
}
.animated-text {
animation: anime2 3s ease-in-out;
}
@keyframes anime2 {
from {
translate: 150vw 0;
scale: 200% 1;
}

to {
translate: 0 0;
scale: 100% 1;
}
}
Loading
[8]ページ先頭
©2009-2025 Movatter.jp