Just starting out with html/css as a freshman and facing some challenges in my studies.
I'm trying to link my React file to my css file, but I'm struggling to figure it out despite researching all possible methods.
(1) React file
import styled, { keyframes } from "styled-components";
const Flow = () => {
return (
<Container>
<FlowBox>
<FlowWrap>
<Flow>
<span>King of pirates</span>
<span>King of pirates</span>
<span>King of pirates</span>
<span>King of pirates</span>
</Flow>
</FlowWrap>
</FlowBox>
</Container>
)
}
export default AboutFlow;
const Container = styled.div`
margin:100px 0 0 0;
border-top:1px solid #000;
border-bottom: 1px solid #000;
`
const flowing = keyframes`
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-50%, 0, 0);
}
`
const FlowBox = styled.div`
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
`
const FlowWrap = styled.div`
display: flex;
top: 0;
left: 0;
align-items: center;
width: 100%;
height: 100%;
white-space: nowrap;
`
const Flow = styled.div`
font-size: clamp(15px, 10vw, 8rem);
animation: ${flowing} 8s linear infinite;
span{
display:inline-block;
font-weight:600;
padding:0 20px;
}
(2) My CSS file
@import "./react.css";
.title{
background-image: url(../src/img/upper_blackbar_edit.png);
min-width: 1000px;
background-size:100% 50px;
}
.bg{
width:100%;
min-width: 1000px;
}
.logo{
height:50px;
vertical-align: top;
}
.map{
min-width: 100%;
width: 80%;
object-fit: cover;
display: block;
top:10%;
margin:auto;
}
.body{
min-width: 1000px;
background-image: url(../src/img/background.png);
background-size:cover;
overflow: scroll;
}
Seeking help to properly link my css file with the React file. Any concrete suggestions would be greatly appreciated.
Looking for detailed steps on how to achieve this goal.