Fix with demo
This commit is contained in:
Anna-Sara Sélea
parent
0a00793b8b
commit
85a042e783
4 changed files with 26 additions and 278 deletions
221
css/style.css
221
css/style.css
|
|
@ -1,221 +0,0 @@
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-container {
|
|
||||||
max-width: 1920px;
|
|
||||||
margin: 0 auto;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, minmax(250px, 1fr));
|
|
||||||
gap: 15px;
|
|
||||||
padding: 20px;
|
|
||||||
grid-template-rows: 300px;
|
|
||||||
|
|
||||||
@media screen and (min-width: 1440px) {
|
|
||||||
grid-template-columns: repeat(4, minmax(250px, 1fr));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-item {
|
|
||||||
height: 300px;
|
|
||||||
width: auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
p {
|
|
||||||
height: 10%;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 90%;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
42
info.php
42
info.php
|
|
@ -1,42 +0,0 @@
|
||||||
<!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>
|
|
||||||
15
pages/1.html
15
pages/1.html
|
|
@ -1,15 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="sv">
|
|
||||||
<head>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<main>
|
|
||||||
<div>Hej från 1.html</div>
|
|
||||||
</main>
|
|
||||||
<footer>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
26
pages/demo.html
Normal file
26
pages/demo.html
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="sv">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
</head>
|
||||||
|
<body style="background-color: lightyellow; text-align: center; font-family: sans-serif; padding: 50px 20px;">
|
||||||
|
|
||||||
|
<h1 style="color: orange; font-size: 50px; margin-bottom: 10px;">
|
||||||
|
Du är en stjärna!
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p style="color: hotpink; font-size: 25px;">
|
||||||
|
Kom ihåg att du är viktig och att du gör världen bättre!
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<img src="/img/1.webp" style="width: 100%; max-width: 400px; border: 8px solid pink; margin-bottom: 50px;">
|
||||||
|
|
||||||
|
<div style="background-color: white; margin: 0 auto; padding: 40px; border-radius: 50px; text-align: center; max-width: 700px; border: 8px solid #ffeb3b;">
|
||||||
|
<h2 style="color: #ff4081; font-size: 38px; margin-bottom: 10px;"> Dagens utmaning</h2>
|
||||||
|
<p style="font-size: 1.5rem; color: mediumpurple;">
|
||||||
|
Säg något snällt till en kompis!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in a new issue