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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
docs/assets/css/styles.css
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;
}

BIN
docs/assets/img/background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 975 KiB

BIN
docs/assets/img/william-warby-ld4wZGqlLF4-unsplash-min.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.1 MiB

32
docs/index.html
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>