소스 검색

update styling

tomekk 4 년 전
부모
커밋
ad7f36a9ed
9개의 변경된 파일328개의 추가작업 그리고 89개의 파일을 삭제
  1. 13 11
      _inc/_sectionArticleNew.php
  2. 33 21
      _inc/_sectionArticleNewText.php
  3. 41 0
      _inc/_sectionArticleNewTextIcon.php
  4. 1 1
      _inc/_sectionCardsNew.php
  5. 102 22
      assets/css/style.css
  6. 0 0
      assets/css/style.css.map
  7. 4 0
      assets/scss/_custom.scss
  8. 103 17
      assets/scss/_project.scss
  9. 31 17
      index.php

+ 13 - 11
_inc/_sectionArticleNew.php

@@ -1,14 +1,16 @@
-<a href="#" class="row align-items-center ch-ggs-web-suite-article-landing">
-	<div class="col-md-5 order-md-1">
-		<img src="//placehold.it/900x600" class="img-fluid"/>	
-	</div>
-	<div class="col-md-7">
-		<div class="ch-ggs-web-suite-landing-article-content">
-			<h3 class="mt-0 ch-ggs-web-suite-landing-article-title">Der erste Werkzeugkasten</h3>
-			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-			<div class="row">
-				<div class="col-md-6 col-lg-5">
-					<div class="btn btn-block btn-primary">start now</div>
+<a href="#" class="ch-ggs-web-suite-article-landing">
+	<div class="row ">
+		<div class="col-lg-5 order-lg-1">
+			<img src="//placehold.it/900x600" class="img-fluid mb-5 mb-lg-0"/>	
+		</div>
+		<div class="col-lg-7">
+			<div class="ch-ggs-web-suite-landing-article-content">
+				<h3 class="mt-0 ch-ggs-web-suite-landing-article-title">HAZMAt Suite. Die Lösung für Ihre Gefahrstoff- und Gefahrgut-Fragen</h3>
+				<p class="lead">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+				<div class="row">
+					<div class="col-md-6 col-lg-5">
+						<div class="btn btn-lg btn-block btn-primary">start now</div>
+					</div>
 				</div>
 			</div>
 		</div>

+ 33 - 21
_inc/_sectionArticleNewText.php

@@ -1,27 +1,39 @@
-<a href="#" class="row ch-ggs-web-suite-article-landing">
-	<div class="col-md-7">
-		<div class="ch-ggs-web-suite-landing-article-content">
-			<h3 class="mt-0 ch-ggs-web-suite-landing-article-title">Der erste Werkzeugkasten</h3>
-			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-			<div class="row d-none d-md-flex">
-				<div class="col-md-6 col-lg-5">
-					<div class="btn btn-block btn-primary">start now</div>
+<a href="#" class="ch-ggs-web-suite-article-landing">
+	<div class="row">
+		<div class="col-md-7">
+			<div class="ch-ggs-web-suite-landing-article-content">
+				
+				<h3 class="mt-0 ch-ggs-web-suite-landing-article-title">Der erste Werkzeugkasten</h3>
+				<p class="lead">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd</p>
+				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+				<div class="row d-none d-md-flex">
+					<div class="col-md-6 col-lg-5">
+						<div class="btn btn-block btn-primary">start now</div>
+					</div>
 				</div>
 			</div>
 		</div>
-	</div>
-	<div class="col-md-5">
-		<div class="ch-ggs-web-suite-landing-article-content-aside">
-			<ul class="ch-ggs-web-suite-facts-list">
-				<li class="ch-ggs-web-suite-facts-list-item">6 Tools,</li> 
-				<li class="ch-ggs-web-suite-facts-list-item">1284 Funktionen,</li> 
-				<li class="ch-ggs-web-suite-facts-list-item">374 Etiketten,</li> 
-				<li class="ch-ggs-web-suite-facts-list-item">3029 Vorlagen</li>
-				<li class="ch-ggs-web-suite-facts-list-item ch-ggs-web-suite-facts-list-item-important">1 Hazmat Suite</li>
-			</ul>
-			<div class="row d-md-none">
-				<div class="col-md-6 col-lg-5">
-					<div class="btn btn-block btn-primary">start now</div>
+		<div class="offset-md-1 col-md-4">
+			<div class="ch-ggs-web-suite-landing-article-content-aside">
+				<ul class="ch-ggs-web-suite-facts-list">
+					<li class="ch-ggs-web-suite-facts-list-item">6 Tools,</li> 
+					<li class="ch-ggs-web-suite-facts-list-item">1284 Funktionen,</li> 
+					<li class="ch-ggs-web-suite-facts-list-item">374 Etiketten,</li> 
+					<li class="ch-ggs-web-suite-facts-list-item">3029 Vorlagen</li>
+					<li class="ch-ggs-web-suite-facts-list-item ch-ggs-web-suite-facts-list-item-important">1 Hazmat Suite</li>
+				</ul>
+				<h3>Funktionen & Vorteile</h3>
+				<ul class="ch-ggs-web-suite-simple-list">
+					<li>Super schnell</li> 
+					<li>Zuverlässig und einfach</li> 
+					<li>Sicher dank SSL</li> 
+					<li>3029 Vorlagen</li>
+					<li>International anerkannt</li>
+				</ul>
+				<div class="row d-md-none">
+					<div class="col-md-6 col-lg-5">
+						<div class="btn btn-lg btn-block btn-primary">start now</div>
+					</div>
 				</div>
 			</div>
 		</div>

+ 41 - 0
_inc/_sectionArticleNewTextIcon.php

@@ -0,0 +1,41 @@
+<a href="#" class="ch-ggs-web-suite-article-landing">
+	<img src="assets/img/logo-hazmat-suite.png" alt="Logo HazmatSuite" width="297" height="60" class="img-fluid ch-ggs-web-suite-article-landing-image">
+	<div class="row">
+		<div class="col-md-7">
+			<div class="ch-ggs-web-suite-landing-article-content">
+				<h3 class="mt-0 ch-ggs-web-suite-landing-article-title">Der erste Werkzeugkasten</h3>
+				<p class="lead">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd</p>
+				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+				<div class="row d-none d-md-flex">
+					<div class="col-md-6 col-lg-5">
+						<div class="btn btn-lg btn-block btn-primary">start now</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="offset-md-1 col-md-4">
+			<div class="ch-ggs-web-suite-landing-article-content-aside">
+				<ul class="ch-ggs-web-suite-facts-list">
+					<li class="ch-ggs-web-suite-facts-list-item">6 Tools,</li> 
+					<li class="ch-ggs-web-suite-facts-list-item">1284 Funktionen,</li> 
+					<li class="ch-ggs-web-suite-facts-list-item">374 Etiketten,</li> 
+					<li class="ch-ggs-web-suite-facts-list-item">3029 Vorlagen</li>
+					<li class="ch-ggs-web-suite-facts-list-item ch-ggs-web-suite-facts-list-item-important">1 Hazmat Suite</li>
+				</ul>
+				<h3>Funktionen & Vorteile</h3>
+				<ul class="ch-ggs-web-suite-simple-list">
+					<li>Super schnell</li> 
+					<li>Zuverlässig und einfach</li> 
+					<li>Sicher dank SSL</li> 
+					<li>3029 Vorlagen</li>
+					<li>International anerkannt</li>
+				</ul>
+				<div class="row d-md-none">
+					<div class="col-md-6 col-lg-5">
+						<div class="btn btn-lg btn-block btn-primary">start now</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</a>

+ 1 - 1
_inc/_sectionCardsNew.php

@@ -18,7 +18,7 @@
 	
 <div class="container">
 	<h2 class="ch-ggs-web-suite-landing-section-title">Die Tools der HazmatSuite auf einen Blick</h2>
-	<p>Starten Sie jetzt durch mit der HazmatSuite! So schnell und effizient haben Sie noch nie mit Gefahrstoffen und Gefahrgut gearbeitet. Sparen Sie nicht nur Zeit, sondern auch Nerven für die Suche nach passender Software.</p>
+	<p class="lead">Starten Sie jetzt durch mit der HazmatSuite! So schnell und effizient haben Sie noch nie mit Gefahrstoffen und Gefahrgut gearbeitet. Sparen Sie nicht nur Zeit, sondern auch Nerven für die Suche nach passender Software.</p>
 	<div class="ch-ggs-web-suite-card-hover-group">
 		<div class="row ch-ggs-web-suite-card-hover-holder">
 			<?php foreach ($box as $key => $value): ?>

