Scribd
Upload
19 views

Notes

Uploaded by

Hatice
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
19 views

Notes

Uploaded by

Hatice
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

* Image size was huge and width or flex didin't work since we didn't give size to

the Image.
const Container = styled.div`
flex: 1;
`;
const Image = styled.img`
width: 100%;
`;

* for make the images same high and make images lok good on that size we apply
object fit.

const Container = styled.div`


flex: 1;
margin: 3px;
height: 70vh;
`;

const Image = styled.img`


width: 100%;
height: 100%;
object-fit: cover;
`;

* we put info container just top of the image and center the data. don't think
complicated it is like putting another paper.
const Container = styled.div`
flex: 1;
margin: 3px;
height: 70vh;
position: relative;
border: 2px solid red;
`;
const Image = styled.img`
width: 100%;
height: 100%;
border: 2px solid orange;
object-fit: cover;
`;
const Info = styled.div`
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border: 1px solid yellow;
`;

* map the item list first then you can create with the necessary information. It
will be easier.

* min width is used when the items are too big, and we need to set the limit width
for those items.

The min-width CSS property sets the minimum width of an element.


It prevents the used value of the width property from becoming smaller than the
value specified for min-width.

*z-index is works with the position:absolute for sure!!!!


The z-index CSS property sets the z-order of a positioned element and its
descendants or flex items.
Overlapping elements with a larger z-index cover those with a smaller one.

* when we want item to be shown when the other item is hoverd, we can make opacity
0 and apply opacity
when other item is hovered.

const Info = styled.div`


opacity: 0;
display: flex;
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
justify-content: center;
align-items: center;
background-color: #f5fbfd;
z-index: 3;
cursor: pointer;
`;

const Container = styled.div`


flex: 1;
margin: 5px;
height: 350px;
min-width: 280px;
background-color: #e6ffe6;
display: flex;
justify-content: center;
align-items: center;
position: relative;

/* Icons(Info) will appear when the container is hovered */


&:hover ${Info} {
opacity: 0.8;
}
`;

* if we want fancy circle background, z index is used.


just like stacks.

export const Circle = styled.div`


position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #f5fbfd;
z-index: 1;
`;

export const Image = styled.img`


position: absolute;
height: 75%;
z-index: 2;
`;

* ul has margin and padding itself so it is better to make it 0 with style.

* list-style: none should be given to the ul or ol since it is the list

* in order to apply flex-wrap: wrap, we need to give the width to the child
components.

* vm and vh
A % length is relative to local context (containing element) width, while a vw
length is relative to the full width of the browser window.

*in full screen components(it is viewpoint's dimensions), we should give


width: 100vw;
height: 100vh;

*for not making things complicated, you can make separate components instead of
using PROPS everywhere.
It will make components more complicated instead of simplicity.
DO NOT WORRY TO MAKE COMPONENTS.

*/*Right part of the bottom*/


height vermek burada çok mantıklı çünkü yandaki productlar büyüdükçe büyüyüecek ve
saçma bir görüntü olacak.
const OrderSummary = styled.div`
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 20px;
border: 1px solid lightgray;
border-radius: 10px;
height: 50vh;
`;

*select is like span element :)

You might also like