<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Lucida Sans', 'Lucida Sans Regular',
'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana,
sans-serif;
}
.container {
width: 450px;
background: #212121;
box-shadow: 0 0 30px #2121216b;
padding: 3.5rem 2.5rem;
color: white;
position: relative;
display: flex;
align-items: center;
flex-direction: column;
}
.container #author {
margin-top: 2rem;
background: linear-gradient(to right, #16A085, #f4D03F);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.btn {
height: 40px;
position: absolute;
bottom: -8%;
background: linear-gradient(to right, #16A085, #f4D03F);
color: white;
border: none;
cursor: pointer;
font-size: 1.3em;
box-shadow: -10px 20px 50px #16A0848e, 10px 20px 50px
#f4D03F98;
width: 150px;
}
</style>
</head>
<body>
<div class="container">
<p id="quote">
</p>
<p id="author"></p>
<button class="btn" onclick="getQuote()">New</button>
</div>
<script>
const Quote = document.getElementById("quote");
const Author = document.getElementById("author");
function getQuote() {
fetch("http://quotes.stormconsultancy.co.uk/random.json")
.then((res) => {
return res.json();
})
.then((data) => {
Quote.innerText = data.quote;
Author.innerText = `-${data.author}`;
});
}
getQuote();
</script>
</body>
</html>
Comments
Post a Comment