<div class="container">
<article>
  <header class="main-header">
  <h2 id="title">Converse Chuck Taylor All Star Low Top</h2>
  </header>
  <img src= "https://i.ibb.co/Jr7Wh1d/challenges.jpg" alt="converse shoes" height="250" width= "250" >
  <p></p>
 
 <div class="first-container"> 
   <div class="product-price">
  <strong class: "price">$65.00</strong>
  <p class= "shipping">Free shipping</p>
     </div>
<p class="parrafo">Ready to dress up or down, these classic canvas Chucks are an everyday wardrobe staple.</p>
  <a href="#" class="more-information">More information &#8594</a>
  
  <div class="colors">
    <div class="color"></div>
    <div class="color blue"></div>
    <div class="color red"></div>
    <div class="color yellow"></div>
    <div class="color green"></div>
    <div class="color brown"></div>
  </div>
</div>
  
<div class="second-container">
  <h4 class= "list-title">Product details</h4>
  <ul class: "list">
    <li>Lightweight, durable canvas sneaker</li>
    <li>Lightly padded footbed for added comfort</li>
    <li>Iconic Chuck Taylor ankle patch</li>
  </ul>
</div>
  <a><button class ="boton">Add to cart</button></a>
</article>
  </div>  


*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
.list-title{
  text-transform: uppercase;
  font-size:16px;
  padding-top: 30px;
  padding-bottom: 10px;
  
}
.list {
  list-style:square;
}
.price{
  font-size:24px;

}
.shipping{
  font-size: 12px;
  text-transform: uppercase;
  font-weight: bold;
  color:#777;
  margin-top: 5px;
  margin-right: 30px;
  float:right;


}
body {
  font-family: sans-serif;
  line-height:1.4;
}
a:link{
  color: black;
  font-weight: bold;
}

a:link:hover{
  text-decoration:none
}


strong{
  font-size: 20px;
  
  
}

.more-information:link{
  margin-bottom: 30px;
  display: inline-block
}
.color {
  background-color: black;
  height: 22px;
  width:22px;
  display:inline-block; 
  margin-right: 10px;
}
.blue{
  background-color: blue;
}
.red{
  background-color: red;
}
.yellow{
  background-color: yellow;
}
.green {
  background-color: green
}
.brown {
  background-color: brown
}
#title {
  background-color: #f7f7f7;
  text-transform: uppercase;
  text-align: center;
  font-size: 22px;
  
}
article {
  border: 10px solid #000
}

.boton{
  background-color: black;
  border:none;
  color: white;
  font-style: italic;
  text-transform: uppercase;
  cursor: pointer;
  padding: 15px;
  width:100%;
  border: 5px solid black
  
}

.boton:hover {
  background-color: white;
  color: black;
}

.parrafo {
  padding-bottom:10px;
}
ul{
  margin-left: 20px;
  margin-bottom: 5px;
}
.container{
  width: 850px;
  margin: 30px auto;
}
.main-header{
  padding: 10px 0;
}

h2{
  position: relative
}

h2::after {
  content: "SALE";
  background-color: red;
  color: white;
  font-size: 12px;
  font-weight:bold;
  display: inline-block;
  padding: 5px 10px;
  position: absolute;
  top: -30px;
  left: -30px;
  letter-spacing: 2px;
}
img{
  float:left
}
.first-container{

  width: 260px;
  height:250px;
  float: left;
  padding-left:20px;
  
}
.second-container{

  float:right;
  padding-left:5px;
  height: 250px;
}

const btn = document.querySelector(".boton")
btn.addEventListener("click", ()=> alert("has anadido algo a tu carrito"))

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.