Change header to be nicer

pull/1/head
dugo3number2 2023-01-17 15:43:05 -06:00
parent 6861c68426
commit 76409a4046
4 changed files with 58 additions and 22 deletions

View File

@ -2,18 +2,29 @@
body {
font-family: "Roboto", sans-serif;
margin: 0;
}
header {
text-align: center;
color: #000000;
background-color: #ffffff;
margin: 20px;
padding: 10px;
border-radius: 50px;
position: fixed;
top: 10px;
width: calc(100% - 60px);
transition: font-size 200ms;
}
header h1 {
display: inline-block;
text-align: left;
padding: 10px;
}
nav {
text-align: right;
display: inline-block;
padding: 10px;
}
@ -42,20 +53,43 @@ nav a:hover, nav a:focus {
background-color: #555555;
}
main {
text-align: center;
}
.cover {
height: 100%;
color: #ffffff;
text-align: center;
width: 100%;
padding: 25% 0px;
background-image: url("");
background-image: url("/assets/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 {
text-align: center;
margin: 20px;
padding: 25px;
background-color: #dddddd;
border-radius: 50px;
}
article {
text-align: left;
}
footer {
text-align: center;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 975 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.1 MiB

View File

@ -2,29 +2,31 @@
<html>
<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/movement.css">
</head>
<body>
<header data-m="bounce-down" data-m-delay="1" 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</a></li>
</ul>
</nav>
</header>
<main data-m="blur" data-m-duration="1">
<div class="cover">
<h1>Lorem ipsum</h1>
</div>
<div data-m="drop" data-m-delay="1" data-m-duration="1.5" class="cover">
<header data-m="bounce-down" 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</a></li>
</ul>
</nav>
</header>
<h1 class="cover-tagline">Lorem ipsum</h1>
</div>
<main data-m="drop" data-m-delay="2.5" data-m-duration="1">
<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>
</article>
</main>
<footer data-m="bounce-up" data-m-delay="1" data-m-duration="1">
<footer data-m="bounce-up" data-m-delay="3.5" data-m-duration="1">
<ul>
<li><a href="#">Home</a></li>
<li><a href="">Conditions</a></li>