17dp93
/
rawreel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed background, added call and email button

This commit is contained in:
Demetri Pirpiris 2025-03-12 03:34:13 -06:00
parent 1ddf02dd94
commit d6da1d58aa
2 changed files with 182 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

243
index.html
View File

@ -20,103 +20,120 @@
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #fff;
background: #000; /* Plain black base */
overflow: hidden; /* Keep “single screen” if it fits */
}
body {
position: relative;
z-index: 0;
}
/*
STARFIELD: behind everything (z-index: -2),
so we can layer a pink grid in front of it.
*/
/* STARFIELD: behind the grid (z-index: 0) */
#starfield {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
background: transparent; /* so black or the overlay is visible */
z-index: 0;
background: transparent;
}
/*
PINK GRID: body::before
- 2 repeating-linear-gradients for horizontal & vertical lines
- 2px bright pink lines, each cell 40px tall/wide
- Slight angle: -15deg
- Slowly scroll upward
PINK GRID: body::before at z-index: 1
- sized at 300% so it always fully covers the screen, even when rotated.
- 0.5px line thickness
- "scrollGrid" (moves background up)
- "waveGrid" (gentle 3D rocking motion)
*/
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 200%;
height: 200%;
z-index: -1; /* in front of starfield, behind content */
pointer-events: none; /* ignore clicks */
width: 300%;
height: 300%;
z-index: 1;
pointer-events: none;
/*
We'll do each set of lines in bright pink:
- (A) horizontal lines repeating every 40px, with a 2px thick line
- (B) vertical lines similarly
*/
/* Pink lines at 0.5px thickness, spaced every 50px */
background:
/* Horizontal lines */
repeating-linear-gradient(
0deg,
rgba(255,0,212,1) 0px, /* line color start */
rgba(255,0,212,1) 2px, /* line color end (2px thick) */
transparent 2px, /* transparent gap */
transparent 40px /* next line after 40px total */
rgba(255,0,212,1) 0px,
rgba(255,0,212,1) 0.5px,
transparent 0.5px,
transparent 50px
),
/* Vertical lines */
repeating-linear-gradient(
90deg,
rgba(255,0,212,1) 0px,
rgba(255,0,212,1) 2px,
transparent 2px,
transparent 40px
rgba(255,0,212,1) 0.5px,
transparent 0.5px,
transparent 50px
);
background-size: 100% 100%, 100% 100%;
/* Slight angle + small shift so grid definitely covers the screen */
transform: rotate(-15deg) translate(-10%, -10%);
transform-origin: center;
/* We’ll rotate it a bit and shift it so the grid lines fill everything */
transform-origin: center center;
animation: scrollGrid 30s linear infinite;
/* Combine two animations: upward scroll + wave rocking */
animation:
scrollGrid 30s linear infinite,
waveGrid 6s ease-in-out infinite;
}
/*
Animate background-position to scroll upward:
We'll shift it from top (0) to -1200px over 30s, then repeat.
Increase or decrease 1200 if you want slower/faster or more noticeable movement.
*/
/* Scroll upward (adjust 1200 if you want it faster/slower) */
@keyframes scrollGrid {
0% { background-position: 0 0, 0 0; }
100% { background-position: 0 -1200px, 0 -1200px; }
}
/*
MAIN CONTAINER
- Full viewport height
- Evenly space out items (logo, tagline, video, contact, button)
Wave effect:
- we use perspective so the rotateX/rotateZ appear more “3D”.
- at 50% we tilt the grid more aggressively, then return at 100%.
*/
@keyframes waveGrid {
0% {
transform: perspective(800px)
rotate(-15deg)
translate(-50%, -50%)
rotateX(0deg)
rotateZ(0deg);
}
50% {
transform: perspective(800px)
rotate(-15deg)
translate(-50%, -50%)
rotateX(15deg)
rotateZ(12deg);
}
100% {
transform: perspective(800px)
rotate(-15deg)
translate(-50%, -50%)
rotateX(0deg)
rotateZ(0deg);
}
}
/* MAIN CONTAINER on top of everything */
.container {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
width: 100%;
height: 100vh;
height: 100vh; /* Full viewport */
text-align: center;
padding: 1rem;
/* z-index: auto (in front of grid), so content is visible over the grid */
}
/* LOGO */
.logo {
max-width: 90%;
max-height: 150px;
max-height: 200px;
transition: transform 0.4s ease;
filter: drop-shadow(0 0 10px rgba(255,255,255,0.5));
}
@ -124,7 +141,7 @@
transform: scale(1.05);
}
/* TAGLINE (Hero Statement) */
/* TAGLINE */
.tagline {
font-size: 2rem;
font-weight: 700;
@ -146,11 +163,11 @@
100% { opacity: 1; }
}
/* MAIN VIDEO */
/* VIDEO */
.video-container {
width: 80%;
max-width: 800px;
max-height: 50vh; /* keep it from dominating small screens */
max-height: 50vh;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.5), 0 0 10px rgba(255,255,255,0.2);
@ -173,7 +190,7 @@
text-shadow: 0 0 3px #fff, 0 0 5px magenta;
}
/* CALL TO ACTION (CTA) */
/* CTA BUTTON */
.cta-btn {
display: inline-block;
text-decoration: none;
@ -194,6 +211,101 @@
opacity: 0.9;
}
/* CTA SECTION HEADING */
.cta-heading {
font-size: 1.5rem;
margin: 1.5rem 0 0.5rem;
text-shadow: 0 0 5px #fff, 0 0 10px magenta;
}
/*
CTA BUTTONS
- .cta-btn is the shared style
- .call-btn has the phone shape
- .mail-btn has the circle+envelope shape
*/
.cta-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap; /* so they wrap on small screens */
justify-content: center;
align-items: center;
}
.cta-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: #fff;
background: linear-gradient(45deg, #ff00d4, #00f0ff);
border: none;
padding: 1rem 2.5rem 1rem 3rem; /* extra left padding for icon space */
font-size: 1rem;
font-weight: 600;
border-radius: 30px;
cursor: pointer;
box-shadow: 0 0 10px rgba(255,0,212,0.7), 0 0 20px rgba(0,240,255,0.5);
transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}
.cta-btn:hover {
transform: scale(1.05);
box-shadow: 0 0 15px rgba(255,0,212,1), 0 0 30px rgba(0,240,255,0.8);
opacity: 0.9;
}
/* PHONE BUTTON: add a phone icon via the :before pseudo-element */
.call-btn::before {
content: "";
position: absolute;
left: 1rem; /* place icon near left padding */
width: 16px;
height: 16px;
background: transparent;
border: 2px solid #fff;
border-radius: 2px 2px 12px 2px; /* shape the handset corners */
transform: rotate(-45deg);
box-shadow:
0 4px 0 0 #fff, /* mouthpiece & earpiece lumps via shadow */
0 -4px 0 0 #fff;
}
/* EMAIL BUTTON: circle with envelope inside */
.mail-btn::before {
/* Circle (black fill + white border) */
content: "";
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
background: #000; /* black interior */
border-radius: 50%;
border: 2px solid #fff; /* white ring */
}
.mail-btn::after {
/* White envelope drawn inside the black circle */
content: "";
position: absolute;
left: calc(1rem + 4px); /* a bit right of circle edge */
top: calc(50% - 4px); /* roughly center the envelope vertically */
width: 12px;
height: 8px;
background: transparent;
border: 2px solid #fff;
border-radius: 2px;
box-sizing: border-box;
/*
Use two inset shadows to draw the diagonal lines from the top corners
down to the bottom center, forming an envelope "flap."
*/
box-shadow:
inset -5px -3px 0 0 #fff, /* left diagonal */
inset 5px -3px 0 0 #fff; /* right diagonal */
}
/* MOBILE TWEAKS */
@media (max-width: 480px) {
.tagline {
@ -212,7 +324,7 @@
</head>
<body>
<!-- STARFIELD behind the grid (z-index: -2) -->
<!-- STARFIELD (z-index: 0) -->
<canvas id="starfield"></canvas>
<div class="container">
@ -220,15 +332,22 @@
<h1 class="tagline">Short-form social videos that boost your brand.</h1>
<div class="video-container">
<video src="https://storage.googleapis.com/rawreelsocial-videos/teaser.mp4" controls></video>
<video
src="https://storage.googleapis.com/rawreelsocial-videos/teaser.mp4"
controls>
</video>
</div>
<div class="contact-info">
<h2>Demetri Pirpiris</h2>
<h3>(773) 440-1040</h3>
</div>
<a href="mailto:rawreelsocial@gmail.com" class="cta-btn">Let's Get in Touch</a>
<!-- CTA Heading and Buttons -->
<h2 class="cta-heading">Let's Get In Touch</h2>
<div class="cta-buttons">
<!-- Phone Button: "tel:" link -->
<a href="tel:+17734401040" class="cta-btn call-btn">Call Me</a>
<!-- Email Button: "mailto:" link -->
<a href="mailto:rawreelsocial@gmail.com" class="cta-btn mail-btn">Email Me</a>
</div>
</div>
<script>
@ -236,7 +355,7 @@
const canvas = document.getElementById('starfield');
const ctx = canvas.getContext('2d');
let stars = [];
const STAR_COUNT = 120; // tweak for more or fewer stars
const STAR_COUNT = 120;
let w, h;
function initStarfield() {
@ -258,19 +377,17 @@
}
function update() {
// Clear to transparent so we see black + pink grid behind.
// Clear to transparent so the pink grid behind is visible
ctx.clearRect(0, 0, w, h);
// Move & redraw stars
for (let i = 0; i < STAR_COUNT; i++) {
const s = stars[i];
for (const s of stars) {
s.y += s.speed;
// If star goes off bottom, respawn at random top position
// If star goes off bottom, respawn at a random top position
if (s.y > h) {
s.y = 0;
s.x = Math.random() * w;
}
// Draw star
ctx.beginPath();
ctx.arc(s.x, s.y, s.size, 0, 2 * Math.PI);
ctx.fillStyle = "#fff";

BIN
logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 942 KiB