DavidJentes
/
websitedesign2023
mirror of https://github.com/DavidJentes/websitedesign2023
1
0
Fork 0
Code

Finish site styling

pull/1/head
DavidDGTNT 2023-01-18 21:44:59 +00:00
parent 39b98bbc2c
commit f62d8b7a42
7 changed files with 245 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
docs/about/index.html Normal file
View File

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<title>Work in progress</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/css/pages.css">
<link rel="stylesheet" href="../assets/css/movement.css">
</head>
<body>
<header data-m="scale" data-m-duration="0.5">
<h1>Work in progress</h1>
<nav>
<ul>
<li><a href="..">Home</a></li>
<li><a href="../conditions">Conditions</a></li>
<li><a href="#" class="current">About</a></li>
</ul>
</nav>
</header>
<main data-m="drop" data-m-duration="0.5">
<h1>About</h1>
<article>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus id turpis vitae accumsan. Nulla
sodales elementum ipsum, sit amet ornare est congue at. Phasellus lacinia rhoncus felis id ultrices.
Nulla vitae tellus at ante sollicitudin porttitor et nec dolor. Duis pulvinar, eros a lobortis dictum,
dui lacus rutrum diam, dignissim hendrerit erat nunc fringilla nunc. Curabitur augue sapien, porta nec
congue sed, mollis nec ex. Phasellus ornare sem sapien, in consectetur ante porttitor eu. Donec tempor,
orci eu porta cursus, mi erat elementum dui, id eleifend neque orci quis mi. In hac habitasse platea
dictumst. Sed nisl eros, finibus eu velit a, mattis elementum tellus. Morbi sit amet sollicitudin arcu.
Aenean quis nisi dignissim, posuere turpis ac, accumsan mauris. Integer rhoncus dignissim diam a
lobortis. Suspendisse potenti. Nam aliquam nulla ipsum, eget cursus metus condimentum sed. Proin id
justo eget purus eleifend consectetur eget sed quam.</p>
<h2>Lorem ipsum</h2>
<p>Aliquam maximus lectus consectetur justo pellentesque, commodo cursus ante suscipit. Cras at arcu
feugiat, gravida justo sed, pretium nunc. Sed et sapien finibus, pulvinar erat a, molestie tortor.
Quisque et justo eget turpis sollicitudin laoreet in at risus. Ut feugiat molestie risus, vel imperdiet
odio ultrices eget. Nullam lacus nunc, venenatis ut pellentesque eget, ornare id quam. Donec a magna at
ipsum elementum tincidunt. Phasellus suscipit commodo vehicula. Fusce semper lacinia efficitur. Nam
euismod feugiat neque, a placerat neque vehicula in. Proin rutrum lobortis sagittis. Aenean consectetur
lorem nec urna ultrices, eget suscipit nibh tempor. Mauris mollis non est vitae sodales.</p>
</article>
</main>
<footer data-m="bounce-up" data-m-duration="0.5">
<ul>
<li><a href="..">Home</a></li>
<li><a href="../conditions">Conditions</a></li>
<li><a href="#">About</a></li>
</ul>
</footer>
<script src="../assets/js/scroll.js"></script>
</body>
</html>

25
docs/assets/css/home.css Normal file
View File

@ -0,0 +1,25 @@
.cover {
color: #ffffff;
text-align: center;
width: 100%;
padding: 25% 0px;
background-image: url("../img/background.png");
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
z-index: 10;
}
@media screen and (max-width: 850px) {
.cover-tagline {
margin: 25% 0;
}
}
@media screen and (max-width: 600px) {
.cover-tagline {
margin-top: 75%;
margin-bottom: 40%;
}
}

80
docs/assets/css/styles.css → docs/assets/css/main.css
View File

