)
Fazla uzatmaya gerek yok. Buyun kodlar.
Kod:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webailesi.com - Taha KOÇAK</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<link rel="stylesheet" href="https://www.webailesi.com/yonlendir.php?link=https%3A%2F%2Fstackpath.bootstrapcdn.com%2Fbootstrap%2F4.4.1%2Fcss%2Fbootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<style>
.max-height {
min-height: 100vh;
}
body {
background: lightblue;
}
.quote-container {
background: rgba(255, 255, 255, 0.5);
}
#generate-btn {
color: white !important;
background: #64b6ac !important;
border-color: #64b6ac !important;
cursor: pointer;
font-size: 1.5rem;
padding: 0.5rem 1rem;
}
#generate-btn:hover {
background: lightblue !important;
border-color: lightblue !important;
color: #333333 !important;
}
.author {
color: #64b6ac;
}
</style>
<div class="conainer">
<div class="row max-height align-items-center">
<div class="col-11 mx-auto col-md-6 quote-container p-5">
<button class="btn-outline-primary text-capitalize my-4 d-block mx-auto" id="generate-btn">Alıntı Getir Aga</button>
<h3 class="text-muted"><span class="quote-icon mr-3"><i class="fas fa-quote-left fa-3x"></i></span><span id="quote">Lorem
ipsum dolor sit amet consectetur, adipisicing elit. Tenetur sint iste optio placeat dolor labore, reprehenderit
ipsum aspernatur blanditiis maiores.
</span></i></span></h3>
<h5 class="text-right text-capitalize author">-<span class="quote-author ml-3 ">Yazar</span></h5>
</div>
</div>
</div>
<script>
(function() {
const quotes = [
{
quote:
"Yazı 1",
author: " Yazar"
},
{
quote:
"Yazı 2",
author: " Yazar"
},
{
quote:
"Yazı 3",
author: " Yazar"
},
{
quote: "Yazı 4",
author: " Yazar"
},
{
quote:
"Yazı 5",
author: " Yazar"
},
{
quote:
"Yazı 6",
author: " Yazar"
}
];
const btn = document.getElementById("generate-btn");
btn.addEventListener("click", function() {
let random = Math.floor(Math.random() * quotes.length);
document.getElementById("quote").textContent = quotes[random].quote;
document.querySelector(".author").textContent = quotes[random].author;
});
})();
</script>
</body>
</html>Ekran Görüntüsü:
