Menü (Desktop) sieht aus wie in Vorlage
This commit is contained in:
seli
parent
8b3f4a1b63
commit
ce24b11d7a
2 changed files with 57 additions and 41 deletions
46
css/main.css
46
css/main.css
|
|
@ -1,42 +1,54 @@
|
|||
/* Add a black background color to the top navigation */
|
||||
.topnav {
|
||||
padding: 2px 125px;
|
||||
background: linear-gradient(to bottom, lightgrey, white);
|
||||
overflow: hidden;
|
||||
border: 1px solid lightgrey;
|
||||
}
|
||||
|
||||
.topnav ul, .topnav li {
|
||||
list-style: none;
|
||||
}
|
||||
.topnav ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.topnav li {
|
||||
margin: 5px;
|
||||
.topnav .wambo { /* der bereich der den content hält : brauchen wir für die flexbox*/
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pic{
|
||||
display: block;
|
||||
.topnav .pic-wrapper, .topnav a {
|
||||
height: 75px;
|
||||
line-height: 75px;
|
||||
}
|
||||
|
||||
.pic:hover {
|
||||
transform: translateY(-80px);
|
||||
/* geht auch ohne .topnav .pic-wrapper {
|
||||
overflow: hidden;
|
||||
}*/
|
||||
.topnav a {
|
||||
display: block;
|
||||
padding: 0px 15px;
|
||||
transition: 0.5s all ease;
|
||||
padding-top: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.topnav a:hover {
|
||||
background: lightgrey;
|
||||
|
||||
.icon {
|
||||
padding: 16px;
|
||||
}
|
||||
.topnav .pic-wrapper {
|
||||
margin-right: 15px; /* abstand zu <ul> / links */
|
||||
}
|
||||
.topnav .pic-wrapper:hover img {
|
||||
margin-top: -80px;
|
||||
}
|
||||
/* das <li> */
|
||||
.topnav .icon {
|
||||
display: block;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 14px;
|
||||
border-left: 1px solid lightgrey;
|
||||
}
|
||||
|
||||
.icon:hover {
|
||||
background: linear-gradient(to top, grey, white);
|
||||
|
||||
}
|
||||
|
||||
.lastBorder {
|
||||
border-right: 1px solid lightgrey;
|
||||
}
|
||||
|
|
@ -56,7 +68,7 @@ h1 {
|
|||
margin: 20px 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 30px;
|
||||
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.text {
|
||||
|
|
|
|||
52
index.html
52
index.html
|
|
@ -11,36 +11,40 @@
|
|||
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
|
||||
<script src="js/table.js"></script>
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns"
|
||||
crossorigin="anonymous">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="topnav">
|
||||
<ul>
|
||||
<li class="pic">
|
||||
<img src="resources/world_data_logo_v1.png">
|
||||
</li>
|
||||
<li class="icon">
|
||||
<a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A1 - Table</a>
|
||||
</li>
|
||||
<li class="icon">
|
||||
<a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A2 - Parse</a>
|
||||
</li>
|
||||
<li class="icon">
|
||||
<a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A2 - Save</a>
|
||||
</li>
|
||||
<li class="icon">
|
||||
<a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A2 - Print</a>
|
||||
</li>
|
||||
<li class="icon">
|
||||
<a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A3 - REST</a>
|
||||
</li>
|
||||
<li class="icon lastBorder">
|
||||
<a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A4 - Vis</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="page">
|
||||
<div class="wambo">
|
||||
<div class="pic-wrapper">
|
||||
<img src="resources/world_data_logo_v1.png">
|
||||
</div>
|
||||
<ul>
|
||||
<li class="icon">
|
||||
<a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A1 - Table</a>
|
||||
</li>
|
||||
<li class="icon">
|
||||
<a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A2 - Parse</a>
|
||||
</li>
|
||||
<li class="icon">
|
||||
<a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A2 - Save</a>
|
||||
</li>
|
||||
<li class="icon">
|
||||
<a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A2 - Print</a>
|
||||
</li>
|
||||
<li class="icon">
|
||||
<a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A3 - REST</a>
|
||||
</li>
|
||||
<li class="icon lastBorder">
|
||||
<a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A4 - Vis</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="page">
|
||||
|
|
|
|||
Loading…
Reference in a new issue