Because Kanye West.
In light of Kanye’s new album, I have been inspired to create this project using HTML and CSS that displays a random Kanye West Quote using an API from api.kanye.rest with a funny picture of him as the background.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kanye West Quote</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<div id="quoteContainer"></div>
</div>
<script>
window.onload = function() {
fetch('https://api.kanye.rest/')
.then(response => response.json())
.then(data => {
const quote = data.quote;
document.getElementById('quoteContainer').innerText = quote;
})
.catch(error => console.error('Error fetching quote:', error));
};
</script>
</body>
</html>
CSS
body {
font-family: Comic Sans, comic sans;
background-image: url('https://th.bing.com/th/id/OIP.DpY5vVcwn66DFPdjlpzSvAAAAA?rs=1&pid=ImgDetMain');
background-size: cover;
background-position: center;
margin: 0;
padding: 0;
height: 100vh; /* Ensure body takes full height of viewport */
display: flex;
flex-direction: column;
justify-content: flex-end; /* Align content to the bottom */
}
.container {
width: 500px; /* Set width to create a square */
height: 200px; /* Set height to match width */
margin: 0 auto;
margin-bottom: 100px; /* Adjust margin to position box in the bottom third */
background-color: transparent; /* Make the background transparent */
border-radius: 8px;
padding: 20px;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
text-align: center; /* Center the text */
}
h1 {
color: #333;
margin: 0; /* Remove default margin */
padding: 0; /* Remove default padding */
}
#quoteContainer {
margin-top: -450px; /* Move text up a little bit */
font-size: 50px;
line-height: 1.5; /* Increase line height for better readability */
}
All in on HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kanye West Quote</title>
<style>
body {
font-family: Comic Sans, comic sans;
background-image: url('https://th.bing.com/th/id/OIP.DpY5vVcwn66DFPdjlpzSvAAAAA?rs=1&pid=ImgDetMain');
background-size: cover;
background-position: center;
margin: 0;
padding: 0;
height: 100vh; /* Ensure body takes full height of viewport */
display: flex;
flex-direction: column;
justify-content: flex-end; /* Align content to the bottom */
}
.container {
width: 500px; /* Set width to create a square */
height: 200px; /* Set height to match width */
margin: 0 auto;
margin-bottom: 100px; /* Adjust margin to position box in the bottom third */
background-color: transparent; /* Make the background transparent */
border-radius: 8px;
padding: 20px;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
text-align: center; /* Center the text */
}
h1 {
color: #333;
margin: 0; /* Remove default margin */
padding: 0; /* Remove default padding */
}
#quoteContainer {
margin-top: 0px; /* Move text up a little bit */
font-size: 50px;
line-height: 1.5; /* Increase line height for better readability */
}
</style>
</head>
<body>
<div class="container">
<div id="quoteContainer"></div>
</div>
<script>
window.onload = function() {
fetch('https://api.kanye.rest/')
.then(response => response.json())
.then(data => {
const quote = data.quote;
document.getElementById('quoteContainer').innerText = quote;
})
.catch(error => console.error('Error fetching quote:', error));
};
</script>
</body>
</html>
0 Comments