I started by creating a dynamic full-width border gradient. Now, I'm trying to replicate the layout with two large containers side by side, just like in Adobe XD. However, I'm facing an issue with increasing the width of the containers.
Here are some screenshots for reference:
Appreciate any help in advance.
Below is the code snippet:
Home.jsx
import React from 'react';
import './Home.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div className='fullwidth__gradient animated'>
<div className='row'>
<div className='col'>
<div className='leftside__container'>TEST</div>
</div>
<div className='col'>
<div className='rightside__container'>TEST</div>
</div>
</div>
</div>
);
}
export default App;
Home.css
.fullwidth__gradient {
height: 100vh;
width: 100%;
border: 10px solid transparent;
text-transform: uppercase;
font-family: 'Open Sans', 'Source Sans Pro', Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.animated {
background-image: linear-gradient(rgb(26, 25, 29), rgb(26, 25, 29)),
linear-gradient(
180deg,
rgb(12, 154, 236),
rgb(77, 0, 128) 50%,
rgb(241, 171, 19)
);
background-repeat: no-repeat;
background-size: 100% 100%, 100% 200%;
background-position: 0 0, 0 100%;
background-origin: padding-box, border-box;
animation: highlight 2s infinite alternate;
}
@keyframes highlight {
100% {
background-position: 0 0, 0 0;
}
}
.leftside__container, .rightside__container {
height: 85vh;
width: 100%;
}
.leftside__container {
background-color: rosybrown;
}
.rightside__container {
background-color: royalblue;
}
.fullwidth__gradient {
height: 100vh;
width: 100%;
border: 10px solid transparent;
text-transform: uppercase;
font-family: 'Open Sans', 'Source Sans Pro', Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.animated {
background-image: linear-gradient(rgb(26, 25, 29), rgb(26, 25, 29)),
linear-gradient(
180deg,
rgb(12, 154, 236),
rgb(77, 0, 128) 50%,
rgb(241, 171, 19)
);
background-repeat: no-repeat;
background-size: 100% 100%, 100% 200%;
background-position: 0 0, 0 100%;
background-origin: padding-box, border-box;
animation: highlight 2s infinite alternate;
}
@keyframes highlight {
100% {
background-position: 0 0, 0 0;
}
}
.leftside__container, .rightside__container {
height: 85vh;
width: 100%;
}
.leftside__container {
background-color: rosybrown;
}
.rightside__container {
background-color: royalblue;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="adcfc2c2d9ded9dfccdded998398839e">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="fullwidth__gradient animated">
<div class="row">
<div class="col">
<div class="leftside__container">TEST</div>
</div>
<div class="col">
<div class="rightside__container">TEST</div>
</div>
</div>
</div>