* Image size was huge and width or flex didin't work since we didn't give size to
the Image.
const Container = [Link]`
flex: 1;
`;
const Image = [Link]`
width: 100%;
`;
* for make the images same high and make images lok good on that size we apply
object fit.
const Container = [Link]`
flex: 1;
margin: 3px;
height: 70vh;
`;
const Image = [Link]`
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 = [Link]`
flex: 1;
margin: 3px;
height: 70vh;
position: relative;
border: 2px solid red;
`;
const Image = [Link]`
width: 100%;
height: 100%;
border: 2px solid orange;
object-fit: cover;
`;
const Info = [Link]`
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 = [Link]`
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 = [Link]`
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 = [Link]`
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #f5fbfd;
z-index: 1;
`;
export const Image = [Link]`
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 = [Link]`
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 :)
