Finish site styling
parent
39b98bbc2c
commit
f62d8b7a42
|
|
@ -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>
|
||||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
body {
|
||||
font-family: "Roboto", sans-serif;
|
||||
background-color: #bbbbbb;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
@ -14,6 +15,8 @@ header {
|
|||
position: fixed;
|
||||
top: 10px;
|
||||
width: calc(100% - 60px);
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
|
|
@ -44,9 +47,10 @@ nav li, footer li {
|
|||
nav a {
|
||||
color: #dddddd;
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
padding: 20px;
|
||||
background-color: #333333;
|
||||
transition: color 750ms, background-color 750ms;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
nav a:hover, nav a:focus {
|
||||
|
|
@ -54,29 +58,9 @@ nav a:hover, nav a:focus {
|
|||
background-color: #555555;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@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%;
|
||||
}
|
||||
.current {
|
||||
color: #ffffff;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
main {
|
||||
|
|
@ -87,10 +71,60 @@ main {
|
|||
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 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
footer {
|
||||
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;
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
main {
|
||||
margin-top: 175px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 650px) {
|
||||
main {
|
||||
margin-top: 250px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +1,27 @@
|
|||
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() {
|
||||
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
|
||||
document.getElementsByTagName("header")[0].children[0].style.fontSize = "16px"
|
||||
} else {
|
||||
document.getElementsByTagName("header")[0].children[0].style.fontSize = "32px"
|
||||
}
|
||||
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
|
||||
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 {
|
||||
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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -4,25 +4,26 @@
|
|||
<head>
|
||||
<title>Work in progress</title>
|
||||
<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">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div data-m="drop" data-m-delay="1" data-m-duration="1.5" class="cover">
|
||||
<header data-m="scale" data-m-delay="2.5" data-m-duration="1">
|
||||
<h1>Work in progress</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="">Conditions</a></li>
|
||||
<li><a href="about">About</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<body data-m="drop" data-m-duration="1.5">
|
||||
<header data-m="scale" data-m-delay="1" data-m-duration="1">
|
||||
<h1>Work in progress</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#" class="current">Home</a></li>
|
||||
<li><a href="conditions">Conditions</a></li>
|
||||
<li><a href="about">About</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="cover">
|
||||
<h1 class="cover-tagline">Lorem ipsum</h1>
|
||||
</div>
|
||||
<main data-m="drop" data-m-duration="1">
|
||||
<main>
|
||||
<article>
|
||||
<h2>Lorem ipsum</h2>
|
||||
<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>
|
||||
</article>
|
||||
</main>
|
||||
<footer data-m="bounce-up" data-m-duration="1">
|
||||
<footer data-m="bounce-up" data-m-delay="1" duration="1">
|
||||
<ul>
|
||||
<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>
|
||||
</ul>
|
||||
</footer>
|
||||
|
|
|
|||
Loading…
Reference in New Issue