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
We take content rights seriously. If you suspect this is your content, claim it here.
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
We take content rights seriously. If you suspect this is your content, claim it here.
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