Scribd
Upload
16 views

Notes

Uploaded by

Hatice
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
16 views

Notes

Uploaded by

Hatice
Copyright
© © All Rights Reserved
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