wooooo
ada
1 year ago
@ -1,25 +0,0 @@
|
||||
body {
|
||||
min-height: 100vh;
|
||||
background-color: #130149;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 200px;
|
||||
color: white;
|
||||
margin-top: 200px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
h3{
|
||||
margin-top: 200px;
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,41 @@
|
||||
@font-face {
|
||||
font-family: 'goethe-bold', sans-serif;
|
||||
src: url(GoetheBold.ttf);
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: calc(1rem + 1vw);
|
||||
min-height: 100vh;
|
||||
background-color: #130149;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: monospace;
|
||||
font-size: calc(5rem + 3vw); /* Responsive font size for h1 */
|
||||
color: white;
|
||||
margin-top: 200px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: monospace;
|
||||
font-size: 1.6rem; /* Adjust the font size for h2 as needed for responsiveness */
|
||||
color: white;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1rem; /* Adjust the font size for h3 as needed for responsiveness */
|
||||
margin-top: 300px;
|
||||
}
|
||||
|
||||
#header {
|
||||
font-family: monospace;
|
||||
font-size: calc(1.2rem + 0.5vw); /* Responsive font size for #header */
|
||||
margin-top: 20px;
|
||||
color: white;
|
||||
}
|
||||
@ -0,0 +1,66 @@
|
||||
@font-face {
|
||||
font-family: 'goethe-bold', sans-serif;
|
||||
src: url(GoetheBold.ttf);
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: calc(1rem + 1vw);
|
||||
min-height: 100vh;
|
||||
background-color: #131313;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: monospace;
|
||||
font-size: calc(5rem + 3vw); /* Responsive font size for h1 */
|
||||
color: #e5e5e5;
|
||||
margin-top: 200px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: monospace;
|
||||
font-size: 1.6rem; /* Adjust the font size for h2 as needed for responsiveness */
|
||||
color: #e5e5e5;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1rem; /* Adjust the font size for h3 as needed for responsiveness */
|
||||
margin-top: 300px;
|
||||
}
|
||||
|
||||
#header {
|
||||
font-family: monospace;
|
||||
font-size: calc(1.2rem + 0.5vw); /* Responsive font size for #header */
|
||||
margin-top: 20px;
|
||||
color: #e5e5e5;
|
||||
}
|
||||
|
||||
#image-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#image-container img {
|
||||
max-width: 400px;
|
||||
max-height: 400px;
|
||||
cursor: pointer; /* Add pointer cursor to indicate images are clickable */
|
||||
}
|
||||
|
||||
#start-text {
|
||||
display: none; /* Hide the text initially */
|
||||
}
|
||||
|
||||
#footer {
|
||||
font-size: calc(1rem + 0.5vw); /* Responsive font size for #footer */
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 10px;
|
||||
color: #313131;
|
||||
}
|
||||
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 28 KiB |
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>webweaving</title>
|
||||
<link rel="stylesheet" href="css/style_webweave.css">
|
||||
</head>
|
||||
<body>
|
||||
<p id="header">webweave by clicking on the image</p>
|
||||
<div id="image-container"></div>
|
||||
|
||||
</body>
|
||||
<p id="footer">credits for the webweaving go to sea--shore.tumblr.com</p>
|
||||
<script>
|
||||
const imageContainer = document.getElementById("image-container");
|
||||
const startText = document.getElementById("start-text");
|
||||
const header = document.getElementById("header");
|
||||
const footer = document.getElementById("footer");
|
||||
let currentIndex = 0;
|
||||
let creditsDisplayed = false;
|
||||
|
||||
function showNextImage() {
|
||||
if (currentIndex < 13) {
|
||||
const image = document.createElement("img");
|
||||
image.src = `images/web${currentIndex}.jpg`;
|
||||
image.alt = `Image ${currentIndex}`;
|
||||
imageContainer.appendChild(image);
|
||||
currentIndex++;
|
||||
|
||||
// Add a click event to each image to show the next one
|
||||
image.addEventListener("click", showNextImage);
|
||||
}
|
||||
if (currentIndex === 13 && !creditsDisplayed) {
|
||||
startText.style.display = "block"; // Show the text when all images are displayed.
|
||||
footer.style.display = "block"; // Show the footer text at the bottom
|
||||
creditsDisplayed = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize by clicking on the first image
|
||||
showNextImage();
|
||||
</script>
|
||||
</html>
|
||||