Kevin Powell - Community•10mo ago

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

<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;
}

3 Replies

get out...!OP•10mo ago

I am so sorry for not sharing in the code editor @Kevin Could you Kindly help me with this design?

Jochem•10mo ago

@get out...! please don't ping people to get them to answer your questions, especially Kevin or the mods. I've told you not to ping without being in a conversation before, please don't do it again

get out...!OP•10mo ago

I will take care in future

Gaming

Programming

How you summarizes the design using HTML and CSS