I have applied the css to the video but the video won't appear. Any help? I have received a cSpell error, I'm not sure if this affects the video showing up?
import React from 'react'
import './HeroStyles.css'
import Video from '../../../assets/rnbbackground.mp4'
function Hero() {
return (
<div className='hero'>
<video autoPlay loop muted id='video'>
<source src={Video} type='video/mp4' />
</video>
</div>
)
}
export default Hero
css:
.hero{
width: 100%;
height: 100vh;
color: #fff;
position: relative;
}
Here's my css code:
.wrapper{
background-image: url(../src/img/wallhaven-6qj55q.jpg);
}
.container{
margin: auto;
width: 50%;
padding: 10px;
margin-top: 25vh;
}
and here's my js code:
import './App.css';
import FormBox from './component/FormBox';
function App() {
return (
<div className="wrapper">
<div className="container">
<FormBox />
</div>
</div>
);
}
export default App;
I'm trying to cover the whole background up but it's only doing partical. What is my issue here?
Try min-height 100vh for your wrapper
.wrapper{
background-image: url(../src/img/wallhaven-6qj55q.jpg);
min-height: 100vh;
}
If someone can let me know if I'm using an improper format in order to load an image on react that would be amazing! I'm not an expert and any advice is greatly appreciated -- thank you in advance. The image that populates when I run the code just shows a broken img icon and when I try to run through the terminal it says that the image is called but not loaded.
import React, { Component } from "react";
import PropTypes from "prop-types";
import Logo from "/Users/mauromartineziii/aqua-financial/src/logo.png";
import "./App.css";
import Photo from "/Users/mauromartineziii/aqua-financial/src/pexels-photo-3560168.jpeg";
class App extends Component {
render() {
return (
<div>
<section>
<header>
<img
src="/Users/mauromartineziii/aqua-financial/src/logo.png"
width="333"
alt="Aqua Financial"
/>
<div>
<ul>
<li>Financial Services</li>
<li>Liquid Capital Asset</li>
<li>Retirement</li>
</ul>
</div>
</header>
</section>
<section id="main">
<img src="Photo"></img>
<div className="main-text">
<span>Learn What An LCA™ Can </span> <br /> Do For You <br />
</div>
<div className="right-text">
<span>Innovation Driven Banking</span>
</div>
<div>
{" "}
<button>Learn More</button>
</div>
</section>
</div>
);
}
}
export default App;
body {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
section {
margin: 0 120px;
}
header {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 50px;
}
header div {
margin-left: auto;
font-size: 20px;
}
header ul li {
display: inline-block;
margin: 0 20px;
}
#main {
margin: 0 120px;
margin-top: 200px;
display: grid;
grid-template-columns: 1fr 1fr;
}
#main .main-text {
font-size: 45px;
font-weight: 700;
line-height: 1.5;
}
`
It's a good idea to place the images you use in your project in the project directory and import them with a relative path, e.g:
import Logo from "./logo.png";
You also want to use the the resulting variables for your img tags.
<img
src={Logo}
width="333"
alt="Aqua Financial"
/>
// ...
<img src={Photo} />
At first look at my codes:
JSX:
import React from "react";
import "./styles.scss";
export default function App() {
return (
<div className="App">
<h1> This is a Portfolio Item </h1>
<div className="item-container">
<div className="img-container">
<img
src="https://tf-react-chester.now.sh/images/portfolio-image-5.jpg"
alt="Portfolio 1"
/>
</div>
<h3>This is the Title of Item </h3>
<h4>
This is the description of Item. This is the description of Item.{" "}
</h4>
</div>
</div>
);
}
And CSS(SASS):
.App {
.item-container {
width: 100%;
height:auto;
.img-container {
position: relative;
$margin: 20px;
&::before{
position: absolute;
content: '';
**width: calc(100%-20px);
height: calc(100%-20px);** /* These two line don't work. */
left: 10px;
top: 10px;
background-color: #fff;
transition: all 0.5s ease-in-out;
transform: scaleX(0);
transform-origin: 0;
}
&:hover {
transform: scaleX(1);
}
img{
max-width: 100%;
}
}
}
}
I am trying to create a ::before animated content over the image. But when I am using calc() method it doesn't work at all.
What's the reason?
Note: I have tried some solution to the same problem from StackOverflow but those don't work for me.
This is the codesandbox link:CodeSandBox
Try with spaces ;)
width: calc(100% - 20px);
height: calc(100% - 20px);
I am trying to make use of react-modal for the first time. When I click on the sign-in button, the react-modal component is invoke but seems to be hiding behind the cover page which is a video landing page.
The React devtool displays the appropriate states before the sign-in button is clicked
before the sign-in button is clicked
When the sign-in button is now clicked, the react devtool now displays that the ModalPortal component is rendered showing the appropriate states
when the sign-in button is clicked
SignInModal.scss
.ReactModalPortal>div {
opacity: 0;
}
.ReactModalPortal .ReactModal__Overlay {
align-items: center;
display: flex;
justify-content: center;
transition: opacity 200ms ease-in-out;
}
.ReactModalPortal .ReactModal__Overlay--after-open {
opacity: 1;
}
.ReactModalPortal .ReactModal__Overlay--before-close {
opacity: 0;
}
.modal {
position: relative;
background: #464b5e;
color: white;
max-width: 90rem;
outline: none;
padding: 3.2rem;
text-align: center;
}
.modal__title {
margin: 0 0 1.6rem 0;
}
.modal__body {
font-size: 2rem;
font-weight: 300;
margin: 0 0 3.2rem 0;
word-break: break-all;
}
CoverPage.js Component
import Header from './Header';
import HeaderVideo from './HeaderVideo';
import SignInModal from './SignInModal';
import React, { Component } from 'react';
class CoverPage extends Component {
state = {
modalIsOpen: false
};
onOpenModal = () => {
this.setState(() => ({
modalIsOpen: true
}));
};
onCloseModal = () => {
this.setState(() => ({
modalIsOpen: false
}));
};
render() {
return (
<div>
<Header />
<HeaderVideo onOpenModal={this.onOpenModal} />
<SignInModal
modalIsOpen={this.state.modalIsOpen}
onOpenModal={this.onOpenModal}
onCloseModal={this.onCloseModal}
/>
</div>
);
}
}
export default CoverPage;
HeaderVideo.js Component
import React from 'react';
import Signup from './Signup';
import CoverInfo from './CoverInfo';
const HeaderVideo = props => {
return (
<div className="video-container">
<video preload="true" autoPlay loop volume="0" postoer="/images/1.jpg">
<source src="images/vine.mp4" type="video/mp4" />
<source src="images/vine1.webm" type="video/webm" />
</video>
<div className="video-content">
<div className="container content">
<div className="row">
<div className="col-md-9">
<CoverInfo onOpenModal={props.onOpenModal} />
</div>
<div className="col-md-3">
<Signup />
</div>
</div>
</div>
</div>
</div>
);
};
export default HeaderVideo;
CoverInfo.js Component
import React from 'react';
const CoverInfo = props => {
return (
<div className="info">
<div>
<h1>Welcome to EventCity!</h1>
</div>
<div>
<p>
At EventCity! we pride ourselves on the unrivalled personal {`event`} services,we provide
to our clientele. We guide you from the stressful decision making {`process`},ensuring you
are comfortable,whether it is a wedding, corporate {`function `}or even a kiddies party,we
create a buzz around you, taking you to the next level.
</p>
</div>
<div>
<h3>Innovation, {`Performance`} and Delivery</h3>
</div>
<button type="button" className="btn btn-success btn-lg" onClick={props.onOpenModal}>
Sign In here
</button>
</div>
);
};
export default CoverInfo;
video-cover.scss
video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 1;
}
.video-content {
z-index: 2;
position: absolute;
background: rgba(0, 0, 0, 0.6);
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.content {
padding-top: 120px;
}
You need to set the z-index property on the Modal's overlay, which normally has a z-index of 0. The CSS class is .ReactModal__Overlay
Here is the pure-React way of doing it:
const customStyles = {
content : {
...
},
overlay: {zIndex: 1000}
};
<Modal style={customStyles}>
...
</Modal>
.modal {
position: fixed;
z-index:9999;
top :0;
left:0;
right:0;
bottom:0;
background: #464b5e;
color: white;
outline: none;
padding: 3.2rem;
text-align: center;
}
Example of react-modal inline styles Set the styles in the react-modal inline styles. The z-index to 100 but make just like below
style={{
overlay: {
zIndex: 100,
backgroundColor: 'rgba(70, 70, 70, 0.5)',
},