@ -2,6 +2,7 @@
body { body {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
background-color: #bbbbbb;
margin: 0; margin: 0;
} }
@ -14,6 +15,8 @@ header {
position: fixed; position: fixed;
top: 10px; top: 10px;
width: calc(100% - 60px); width: calc(100% - 60px);
text-align: center;
z-index: 10;
} }
header h1 { header h1 {
@ -44,9 +47,10 @@ nav li, footer li {
nav a { nav a {
color: #dddddd; color: #dddddd;
text-decoration: none; text-decoration: none;
padding: 10px; padding: 20px;
background-color: #333333; background-color: #333333;
transition: color 750ms, background-color 750ms; transition: color 750ms, background-color 750ms;
border-radius: 50px;
} }
nav a:hover, nav a:focus { nav a:hover, nav a:focus {
@ -54,29 +58,9 @@ nav a:hover, nav a:focus {
background-color: #555555; background-color: #555555;
} }
.cover { .current {
color: #ffffff; color: #ffffff;
text-align: center; background-color: #000000;
width: 100%;
padding: 25% 0px;
background-image: url("../img/background.png");
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
@media screen and (max-width: 850px) {
.cover-tagline {
margin: 25% 0;
}
}
@media screen and (max-width: 600px) {
.cover-tagline {
margin-top: 75%;
margin-bottom: 40%;
}
} }
main { main {
@ -87,6 +71,19 @@ main {
border-radius: 50px; border-radius: 50px;
} }
@media screen and (max-width: 650px) {
main {
margin-top: 250px;
}
}
@media screen and (max-width: 370px) {
header {
margin: 10px;
width: calc(100% - 39px);
}
}
article { article {
text-align: left; text-align: left;
} }
@ -94,3 +91,40 @@ article {
footer { footer {
text-align: center; text-align: center;
} }
footer a {
color: #000000;
text-decoration: none;
margin: 10px;
transition: color 500ms;
}
footer a:hover {
color: #444444;
}
::-webkit-scrollbar {
border-radius: 25px;
width: 12px;
overflow: overlay;
scrollbar-gutter: initial;
}
::-webkit-scrollbar-track {
visibility: hidden;
margin: 20px;
}
::-webkit-scrollbar-thumb {
border-radius: 25px;
border: 6px solid #544c4a;
background-color: #544c4a;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: #363636;
border: 0;
}

9
docs/assets/css/pages.css Normal file
View File

@ -0,0 +1,9 @@
main {
margin-top: 175px;
}
@media screen and (max-width: 650px) {
main {
margin-top: 250px;
}
}

20
docs/assets/js/scroll.js
View File

@ -2,10 +2,26 @@ window.onscroll = () => {
headerScroll() headerScroll()
} }
const header = document.getElementsByTagName("header")[0]
const headerText = document.getElementsByTagName("h1")[0]
const headerButtons = document.getElementsByTagName("ul")[0].children
function headerScroll() { function headerScroll() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) { if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementsByTagName("header")[0].children[0].style.fontSize = "16px" header.style.padding = "5px"
headerText.style.fontSize = "16px"
headerText.style.padding = "5px"
for (const button of headerButtons) {
button.style.fontSize = "12px"
button.children[0].style.padding = "15px"
}
} else { } else {
document.getElementsByTagName("header")[0].children[0].style.fontSize = "32px" header.style.padding = "10px"
headerText.style.fontSize = "32px"
headerText.style.padding = "10px"
for (const button of headerButtons) {
button.style.fontSize = "16px"
button.children[0].style.padding = "20px"
}
} }
} }

57
docs/conditions/index.html Normal file
View File

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<title>Work in progress</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/css/pages.css">
<link rel="stylesheet" href="../assets/css/movement.css">
</head>
<body>
<header data-m="scale" data-m-duration="0.5">
<h1>Work in progress</h1>
<nav>
<ul>
<li><a href="..">Home</a></li>
<li><a href="#" class="current">Conditions</a></li>
<li><a href="../about">About</a></li>
</ul>
</nav>
</header>
<main data-m="drop" data-m-duration="0.5">
<h1>Conditions</h1>
<article>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus id turpis vitae accumsan. Nulla
sodales elementum ipsum, sit amet ornare est congue at. Phasellus lacinia rhoncus felis id ultrices.
Nulla vitae tellus at ante sollicitudin porttitor et nec dolor. Duis pulvinar, eros a lobortis dictum,
dui lacus rutrum diam, dignissim hendrerit erat nunc fringilla nunc. Curabitur augue sapien, porta nec
congue sed, mollis nec ex. Phasellus ornare sem sapien, in consectetur ante porttitor eu. Donec tempor,
orci eu porta cursus, mi erat elementum dui, id eleifend neque orci quis mi. In hac habitasse platea
dictumst. Sed nisl eros, finibus eu velit a, mattis elementum tellus. Morbi sit amet sollicitudin arcu.
Aenean quis nisi dignissim, posuere turpis ac, accumsan mauris. Integer rhoncus dignissim diam a
lobortis. Suspendisse potenti. Nam aliquam nulla ipsum, eget cursus metus condimentum sed. Proin id
justo eget purus eleifend consectetur eget sed quam.</p>
<h2>Lorem ipsum</h2>
<p>Aliquam maximus lectus consectetur justo pellentesque, commodo cursus ante suscipit. Cras at arcu
feugiat, gravida justo sed, pretium nunc. Sed et sapien finibus, pulvinar erat a, molestie tortor.
Quisque et justo eget turpis sollicitudin laoreet in at risus. Ut feugiat molestie risus, vel imperdiet
odio ultrices eget. Nullam lacus nunc, venenatis ut pellentesque eget, ornare id quam. Donec a magna at
ipsum elementum tincidunt. Phasellus suscipit commodo vehicula. Fusce semper lacinia efficitur. Nam
euismod feugiat neque, a placerat neque vehicula in. Proin rutrum lobortis sagittis. Aenean consectetur
lorem nec urna ultrices, eget suscipit nibh tempor. Mauris mollis non est vitae sodales.</p>
</article>
</main>
<footer data-m="bounce-up" data-m-duration="0.5">
<ul>
<li><a href="..">Home</a></li>
<li><a href="#">Conditions</a></li>
<li><a href="../about">About</a></li>
</ul>
</footer>
<script src="../assets/js/scroll.js"></script>
</body>
</html>

19
docs/index.html
View File

@ -4,25 +4,26 @@
<head> <head>
<title>Work in progress</title> <title>Work in progress</title>
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="assets/css/styles.css"> <link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/home.css">
<link rel="stylesheet" href="assets/css/movement.css"> <link rel="stylesheet" href="assets/css/movement.css">
</head> </head>
<body> <body data-m="drop" data-m-duration="1.5">
<div data-m="drop" data-m-delay="1" data-m-duration="1.5" class="cover"> <header data-m="scale" data-m-delay="1" data-m-duration="1">
<header data-m="scale" data-m-delay="2.5" data-m-duration="1">
<h1>Work in progress</h1> <h1>Work in progress</h1>
<nav> <nav>
<ul> <ul>
<li><a href="#">Home</a></li> <li><a href="#" class="current">Home</a></li>
<li><a href="">Conditions</a></li> <li><a href="conditions">Conditions</a></li>
<li><a href="about">About</a></li> <li><a href="about">About</a></li>
</ul> </ul>
</nav> </nav>
</header> </header>
<div class="cover">
<h1 class="cover-tagline">Lorem ipsum</h1> <h1 class="cover-tagline">Lorem ipsum</h1>
</div> </div>
<main data-m="drop" data-m-duration="1"> <main>
<article> <article>
<h2>Lorem ipsum</h2> <h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus id turpis vitae accumsan. Nulla <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus id turpis vitae accumsan. Nulla
@ -45,10 +46,10 @@
lorem nec urna ultrices, eget suscipit nibh tempor. Mauris mollis non est vitae sodales.</p> lorem nec urna ultrices, eget suscipit nibh tempor. Mauris mollis non est vitae sodales.</p>
</article> </article>
</main> </main>
<footer data-m="bounce-up" data-m-duration="1"> <footer data-m="bounce-up" data-m-delay="1" duration="1">
<ul> <ul>
<li><a href="#">Home</a></li> <li><a href="#">Home</a></li>
<li><a href="">Conditions</a></li> <li><a href="conditions">Conditions</a></li>
<li><a href="about">About</a></li> <li><a href="about">About</a></li>
</ul> </ul>
</footer> </footer>