Scribd
Upload
3 views4 pages

Code

Uploaded by

ghevariyavidhee993
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 views4 pages

Code

Uploaded by

ghevariyavidhee993
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/ 4

page.

sass :
// REPORT PAGE ---------------------------------------

.report-con {
// background-color: #3B5998;
color: $white-color;
padding: 1vh;
width: 90%;
margin: 2vh auto;
text-align: center;
}

.report-p1 {
width: 100%;
margin: 0vh auto;
}

.report-h1 {
font-size: xx-large;
font-weight: 900;
color: $white-color;
margin-top: 3vh;
text-align: center;
font-family: $font-Family;
}

.p2 {
font-size: x-large;
font-family: $font-Family;
}

.p3 {
font-family: $font-Family;
font-size: larger;
font-weight: bold;
}

.p4 {
font-family:unset;
font-size: medium;
font-weight: 200;
}

.report-p2 {
border: 1px solid $mini-text-color;
padding: 2vh;
}

Report.js :
import React from 'react'
import border from './img/border.png';

function Report() {
return (
<>
<h1 className='report-h1'>REPORT</h1>
<div className="report-con">
<div className="row report-p1">
<div className="col report-p2 p2">Uploaded Product</div>
</div>
<div className="row report-p1">
<div className="col-4 report-p2 p3">Name</div>
<div className="col-2 report-p2 p3">Carat</div>
<div className="col-2 report-p2 p3">Price(₹)</div>
<div className="col-2 report-p2 p3">Date</div>
<div className="col-2 report-p2 p3">Country</div>
</div>
<div className="row report-p1">
<div className="col-4 report-p2 p4">Rough | Natural
Cognac</div>
<div className="col-2 report-p2 p4">11.20</div>
<div className="col-2 report-p2 p4">13450.00</div>
<div className="col-2 report-p2 p4">2001</div>
<div className="col-2 report-p2 p4">Africa</div>
</div>
<div className="row report-p1">
<div className="col-4 report-p2 p4">Rough Octahedron | Natural
Brown</div>
<div className="col-2 report-p2 p4">9.31</div>
<div className="col-2 report-p2 p4">8400.00</div>
<div className="col-2 report-p2 p4">1988</div>
<div className="col-2 report-p2 p4">Russia</div>
</div>
<div className="row report-p1">
<div className="col-4 report-p2 p4">Rough | Natural Black</div>
<div className="col-2 report-p2 p4">4.19</div>
<div className="col-2 report-p2 p4">5025.00</div>
<div className="col-2 report-p2 p4">1997</div>
<div className="col-2 report-p2 p4">Israel</div>
</div>
<div className="row report-p1">
<div className="col-4 report-p2 p4">Rough Cube | Natural Dark
Grey</div>
<div className="col-2 report-p2 p4">17.42</div>
<div className="col-2 report-p2 p4">16500.00</div>
<div className="col-2 report-p2 p4">2017</div>
<div className="col-2 report-p2 p4">Russia</div>

</div>
<div className="row report-p1">
<div className="col-4 report-p2 p4">Rough | Natural Peppered
White</div>
<div className="col-2 report-p2 p4">5.61</div>
<div className="col-2 report-p2 p4">10500.00</div>
<div className="col-2 report-p2 p4">1970</div>
<div className="col-2 report-p2 p4">Canada</div>
</div>
</div>

<img src={border} alt="" className='border-img' />

<div className="report-con">
<div className="row report-p1">
<div className="col report-p2 p2">New Uploaded Product</div>
</div>
<div className="row report-p1">
<div className="col-4 report-p2 p3">Name</div>
<div className="col-2 report-p2 p3">Carat</div>
<div className="col-2 report-p2 p3">Price(₹)</div>
<div className="col-2 report-p2 p3">Date</div>
<div className="col-2 report-p2 p3">Country</div>

</div>
<div className="row report-p1">
<div className="col-4 report-p2 p4">Rough | Natural Brown</div>
<div className="col-2 report-p2 p4">9.13</div>
<div className="col-2 report-p2 p4">8225.00</div>
<div className="col-2 report-p2 p4">2014</div>
<div className="col-2 report-p2 p4">Canada</div>

</div>
<div className="row report-p1">
<div className="col-4 report-p2 p4">Rough | Natural
Champagne</div>
<div className="col-2 report-p2 p4">11.06</div>
<div className="col-2 report-p2 p4">16600.00</div>
<div className="col-2 report-p2 p4">1868</div>
<div className="col-2 report-p2 p4">Russia</div>

</div>
<div className="row report-p1">
<div className="col-4 report-p2 p4">Rough | Natural Peppered
White</div>
<div className="col-2 report-p2 p4">5.61</div>
<div className="col-2 report-p2 p4">10500.00</div>
<div className="col-2 report-p2 p4">1970</div>
<div className="col-2 report-p2 p4">Africa</div>
</div>
</div>

<img src={border} alt="" className='border-img' />

<div className="report-con">
<div className="row report-p1">
<div className="col report-p2 p2">Latest Product</div>
</div>
<div className="row report-p1">
<div className="col-4 report-p2 p3">Name</div>
<div className="col-2 report-p2 p3">Carat</div>
<div className="col-2 report-p2 p3">Price(₹)</div>
<div className="col-2 report-p2 p3">Date</div>
<div className="col-2 report-p2 p3">Country</div>

</div>
<div className="row report-p1">
<div className="col-4 report-p2 p4">Rough | Natural Grey, with
Yellow Hint</div>
<div className="col-2 report-p2 p4">15.23</div>
<div className="col-2 report-p2 p4">30000.00</div>
<div className="col-2 report-p2 p4">2022</div>
<div className="col-2 report-p2 p4">Israel</div>
</div>
<div className="row report-p1">
<div className="col-4 report-p2 p4">Rough | Natural Green</div>
<div className="col-2 report-p2 p4">2.34</div>
<div className="col-2 report-p2 p4">4900.00</div>
<div className="col-2 report-p2 p4">2020</div>
<div className="col-2 report-p2 p4">Russia</div>
</div>
</div>
</>
)
}

export default Report

footer.js :
<Link to='/Login' className='link-text'><li>Log in</li></Link>
<Link to='/Report' className='link-text'><li>Report</li></Link>

You might also like