Skip to content

Commit

Permalink
fixed "div mixed"
Browse files Browse the repository at this point in the history
  • Loading branch information
@Akilalochana
Akilalochana committed Aug 12, 2024
1 parent b71bb72 commit eba158c
Show file tree
Hide file tree
Showing 3 changed files with 119 additions and 107 deletions.
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
214 changes: 111 additions & 103 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,121 +96,129 @@ <h3>b'day card</h3>
<div class="price">$12.99 <span>$15.99</span></div>
</div>

<div class="box1">
<span class="discount">-15%</span>
<div class="image">
<img src="heartCard.png" alt="">
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="cart-btn">add to cart</a>
<a href="#" class="fas fa-share"></a>
</div>
</div>

<div class="box">
<span class="discount">-15%</span>
<div class="image">
<img src="heartCard.png" alt="">
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="cart-btn">add to cart</a>
<a href="#" class="fas fa-share"></a>
</div>
<div class="content">
<h3>b'day card</h3>
<div class="price">$12.99 <span>$15.99</span></div>
</div>
<div class="content">
<h3>b'day card</h3>
<div class="price">$12.99 <span>$15.99</span></div>
</div>

</div>

<div class="box">
<span class="discount">-10%</span>
<div class="image">
<img src="natureCard1.png" alt="">
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="cart-btn">add to cart</a>
<a href="#" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>b'day card</h3>
<div class="price">$12.99 <span>$15.99</span></div>
</div>

</div>

<div class="box">
<span class="discount">-10%</span>
<div class="image">
<img src="natureCard1.png" alt="">
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="cart-btn">add to cart</a>
<a href="#" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>b'day card</h3>
<div class="price">$12.99 <span>$15.99</span></div>
</div>

<div class="box">
<span class="discount">-10%</span>
<div class="image">
<img src="pandCard1.png" alt="">
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="cart-btn">add to cart</a>
<a href="#" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>b'day card</h3>
<div class="price">$12.99 <span>$15.99</span></div>
</div>


<div class="box">
<span class="discount">-10%</span>
<div class="image">
<img src="natureCard2.png" alt="">
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="cart-btn">add to cart</a>
<a href="#" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>b'day card</h3>
<div class="price">$12.99 <span>$15.99</span></div>
</div>
</div>
</div>

<div class="box">
<span class="discount">-10%</span>
<div class="image">
<img src="minionsCard.png" alt="">
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="cart-btn">add to cart</a>
<a href="#" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>b'day card</h3>
<div class="price">$12.99 <span>$15.99</span></div>
</div>
</div>
<div class="box">
<span class="discount">-10%</span>
<div class="image">
<img src="pandCard1.png" alt="">
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="cart-btn">add to cart</a>
<a href="#" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>b'day card</h3>
<div class="price">$12.99 <span>$15.99</span></div>
</div>

<div class="box">
<span class="discount">-10%</span>
<div class="image">
<img src="pandaCard2.png" alt="">
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="cart-btn">add to cart</a>
<a href="#" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>b'day card</h3>
<div class="price">$12.99 <span>$15.99</span></div>
</div>
</div>


<div class="box">
<span class="discount">-10%</span>
<div class="image">
<img src="natureCard2.png" alt="">
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="cart-btn">add to cart</a>
<a href="#" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>b'day card</h3>
<div class="price">$12.99 <span>$15.99</span></div>
</div>
</div>


<div class="box">
<span class="discount">-10%</span>
<div class="image">
<img src="minionsCard.png" alt="">
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="cart-btn">add to cart</a>
<a href="#" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>b'day card</h3>
<div class="price">$12.99 <span>$15.99</span></div>
</div>
</div>


<div class="box">
<span class="discount">-10%</span>
<div class="image">
<img src="pandaMiniCard.png" alt="">
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="cart-btn">add to cart</a>
<a href="#" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>b'day card</h3>
<div class="price">$12.99 <span>$15.99</span></div>
</div>
<div class="box">
<span class="discount">-10%</span>
<div class="image">
<img src="pandaCard2.png" alt="">
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="cart-btn">add to cart</a>
<a href="#" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>b'day card</h3>
<div class="price">$12.99 <span>$15.99</span></div>
</div>
</div>



<div class="box">
<span class="discount">-10%</span>
<div class="image">
<img src="pandaMiniCard.png" alt="">
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="cart-btn">add to cart</a>
<a href="#" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>b'day card</h3>
<div class="price">$12.99 <span>$15.99</span></div>
</div>
</div>

</div>
</section>

</body>
Expand Down
9 changes: 5 additions & 4 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,16 +217,17 @@ header {
flex: 1 1 30rem;
box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
border-radius: .5rem;
border: 1rem solid rgba(0, 0, 0, .1);
position: absolute;
width: 400px;
border: .1rem solid rgba(0, 0, 0, .1);
position: relative;
width: 100%;
height: 100%;
}

.products .box-container .box .discount {
position: absolute;
top: 1rem;
left: 1rem;
padding: 7rem 1rem;
padding: 5rem 1rem;
font-size: 2rem;
color: var(--pink);
background: rgba(255, 51, 153, .05);
Expand Down

0 comments on commit eba158c

Please sign in to comment.