Projekt initialize
This commit is contained in:
202
CSS/style.css
Normal file
202
CSS/style.css
Normal file
@@ -0,0 +1,202 @@
|
||||
*, *:before, *:after {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #ffffff;
|
||||
color: #666;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 10px;
|
||||
color: #4d4d4d;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
h1 span {
|
||||
color: orange;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: orange;
|
||||
padding: 10px 0 0 10px;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-top: 135px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background-color: #4d4d4d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.msg {
|
||||
text-align: center;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.msg a {
|
||||
text-decoration: none;
|
||||
color: #09add0;
|
||||
|
||||
}
|
||||
|
||||
.msg a:hover {
|
||||
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;
|
||||
padding: 5px;
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
|
||||
.welcomeImg {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.articleInfo {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*** 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;
|
||||
}
|
||||
/*** Loesung Workshop-Seite ***/
|
||||
|
||||
.textContent {
|
||||
padding: 0 10px 0 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 529px) {
|
||||
.textContent {
|
||||
padding: 15px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.event h3 {
|
||||
margin: 15px 0 5px 0;
|
||||
font-size: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.orange {
|
||||
color: orange;
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
300
CSS/style_.css
Normal file
300
CSS/style_.css
Normal file
@@ -0,0 +1,300 @@
|
||||
/*
|
||||
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;
|
||||
}
|
||||
66
CSS/style_columns.css
Normal file
66
CSS/style_columns.css
Normal file
@@ -0,0 +1,66 @@
|
||||
/*
|
||||
Created on : 04.01.2018, 04:54:54
|
||||
Author : reich
|
||||
*/
|
||||
|
||||
/*** 12 spaltiges Grid mit Flexboxen ***/
|
||||
|
||||
/*** Container ***/
|
||||
.row {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/*** Spaltendefinitionen Smartphone Ansicht ***/
|
||||
@media (max-width: 529px) {
|
||||
.col-s-12 {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
/*** Loesung Workshop-Seite ***/
|
||||
.textContent {
|
||||
padding: 15px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*** Spaltendefinitionen Tablet Ansicht ***/
|
||||
@media (min-width: 530px) {
|
||||
.col-m-1 {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
.col-m-4 {
|
||||
flex: 0 0 33.3333333%;
|
||||
}
|
||||
.col-m-6 {
|
||||
flex: 0 0 50%;
|
||||
}
|
||||
.col-m-12 {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/*** Spaltendefinitionen Desktop Ansicht ***/
|
||||
@media (min-width: 800px) {
|
||||
.col-1 {
|
||||
flex: 0 0 8.3333333%;
|
||||
}
|
||||
.col-3 {
|
||||
flex: 0 0 25%;
|
||||
}
|
||||
.col-4 {
|
||||
flex: 0 0 33.3333333%;
|
||||
}
|
||||
.col-5 {
|
||||
flex: 0 0 41.6666667%;
|
||||
}
|
||||
.col-6 {
|
||||
flex: 0 0 50%;
|
||||
}
|
||||
.col-8 {
|
||||
flex: 0 0 66.66666667%;
|
||||
}
|
||||
.col-12 {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user