Skip to content
Snippets Groups Projects
Commit cfdffb5f authored by Torbjørn Halland's avatar Torbjørn Halland
Browse files

Added products grid to main page

parent af01a461
No related branches found
No related tags found
No related merge requests found
import { useState } from 'react'
import './css/App.css'
import Navigation from './Navigation'
import ProductGrid from './ProductGrid'
import Product from './Product'
function App() {
const [count, setCount] = useState(0)
......@@ -8,6 +10,12 @@ function App() {
return (
<>
<Navigation />
<ProductGrid classname="center">
<Product title="iPhone" description="$1199.99" />
<Product title="Sony headset" price="$299.99"/>
<Product title="Lenovo laptop" price="$799.99" />
<Product title="Airfryer" price="$149.99" />
</ProductGrid>
</>
)
}
......
import React from 'react';
import './css/App.css';
function Product({ title, description, price }) {
return (
<div className="product">
<h2>{title}</h2>
<p>{description}</p>
<p>{price}</p>
<button>Add to Cart</button>
</div>
);
}
export default Product;
\ No newline at end of file
import React from 'react';
import './css/App.css';
function ProductGrid({ children }) {
return <div className="product-grid">{children}</div>;
}
export default ProductGrid;
\ No newline at end of file
......@@ -5,6 +5,14 @@ body
color : rgb(218, 218, 218);
}
.product-grid
{
position: fixed;
left: 0;
right: 0;
bottom: 100px; /* Adjust this value to move the grid up or down */
margin: 0; /* This removes the default margin around the body */
}
.navigation
{
......@@ -14,6 +22,19 @@ body
width : 100%;
}
.product-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin: 0 auto; /* This centers the grid horizontally */
}
.product {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
.navTop /* Topside of the navigation block*/
{
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment