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

Improve header

pull/1/head
dugo3number2 2023-01-17 14:31:49 -06:00
parent 339e0a54ac
commit 6861c68426
2 changed files with 59 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
docs/assets/css/styles.css
View File

@ -2,9 +2,60 @@
body {
font-family: "Roboto", sans-serif;
}
header {
text-align: center;
}
header h1 {
display: inline-block;
padding: 10px;
}
nav {
display: inline-block;
padding: 10px;
}
nav ul, footer ul {
list-style: none;
display: inline-block;
padding: 0;
}
nav li, footer li {
display: inline-block;
padding: 0;
}
nav a {
color: #dddddd;
text-decoration: none;
padding: 10px;
background-color: #333333;
transition: color 750ms, background-color 750ms;
}
nav a:hover, nav a:focus {
color: #ffffff;
background-color: #555555;
}
main {
text-align: center;
}
.cover {
height: 100%;
padding: 25% 0px;
background-image: url("");
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
article {
text-align: left;
}

16
docs/index.html
View File

@ -5,18 +5,18 @@
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/movement.css">
</head>
<body data-m="blur" data-m-duration="1">
<header>
<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=""></a></li>
<li><a href=""></a></li>
<li><a href="">Conditions</a></li>
<li><a href="">About</a></li>
</ul>
</nav>
</header>
<main>
<main data-m="blur" data-m-duration="1">
<div class="cover">
<h1>Lorem ipsum</h1>
</div>
@ -24,11 +24,11 @@
<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>
<footer data-m="bounce-up" data-m-delay="1" data-m-duration="1">
<ul>
<li><a href="#">Home</a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href="">Conditions</a></li>
<li><a href="">About</a></li>
</ul>
</footer>
</body>