html içerisinde bir sectionda istediğim copy pasteyi yapamadım. Destek olabilir misiniz?
index.html kodlarını ve görseli atıyorum. Kopyalayıp yapıştırdığım diğer görsellerin diğerinin bitiminde değil de tam altında başlamasını istiyorum.
<section class="slider">
<div id="carouselProductSlider" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./assets/images/hockey1.jpg" class="d-block w-100" alt="Jackets">
</div>
<div class="carousel-item">
<img src="./assets/images/hockey2.jpg" class="d-block w-100" alt="Coats">
</div>
<div class="carousel-item">
<img src="./assets/images/hockey4.jpg" class="d-block w-100" alt="Bags">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselProductSlider" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselProductSlider" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<section class="store my-5">
<div class="row">
<div class="col-5 offset-2 my-2">
<div class="row product__card">
<div class="col-6">
<img class="img-fluid shadow" src="./assets/images/bags1.jpg" alt="Nutuk - Mustafa Kemal Atatürk" width="258" height="400"/>
</div>
<div class="col-6 d-flex justify-content-between">
<div class="product__detail">
<div>
<span class="fos gray fs-5">X</span><br />
<span class="fs-4 fw-bold">Pink Bag</span><br />
<span class="product__star-rate">
<i class="bi bi-star-fill active"></i>
<i class="bi bi-star-fill active"></i>
<i class="bi bi-star-fill active"></i>
<i class="bi bi-star-fill active"></i>
<i class="bi bi-star-fill"></i>
<span class="gray">250 reviews</span>
</span>
</div>
<p class="product__description fos gray">
Disruptive proportions, ton-sur-ton details, and glossy finishes bring a new edge to the Santino Capella's bag. Bags are make eaiser to hand up items. </p>
<div>
<span class="black fw-bold fs-4 me-2">32$</span>
<span class="fs-4 fw-bold old__price">45$</span>
</div>
<button class="btn__purple">ADD BASKET</button>
</div>
<div class="col-1">
<div class="row product__card">
<div class="col-6">
<img class="img-fluid shadow" src="./assets/images/bags2.png" alt="Nutuk - Mustafa Kemal Atatürk" width="258" height="400"/>
</div>
<div class="col-6 d-flex justify-content-between">
<div class="product__detail">
<div>
<span class="fos gray fs-5">x</span><br />
<span class="fs-4 fw-bold">Camel Bag</span><br />
<span class="product__star-rate">
<i class="bi bi-star-fill active"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<span class="gray">250 reviews</span>
</span>
</div>
<p class="product__description fos gray">
Disruptive proportions, ton-sur-ton details, and glossy finishes bring a new edge to the Santino Capella's bag. Bags are make eaiser to hand up items.
</p>
<div>
<span class="black fw-bold fs-4 me-2">32$</span>
<span class="fs-4 fw-bold old__price">45$</span>
</div>
<button class="btn__purple">ADD BASKET</button></div>
</div>
<div class="ikinci__satir">
<div class="col-5 offset-2 my-5">
<div class="row product__card">
<div class="col-6">
<img class="img-fluid shadow" src="./assets/images/bags1.jpg" alt="Nutuk - Mustafa Kemal Atatürk" width="258" height="400"/>
</div>
<div class="col-6 d-flex justify-content-between">
<div class="product__detail">
<div>
<span class="fos gray fs-5">X</span><br />
<span class="fs-4 fw-bold">Pink Bag</span><br />
<span class="product__star-rate">
<i class="bi bi-star-fill active"></i>
<i class="bi bi-star-fill active"></i>
<i class="bi bi-star-fill active"></i>
<i class="bi bi-star-fill active"></i>
<i class="bi bi-star-fill"></i>
<span class="gray">250 reviews</span>
</span>
</div>
<p class="product__description fos gray">
Disruptive proportions, ton-sur-ton details, and glossy finishes bring a new edge to the Santino Capella's bag. Bags are make eaiser to hand up items. </p>
<div>
<span class="black fw-bold fs-4 me-2">32$</span>
<span class="fs-4 fw-bold old__price">45$</span>
</div>
<button class="btn__purple">ADD BASKET</button>
</div>
<div class="col-1">
<div class="row product__card">
<div class="col-6">
<img class="img-fluid shadow" src="./assets/images/bags2.png" alt="Nutuk - Mustafa Kemal Atatürk" width="258" height="400"/>
</div>
<div class="col-6 d-flex justify-content-between">
<div class="product__detail">
<div>
<span class="fos gray fs-5">X</span><br />
<span class="fs-4 fw-bold">Camel Bag</span><br />
<span class="product__star-rate">
<i class="bi bi-star-fill active"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<span class="gray">250 reviews</span>
</span>
</div>
<p class="product__description fos gray">
Disruptive proportions, ton-sur-ton details, and glossy finishes bring a new edge to the Santino Capella's bag. Bags are make eaiser to hand up items.
</p>
<div>
<span class="black fw-bold fs-4 me-2">32$</span>
<span class="fs-4 fw-bold old__price">45$</span>
</div>
<button class="btn__purple">ADD BASKET</button></div>
</div>
<div class="col-5 offset-2 my-2">
<div class="row product__card">
<div class="col-6">
<img class="img-fluid shadow" src="./assets/images/bags1.jpg" alt="Nutuk - Mustafa Kemal Atatürk" width="258" height="400"/>
</div>
<div class="col-6 d-flex justify-content-between">
<div class="product__detail">
<div>
<span class="fos gray fs-5">X</span><br />
<span class="fs-4 fw-bold">Pink Bag</span><br />
<span class="product__star-rate">
<i class="bi bi-star-fill active"></i>
<i class="bi bi-star-fill active"></i>
<i class="bi bi-star-fill active"></i>
<i class="bi bi-star-fill active"></i>
<i class="bi bi-star-fill"></i>
<span class="gray">250 reviews</span>
</span>
</div>
<p class="product__description fos gray">
Disruptive proportions, ton-sur-ton details, and glossy finishes bring a new edge to the Santino Capella's bag. Bags are make eaiser to hand up items. </p>
<div>
<span class="black fw-bold fs-4 me-2">32$</span>
<span class="fs-4 fw-bold old__price">45$</span>
</div>
<button class="btn__purple">ADD BASKET</button>
</div>
<div class="col-1">
<div class="row product__card">
<div class="col-6">
<img class="img-fluid shadow" src="./assets/images/bags2.png" alt="Nutuk - Mustafa Kemal Atatürk" width="258" height="400"/>
</div>
<div class="col-6 d-flex justify-content-between">
<div class="product__detail">
<div>
<span class="fos gray fs-5">X</span><br />
<span class="fs-4 fw-bold">Camel Bag</span><br />
<span class="product__star-rate">
<i class="bi bi-star-fill active"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<span class="gray">250 reviews</span>
</span>
</div>
<p class="product__description fos gray">
Disruptive proportions, ton-sur-ton details, and glossy finishes bring a new edge to the Santino Capella's bag. Bags are make eaiser to hand up items.
</p>
<div>
<span class="black fw-bold fs-4 me-2">32$</span>
<span class="fs-4 fw-bold old__price">45$</span>
</div>
<button class="btn__purple">ADD BASKET</button></div>
</div>
</section>
</section>
Style.css detayları
:root {
--black: #1c2a39;
--gray: #5c6a79;
--purple: #4c3db2;
}
.navbar {
height: 120 px;
width: 80%;
margin-left: 10%;
}
.menu,
.menu__icons {
list-style-type: none;
display: flex;
flex-direction: row;
font-size: 20px;
color: var(--gray);
cursor: pointer;
}
.menu li, .menu__icons li {
margin: 0 10px;
}
.active {
color:#009246;
font-weight: bold;
}
.cantas {
color:#ce2b37;
font-weight:bold;
}
.bottas {
color:#f1baa1;
font-weight:bold;
}
.menu__icons li {
color: var(--black);
}
.basket__icon {
position: relative;
}
.basket__count {
position: absolute;
right: -0.7rem;
bottom: 0;
width: 20px;
height: 20px;
background-color: var(--black);
border-radius: 50%;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 1rem;
font-weight: bold;
}
.title {
font-family: 'Pacifico', cursive;
font-size: 35px;
}
.slider {
width: 80%;
margin-left: auto;
margin-right: auto;
height: 900px;
}
.slider img {
height: 900px;
}
.store {
width: 80%;
}
.product__card {
height: 600px;
width: 600px;
}
.fos {
font-family: "Open Sans", sans-serif;
}
.gray {
color: var(--gray);
}
.black {
color: var(--black);
}
.fw-bold {
font-weight: bold;
}
.product__star-rate .bi-star, .bi-star-fill {
color:#eeedf5;
font-size: 1.2rem;
margin-right: 5px;
}
.product__star-rate .bi-star-fill.active {
color: #f2c94c;
}
.old__price {
color:#bdbdbd;
text-decoration: line-through;
}
.product__description {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.btn__purple {
cursor
ointer;border: 2px solid var(--purple);
color: var(--purple);
font-size: 1rem;
font-weight: bold;
background-color: transparent;
transition: all 250ms ease-in-out;
}
.btn__purple:hover {
background-color: var(--purple);
color: white;
}
.product__detail {
height: 253px;
width: 253px;
}
