Header, Footer and ToTop-Button
This commit is contained in:
hoernschen
parent
d156ead8e0
commit
4ae49b6b0b
8 changed files with 384 additions and 4 deletions
3
.gitmodules
vendored
3
.gitmodules
vendored
|
|
@ -1,3 +0,0 @@
|
||||||
[submodule "Font-Awesome"]
|
|
||||||
path = Font-Awesome
|
|
||||||
url = https://github.com/FortAwesome/Font-Awesome.git
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
Subproject commit 57f1632d7303fbcd8974425882ffd9919fc4041b
|
|
||||||
38
css/footer.css
Normal file
38
css/footer.css
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
.footer {
|
||||||
|
margin: auto;
|
||||||
|
padding: 1.5rem;
|
||||||
|
text-align: center;
|
||||||
|
display: block;
|
||||||
|
background-color: #333;
|
||||||
|
color: #f2f2f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-media {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
font-size: 2em;
|
||||||
|
color: Tomato;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 1;
|
||||||
|
line-height: 32px;
|
||||||
|
padding: 0px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
width: 100%;
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
41
css/header.css
Normal file
41
css/header.css
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
.header {
|
||||||
|
margin: auto;
|
||||||
|
padding: 1.5rem;
|
||||||
|
padding-bottom: 0rem;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
width: 48pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-items {
|
||||||
|
padding-right: 1rem;
|
||||||
|
margin: auto;
|
||||||
|
margin-right: 0px;
|
||||||
|
display: flex;
|
||||||
|
float: right;
|
||||||
|
right: 0px;
|
||||||
|
align-items: right;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-item {
|
||||||
|
margin-left: 2.5rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-content {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
min-width: 160px;
|
||||||
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown:hover .dropdown-content {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
3
css/index.css
Normal file
3
css/index.css
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
body {
|
||||||
|
margin: 0px
|
||||||
|
}
|
||||||
31
css/totop.css
Normal file
31
css/totop.css
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
.totop {
|
||||||
|
display: inline-flex;
|
||||||
|
background-color: Tomato;
|
||||||
|
color: #f2f2f2;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 30px;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 30px;
|
||||||
|
right: 30px;
|
||||||
|
transition: background-color .3s;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.show {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hide {
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.totop:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
BIN
images/NEO Logo.png
Normal file
BIN
images/NEO Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
271
index.html
Normal file
271
index.html
Normal file
|
|
@ -0,0 +1,271 @@
|
||||||
|
<!-- Required styles for Material Web -->
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="css/index.css">
|
||||||
|
<link rel="stylesheet" href="css/header.css">
|
||||||
|
<link rel="stylesheet" href="css/footer.css">
|
||||||
|
<link rel="stylesheet" href="css/totop.css">
|
||||||
|
<script src="https://kit.fontawesome.com/7de2ddcd5c.js" crossorigin="anonymous"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header class="header">
|
||||||
|
<a href="#"><img class="logo" src="images/NEO Logo.png"></a>
|
||||||
|
<div class="header-items">
|
||||||
|
<a class="header-item" href="#">Über uns</a>
|
||||||
|
<a class="header-item" href="#">Blog</a>
|
||||||
|
<div class="header-item dropdown">
|
||||||
|
<button class="dropbtn">Portfolio
|
||||||
|
<i class="fas fa-caret-down"></i>
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-content">
|
||||||
|
<a href="#">Link 1</a>
|
||||||
|
<a href="#">Link 2</a>
|
||||||
|
<a href="#">Link 3</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- This example requires Tailwind CSS v2.0+ -->
|
||||||
|
<div class="relative bg-white overflow-hidden">
|
||||||
|
<div class="max-w-7xl mx-auto">
|
||||||
|
<div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
|
||||||
|
<div class="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
|
||||||
|
<div class="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
|
||||||
|
<div class="px-5 pt-4 flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="-mr-2">
|
||||||
|
<button type="button" class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
|
||||||
|
<span class="sr-only">Close main menu</span>
|
||||||
|
<!-- Heroicon name: x -->
|
||||||
|
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div role="menu" aria-orientation="vertical" aria-labelledby="main-menu">
|
||||||
|
<div class="px-2 pt-2 pb-3 space-y-1" role="none">
|
||||||
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50" role="menuitem">Product</a>
|
||||||
|
|
||||||
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50" role="menuitem">Features</a>
|
||||||
|
|
||||||
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50" role="menuitem">Marketplace</a>
|
||||||
|
|
||||||
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50" role="menuitem">Company</a>
|
||||||
|
</div>
|
||||||
|
<div role="none">
|
||||||
|
<a href="#" class="block w-full px-5 py-3 text-center font-medium text-indigo-600 bg-gray-50 hover:bg-gray-100" role="menuitem">
|
||||||
|
Log in
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
|
||||||
|
<div class="sm:text-center lg:text-left">
|
||||||
|
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
|
||||||
|
<span class="block xl:inline">Data to enrich your</span>
|
||||||
|
<span class="block text-indigo-600 xl:inline">online business</span>
|
||||||
|
</h1>
|
||||||
|
<p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
|
||||||
|
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.
|
||||||
|
</p>
|
||||||
|
<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
|
||||||
|
<div class="rounded-md shadow">
|
||||||
|
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10">
|
||||||
|
Get started
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="mt-3 sm:mt-0 sm:ml-3">
|
||||||
|
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10">
|
||||||
|
Live demo
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
|
||||||
|
<img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- This example requires Tailwind CSS v2.0+ -->
|
||||||
|
<div class="py-12 bg-white">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="lg:text-center">
|
||||||
|
<h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Transactions</h2>
|
||||||
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
|
||||||
|
A better way to send money
|
||||||
|
</p>
|
||||||
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
|
||||||
|
Lorem ipsum dolor sit amet consect adipisicing elit. Possimus magnam voluptatum cupiditate veritatis in accusamus quisquam.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-10">
|
||||||
|
<dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
|
||||||
|
<div class="flex">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
||||||
|
<!-- Heroicon name: globe-alt -->
|
||||||
|
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<dt class="text-lg leading-6 font-medium text-gray-900">
|
||||||
|
Competitive exchange rates
|
||||||
|
</dt>
|
||||||
|
<dd class="mt-2 text-base text-gray-500">
|
||||||
|
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
||||||
|
<!-- Heroicon name: scale -->
|
||||||
|
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>https://www.youtube.com/watch?v=jqTSAtU-HRA
|
||||||
|
<dt class="text-lg leading-6 font-medium text-gray-900">
|
||||||
|
No hidden fees
|
||||||
|
</dt>
|
||||||
|
<dd class="mt-2 text-base text-gray-500">
|
||||||
|
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
||||||
|
<!-- Heroicon name: lightning-bolt -->
|
||||||
|
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<dt class="text-lg leading-6 font-medium text-gray-900">
|
||||||
|
Transfers are instant
|
||||||
|
</dt>
|
||||||
|
<dd class="mt-2 text-base text-gray-500">
|
||||||
|
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
||||||
|
<!-- Heroicon name: annotation -->
|
||||||
|
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<dt class="text-lg leading-6 font-medium text-gray-900">
|
||||||
|
Mobile notifications
|
||||||
|
</dt>
|
||||||
|
<dd class="mt-2 text-base text-gray-500">
|
||||||
|
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- This example requires Tailwind CSS v2.0+ -->
|
||||||
|
<div class="bg-gray-50">
|
||||||
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
|
||||||
|
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
|
||||||
|
<span class="block">Ready to dive in?</span>
|
||||||
|
<span class="block text-indigo-600">Start your free trial today.</span>
|
||||||
|
</h2>
|
||||||
|
<div class="mt-8 lex lg:mt-0 lg:flex-shrink-0">
|
||||||
|
<div class="inline-flex rounded-md shadow">
|
||||||
|
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
|
||||||
|
Get started
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="ml-3 inline-flex rounded-md shadow">
|
||||||
|
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50">
|
||||||
|
Learn more
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="social-media">
|
||||||
|
<span>
|
||||||
|
<a href="#"><i href="#" class="fab fa-facebook"></i></a>
|
||||||
|
<a href="#"><i href="#" class="fab fa-instagram"></i></a>
|
||||||
|
<a href="#"><i href="#" class="fab fa-twitter"></i></a>
|
||||||
|
<a href="#"><i href="#" class="fab fa-youtube"></i></a>
|
||||||
|
<a href="#"><i href="#" class="fab fa-mastodon"></i></a>
|
||||||
|
<a href="#"><i href="#" class="fab fa-github"></i></a>
|
||||||
|
<a href="#"><i href="#" class="fab fa-lastfm"></i></a>
|
||||||
|
<a href="#"><i href="#" class="fab fa-linkedin"></i></a>
|
||||||
|
<a href="#"><i href="#" class="fas fa-rss-square"></i></a>
|
||||||
|
<a href="#"><i href="#" class="fas fa-link"></i></a>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<ul class="links">
|
||||||
|
<li class="link"><a href="#">Über uns</a></li>
|
||||||
|
<li class="link"><a href="#">Impressum</a></li>
|
||||||
|
<li class="link"><a href="#">Datenschutz</a></li>
|
||||||
|
<li class="link"><a href="#">Kontakt</a></li>
|
||||||
|
<li class="link"><a href="#">Jobs</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="copyright">
|
||||||
|
© 2020 <a href="https://nutfactory.org">Nutfactory</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<a class="totop hide" id="totop"><i href="#" class="fas fa-chevron-up"></i></a>
|
||||||
|
<script>
|
||||||
|
const scrollToTopButton = document.getElementById('totop');
|
||||||
|
|
||||||
|
const scrollFunc = () => {
|
||||||
|
let y = window.scrollY;
|
||||||
|
if (y > 0) {
|
||||||
|
scrollToTopButton.className = "totop show";
|
||||||
|
} else {
|
||||||
|
scrollToTopButton.className = "totop hide";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener("scroll", scrollFunc);
|
||||||
|
|
||||||
|
const scrollToTop = () => {
|
||||||
|
const c = document.documentElement.scrollTop || document.body.scrollTop;
|
||||||
|
if (c > 0) {
|
||||||
|
window.requestAnimationFrame(scrollToTop);
|
||||||
|
window.scrollTo(0, c - c / 10);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
scrollToTopButton.onclick = function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
scrollToTop();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
Reference in a new issue