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>
|
||||||