This is the style I require to code.
Style
I have actually done a reasonable little bit currently. However I am battling in the orange box component. Exactly how do I make it and also Exactly how the shade of the picture is likewise orangish where the rectangular shape passes.And exactly how do I make every one of these receptive.
My Job up until now
This is my code
import React from 'respond';.
import './ hero.css';.
import Topbar from './ Topbar/Topbar';.
import Navbar from './ Navbar/Navbar';.
import celebrity from '././ assets/star. svg';.
const Hero = () => > {
return (.
<< div className=" hero">
<> < Topbar/>>.
<< Navbar/>>.
<< div className=" hero-main">
<> < div className=" hero-main-background"><> < div className=" hero-intro">
<> < h1>>.
Fresh << period>> 2022< < period>> Appearance<.
<.
<.
<< img src= {celebrity} alt="" className=" celebrity"/>>.
<.
<.
);.
};.
export default Hero;.
hero {
elevation: 100vh;.
background-color: var(-- grayscale);.
shade: #fff;.
overflow: concealed;.
}
. hero-main {
size: 90%;.
margin: 0 car;.
screen: flex;.
flex-wrap: cover;.
setting: family member;.
}
. hero-main-background {
setting: outright;.
history: link('././ assets/human. svg');.
background-repeat: no-repeat;.
background-size: consist of;.
background-position: leading 0 ideal 10%;.
setting: outright;.
top: 0;.
right: 0;.
base: 0;.
left: 0;.
z-index: 1;.
}
. celebrity {
setting: outright;.
right: 0;.
base: 140px;.
}
. hero-intro h1 {
font-size: var(-- heading-one);.
font-family: syne;.
}
. hero-intro h1 period {
screen: block;.
}
. hero-intro h1 period: first-child {
- webkit-text-fill-color: clear;.
- webkit-text-stroke-width: 1px;.
- webkit-text-stroke-color: white;.
margin-left: 30rem;.
}
I attempted doing z-index and also all however I have no concept exactly how the orange box point can be done
