Scribd
Upload
3 views

WOrkscomponentcoding

The document contains a React component named 'Works' that displays recent works using a grid layout. It imports images and styles, and defines a data array 'WorksData' with information about a contract management tool called 'ContractAwsome'. The component maps through the data to render each work's image, title, and description in a styled format.

Uploaded by

kashif m
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views

WOrkscomponentcoding

The document contains a React component named 'Works' that displays recent works using a grid layout. It imports images and styles, and defines a data array 'WorksData' with information about a contract management tool called 'ContractAwsome'. The component maps through the data to render each work's image, title, and description in a styled format.

Uploaded by

kashif m
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

import React from 'react'

import Image10 from '../../assets/Images/10.jpg'


import Image11 from '../../assets/Images/11.jpg'
import Image12 from '../../assets/Images/12.jpg'
import './Works.css'

const WorksData =[
{
img:Image10,
title:"ContractAwsome - Contract Management Tool (SaaS)",
para:"Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam iste
voluptatum quibusdam molestias optio minus tempore ",

},
{
img:Image11,
title:"ContractAwsome - Contract Management Tool (SaaS)",
para:"ContractAwesome provided a robust set of features designed to streamline
and secure the contract lifecycle..",

},
{
img:Image12,
title:"ContractAwsome - Contract Management Tool (SaaS)",
para:"ContractAwesome provided a robust set of features designed to
streamline and secure the contract lifecycle..",

}
]

const Works = () => {

return (
<>
<section className='Works'>
<div className="heading">
<h1 >Recent Works</h1>
</div>

<div className="Workslist">
{
WorksData.map((item1)=>(

<div className="item1">
<img src={item1.src} alt="" />
<h2>{item1.title}</h2>
<p>{item1.para}</p>
</div>

))
}
</div>
</section>

</>)

export default Works

-----------------------------------------------------------------------------------
------------------

.Works{
width: 100%;
height: 80vh;
margin-top: 50px;
background-color:#EEEEFF;

.Works h1{
padding: 30px;
font-size: 35px;
text-align: center;
}

.Workslist{
padding: 20px;
display: grid;
margin-left: 150px;
grid-template-columns: repeat(3,1fr);
grid-template-rows: 1fr 1fr;
align-items: center;
justify-content:space-between;
gap: -100px;
/* width: 100%; */
}

.item1{
height: 300px;
width: 300px;
background-color: rgb(243, 249, 249);
border-radius: 20px;
border: 1px solid rgb(219, 216, 216);
}

.item1 img{
width: 300px;
height: 150px;
opacity: 20%;
/* border-radius: 20px; */
/* border: 2px solid gray; */
border-bottom: 2px solid gray;
background-color: #EEEEFF;
}

.item1 h2{
width: 100%;
font-size: 20px;
margin-left: 20px;
}

.item1 p{
margin: 20px;

You might also like