diff --git a/CSS/Block/footer.css b/CSS/Block/footer.css new file mode 100644 index 0000000..acfc3b5 --- /dev/null +++ b/CSS/Block/footer.css @@ -0,0 +1,3 @@ +footer{ + background: var(--fullblock); +} \ No newline at end of file diff --git a/CSS/Block/header.css b/CSS/Block/header.css new file mode 100644 index 0000000..54ac0e9 --- /dev/null +++ b/CSS/Block/header.css @@ -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; +} \ No newline at end of file diff --git a/CSS/Element/logo.scss b/CSS/Element/logo.scss new file mode 100644 index 0000000..bfc608d --- /dev/null +++ b/CSS/Element/logo.scss @@ -0,0 +1,7 @@ +.logo{ + font-size: var(--font-size-logo); + span{ + color: var(--brand-primary); + font-size: var(--font-size-logo); + } +} \ No newline at end of file diff --git a/CSS/style.css b/CSS/style.css index 26c92db..641e880 100644 --- a/CSS/style.css +++ b/CSS/style.css @@ -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; @@ -199,4 +143,15 @@ form select { display: block; 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; } \ No newline at end of file diff --git a/CSS/style_.css b/CSS/style_.css index 83160e3..e69de29 100644 --- a/CSS/style_.css +++ b/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; -} \ No newline at end of file diff --git a/CSS/variables.css b/CSS/variables.css new file mode 100644 index 0000000..9192d74 --- /dev/null +++ b/CSS/variables.css @@ -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; + +} \ No newline at end of file diff --git a/Views/footer.phtml b/Views/footer.phtml index 2f43e1a..981a4af 100644 --- a/Views/footer.phtml +++ b/Views/footer.phtml @@ -1,5 +1,11 @@ - + diff --git a/Views/header.phtml b/Views/header.phtml index 18ac6f4..810074f 100644 --- a/Views/header.phtml +++ b/Views/header.phtml @@ -1,25 +1,35 @@ - - VR Contact - - - - - + + + VR Contact + + + + + + + + + +
- - + +
+
+
\ No newline at end of file