How you summarizes the design using HTML and CSS
I was looking around for different design to improve my skill and came across to this design but I am confused how what will be HTML structure and ofcourse CSS.
I have done a little work, Below is my code
I have done a little work, Below is my code
<div class="pizza--container">
<div class="container--img">
<img src="assets/pizza-plate.png" alt="">
<div class="pizza--img">
<img src="assets/pizza/deluxe-pizza.png" alt="">
</div>
</div>
</div><div class="pizza--container">
<div class="container--img">
<img src="assets/pizza-plate.png" alt="">
<div class="pizza--img">
<img src="assets/pizza/deluxe-pizza.png" alt="">
</div>
</div>
</div>*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.pizza--container {
position: relative;
width: 100vw;
height: 100vh;
background-color: #000;
z-index: 2;
}
.pizza--container::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #db3922ed;
clip-path: polygon(0 64%, 100% 33%, 100% 100%, 0% 100%);
z-index: -1;
}
.container--img {
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 100%;
/* border: 10px solid red; */
}
.container--img > img {
width: 300px;
/* height: 330px; */
object-fit: contain;
}
.pizza--img {
position: absolute;
}
.pizza--img > img {
width: 262px;
/* height: 330px; */
object-fit: contain;
}*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.pizza--container {
position: relative;
width: 100vw;
height: 100vh;
background-color: #000;
z-index: 2;
}
.pizza--container::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #db3922ed;
clip-path: polygon(0 64%, 100% 33%, 100% 100%, 0% 100%);
z-index: -1;
}
.container--img {
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 100%;
/* border: 10px solid red; */
}
.container--img > img {
width: 300px;
/* height: 330px; */
object-fit: contain;
}
.pizza--img {
position: absolute;
}
.pizza--img > img {
width: 262px;
/* height: 330px; */
object-fit: contain;
}