+ 102 - 22
assets/css/style.css

@@ -7,8 +7,8 @@
  */
 @font-face {
   font-family: "icomoon";
-  src: url("../fonts/icomoon.eot?u6kkyu8");
-  src: url("../fonts/icomoon.eot?u6kkyu8#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?u6kkyu8") format("truetype"), url("../fonts/icomoon.woff?u6kkyu8") format("woff"), url("../fonts/icomoon.svg?u6kkyu8#icomoon") format("svg");
+  src: url("../fonts/icomoon.eot?u6kl0cl");
+  src: url("../fonts/icomoon.eot?u6kl0cl#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?u6kl0cl") format("truetype"), url("../fonts/icomoon.woff?u6kl0cl") format("woff"), url("../fonts/icomoon.svg?u6kl0cl#icomoon") format("svg");
   font-weight: normal;
   font-style: normal;
 }
@@ -9907,14 +9907,14 @@ h4 + hr {
   color: #990099;
 }
 .btn-white:hover {
-  color: #fff;
-  background-color: #990099;
-  border-color: #990099;
+  color: #212529;
+  background-color: #ececec;
+  border-color: #e6e6e6;
 }
 .btn-white:focus, .btn-white.focus {
-  color: #fff;
-  background-color: #990099;
-  border-color: #990099;
+  color: #212529;
+  background-color: #ececec;
+  border-color: #e6e6e6;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(222, 222, 223, 0.5);
 }
 .btn-white.disabled, .btn-white:disabled {
@@ -9931,6 +9931,13 @@ h4 + hr {
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.2rem rgba(222, 222, 223, 0.5);
 }
 
+.ch-ggs-web-suite-landing-section-hero .btn-white:hover,
+.ch-ggs-web-suite-landing-section-hero .btn-white:focus,
+.ch-ggs-web-suite-cta-box .btn-white:hover,
+.ch-ggs-web-suite-cta-box .btn-white:focus {
+  color: #990099;
+}
+
 .modal-dialog {
   max-width: 540px;
 }
@@ -10933,11 +10940,18 @@ a.ch-ggs-web-suite-icon-link {
   min-height: calc(100vh - 91px);
   background-image: linear-gradient(270deg, rgba(201, 85, 217, 0.3) 0%, #8D3E97 100%), url("../img//hero-xs.jpg");
   background-size: cover;
+  display: flex;
+  align-items: center;
 }
 
 .ch-ggs-web-suite-landing-section-title {
   font-size: 32px;
   display: flex;
+  font-weight: 700;
+  margin-bottom: 20px;
+}
+
+.ch-ggs-web-suite-landing-section-title-image {
   margin-bottom: 80px;
 }
 
@@ -10951,26 +10965,55 @@ a.ch-ggs-web-suite-icon-link {
 }
 
 .ch-ggs-web-suite-landing-hero-title {
-  font-size: 56px;
-  line-height: 1.418;
+  font-size: 52px;
+  font-size: 1.75rem;
+  font-size: clamp(1.75rem, 4vw, 3.5rem);
+  font-weight: 700;
+  line-height: 1.35;
   text-align: left;
   border-bottom: 0;
+  padding-bottom: 0;
+  margin-bottom: 20px;
 }
 
 .ch-ggs-web-suite-article-landing {
-  margin-bottom: 200px;
   color: #212529;
 }
 .ch-ggs-web-suite-article-landing:hover, .ch-ggs-web-suite-article-landing:focus {
   text-decoration: none;
 }
 
+.ch-ggs-web-suite-article-landing-image {
+  margin-bottom: 80px;
+}
+
+.ch-ggs-web-suite-article-landing {
+  display: block;
+}
+
+.ch-ggs-web-suite-article-landing:not(:last-child) {
+  margin-bottom: 180px;
+}
+
+.ch-ggs-web-suite-article-landing .lead {
+  font-size: 20px;
+}
+
 .ch-ggs-web-suite-landing-section-dark .ch-ggs-web-suite-article-landing {
   color: #fff;
 }
 
+.ch-ggs-web-suite-landing-article-content-aside {
+  color: #5C005C;
+}
+
+.ch-ggs-web-suite-landing-section-dark .ch-ggs-web-suite-landing-article-content-aside {
+  color: #D196D9;
+}
+
 .ch-ggs-web-suite-landing-hero-text {
   font-size: 22px;
+  margin-bottom: 80px;
 }
 
 .ch-ggs-web-suite-card-hover-text {
@@ -11027,11 +11070,24 @@ a.ch-ggs-web-suite-icon-link {
 
 .ch-ggs-web-suite-landing-article-title {
   margin-top: 20px;
+  margin-bottom: 20px;
   font-size: 42px;
+  display: flex;
+  align-items: start;
+  gap: 30px;
 }
 
-.ch-ggs-web-suite-landing-article-content {
-  font-size: 22px;
+.ch-ggs-web-suite-article-landing {
+  font-size: 20px;
+}
+
+.ch-ggs-web-suite-simple-list {
+  padding-left: 22px;
+}
+@-moz-document url-prefix() {
+  .ch-ggs-web-suite-simple-list {
+    padding-left: 20px;
+  }
 }
 
 .ch-ggs-web-suite-facts-list {
@@ -11049,10 +11105,30 @@ a.ch-ggs-web-suite-icon-link {
   font-weight: bolder;
 }
 
-.ch-ggs-web-suite-landing-nav .nav-item > .nav-link.active {
+.ch-ggs-web-suite-landing-nav {
+  font-size: 1.125rem;
+}
+
+.ch-ggs-web-suite-landing-nav .nav-link .ifc {
+  transform: rotate(-90deg);
+  display: inline-block;
+}
+
+.ch-ggs-web-suite-landing-nav .nav-link.active {
   color: #990099;
 }
 
+.ch-ggs-web-suite-cta-box {
+  background: #990099;
+  color: #fff;
+  padding: 80px 60px;
+  display: block;
+}
+
+a.ch-ggs-web-suite-cta-box {
+  text-decoration: none;
+}
+
 @media (min-width: 576px) {
   .ch-ggs-web-suite-landing-section-hero {
     background-image: linear-gradient(270deg, rgba(201, 85, 217, 0.3) 0%, #8D3E97 100%), url("../img//hero-sm.jpg");
@@ -11087,19 +11163,13 @@ a.ch-ggs-web-suite-icon-link {
   .ch-ggs-web-suite-card-hover:hover .ch-ggs-web-suite-card-hover-link, .ch-ggs-web-suite-card-hover:focus .ch-ggs-web-suite-card-hover-link {
     opacity: 1;
   }
-}
-@media (min-width: 992px) {
-  .ch-ggs-web-suite-landing-section-hero {
-    min-height: calc(100vh - 98px);
-    background-image: linear-gradient(270deg, rgba(201, 85, 217, 0.3) 0%, #8D3E97 100%), url("../img//hero-lg.jpg");
-  }
 
   .ch-ggs-web-suite-landing-nav {
     position: sticky;
     z-index: 1;
     overflow: hidden;
     top: 0;
-    margin-top: -56px;
+    margin-top: -72px;
   }
   .ch-ggs-web-suite-landing-nav, .ch-ggs-web-suite-landing-nav a {
     color: #fff;
@@ -11119,7 +11189,7 @@ a.ch-ggs-web-suite-icon-link {
     transition: all 0.2s ease-in-out;
     transition-duration: 0.5s;
     transition-property: transform;
-    width: calc((100vw - 960px)/2);
+    width: calc((100vw - 720px)/2);
     transform: scaleX(0);
   }
   .ch-ggs-web-suite-landing-nav .container:before {
@@ -11136,6 +11206,16 @@ a.ch-ggs-web-suite-icon-link {
     transform: scaleX(1);
   }
 }
+@media (min-width: 992px) {
+  .ch-ggs-web-suite-landing-section-hero {
+    min-height: calc(100vh - 98px);
+    background-image: linear-gradient(270deg, rgba(201, 85, 217, 0.3) 0%, #8D3E97 100%), url("../img//hero-lg.jpg");
+  }
+
+  .ch-ggs-web-suite-landing-nav .container:before, .ch-ggs-web-suite-landing-nav .container:after {
+    width: calc((100vw - 960px)/2);
+  }
+}
 @media (min-width: 1200px) {
   .ch-ggs-web-suite-landing-section-hero {
     background-image: linear-gradient(270deg, rgba(201, 85, 217, 0.3) 0%, #8D3E97 100%), url("../img//hero-xl.jpg");

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 0
assets/css/style.css.map


+ 4 - 0
assets/scss/_custom.scss

@@ -128,6 +128,8 @@ $gray-lightest:             $antrazit08;
 $primary:             #990099;
 $primary-d-100:			#5C005C;
 $primary-d-200:			#250025;
+$primary-l-100:			#C955D9;
+$primary-l-200:			#D196D9;
 $secondary:             $antrazit60;
 
 $success:             #5cb85c;
@@ -246,6 +248,8 @@ $dropdown-link-active-color:        $primary;
 $dropdown-link-active-bg:          	transparent;
 
 
+$lead-font-size:                    1.25rem;
+
 
 @import "bootstrap/variables";
 

+ 103 - 17
assets/scss/_project.scss

@@ -105,10 +105,18 @@ h4 + hr {
 }
 
 .btn-white {
-	@include button-variant($white, $white, $primary, $primary);
+	@include button-variant($white, $white);
 	color: $primary;
 }
 
+.ch-ggs-web-suite-landing-section-hero,
+.ch-ggs-web-suite-cta-box {
+	.btn-white:hover,
+	.btn-white:focus {
+		color: $primary;
+	}
+}
+
 //modal
 .modal-dialog {
 	max-width: 540px;
@@ -1180,11 +1188,18 @@ a.ch-ggs-web-suite-icon-link {
 	min-height: calc(100vh - 91px);
 	background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-xs.jpg');
 	background-size: cover;
+	display: flex;
+	align-items: center;
 }
 
 .ch-ggs-web-suite-landing-section-title {
 	font-size: 32px;
 	display: flex;
+	font-weight: 700;
+	margin-bottom: 20px;
+}
+
+.ch-ggs-web-suite-landing-section-title-image {
 	margin-bottom: 80px;
 }
 
@@ -1198,28 +1213,57 @@ a.ch-ggs-web-suite-icon-link {
 }
 
 .ch-ggs-web-suite-landing-hero-title {
-	font-size: 56px;
-	line-height: 1.418;
+	font-size: 52px;
+	font-size: 1.75rem;
+    font-size: clamp(1.75rem, 4vw, 3.5rem);
+	font-weight: 700;
+	line-height: 1.35;
 	text-align: left;
 	border-bottom: 0;
+	padding-bottom: 0;
+	margin-bottom: 20px;
 }
 
 .ch-ggs-web-suite-article-landing {
-	margin-bottom: 200px;
 	color: $body-color;
-
+	
 	&:hover,
 	&:focus {
 		text-decoration: none;
 	}
 }
 
+.ch-ggs-web-suite-article-landing-image {
+	margin-bottom: 80px;
+}
+
+.ch-ggs-web-suite-article-landing {
+	display: block;
+}
+
+.ch-ggs-web-suite-article-landing:not(:last-child) {
+	margin-bottom: 180px;
+}
+
+.ch-ggs-web-suite-article-landing .lead {
+	font-size: 20px;
+}
+
 .ch-ggs-web-suite-landing-section-dark .ch-ggs-web-suite-article-landing {
 	color: $white;
 }
 
+.ch-ggs-web-suite-landing-article-content-aside {
+	color: $primary-d-100;
+}
+
+.ch-ggs-web-suite-landing-section-dark .ch-ggs-web-suite-landing-article-content-aside {
+	color: $primary-l-200;
+}
+
 .ch-ggs-web-suite-landing-hero-text {
 	font-size: 22px;
+	margin-bottom: 80px;
 }
 
 .ch-ggs-web-suite-card-hover-text {
@@ -1279,11 +1323,23 @@ a.ch-ggs-web-suite-icon-link {
 
 .ch-ggs-web-suite-landing-article-title {
 	margin-top: 20px;
+	margin-bottom: 20px;
 	font-size: 42px;
+	display: flex;
+	align-items: start;
+	gap: 30px;
 }
 
-.ch-ggs-web-suite-landing-article-content {
-	font-size: 22px;
+
+.ch-ggs-web-suite-article-landing {
+	font-size: 20px;
+}
+
+.ch-ggs-web-suite-simple-list {
+	padding-left: 22px;
+	@-moz-document url-prefix() {
+		padding-left: 20px;
+	}
 }
 
 .ch-ggs-web-suite-facts-list {
@@ -1292,6 +1348,7 @@ a.ch-ggs-web-suite-icon-link {
 	font-size: 22px;
 }
 
+
 .ch-ggs-web-suite-facts-list-item {
 	margin-bottom: 10px;
 }
@@ -1301,10 +1358,30 @@ a.ch-ggs-web-suite-icon-link {
 	font-weight: bolder;
 }
 
-.ch-ggs-web-suite-landing-nav .nav-item > .nav-link.active {
+.ch-ggs-web-suite-landing-nav {
+	font-size: 1.125rem;
+}
+
+.ch-ggs-web-suite-landing-nav .nav-link .ifc {
+	transform: rotate(-90deg);
+	display: inline-block;
+}
+
+.ch-ggs-web-suite-landing-nav .nav-link.active {
 	color: $primary;
 }
 
+.ch-ggs-web-suite-cta-box {
+	background: $primary;
+	color: $white;
+	padding: 80px 60px;
+	display: block;
+}
+
+a.ch-ggs-web-suite-cta-box {
+	text-decoration: none;
+}
+
 @include media-breakpoint-up(sm) {
 	.ch-ggs-web-suite-landing-section-hero {
 		background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-sm.jpg');
@@ -1345,20 +1422,13 @@ a.ch-ggs-web-suite-icon-link {
 			}
 		}
 	}
-}
-
-@include media-breakpoint-up(lg) {
-	.ch-ggs-web-suite-landing-section-hero {
-		min-height: calc(100vh - 98px);
-		background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-lg.jpg');
-	}
 
 	.ch-ggs-web-suite-landing-nav {
 		position: sticky;
 		z-index: 1;
 		overflow: hidden;
 		top: 0;
-		margin-top: -56px;
+		margin-top: -72px;
 		&,
 		& a {
 			color: $white;
@@ -1378,7 +1448,7 @@ a.ch-ggs-web-suite-icon-link {
 				transition: $transition-base;
 				transition-duration: 0.5s;
 				transition-property: transform;
-				width: calc((100vw - 960px)/2);
+				width: calc((100vw - 720px)/2);
 				transform: scaleX(0);
 			}
 
@@ -1400,6 +1470,22 @@ a.ch-ggs-web-suite-icon-link {
 	}
 }
 
+@include media-breakpoint-up(lg) {
+	.ch-ggs-web-suite-landing-section-hero {
+		min-height: calc(100vh - 98px);
+		background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-lg.jpg');
+	}
+
+	.ch-ggs-web-suite-landing-nav {
+		.container {
+			&:before,
+			&:after {
+				width: calc((100vw - 960px)/2);
+			}
+		}
+	}
+}
+
 @include media-breakpoint-up(xl) {
 	.ch-ggs-web-suite-landing-section-hero {
 		background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-xl.jpg');

+ 31 - 17
index.php

@@ -8,24 +8,26 @@
 		<div class="container">
 			<h1 class="ch-ggs-web-suite-landing-hero-title">Ihr Software-Werkzeugkasten für gefährliche Stoffe und Güter</h1>
 			<div class="ch-ggs-web-suite-common-content-holder">
-				<div class="ch-ggs-web-suite-landing-hero-text">
-					<p>
-						Die HazmatSuite stellt sowohl für Experten als auch für Einsteiger verschiedene Software-Tools im Umgang mit gefährlichen Stoffen und Gütern bereit.
-					</p>
-					<a href="#" class="btn btn-white">
-						Jetzt starten
-					</a>
+				<p class="ch-ggs-web-suite-landing-hero-text">
+					Die HazmatSuite stellt sowohl für Experten als auch für Einsteiger verschiedene Software-Tools im Umgang mit gefährlichen Stoffen und Gütern bereit.
+				</p>
+				<div class="row">
+					<div class="col-md-4 col-lg-3">
+						<a href="#" class="btn btn-lg btn-block btn-white">
+							Jetzt starten
+						</a>
+					</div>
 				</div>
 			</div>
 		</div>
 	</section>
-	<div id="ch-ggs-web-suite-landing-nav" class="ch-ggs-web-suite-landing-nav">
+	<div id="ch-ggs-web-suite-landing-nav" class="ch-ggs-web-suite-landing-nav d-none d-md-flex">
 		<div class="container">
-			<div class="navbar" id="navbar-spy-sections">
+			<div class="navbar p-0" id="navbar-spy-sections">
 				<ul class="navbar-nav flex-row">
-					<li id="ch-ggs-web-suite-nav-item-01" class="nav-item"><a href="#ch-ggs-web-suite-section-01" class="nav-link px-2">Überblick</a></li>
-					<li id="ch-ggs-web-suite-nav-item-02" class="nav-item"><a href="#ch-ggs-web-suite-section-02" class="nav-link px-2">Die <span class="upper">Hazmat</span> Suite</a></li>
-					<li id="ch-ggs-web-suite-nav-item-03" class="nav-item"><a href="#ch-ggs-web-suite-section-03" class="nav-link px-2">Die Tools</a></li>
+					<li id="ch-ggs-web-suite-nav-item-01" class="nav-item"><a href="#ch-ggs-web-suite-section-01" class="nav-link py-3 px-3 ml-n3">Überblick <i class="ifc ifc-chevron_down"></i></a></li>
+					<li id="ch-ggs-web-suite-nav-item-02" class="nav-item"><a href="#ch-ggs-web-suite-section-02" class="nav-link py-3 px-3">Die <span class="upper">Hazmat</span> Suite <i class="ifc ifc-chevron_down"></i></a></li>
+					<li id="ch-ggs-web-suite-nav-item-03" class="nav-item"><a href="#ch-ggs-web-suite-section-03" class="nav-link py-3 px-3">Die Tools <i class="ifc ifc-chevron_down"></i></a></li>
 				</ul>
 			</div>
 		</div>
@@ -35,18 +37,30 @@
 	</section>
 	<section id="ch-ggs-web-suite-section-02" class="ch-ggs-web-suite-landing-section ch-ggs-web-suite-landing-section-dark">
 		<div class="container">
-			<h2 class="ch-ggs-web-suite-landing-section-title"><i class="ch-ggs-web-suite-landing-section-title-icon ifc ifc-frontal-truck"></i> Hazmat Suite</h2>
+			<h2 class="ch-ggs-web-suite-landing-section-title ch-ggs-web-suite-landing-section-title-image">
+				<img src="assets/img/logo-hazmat-suite.png" alt="Logo HazmatSuite" width="297" height="60" class="img-fluid">
+				<span class="sr-only">Hazmat Suite</span>
+			</h2>
 			<?php include('_inc/_sectionArticleNew.php') ?>
 			<?php include('_inc/_sectionArticleNew.php') ?>
 			<?php include('_inc/_sectionArticleNewText.php') ?>
+			<a class="ch-ggs-web-suite-cta-box">
+				<h2>Jetzt Startguthaben sichern. Eine Suite, alle Tools.</h2>
+				<p>
+					Während andere noch überlegen, haben wir das Problem schon gelöst. Sie glauben uns nicht? Testen Sie die HazmatSuite und das Potential unserer Gefahrstoff- und Gefahrgut-Essentials.
+				</p>
+				<div class="row">
+					<div class="col-md-6 col-lg-5">
+						<div class="btn btn-lg btn-block btn-white">start now</div>
+					</div>
+				</div>
+			</a>
 		</div>
 	</section>
 	<section id="ch-ggs-web-suite-section-03" class="ch-ggs-web-suite-landing-section">
 		<div class="container">
-			<h2 class="ch-ggs-web-suite-landing-section-title"><i class="ch-ggs-web-suite-landing-section-title-icon ifc ifc-frontal-truck"></i> SmartIdentify</h2>
-			<?php include('_inc/_sectionArticleNew.php') ?>
-			<h2 class="ch-ggs-web-suite-landing-section-title"><i class="ch-ggs-web-suite-landing-section-title-icon ifc ifc-frontal-truck"></i> SmartLabel</h2>
-			<?php include('_inc/_sectionArticleNew.php') ?>
+			<?php include('_inc/_sectionArticleNewTextIcon.php') ?>
+			<?php include('_inc/_sectionArticleNewTextIcon.php') ?>
 		</div>
 	</section>
 </div>

이 변경점에서 너무 많은 파일들이 변경되어 몇몇 파일들은 표시되지 않았습니다.