When adjusting the window size, all elements in the center become cramped and unresponsive. Even the navigation items in the header do not resize properly.
Here is my Triangle.js file:
import React from 'react'
import { motion } from 'framer-motion'
import './styles/triangle.css'
const Triangle = () => {
const transition = { duration: 8, ease: "easeInOut"}
return (
<>
<div className='parent'>
<div className='svgPath'>
<svg xmlns="http://www.w3.org/2000/svg" width="900" height="685" viewBox="0 0 1600 800" fill="none">
<motion.line y1="234.5" x2="1600" y2="234.5"
fill='transparent'
stroke='white'
strokeWidth={2}
strokeLinecap
initial={{ pathLength: 0 }}
animate={{ pathLength: 1 }}
transition={transition} />
<motion.path d="M626.64 7.19272L1059.32 500.806C1063.57 505.654 1060.13 513.25 1053.68 513.25H188.318C181.871
513.25 178.428 505.654 182.678 500.806L615.36 7.19271C618.348 3.78441 623.652 3.78441 626.64 7.19272Z"
fill='transparent'
stroke='white'
strokeWidth={2}
strokeLinecap
initial={{ pathLength: 0 }}
animate={{ pathLength: 1 }}
transition={transition}/>
</svg>
</div>
<motion.div
className='text1'
>
EVERY PRODUCT AND SERVICE CREATED TO BE SOMETHING LARGER THAN ALL OF US.
</motion.div>
<div className='text2'>
We have a very unique model. While we aspire to be achieving players in the markets,
we also invite investors and partners to grow our brands together and make a difference as one.
</div>
<div className='text3'>
12
</div>
<div className='text4'>
Projects and more upcoming.....
</div>
</div>
</>
)
}
export default Triangle
And here's my triangle.css file:
@font-face {
font-family: Coda;
src: url(../../../public/fonts/Coda/Coda-Regular.ttf) format('trueType');
}
.parent{
padding-left: 200px;
position: relative;
}
.svgPath{
position: absolute;
z-index: 1;
}
.text1{
font-family: Coda;
color: whitesmoke;
font-size: xx-small;
opacity: 0.7;
font-size: medium;
letter-spacing: 0.05em;
position: absolute;
z-index: 2;
margin-top: 225px;
}
.text2{
font-family: Coda;
color: whitesmoke;
font-size: medium;
width: 460px;
word-wrap: normal;
position: absolute;
z-index: 3;
margin-top: 300px;
margin-left: 500px;
}
.text3{
font-family: Monument Extended;
color: black;
font-size: 6rem;
background-color: transparent;
text-shadow: -2px -2px 0 white,
2px -2px 0 white,
-2px 2px 0 white,
2px 2px 0 white,
-3px -3px 0 white,
3px -3px 0 white,
-3px 3px 0 white,
3px 3px 0 white;
position: absolute;
z-index: 4;
margin-left: 24%;
margin-top: 6%;
}
.text4 {
font-family: Coda;
color: whitesmoke;
font-size: medium;
word-wrap: normal;
background-color: transparent;
position: absolute;
z-index: 5;
margin-top: 10.5%;
margin-left: 35%;
}