I have a very basic NextJS app that has a fullscreen video playing and some text overlaid on it.
Here is the index.js:
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import React, { useState, useRef } from "react";
import dynamic from "next/dynamic";
// https://docs.referlist.co/#/?id=install-in-react-or-nextjs-via-npm
export default function Home() {
const Referlist = dynamic(
() =>
import("referlist").then((referlist) =>
referlist.initialize({ domain: "tokenchamplaunch" })
),
{ ssr: false }
);
return (
<div className={styles.container}>
<Head>
<title>TokenChamp</title>
<meta name="description" content="Casual web3 games" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div className="bg-video-wrap">
<video autoPlay muted loop className={styles.video}>
<source src={`/CABINETS_BG.mp4`} type="video/mp4"/>
</video>
<div className="overlay">
</div>
<h1>Join the waitlist
</h1>
<div className="waitlist">
<Referlist />
<div>
<input type="text" id="referlistemail" />
<input className="waitlistbutton" type="button" id="referlistbutton" value="LFG" />
</div>
</div>
</div>
</div>
)
}
Here is the global.css:
html,
body {
background-image: url(/bg.png);
padding: 0;
margin: 0;
color: white;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
.bg-video-wrap {
position: relative;
overflow: hidden;
width: 100%;
height: 100vh;
background: url(https://designsupply-web.com/samplecontent/vender/codepen/20181014.png) no-repeat center center/cover;
}
video {
min-width: 100%;
min-height: 100vh;
z-index: 1;
}
.overlay {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
/* background-image: linear-gradient(45deg, rgba(0,0,0,.3) 50%, rgba(0,0,0,.7) 50%); */
background-size: 3px 3px;
z-index: 2;
}
h1 {
text-align: center;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: 3;
max-width: 400px;
width: 100%;
height: 50px;
}
.waitlistbutton {
background-color: gold;
padding: 1.3em 3em 1.3em 3em;
border-radius: 5px;
margin-left: 1em;
}
input[type=text] {
border: 2px solid white;
border-radius: 4px;
background-color: black;
color: white;
padding: 1em;
font-size: 1em;
}
input[type=text]:focus {
border: 2px solid white;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
width: 100%;
/* remove the above to offset the animation */
}
The waitlist input fields are not visible and I don't understand why. The h1 text is visible, but the waitlist/input fields are not.
When I have tried nesting the waitlist div in other places, it's always either stuck at the absolute top of the page or it completely disappears.
Related
const forms = document.querySelector(".forms"),
pwShowHide = document.querySelectorAll(".eye-icon"),
links = document.querySelectorAll(".link");
pwShowHide.forEach(eyeIcon => {eyeIcon.addEventListener("click",() =>
{let pwFields = eyeIcon.parentElement.parentElement.querySelectorAll(".password");
pwFields.forEach(password => {
if(password.type === "password"){
password.type = "text";
eyeIcon.classList.replace("bx-hide","bx-show");
return;
}
password.type = "password";
eyeIcon.classList.replace("bx-show","bx-hide");
})
})
})
/* Font */
#import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght#300;400;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Nunito Sans', sans-serif;
}
.container{
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.form{
position: absolute;
max-width: 430px;
width: 100%;
padding: 30px;
}
.form.signup{
opacity: 0;
pointer-events: none;
}
header{
font-size: 28px;
font-weight: 600;
color: rgb(0, 0, 0);
text-align: center;
}
form{
margin-top: 30px;
}
form a{
color:#2b2b2b;
text-decoration: none;
}
form a:hover{
text-decoration: underline;
}
form .field{
height: 50px;
width: 340px;
margin-top: 20px;
position: relative;
}
.field input,
.field button{
height: 100%;
width: 100%;
border: none;
font-size: 16px;
font-weight: 400;
}
.field button{
color: white;
background-color: black;
cursor: pointer;
}
.field input{
outline: none;
padding: 0 15px;
border: 1px solid #cacaca;
/* Added code */
padding:4px 70px 4px 10px;
box-sizing: border-box;
}
.eye-icon{
position: absolute;
font-size: 18px;
color: #8b8b8b;
top: 50%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
padding: 5px;
background-color: white;
}
.form-link{
text-align: center;
margin-top: 10px;
}
.form-link span,
.form-link a{
font-size: 14px;
font-weight: 400;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page Title -->
<title>Login - LNEM</title>
<!-- CSS -->
<link rel="stylesheet" href="css/style.css"/>
<!-- Icon CSS -->
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<section class="container forms">
<div class="form-content">
<header>Login</header>
<form action="#">
<div class="field input-field">
<!-- Email Address -->
<input type="text" class="login-input" name="email" placeholder="Email Address">
</div>
<div class="field input-field">
<input type="password" class="password" name="password" placeholder="Password">
<i class='bx bx-hide eye-icon'></i>
</div>
<div class="form-link">
Forgot Password?
</div>
<div class="field button-field">
<button>Sign In</button>
</div>
<div class="form-link">
<span>Don't have an account? Create Account</span>
</div>
</form>
</div>
</section>
<!-- Javascript -->
<script src="js/script.js"></script>
</body>
</html>
Im relatively new to CSS coding and whilst creating a login/register form for my coursework i noticed that within the password input field, the characters are appearing underneath the show/hide icon as shown below
is there any way to fix this?
I have visited a couple threads on this site and have found half the problem where padding was added, it has solved half the problem since it stops the vertical line ("|" <-- this thing) from going over the icon but once I show the password some characters still appear underneath the icon
So it seems to work for me when I change padding-right, but it's also possible that some css directives weren't applied because some html might have been missing.
/* Font */
#import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght#300;400;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Nunito Sans', sans-serif;
}
.field{
height: 50px;
width: 340px;
margin-top: 20px;
position: relative;
}
.field input,
.field button{
height: 100%;
width: 100%;
border: none;
font-size: 16px;
font-weight: 400;
}
.field button{
color: white;
background-color: black;
cursor: pointer;
}
.field input{
outline: none;
padding: 0 15px;
border: 1px solid #cacaca;
/* Added code */
padding:4px 40px 4px 10px;
box-sizing: border-box;
}
.eye-icon{
position: absolute;
font-size: 18px;
color: #8b8b8b;
top: 50%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
padding: 5px;
background-color: white;
}
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
<div class="field input-field">
<input type="password" class="password" name="password" placeholder="Password">
<i class='bx bx-hide eye-icon'></i>
</div>
I use https://boxicons.com/ to display the 3 icones. I share you here the code.
Except that, I would like to download the icons to keep them in a folder.
Here is the result with uploaded images:
The code is here
I have two problems:
The white color is gone and it is replaced with black.
There is a horizontal line below the image that has disappeared
Do you know how I could get the same result as in the first illustration?
I just changed this
<span class="form__login-text">Our partners</span>
<i class='bx bx-book-content'></i>
<i class='bx bx-building-house'></i>
<i class='bx bx-wallet-alt'></i>
In this
<span class="form__login-text">Our partners</span>
<img src="https://zupimages.net/up/22/33/qad0.png" alt="image">
<img src="https://zupimages.net/up/22/33/8mhc.png" alt="image">
<img src="https://zupimages.net/up/22/33/qq74.png" alt="image">
Thanks
body {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
}
.l-form {
position: relative;
height: 100vh;
overflow: hidden;
}
.shape1,
.shape2 {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
}
.shape1 {
top: -7rem;
left: -3.5rem;
background: linear-gradient(180deg, #239CD3 0%, rgba(196, 196, 196, 0) 100%);
}
.shape2 {
bottom: -6rem;
right: -5.5rem;
background: linear-gradient(180deg, #239CD3 0%, rgba(196, 196, 196, 0) 100%);
transform: rotate(180deg);
}
.form {
height: 100vh;
display: grid;
justify-content: center;
align-items: center;
padding: 0 1rem;
}
.form__content {
width: 290px;
}
.form__img {
display: none;
}
.form__title {
font-size: 2rem;
font-weight: 500;
margin-bottom: 2rem;
color: #239CD3;
}
.form__div {
position: relative;
display: grid;
grid-template-columns: 7% 93%;
margin-bottom: 1rem;
padding: 0.25rem 0;
border-bottom: 1px solid #8590AD;
}
.form__div.focus {
border-bottom: 1px solid #8590AD;
}
.form__div.focus .form__icon {
color: red;
}
.form__div.focus .form__label {
top: -1.5rem;
font-size: 0.875rem;
color: red;
}
.form__div-one {
margin-bottom: 3rem;
}
.form__icon {
font-size: 1.5rem;
color: #8590AD;
transition: 0.3s;
}
.form__label {
display: block;
position: absolute;
left: 0.75rem;
top: 0.25rem;
font-size: 0.938rem;
transition: 0.3s;
}
.form__div-input {
position: relative;
}
.form__input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
background: none;
padding: 0.5rem 0.75rem;
font-size: 1.2rem;
color: #8590AD;
transition: 0.3s;
}
.form__button {
width: 100%;
padding: 1rem;
font-size: 0.938rem;
outline: none;
border: none;
margin-bottom: 3rem;
background-color: #239CD3;
color: #fff;
border-radius: 0.5rem;
cursor: pointer;
transition: 0.3s;
}
.form__button:hover {
box-shadow: 0px 15px 36px rgba(0, 0, 0, 0.15);
}
.form__login {
text-align: center;
}
.form__login-text {
display: block;
font-size: 0.938rem;
margin-bottom: 1rem;
color: #239CD3;
}
.form__login-icon {
display: inline-flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
margin-right: 1rem;
padding: 0.5rem;
background-color: #8590AD;
color: #fff;
font-size: 1.25rem;
border-radius: 50%;
}
.form__login-icon:hover {
background-color: #239CD3;
}
/*===== MEDIA QUERIS =====*/
#media screen and (min-width: 968px) {
.shape1 {
width: 400px;
height: 400px;
top: -11rem;
left: -6.5rem;
}
.shape2 {
width: 300px;
height: 300px;
right: -6.5rem;
}
.form {
grid-template-columns: 1.5fr 1fr;
padding: 0 2rem;
}
.form__content {
width: 320px;
}
.form__img {
display: block;
width: 700px;
justify-self: center;
}
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css" rel="stylesheet" />
<link href='https://cdn.jsdelivr.net/npm/boxicons#2.0.5/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="l-form">
<div class="shape1"></div>
<div class="shape2"></div>
<div class="form">
<img src="https://zupimages.net/up/22/33/al0n.png" alt="image" class="form__img" style="width: 70%">
<form class="form__content">
<h1 class="form__title">Login</h1>
<div class="form__div form__div-one">
<div class="form__icon">
<i class='bx bx-user-circle'></i>
</div>
<div class="form__div-input">
<label for="user" class="form__label"></label>
<input type="text" class="form__input" name="user" [(ngModel)]="loginForm.user" placeholder='Username'>
</div>
</div>
<input type="submit" class="form__button" value='Login'>
<div class="form__login">
<span class="form__login-text">Our partners</span>
<!--
<i class='bx bx-book-content'></i>
<i class='bx bx-building-house'></i>
<i class='bx bx-wallet-alt'></i>
-->
<img src="https://zupimages.net/up/22/33/qad0.png" alt="image">
<img src="https://zupimages.net/up/22/33/8mhc.png" alt="image">
<img src="https://zupimages.net/up/22/33/qq74.png" alt="image">
</div>
</form>
</div>
</div>
</body>
</html>
It seems the image you are using has black foreground. You can use .form__login-icon img { filter: invert(1); } to make the foreground white. For the horizontal line use box-shadow: 0 2px #000;. Otherwise use an SVG image and apply the fill color of your choice.
the problem is with the images. those images have black background though they are in PNG format.
You can use online tools, Adobe illustrator or photoshop to remove the background from those images. Or you can use images in SVG format
I'm struggling to get my logo to sit top middle of the page and to be responsive. I currently have it in a container div where it sits next to two other divs navOne and navTwo. Although I want it to be more independent and responsive at the top middle of the page.
This is my component:
import React from "react";
// import landingVideo from "../assets/landing.mp4";
// import landingVideo2 from "../assets/landing.mp4";
import landingVideo3 from "../assets/landing3.mp4";
import ellena from "../assets/ellena.png";
import "./landing.css";
function Landing() {
return (
<div className="main">
<div className="heading">{/* <img src={ellena} alt="" /> */}</div>
<div className="overlay"></div>
<video src={landingVideo3} autoPlay loop muted />
<div className="container">
<div className="title">
<img className="logo" src={ellena} alt="" />
</div>
<div className="navOne">
<h1>Commercial</h1>
</div>
<div className="navTwo">
<h1>Weddings</h1>
</div>
</div>
</div>
);
}
export default Landing;
And my css:
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
height: 100vh;
position: relative;
}
video {
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
z-index: -1;
}
.title {
display: block;
}
.logo {
max-width: 40%;
max-height: 40%;
}
.container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: aliceblue;
justify-content: space-around;
padding: 5px;
}
.navOne {
border: 1px white solid;
padding-top: 1em;
padding-right: 1.44em;
padding-right: calc(1.44em - 0.2em);
padding-bottom: 1em;
padding-left: 1.44em;
text-align: center;
font-family: futura-pt;
font-weight: 500;
font-style: normal;
font-size: 14px;
letter-spacing: 0.2em;
font-family: "Inria Serif", serif;
}
.navTwo {
border: 1px white solid;
padding-top: 1em;
padding-right: 1.44em;
padding-right: calc(1.44em - 0.2em);
padding-bottom: 1em;
padding-left: 1.44em;
text-align: center;
font-family: futura-pt;
font-weight: 500;
font-style: normal;
font-size: 14px;
letter-spacing: 0.2em;
font-family: "Inria Serif", serif;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background-color: rgba(252, 226, 160, 0.2); */
}
Should I remove the logo from the container div?
Any help would be appreciated.
I'm having an issue getting my nav bar to pass over the content of my hero and title text. The background image will pass beneath my nav bar as desired, along with any further text that I add. But the title text and button pass over the bar. I think it has something to do either with their positions (absolute), or their z-indeces. I've tried manipulating these, but to undesirable effect. Changing the h1's position to fixed or relative completely distorts its placement. The nav bar should remain fixed at the top and everything should pass beneath it. Can anyone help me with this?
Here is my code:
navbar.js:
import { useState } from "react";
import styles from "../component-css/navbar.module.css";
import { GiHamburgerMenu } from "react-icons/gi";
const NavBar = (props) => {
return (
<div className={styles.canvas}>
<div className={styles.container}>
<div className={styles.buttonContainer}>
<a className={styles.navButton} href="#">
Home
</a>
</div>
<div className={styles.buttonContainer}>
<a className={styles.navButton} href="#">
About
</a>
</div>
<div className={styles.buttonContainer}>
<a className={styles.navButton} href="#">
Contact
</a>
</div>
<div>
<div className={styles.void} />
</div>
<div className={`${styles.buttonContainer} ${styles.menu}`}>
<span className={styles.navButton}>
<GiHamburgerMenu />
</span>
</div>
</div>
{
props.logo
? <img className={styles.logoSticky} src="/MegaManLogo.png" alt="Mega Man Logo" />
: null
}
</div>
);
};
export default NavBar;
navbar.module.css:
.canvas {
position: absolute;
}
.container {
display: grid;
width: 100%;
position: fixed;
top: 0;
grid-template-columns: repeat(3, .2fr) 1.3fr .25fr;
grid-template-rows: .08fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
height: 25px;
background: rgb(14, 14, 175);
/* box-shadow: 0px 2px 0px rgba(94, 94, 94, 0.5); */
overflow: hidden;
}
.buttonContainer {
background: transparent;
height: inherit;
width: 100%;
text-align: center;
overflow: hidden;
transition-duration: 0.5s;
}
.buttonContainer:hover {
background:rgb(109, 109, 216);
}
.navButton {
background: transparent;
color: white;
text-decoration: none;
transition-duration: .5s;
line-height: 1.5rem;
font-family: sans-serif;
font-size: .7rem;
margin-top: 50%;
}
.menu {
font-size: 1rem;
line-height: 1.7;
transform: translateX(20px);
}
.menu:hover {
background: transparent;
}
.logoSticky {
margin-left: 44vw;
margin-top: -100vh;
position: sticky;
width: 10vw;
height: auto;
z-index: 30;
transform: translateY(23px);
}
hero.js:
import { useState, useEffect } from 'react';
import styles from "../component-css/hero.module.css"
import { GiHamburgerMenu } from 'react-icons/gi'
const Hero = () => {
const [scrollPosition, setScrollPosition] = useState(0);
const handleScroll = () => {
const position = window.pageYOffset;
setScrollPosition(position);
};
useEffect(() => {
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
return (
<div className={styles.parent}>
<div className={styles.heroBox} />
<div className={styles.blackOverlay} />
<img className={scrollPosition < 63 ? styles.logo : styles.logoSticky}
src="/MegaManLogo.png"
alt="Mega Man Logo"
/>
<div className={styles.headerBox}>
<h1 className={styles.h1}>
A Brief History of the <span className={styles.blueBomber}> Blue Bomber</span>
</h1>
</div>
<button
className={styles.gamesButton}
>
See the Games
</button>
</div>
)
}
export default Hero
hero.module.css:
.parent {
position: relative;
}
.blackOverlay {
box-sizing: border-box;
height: 100vh;
width: 100vw;
margin: 0;
margin-top: -100vh;
padding: 0;
background: rgba(0, 0, 0, 0.705);
max-width: 100%;
overflow: hidden;
z-index: 10;
}
.heroBox {
box-sizing: border-box;
overflow-y: hidden;
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
background-image: url("../images/hero-background.jpg");
background-size: 100vw auto;
background-repeat: no-repeat;
max-width: 100%;
overflow: hidden;
z-index: 1;
}
.logo {
position: absolute;
width: 40vw;
height: auto;
margin-left: 30vw;
margin-top: -85vh;
z-index: 30;
transition-duration: 0.5s;
}
.logoSticky {
margin-left: 44vw;
margin-top: -100vh;
position: fixed;
width: 10vw;
height: auto;
z-index: 30;
transition-duration: 0.5s;
}
.headerBox {
position: absolute;
margin: 0px;
margin-top: 8vh;
margin-left: 30vw;
margin-bottom: 0px;
padding-bottom: 5px;
top: 45vh;
border-bottom: 2px solid rgb(122, 112, 255);
z-index: 20;
}
.h1 {
color: white;
font-family: Arial Narrow, sans-serif;
font-weight: 100;
font-size: 1.7em;
}
.blueBomber {
color: rgb(122, 112, 255);
font-family: Arial Narrow, sans-serif;
font-weight: 400;
float: right;
margin-left: 6px;
}
.gamesButton {
position: absolute;
top: 67vh;
left: 43.5vw;
padding: 7px;
font-family: Arial Narrow, sans-serif;
font-weight: 100;
font-size: 16px;
color: rgb(122, 112, 255);
background: transparent;
border: 2px solid rgb(122, 112, 255);
border-radius: 200px;
cursor: pointer;
transition-duration: 0.3s;
z-index: 20;
}
.gamesButton:hover {
background: rgb(122, 112, 255);
border: 3px solid rgb(122, 112, 255);
color: white;
}
.listItem {
display: inline-block;
margin-top: 5px;
font-size: 14px;
border-bottom: 2px solid transparent;
transition-duration: 0.5s;
text-align: center;
}
.listItem:hover {
color:rgb(122, 112, 255);
border-bottom: 2px solid rgb(122, 112, 255);
}
App.js:
import './App.css';
import Hero from './components/hero.js'
import NavBar from './components/navbar.js'
import styles from './component-css/App.module.css'
function App() {
return (
<div className="App">
<div className={styles.nav}><NavBar logo={false} /></div>
<div className={styles.body}><Hero /></div>
<div style={{height: "100vh"}} />
</div>
);
}
export default App;
App.module.css:
.nav {
position: absolute;
width: 100%;
z-index: 10;
}
.body {
z-index: 1;
}
I'm very new at CSS so please be patient with me. I am trying to set a video background for a section with a semi transparent text box over the video. After wrestling with it for a while, I finally got the video fitted to the screen and resizing when the screen shrinks.
The problem is, now the section containing the text doesn't resize when the screen becomes narrower. Instead, the text disappears under the next div down.
I presumed this is because the aspect ratio of the video can't be modified. The best solution I could come up with is to set a media query to replace the video with a static background when the screen is under 700 pixels wide. I was hoping that the normal properties of auto;" would then kick in and accommodate the additional length of the text. However, the video doesn't respond to the "display: none;" tag when placed in a media query.
I'm kind of stuck as to what to do.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, `enter code
here`initial-scale=1.0">
<title>Jamaa</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<ul class="navbar">
<li><p href="#home" style="margin-left: 20px;">JAMAA</p></li>
<li style="float:right">Contact</li>
<li style="float:right">News</li>
<li style="float:right"><a class="left" href="#about">Blog</a></li>
</ul>
<section class="intro">
<div class="content">
<img src="images/jamaalogo.png"
style="height:300px; margin-top: 5%; align-content: center; "
class="center">
<h1 class="motto">Share. Profit.</h1>
<h2 style="text-align: center;">Using finance to increase cryptocurrency
access for those who need it most.</h2>
</div>
</section>
<div class="video_wrapper">
<video preload="auto" autoplay="true" loop="loop" muted="muted"
volume="0" poster="images/relief.jpg" style="height:auto; ">
<source src="images/fountain.mp4" type="video/mp4">
<div class="problem_box"><h2>We Have a Problem</h2><p>People are
losing their savings. Governments are collapsing. The threat of war is
looming on the horizon. All of these problems have a common source- bad
money. And yet most of us don't know what we can do about it.</p></div>
</video>
Here is the CSS:
#font-face {
font-family: 'textabold';
src: url('fonts/texta-bold-webfont.woff2') format('woff2'),
url('fonts/texta-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono"
rel="stylesheet">
* {
box-sizing: border-box;
}
body {
margin: 0;
font-weight: 500;
font-family: 'Roboto Mono', monospace;
overflow-x: hidden;
}
h2 {
font-size: 2em;
display: block;
color: white;
font-weight: 300;
}
h1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
p {
font-size: 1 em;
font-weight: 500;
color: white;
}
a {
font-weight: 700;
color: #333;
&:hover{
opacity: 0.8;
}
&:active {
top: 1px;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.container {
display: flex;
color: white;
justify-content: space-between;
align-items: center;
padding: 2px 44px;
}
.navbar {
position: fix
}
#media screen and (max-width : 760px){
ul {
display: none;
}
.intro { background: red;}
.video_wrapper {
height:auto;
background: url("images/relief.jpg") no-repeat center center;
background-size: cover;
}
.video {
display: none;
}
}
.title {
display: block;
color: white;
align-items: center;
padding: 12px 44px;
font-size:;
}
li a:hover {
background-color: #4CAF50;
}
.intro {
height: 92vh;
background-color: #4CAF50;
display: block;
overflow: hidden;
}
.problem {
max-height: 60vh;
background-size: cover;
opacity: 0.8;
z-index: -100;
}
.problem_box {
height:70%;
z-index: 2;
}
.video_wrapper{
width: auto;
position: relative;
overflow: hidden;
z-index: -1;
margin-bottom: -30px;
text-align: center;
}
.video_wrapper video{
position: relative;
top: 0;
left: 0;
width: 100%;
height: auto;
z-index: 1;
height: auto;
overflow: auto;
}
.video_wrapper .problem_box {
height: auto;
width: 70%;
position: absolute;
z-index: 2;
top: 0px;
left: 0px;
background: #333;
opacity: 0.9;
display: inline-block;
margin-top: 8%;
margin-left: 15%;
box-sizing: content-box;
}
I suppose I could just give up and use static background, but it took me so long to figure out the video background I'd hate to throw it away it this point... any help is much appreciated!
you forgot to put the video class on the video tag
<video preload="auto" autoplay="true" loop="loop" muted="muted"
volume="0" poster="images/relief.jpg" style="height:auto; " class="video">