Setup
This commit is contained in:
Anna-Sara Sélea
commit
3f07b49b40
11 changed files with 280 additions and 0 deletions
5
Dockerfile
Normal file
5
Dockerfile
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
FROM php:8.2-apache
|
||||||
|
|
||||||
|
COPY . /var/www/html/
|
||||||
|
RUN chown -R www-data:www-data /var/www/html
|
||||||
|
EXPOSE 80
|
||||||
188
css/style.css
Normal file
188
css/style.css
Normal file
|
|
@ -0,0 +1,188 @@
|
||||||
|
html {
|
||||||
|
margin: 0;
|
||||||
|
padding:0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
position: relative;
|
||||||
|
height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
width: 90%;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.places {
|
||||||
|
font-size: 40px;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.places:after {
|
||||||
|
display: block;
|
||||||
|
content: "Viskafors";
|
||||||
|
/* animation-duration = number of keyframes * duration per keyframe */
|
||||||
|
animation: change-text 15s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes change-text {
|
||||||
|
0% {
|
||||||
|
content: "Viskafors";
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
content: "Rydboholm";
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
content: "Svaneholm";
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
content: "Kinnarumma";
|
||||||
|
}
|
||||||
|
80% {
|
||||||
|
content: "Seglora";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main.info-main {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-first-div {
|
||||||
|
background: #092626;
|
||||||
|
background: linear-gradient(0deg, rgba(9, 38, 38, 1) 0%, rgba(20, 52, 66, 1) 64%, rgba(59, 98, 161, 1) 100%);
|
||||||
|
height: 300px;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-bottom: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-second-div {
|
||||||
|
min-height: 400px;
|
||||||
|
padding-top: 150px;
|
||||||
|
margin-top: -150px;
|
||||||
|
z-index: 2;
|
||||||
|
background-color: #fff;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-clip-path: polygon(50% 17%, 100% 0, 100% 84%, 50% 100%, 0 84%, 0 0);
|
||||||
|
clip-path: polygon(50% 17%, 100% 0, 100% 84%, 100% 100%, 0 100%, 0 0);
|
||||||
|
-webkit-background-size: cover;
|
||||||
|
-moz-background-size: cover;
|
||||||
|
-o-background-size: cover;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-second-div-inner-container {
|
||||||
|
width: 90%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-second-div-inner-container a {
|
||||||
|
margin-top: 30px;
|
||||||
|
align-items: center;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border: 0 solid #E2E8F0;
|
||||||
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: #1A202C;
|
||||||
|
display: inline-flex;
|
||||||
|
font-family: Inter, sans-serif;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
height: 56px;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: 24px;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
padding: 24px;
|
||||||
|
text-decoration: none;
|
||||||
|
width: auto;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
touch-action: manipulation;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer.footer-info {
|
||||||
|
position: unset;
|
||||||
|
bottom: unset;
|
||||||
|
right: unset;
|
||||||
|
left: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-text {
|
||||||
|
padding: 10px 0;
|
||||||
|
background-color: #092626;
|
||||||
|
color: white;
|
||||||
|
width: 100%;
|
||||||
|
margin-top:50px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a {
|
||||||
|
margin-top: 30px;
|
||||||
|
align-items: center;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border: 0 solid #E2E8F0;
|
||||||
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: #1A202C;
|
||||||
|
display: inline-flex;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
height: 56px;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: 24px;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
padding: 24px;
|
||||||
|
text-decoration: none;
|
||||||
|
width: auto;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
touch-action: manipulation;
|
||||||
|
}
|
||||||
10
docker-compose.yml
Normal file
10
docker-compose.yml
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
services:
|
||||||
|
php-app:
|
||||||
|
build: .
|
||||||
|
ports:
|
||||||
|
- "8080:80"
|
||||||
|
volumes:
|
||||||
|
- .:/var/www/html
|
||||||
|
environment:
|
||||||
|
- APACHE_RUN_USER=www-data
|
||||||
|
- APACHE_RUN_GROUP=www-data
|
||||||
29
index.php
Normal file
29
index.php
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="sv">
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<?php
|
||||||
|
$dir = 'pages/*.html';
|
||||||
|
$files = glob($dir);
|
||||||
|
|
||||||
|
if(empty($files)) {
|
||||||
|
die("Error: No HTML files found in /pages directory");
|
||||||
|
}
|
||||||
|
|
||||||
|
$randomPage = $files[array_rand($files)];
|
||||||
|
|
||||||
|
echo file_get_contents($randomPage);
|
||||||
|
?>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<a href="/info.php">Vad är detta för nåt?</a>
|
||||||
|
<div class="footer-text">
|
||||||
|
vBytes | vbytes.se
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
42
info.php
Normal file
42
info.php
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="sv">
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main class="info-main">
|
||||||
|
<div class="info-first-div">
|
||||||
|
|
||||||
|
<h1>vBytes <br> ♥</h1>
|
||||||
|
<p class="places"></p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="info-second-div">
|
||||||
|
<div class="info-second-div-inner-container">
|
||||||
|
<h2>
|
||||||
|
Vad är detta för nåt?
|
||||||
|
</h2>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>
|
||||||
|
Lorem ipsum dolor
|
||||||
|
</h2>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer class="footer-info">
|
||||||
|
<a href="/index.php">Klicka för att bli glad</a>
|
||||||
|
<div class="footer-text">
|
||||||
|
vBytes | vbytes.se
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1
pages/1.html
Normal file
1
pages/1.html
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<div>Hej från 1.html</div>
|
||||||
1
pages/2.html
Normal file
1
pages/2.html
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<div>Hej från 2.html</div>
|
||||||
1
pages/3.html
Normal file
1
pages/3.html
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<div>Hej från 3.html</div>
|
||||||
1
pages/4.html
Normal file
1
pages/4.html
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<div>Hej från 4.html</div>
|
||||||
1
pages/5.html
Normal file
1
pages/5.html
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<div>Hej från 5.html</div>
|
||||||
1
pages/6.html
Normal file
1
pages/6.html
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<div>Hej från 6.html</div>
|
||||||
Loading…
Reference in a new issue