Scribd
Upload
4 views3 pages

Works

The document contains CSS styles for a responsive grid layout and a React component that displays a list of works with images, titles, and descriptions. The CSS defines styling for the body, headings, and individual items in the grid. The React component imports images and maps over an array of work data to render each item dynamically.

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
4 views3 pages

Works

The document contains CSS styles for a responsive grid layout and a React component that displays a list of works with images, titles, and descriptions. The CSS defines styling for the body, headings, and individual items in the grid. The React component imports images and maps over an array of work data to render each item dynamically.

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

/* *{

margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
width: 100%;
height: 100vh;
justify-content: center;
align-items: center;

} */

.Works_list{
margin: 1rem;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: 1fr 1fr;
align-items: center;
justify-content: center;
/* width: 100%; */

.item1 {
flex-direction: column;
margin: 10px 10px ;
border: 1px solid rgb(146, 134, 240);
padding: 20px;
background-color: rgb(255, 255, 255);
box-shadow: 5px 5px 5px hsla(0%,0%,0%,0.1);
border-radius: 10px;
text-align: left;
transition: background-color 0.5s ease-in-out;

}
h1{

text-align: center;
font-size:30px;
color: #414042;
padding: 20px;
}

.item1 img{
max-width: 20%;
height: 10vh;
border-radius: 50%;
margin-bottom: 10px;
}

.item1 h2{
font-size: 17px;
/* font-weight: 20px; */
max-width: 100%;
text-align: left;
/* background-color: black; */
}

.item1 p{
text-align: left;
font-size: 20px;
color: #B5B5B5;
padding: 10px;

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

import React from 'react'


import Image7 from '../../assets/Images/7.png'
import Image8 from '../../assets/Images/8.png'
import Image9 from '../../assets/Images/9.png'

import './Works.css'

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

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

},
{
img:Image9,
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='container Works'>
<div className="heading">
<h1 >Our Works</h1>
</div>
<div className="Works_list">
{
WorksData.map((item1)=>(
<div className="item1">
<img src={item1.img} alt="" />
<h2>{item1.title}</h2>
<p>{item1.para}</p>
</div>

))
}
</div>
</section>

</>)

export default Works

You might also like