add variables, refaktoring
This commit is contained in:
parent
6a9d16028d
commit
dcb53cd8f8
3
CSS/Block/footer.css
Normal file
3
CSS/Block/footer.css
Normal file
@ -0,0 +1,3 @@
|
||||
footer{
|
||||
background: var(--fullblock);
|
||||
}
|
||||
63
CSS/Block/header.css
Normal file
63
CSS/Block/header.css
Normal file
@ -0,0 +1,63 @@
|
||||
header {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
background: var(--fullblock);
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
nav li {
|
||||
float: left;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
nav li a {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
border: 1px solid #4d4d4d;
|
||||
background-color: #4d4d4d;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
margin: 5px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
nav li a:hover {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
#metanavi {
|
||||
color: #4d4d4d;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#metanavi a {
|
||||
background: #09add0;
|
||||
border: none;
|
||||
width: 100px;
|
||||
margin: 0 5px 0 5px;
|
||||
float: right;
|
||||
padding: 2px;
|
||||
border-radius: 5px;
|
||||
color:#fff;
|
||||
cursor:pointer;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#metanavi a:hover {
|
||||
background: orange;
|
||||
}
|
||||
7
CSS/Element/logo.scss
Normal file
7
CSS/Element/logo.scss
Normal file
@ -0,0 +1,7 @@
|
||||
.logo{
|
||||
font-size: var(--font-size-logo);
|
||||
span{
|
||||
color: var(--brand-primary);
|
||||
font-size: var(--font-size-logo);
|
||||
}
|
||||
}
|
||||
@ -1,19 +1,27 @@
|
||||
@import url(variables.css);
|
||||
@import url(Block/header.css);
|
||||
@import url(Block/footer.css);
|
||||
@import url(Element/logo.scss);
|
||||
|
||||
*, *:before, *:after {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
|
||||
body {
|
||||
background-color: #ffffff;
|
||||
background-color: var(--brand-background);
|
||||
color: #666;
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 10px;
|
||||
color: #4d4d4d;
|
||||
font-size: 30px;
|
||||
color: var(--brand-white);
|
||||
font-size: var(--font-size-title-h1);
|
||||
}
|
||||
|
||||
h1 span {
|
||||
@ -21,9 +29,10 @@ h1 span {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
h2 {
|
||||
color: orange;
|
||||
padding: 10px 0 0 10px;
|
||||
}
|
||||
|
||||
main {
|
||||
@ -32,9 +41,8 @@ main {
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
max-width: 600px;
|
||||
max-width: 90%;
|
||||
margin: 0 auto;
|
||||
background-color: #4d4d4d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@ -54,70 +62,6 @@ main {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
nav li {
|
||||
float: left;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
nav li a {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
border: 1px solid #4d4d4d;
|
||||
background-color: #4d4d4d;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
margin: 5px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
nav li a:hover {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
background: white;
|
||||
top: 0px;
|
||||
width: 600px;
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
#metanavi {
|
||||
color: #4d4d4d;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#metanavi a {
|
||||
background: #09add0;
|
||||
border: none;
|
||||
width: 100px;
|
||||
margin: 0 5px 0 5px;
|
||||
float: right;
|
||||
padding: 2px;
|
||||
border-radius: 5px;
|
||||
color:#fff;
|
||||
cursor:pointer;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#metanavi a:hover {
|
||||
background: orange;
|
||||
}
|
||||
|
||||
.articleImg {
|
||||
width: 100%;
|
||||
border: 2px solid lightskyblue;
|
||||
@ -200,3 +144,14 @@ form select {
|
||||
font-size: 18px;
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
.d-flex-between{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hover:hover{
|
||||
opacity: .75;
|
||||
text-decoration: none;
|
||||
}
|
||||
300
CSS/style_.css
300
CSS/style_.css
@ -1,300 +0,0 @@
|
||||
/*
|
||||
To change this license header, choose License Headers in Project Properties.
|
||||
To change this template file, choose Tools | Templates
|
||||
and open the template in the editor.
|
||||
*/
|
||||
/*
|
||||
Created on : 01.04.2016, 15:39:10
|
||||
Author : reich
|
||||
*/
|
||||
|
||||
*, *:before, *:after {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
#wrapper {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background-color: #4d4d4d;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 10px;
|
||||
color: #4d4d4d;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
h1 span {
|
||||
/*color: #09add0;*/
|
||||
color: orange;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
nav li {
|
||||
float: left;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
nav li a {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
border: 1px solid #4d4d4d;
|
||||
background-color: #4d4d4d;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
margin: 5px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
nav li a:hover {
|
||||
background-color: lightskyblue;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
background: white;
|
||||
top: 0px;
|
||||
margin-left: -10px;
|
||||
width: 600px;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-top: 145px;
|
||||
}
|
||||
|
||||
.nav_back {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.articleImg {
|
||||
width: 200px;
|
||||
float: left;
|
||||
border: 2px solid lightskyblue;
|
||||
padding: 5px;
|
||||
margin: 5px 10px 5px 5px;
|
||||
|
||||
}
|
||||
|
||||
.articleInfo {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
label {
|
||||
width: 80px;
|
||||
display: inline-block;
|
||||
margin: 5px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
label.errorMsg {
|
||||
width: 380px;
|
||||
display: inline-block;
|
||||
margin: 5px;
|
||||
vertical-align: top;
|
||||
text-align: right;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
width: 100px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
#entry {
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
#metanavi {
|
||||
color: #4d4d4d;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#metanavi a {
|
||||
background: #09add0;
|
||||
border: none;
|
||||
width: 100px;
|
||||
margin: 0 5px 0 5px;
|
||||
float: right;
|
||||
padding: 2px;
|
||||
border-radius: 5px;
|
||||
color:#fff;
|
||||
cursor:pointer;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#metanavi a:hover {
|
||||
background: orange;
|
||||
}
|
||||
|
||||
#signup form {
|
||||
padding: 20px 0 60px;
|
||||
}
|
||||
|
||||
#signup p {
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
#signup {
|
||||
margin: auto;
|
||||
width: 450px;
|
||||
}
|
||||
|
||||
#signup ol {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#signup li {
|
||||
margin: 0 0 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#signup label {
|
||||
width: 150px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
text-align: right;
|
||||
padding-right: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
#signup span {
|
||||
margin-top: 10px;
|
||||
width: 400px;
|
||||
color: orange;
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#signup input {
|
||||
display: inline-block;
|
||||
width: 250px;
|
||||
border: 1px solid #aaa;
|
||||
padding: 6px 10px 6px 6px;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#signup input[type="submit"]{
|
||||
background: #09add0;
|
||||
border:none;
|
||||
width:180px;
|
||||
margin-left: 230px;
|
||||
padding:5px;
|
||||
border-radius:5px;
|
||||
color:#fff;
|
||||
font-weight:bold;
|
||||
cursor:pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#signup input[type="submit"]:hover {
|
||||
background: orange;
|
||||
}
|
||||
|
||||
#signup label.errorMsg {
|
||||
width: 400px;
|
||||
padding:5px 5px 5px 0;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.autherIcons i {
|
||||
margin: 0 5px 0 5px;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.autherIcons i:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/*** Formulare ***/
|
||||
|
||||
form {
|
||||
width: 440px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
label {
|
||||
width: 120px;
|
||||
display: inline-block;
|
||||
margin: 5px 15px 10px 0;
|
||||
vertical-align: top;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
label.errorMsg {
|
||||
width: 420px;
|
||||
display: inline-block;
|
||||
margin: 0 5px 15px 0;
|
||||
vertical-align: top;
|
||||
text-align: right;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
width: 100px;
|
||||
margin-left: 330px;
|
||||
}
|
||||
|
||||
form textarea {
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
form select {
|
||||
width: 300px;
|
||||
}
|
||||
22
CSS/variables.css
Normal file
22
CSS/variables.css
Normal file
@ -0,0 +1,22 @@
|
||||
:root {
|
||||
/* Colors*/
|
||||
--brand-primary: #EB8202;
|
||||
--brand-background: #201911;
|
||||
--brand-white: #ffffff;
|
||||
--fullblock: darkblue;
|
||||
--input-placeholder: #998E82;
|
||||
|
||||
/*Fonts*/
|
||||
--font-family-main: font-family: "Inter", sans-serif;
|
||||
--font-family-headline: "Source Serif 4", serif;
|
||||
|
||||
/* Font-size*/
|
||||
--font-size-title-h1: 62px;
|
||||
--font-size-logo: 36px;
|
||||
--font-size-text: 24px;
|
||||
--font-size-smalltext: 18px;
|
||||
|
||||
/*Font-Weight*/
|
||||
--font-weight-semibold: 600;
|
||||
|
||||
}
|
||||
@ -1,5 +1,11 @@
|
||||
|
||||
</main>
|
||||
</div>
|
||||
<footer>
|
||||
<div id="wrapper">
|
||||
<div class="d-flex-between">
|
||||
<h3 class="logo">bib<span>course</span></h1>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,18 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>VR Contact</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" rel="stylesheet">
|
||||
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div id="wrapper">
|
||||
<nav>
|
||||
<div class="d-flex-between">
|
||||
<h3 class="logo">bib<span>course</span></h1>
|
||||
<div id="metanavi">
|
||||
<a href="#">Anmelden</a>
|
||||
</div>
|
||||
<h1><span>V</span>irtual <span>R</span>evolution</h1>
|
||||
</div>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="?controller=Welcome&do=showWelcome">Willkommen</a></li>
|
||||
<li><a href="#">Projekte</a></li>
|
||||
@ -21,5 +29,7 @@
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
<div id="wrapper">
|
||||
<main>
|
||||
Loading…
x
Reference in New Issue
Block a user