Scribd
Upload
11 views

Project Edits

The document defines CSS styles for a video element and slogan text on a homepage. The video is set to fixed positioning at the top left corner with 100vw width and 56.25vw height. The slogan text is centered over the video with fixed positioning, 50% top/left offsets, and transform translation for horizontal and vertical centering. It has higher z-index, white color, 50px font size, centered text alignment, and text shadow. The code sample then renders these elements in a React component with the video on loop and muted, and the slogan text over it.

Uploaded by

Rareș Adrian Butuc
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views

Project Edits

The document defines CSS styles for a video element and slogan text on a homepage. The video is set to fixed positioning at the top left corner with 100vw width and 56.25vw height. The slogan text is centered over the video with fixed positioning, 50% top/left offsets, and transform translation for horizontal and vertical centering. It has higher z-index, white color, 50px font size, centered text alignment, and text shadow. The code sample then renders these elements in a React component with the video on loop and muted, and the slogan text over it.

Uploaded by

Rareș Adrian Butuc
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

video {

position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 56.25vw;
min-height: 100%;
min-width: 177.78vh;
}

.slogan {
position: fixed;
top: 50%; /* Position it 50% from the top */
left: 50%; /* Position it 50% from the left */
transform: translate(-50%, -50%); /* Center it both horizontally and vertically
*/
z-index: 2; /* Place it above the video (z-index: 1) */
color: white; /* Set the text color */
font-size: 50px; /* Adjust the font size as needed */
text-align: center; /* Center-align the text */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add a shadow for readability
*/
font-family: Arial, sans-serif; /* Set the font to Arial */
}

import videoBg from "../video/-60.mp4";

export default function MainPage() {

return (
<div className="homePage">
<video src={videoBg} autoPlay loop muted/>
<h2 className="slogan">"Every Service at Your Fingertips."</h2>
</div>
)
}

import React from "react";


import logo_22 from '../photo/Logo_2-DDbiUA2vk-transformed.png';

const NavBar = () => {


return (
<nav className="navbar">
<div className="container">
<div className="left-nav">
<a href="/" className="logo">
<img src={logo_22} alt="Your logo" className="logo-img"/>
</a>
</div>
<ul className="nav-links right-links">
<li><button className="post-offer" > <a className="post-a" href="/post-
offer">Post Your Ads Now FOR FREE</a> </button></li>
<li><button className="no-background-button"><a href="/all-offer">View
All Ads</a></button> </li>
<li><button className="join-us" ><a href="/join-us"> Join
us</a></button></li>
<li><button className="no-background-button"><a
href="/login">Login</a></button></li>
<li><button className="no-background-button"><a
href="/contact">Contact</a></button></li>
</ul>
</div>
</nav>
);
};

export default NavBar;

import NavBar from "./components/NavBar";


import MainPage from "./pages/MainPage";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import "./App.css";

function App() {
// return (
// <>
// <NavBar/>
// <div className="App">
// <Routes>
// <Route path="/" element={<MainPage />} />
// {/* <Route path="/watchlist" element={<Watchlist />} />
// <Route path="/history" element={<History />} /> */}
// </Routes>
// </div>
// </>
// );
import NavBar from "./components/NavBar";
import MainPage from "./pages/MainPage";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import "./App.css";

function App() {
// return (
// <>
// <NavBar/>
// <div className="App">
// <Routes>
// <Route path="/" element={<MainPage />} />
// {/* <Route path="/watchlist" element={<Watchlist />} />
// <Route path="/history" element={<History />} /> */}
// </Routes>
// </div>
// </>
// );
return (
<div className="App">
<NavBar />

<Router>
<Routes>
<Route path="/" element={<MainPage />} />
</Routes>
</Router>
</div>
);
}

export default App;

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy