Skip to content

GitLab

Commit 8ce45e4a authored by Sven Schneider's avatar Sven Schneider
Browse files

update

parent e1c20344
Pipeline #4745 passed with stages
in 1 minute and 4 seconds
Hide whitespace changes
Inline Side-by-side
public/SCD/assets/css/style.css
View file @ 8ce45e4a
...@@ -5,2366 +5,2443 @@ ...@@ -5,2366 +5,2443 @@
* License: https://bootstrapmade.com/license/ * License: https://bootstrapmade.com/license/
*/ */
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# General # General
--------------------------------------------------------------*/ --------------------------------------------------------------*/
:root { :root {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
body { body {
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
color: #444444; color: #444444;
} }
a { a {
color: #4154f1; color: #4154f1;
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
color: #717ff5; color: #717ff5;
text-decoration: none; text-decoration: none;
} }
h1, h2, h3, h4, h5, h6 { h1,
font-family: "Nunito", sans-serif; h2,
h3,
h4,
h5,
h6 {
font-family: "Nunito", sans-serif;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Sections # Sections
--------------------------------------------------------------*/ --------------------------------------------------------------*/
section { section {
padding: 60px 0; padding: 60px 0;
overflow: hidden; overflow: hidden;
} }
.section-header { .section-header {
text-align: center; text-align: center;
padding-bottom: 40px; padding-bottom: 40px;
} }
.section-header h2 { .section-header h2 {
font-size: 13px; font-size: 13px;
letter-spacing: 1px; letter-spacing: 1px;
font-weight: 700; font-weight: 700;
margin: 0; margin: 0;
color: #4154f1; color: #4154f1;
text-transform: uppercase; text-transform: uppercase;
} }
.section-header p { .section-header p {
margin: 10px 0 0 0; margin: 10px 0 0 0;
padding: 0; padding: 0;
font-size: 38px; font-size: 38px;
line-height: 42px; line-height: 42px;
font-weight: 700; font-weight: 700;
color: #012970; color: #012970;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.section-header p { .section-header p {
font-size: 28px; font-size: 28px;
line-height: 32px; line-height: 32px;
} }
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Breadcrumbs # Breadcrumbs
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.breadcrumbs { .breadcrumbs {
padding: 15px 0; padding: 15px 0;
background: #012970; background: #012970;
min-height: 40px; min-height: 40px;
margin-top: 82px; margin-top: 82px;
color: #fff; color: #fff;
} }
@media (max-width: 992px) { @media (max-width: 992px) {
.breadcrumbs { .breadcrumbs {
margin-top: 57px; margin-top: 57px;
} }
} }
.breadcrumbs h2 { .breadcrumbs h2 {
font-size: 28px; font-size: 28px;
font-weight: 500; font-weight: 500;
} }
.breadcrumbs ol { .breadcrumbs ol {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
list-style: none; list-style: none;
padding: 0 0 10px 0; padding: 0 0 10px 0;
margin: 0; margin: 0;
font-size: 14px; font-size: 14px;
} }
.breadcrumbs ol a { .breadcrumbs ol a {
color: #fff; color: #fff;
transition: 0.3s; transition: 0.3s;
} }
.breadcrumbs ol a:hover { .breadcrumbs ol a:hover {
text-decoration: underline; text-decoration: underline;
} }
.breadcrumbs ol li + li { .breadcrumbs ol li+li {
padding-left: 10px; padding-left: 10px;
} }
.breadcrumbs ol li + li::before { .breadcrumbs ol li+li::before {
display: inline-block; display: inline-block;
padding-right: 10px; padding-right: 10px;
color: #8894f6; color: #8894f6;
content: "/"; content: "/";
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Back to top button # Back to top button
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.back-to-top { .back-to-top {
position: fixed; position: fixed;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
right: 15px; right: 15px;
bottom: 15px; bottom: 15px;
z-index: 99999; z-index: 99999;
background: #4154f1; background: #4154f1;
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 4px; border-radius: 4px;
transition: all 0.4s; transition: all 0.4s;
} }
.back-to-top i { .back-to-top i {
font-size: 24px; font-size: 24px;
color: #fff; color: #fff;
line-height: 0; line-height: 0;
} }
.back-to-top:hover { .back-to-top:hover {
background: #6776f4; background: #6776f4;
color: #fff; color: #fff;
} }
.back-to-top.active { .back-to-top.active {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Disable aos animation delay on mobile devices # Disable aos animation delay on mobile devices
--------------------------------------------------------------*/ --------------------------------------------------------------*/
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
[data-aos-delay] { [data-aos-delay] {
transition-delay: 0 !important; transition-delay: 0 !important;
} }
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Header # Header
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.header { .header {
transition: all 0.5s; transition: all 0.5s;
z-index: 997; z-index: 997;
padding: 20px 0; padding: 20px 0;
} }
.header.header-scrolled { .header.header-scrolled {
background: #fff; background: #fff;
padding: 15px 0; padding: 15px 0;
box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1); box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
} }
.header .logo { .header .logo {
line-height: 0; line-height: 0;
} }
.header .logo img { .header .logo img {
max-height: 40px; max-height: 40px;
margin-right: 6px; margin-right: 6px;
} }
.header .logo span { .header .logo span {
font-size: 30px; font-size: 30px;
font-weight: 700; font-weight: 700;
letter-spacing: 1px; letter-spacing: 1px;
color: #012970; color: #012970;
font-family: "Nunito", sans-serif; font-family: "Nunito", sans-serif;
margin-top: 3px; margin-top: 3px;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Navigation Menu # Navigation Menu
--------------------------------------------------------------*/ --------------------------------------------------------------*/
/** /**
* Desktop Navigation * Desktop Navigation
*/ */
.navbar { .navbar {
padding: 0; padding: 0;
} }
.navbar ul { .navbar ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
list-style: none; list-style: none;
align-items: center; align-items: center;
} }
.navbar li { .navbar li {
position: relative; position: relative;
} }
.navbar a, .navbar a:focus { .navbar a,
display: flex; .navbar a:focus {
align-items: center; display: flex;
justify-content: space-between; align-items: center;
padding: 10px 0 10px 30px; justify-content: space-between;
font-family: "Nunito", sans-serif; padding: 10px 0 10px 30px;
font-size: 16px; font-family: "Nunito", sans-serif;
font-weight: 700; font-size: 16px;
color: #013289; font-weight: 700;
white-space: nowrap; color: #013289;
transition: 0.3s; white-space: nowrap;
transition: 0.3s;
} }
.navbar a i, .navbar a:focus i { .navbar a i,
font-size: 12px; .navbar a:focus i {
line-height: 0; font-size: 12px;
margin-left: 5px; line-height: 0;
margin-left: 5px;
} }
.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a { .navbar a:hover,
color: #f1414a; .navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
color: #f1414a;
} }
.navbar .getstarted { .navbar .getstarted {
background: #f14141; background: #f14141;
padding: 8px 20px; padding: 8px 20px;
margin-left: 30px; margin-left: 30px;
border-radius: 4px; border-radius: 4px;
color: #fff; color: #fff;
} }
.navbar .getstarted:hover { .navbar .getstarted:hover {
color: #fff; color: #fff;
background: #f1414a; background: #f1414a;
} }
.navbar .dropdown ul { .navbar .dropdown ul {
display: block; display: block;
position: absolute; position: absolute;
left: 14px; left: 14px;
top: calc(100% + 30px); top: calc(100% + 30px);
margin: 0; margin: 0;
padding: 10px 0; padding: 10px 0;
z-index: 99; z-index: 99;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
background: #fff; background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: 0.3s; transition: 0.3s;
border-radius: 4px; border-radius: 4px;
} }
.navbar .dropdown ul li { .navbar .dropdown ul li {
min-width: 200px; min-width: 200px;
} }
.navbar .dropdown ul a { .navbar .dropdown ul a {
padding: 10px 20px; padding: 10px 20px;
font-size: 15px; font-size: 15px;
text-transform: none; text-transform: none;
font-weight: 600; font-weight: 600;
} }
.navbar .dropdown ul a i { .navbar .dropdown ul a i {
font-size: 12px; font-size: 12px;
} }
.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a { .navbar .dropdown ul a:hover,
color: #4154f1; .navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {
color: #4154f1;
} }
.navbar .dropdown:hover > ul { .navbar .dropdown:hover>ul {
opacity: 1; opacity: 1;
top: 100%; top: 100%;
visibility: visible; visibility: visible;
} }
.navbar .dropdown .dropdown ul { .navbar .dropdown .dropdown ul {
top: 0; top: 0;
left: calc(100% - 30px); left: calc(100% - 30px);
visibility: hidden; visibility: hidden;
} }
.navbar .dropdown .dropdown:hover > ul { .navbar .dropdown .dropdown:hover>ul {
opacity: 1; opacity: 1;
top: 0; top: 0;
left: 100%; left: 100%;
visibility: visible; visibility: visible;
} }
@media (max-width: 1366px) { @media (max-width: 1366px) {
.navbar .dropdown .dropdown ul { .navbar .dropdown .dropdown ul {
left: -90%; left: -90%;
} }
.navbar .dropdown .dropdown:hover > ul { .navbar .dropdown .dropdown:hover>ul {
left: -100%; left: -100%;
} }
} }
/** /**
* Mobile Navigation * Mobile Navigation
*/ */
.mobile-nav-toggle { .mobile-nav-toggle {
color: #012970; color: #FFF;
font-size: 28px; font-size: 28px;
cursor: pointer; cursor: pointer;
display: none; display: none;
line-height: 0; line-height: 0;
transition: 0.5s; transition: 0.5s;
} }
.mobile-nav-toggle.bi-x { .mobile-nav-toggle.bi-x {
color: #fff; color: #fff;
} }
@media (max-width: 991px) { @media (max-width: 991px) {
.mobile-nav-toggle { .mobile-nav-toggle {
display: block; display: block;
} }
.navbar ul { .navbar ul {
display: none; display: none;
} }
} }
.navbar-mobile { .navbar-mobile {
position: fixed; position: fixed;
overflow: hidden; overflow: hidden;
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
background: rgba(1, 22, 61, 0.9); background: rgba(1, 22, 61, 0.9);
transition: 0.3s; transition: 0.3s;
} }
.navbar-mobile .mobile-nav-toggle { .navbar-mobile .mobile-nav-toggle {
position: absolute; position: absolute;
top: 15px; top: 15px;
right: 15px; right: 15px;
} }
.navbar-mobile ul { .navbar-mobile ul {
display: block; display: block;
position: absolute; position: absolute;
top: 55px; top: 55px;
right: 15px; right: 15px;
bottom: 15px; bottom: 15px;
left: 15px; left: 15px;
padding: 10px 0; padding: 10px 0;
border-radius: 10px; border-radius: 10px;
background-color: #fff; background-color: #fff;
overflow-y: auto; overflow-y: auto;
transition: 0.3s; transition: 0.3s;
} }
.navbar-mobile a { .navbar-mobile a {
padding: 10px 20px; padding: 10px 20px;
font-size: 15px; font-size: 15px;
color: #012970; color: #012970;
} }
.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a { .navbar-mobile a:hover,
color: #4154f1; .navbar-mobile .active,
.navbar-mobile li:hover>a {
color: #4154f1;
} }
.navbar-mobile .getstarted { .navbar-mobile .getstarted {
margin: 15px; margin: 15px;
} }
.navbar-mobile .dropdown ul { .navbar-mobile .dropdown ul {
position: static; position: static;
display: none; display: none;
margin: 10px 20px; margin: 10px 20px;
padding: 10px 0; padding: 10px 0;
z-index: 99; z-index: 99;
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
background: #fff; background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
} }
.navbar-mobile .dropdown ul li { .navbar-mobile .dropdown ul li {
min-width: 200px; min-width: 200px;
} }
.navbar-mobile .dropdown ul a { .navbar-mobile .dropdown ul a {
padding: 10px 20px; padding: 10px 20px;
} }
.navbar-mobile .dropdown ul a i { .navbar-mobile .dropdown ul a i {
font-size: 12px; font-size: 12px;
} }
.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a { .navbar-mobile .dropdown ul a:hover,
color: #4154f1; .navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover>a {
color: #4154f1;
} }
.navbar-mobile .dropdown > .dropdown-active { .navbar-mobile .dropdown>.dropdown-active {
display: block; display: block;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Hero Section # Hero Section
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.hero { .hero {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
background: url(../img/hero-bg.png) top center no-repeat; background: url(../img/hero-bg.png) top center no-repeat;
background-size: cover; background-size: cover;
} }
.hero h1 { .hero h1 {
margin: 0; margin: 0;
font-size: 48px; font-size: 48px;
font-weight: 700; font-weight: 700;
color: #012970; color: #012970;
} }
.hero h2 { .hero h2 {
color: #444444; color: #444444;
margin: 15px 0 0 0; margin: 15px 0 0 0;
font-size: 26px; font-size: 26px;
} }
.hero .btn-get-started { .hero .btn-get-started {
margin-top: 30px; margin-top: 30px;
line-height: 0; line-height: 0;
padding: 15px 40px; padding: 15px 40px;
border-radius: 4px; border-radius: 4px;
transition: 0.5s; transition: 0.5s;
color: #fff; color: #fff;
background: #f14141; background: #f14141;
box-shadow: 0px 5px 30px rgba(65, 84, 241, 0.4); box-shadow: 0px 5px 30px rgba(65, 84, 241, 0.4);
} }
.hero .btn-get-started span { .hero .btn-get-started span {
font-family: "Nunito", sans-serif; font-family: "Nunito", sans-serif;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
letter-spacing: 1px; letter-spacing: 1px;
} }
.hero .btn-get-started i { .hero .btn-get-started i {
margin-left: 5px; margin-left: 5px;
font-size: 18px; font-size: 18px;
transition: 0.3s; transition: 0.3s;
} }
.hero .btn-get-started:hover i { .hero .btn-get-started:hover i {
transform: translateX(5px); transform: translateX(5px);
} }
.hero .hero-img { .hero .hero-img {
text-align: right; text-align: right;
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.hero { .hero {
background-attachment: fixed; background-attachment: fixed;
} }
} }
@media (max-width: 991px) { @media (max-width: 991px) {
.hero { .hero {
height: auto; height: auto;
padding: 120px 0 60px 0; padding: 120px 0 60px 0;
} }
.hero .hero-img { .hero .hero-img {
text-align: center; text-align: center;
margin-top: 80px; margin-top: 80px;
} }
.hero .hero-img img { .hero .hero-img img {
width: 80%; width: 80%;
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.hero { .hero {
text-align: center; text-align: center;
} }
.hero h1 { .hero h1 {
font-size: 32px; font-size: 32px;
} }
.hero h2 { .hero h2 {
font-size: 24px; font-size: 24px;
} }
.hero .hero-img img { .hero .hero-img img {
width: 100%; width: 100%;
} }
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Index Page # Index Page
--------------------------------------------------------------*/ --------------------------------------------------------------*/
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# About # About
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.about .content { .about .content {
background-color: #f6f9ff; background-color: #f6f9ff;
padding: 40px; padding: 40px;
} }
.about h3 { .about h3 {
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
color: #4154f1; color: #4154f1;
text-transform: uppercase; text-transform: uppercase;
} }
.about h2 { .about h2 {
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
color: #012970; color: #012970;
} }
.about p { .about p {
margin: 15px 0 30px 0; margin: 15px 0 30px 0;
line-height: 24px; line-height: 24px;
} }
.about .btn-read-more { .about .btn-read-more {
line-height: 0; line-height: 0;
padding: 15px 40px; padding: 15px 40px;
border-radius: 4px; border-radius: 4px;
transition: 0.5s; transition: 0.5s;
color: #fff; color: #fff;
background: #f14141; background: #f14141;
box-shadow: 0px 5px 25px rgba(65, 84, 241, 0.3); box-shadow: 0px 5px 25px rgba(65, 84, 241, 0.3);
} }
.about .btn-read-more span { .about .btn-read-more span {
font-family: "Nunito", sans-serif; font-family: "Nunito", sans-serif;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
letter-spacing: 1px; letter-spacing: 1px;
} }
.about .btn-read-more i { .about .btn-read-more i {
margin-left: 5px; margin-left: 5px;
font-size: 18px; font-size: 18px;
transition: 0.3s; transition: 0.3s;
} }
.about .btn-read-more:hover i { .about .btn-read-more:hover i {
transform: translateX(5px); transform: translateX(5px);
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Values # Values
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.values .box { .values .box {
padding: 30px; padding: 30px;
box-shadow: 0px 0 5px rgba(1, 41, 112, 0.08); box-shadow: 0px 0 5px rgba(1, 41, 112, 0.08);
text-align: center; text-align: center;
transition: 0.3s; transition: 0.3s;
height: 100%; height: 100%;
} }
.values .box img { .values .box img {
padding: 30px 50px; padding: 30px 50px;
transition: 0.5s; transition: 0.5s;
transform: scale(1.1); transform: scale(1.1);
} }
.values .box h3 { .values .box h3 {
font-size: 24px; font-size: 24px;
color: #012970; color: #012970;
font-weight: 700; font-weight: 700;
margin-bottom: 18px; margin-bottom: 18px;
} }
.values .box:hover { .values .box:hover {
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08); box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
} }
.values .box:hover img { .values .box:hover img {
transform: scale(1); transform: scale(1);
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Counts # Counts
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.counts { .counts {
padding: 70px 0 60px; padding: 70px 0 60px;
} }
.counts .count-box { .counts .count-box {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 30px; padding: 30px;
width: 100%; width: 100%;
background: #fff; background: #fff;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08); box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
} }
.counts .count-box i { .counts .count-box i {
font-size: 42px; font-size: 42px;
line-height: 0; line-height: 0;
margin-right: 20px; margin-right: 20px;
color: #4154f1; color: #4154f1;
} }
.counts .count-box span { .counts .count-box span {
font-size: 36px; font-size: 36px;
display: block; display: block;
font-weight: 600; font-weight: 600;
color: #0b198f; color: #0b198f;
} }
.counts .count-box p { .counts .count-box p {
padding: 0; padding: 0;
margin: 0; margin: 0;
font-family: "Nunito", sans-serif; font-family: "Nunito", sans-serif;
font-size: 14px; font-size: 14px;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Features # Features
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.features .feature-box { .features .feature-box {
padding: 24px 20px; padding: 24px 20px;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08); box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
transition: 0.3s; transition: 0.3s;
height: 100%; height: 100%;
} }
.features .feature-box h3 { .features .feature-box h3 {
font-size: 18px; font-size: 18px;
color: #012970; color: #012970;
font-weight: 700; font-weight: 700;
margin: 0; margin: 0;
} }
.features .feature-box i { .features .feature-box i {
line-height: 0; line-height: 0;
background: #ecf3ff; background: #ecf3ff;
padding: 4px; padding: 4px;
margin-right: 10px; margin-right: 10px;
font-size: 24px; font-size: 24px;
border-radius: 3px; border-radius: 3px;
transition: 0.3s; transition: 0.3s;
} }
.features .feature-box:hover i { .features .feature-box:hover i {
background: #4154f1; background: #4154f1;
color: #fff; color: #fff;
} }
.features .feture-tabs { .features .feture-tabs {
margin-top: 120px; margin-top: 120px;
} }
.features .feture-tabs h3 { .features .feture-tabs h3 {
color: #012970; color: #012970;
font-weight: 700; font-weight: 700;
font-size: 32px; font-size: 32px;
margin-bottom: 10px; margin-bottom: 10px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.features .feture-tabs h3 { .features .feture-tabs h3 {
font-size: 28px; font-size: 28px;
} }
} }
.features .feture-tabs .nav-pills { .features .feture-tabs .nav-pills {
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
.features .feture-tabs .nav-link { .features .feture-tabs .nav-link {
background: none; background: none;
text-transform: uppercase; text-transform: uppercase;
font-size: 15px; font-size: 15px;
font-weight: 600; font-weight: 600;
color: #012970; color: #012970;
padding: 12px 0; padding: 12px 0;
margin-right: 25px; margin-right: 25px;
margin-bottom: -2px; margin-bottom: -2px;
border-radius: 0; border-radius: 0;
} }
.features .feture-tabs .nav-link.active { .features .feture-tabs .nav-link.active {
color: #4154f1; color: #4154f1;
border-bottom: 3px solid #4154f1; border-bottom: 3px solid #4154f1;
} }
.features .feture-tabs .tab-content h4 { .features .feture-tabs .tab-content h4 {
font-size: 18px; font-size: 18px;
margin: 0; margin: 0;
font-weight: 700; font-weight: 700;
color: #012970; color: #012970;
} }
.features .feture-tabs .tab-content i { .features .feture-tabs .tab-content i {
font-size: 24px; font-size: 24px;
line-height: 0; line-height: 0;
margin-right: 8px; margin-right: 8px;
color: #4154f1; color: #4154f1;
} }
.features .feature-icons { .features .feature-icons {
margin-top: 120px; margin-top: 120px;
} }
.features .feature-icons h3 { .features .feature-icons h3 {
color: #012970; color: #012970;
font-weight: 700; font-weight: 700;
font-size: 32px; font-size: 32px;
margin-bottom: 20px; margin-bottom: 20px;
text-align: center; text-align: center;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.features .feature-icons h3 { .features .feature-icons h3 {
font-size: 28px; font-size: 28px;
} }
} }
.features .feature-icons .content .icon-box { .features .feature-icons .content .icon-box {
display: flex; display: flex;
} }
.features .feature-icons .content .icon-box h4 { .features .feature-icons .content .icon-box h4 {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
margin: 0 0 10px 0; margin: 0 0 10px 0;
color: #012970; color: #012970;
} }
.features .feature-icons .content .icon-box i { .features .feature-icons .content .icon-box i {
font-size: 44px; font-size: 44px;
line-height: 44px; line-height: 44px;
color: #0245bc; color: #0245bc;
margin-right: 15px; margin-right: 15px;
} }
.features .feature-icons .content .icon-box p { .features .feature-icons .content .icon-box p {
font-size: 15px; font-size: 15px;
color: #848484; color: #848484;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Services # Services
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.services .service-box { .services .service-box {
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08); box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
height: 100%; height: 100%;
padding: 60px 30px; padding: 60px 30px;
text-align: center; text-align: center;
transition: 0.3s; transition: 0.3s;
border-radius: 5px; border-radius: 5px;
} }
.services .service-box .icon { .services .service-box .icon {
font-size: 36px; font-size: 36px;
padding: 40px 20px; padding: 40px 20px;
border-radius: 4px; border-radius: 4px;
position: relative; position: relative;
margin-bottom: 25px; margin-bottom: 25px;
display: inline-block; display: inline-block;
line-height: 0; line-height: 0;
transition: 0.3s; transition: 0.3s;
} }
.services .service-box h3 { .services .service-box h3 {
color: #444444; color: #444444;
font-weight: 700; font-weight: 700;
} }
.services .service-box .read-more { .services .service-box .read-more {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
padding: 8px 20px; padding: 8px 20px;
} }
.services .service-box .read-more i { .services .service-box .read-more i {
line-height: 0; line-height: 0;
margin-left: 5px; margin-left: 5px;
font-size: 18px; font-size: 18px;
} }
.services .service-box.blue { .services .service-box.blue {
border-bottom: 3px solid #2db6fa; border-bottom: 3px solid #2db6fa;
} }
.services .service-box.blue .icon { .services .service-box.blue .icon {
color: #2db6fa; color: #2db6fa;
background: #dbf3fe; background: #dbf3fe;
} }
.services .service-box.blue .read-more { .services .service-box.blue .read-more {
color: #2db6fa; color: #2db6fa;
} }
.services .service-box.blue:hover { .services .service-box.blue:hover {
background: #2db6fa; background: #2db6fa;
} }
.services .service-box.orange { .services .service-box.orange {
border-bottom: 3px solid #f68c09; border-bottom: 3px solid #f68c09;
} }
.services .service-box.orange .icon { .services .service-box.orange .icon {
color: #f68c09; color: #f68c09;
background: #fde3c4; background: #fde3c4;
} }
.services .service-box.orange .read-more { .services .service-box.orange .read-more {
color: #f68c09; color: #f68c09;
} }
.services .service-box.orange:hover { .services .service-box.orange:hover {
background: #f68c09; background: #f68c09;
} }
.services .service-box.green { .services .service-box.green {
border-bottom: 3px solid #08da4e; border-bottom: 3px solid #08da4e;
} }
.services .service-box.green .icon { .services .service-box.green .icon {
color: #08da4e; color: #08da4e;
background: #cffddf; background: #cffddf;
} }
.services .service-box.green .read-more { .services .service-box.green .read-more {
color: #08da4e; color: #08da4e;
} }
.services .service-box.green:hover { .services .service-box.green:hover {
background: #08da4e; background: #08da4e;
} }
.services .service-box.red { .services .service-box.red {
border-bottom: 3px solid #e9222c; border-bottom: 3px solid #e9222c;
} }
.services .service-box.red .icon { .services .service-box.red .icon {
color: #e9222c; color: #e9222c;
background: #fef7f8; background: #fef7f8;
} }
.services .service-box.red .read-more { .services .service-box.red .read-more {
color: #e9222c; color: #e9222c;
} }
.services .service-box.red:hover { .services .service-box.red:hover {
background: #e9222c; background: #e9222c;
} }
.services .service-box.purple { .services .service-box.purple {
border-bottom: 3px solid #b50edf; border-bottom: 3px solid #b50edf;
} }
.services .service-box.purple .icon { .services .service-box.purple .icon {
color: #b50edf; color: #b50edf;
background: #f8e4fd; background: #f8e4fd;
} }
.services .service-box.purple .read-more { .services .service-box.purple .read-more {
color: #b50edf; color: #b50edf;
} }
.services .service-box.purple:hover { .services .service-box.purple:hover {
background: #b50edf; background: #b50edf;
} }
.services .service-box.pink { .services .service-box.pink {
border-bottom: 3px solid #f51f9c; border-bottom: 3px solid #f51f9c;
} }
.services .service-box.pink .icon { .services .service-box.pink .icon {
color: #f51f9c; color: #f51f9c;
background: #feecf7; background: #feecf7;
} }
.services .service-box.pink .read-more { .services .service-box.pink .read-more {
color: #f51f9c; color: #f51f9c;
} }
.services .service-box.pink:hover { .services .service-box.pink:hover {
background: #f51f9c; background: #f51f9c;
} }
.services .service-box:hover h3, .services .service-box:hover p, .services .service-box:hover .read-more { .services .service-box:hover h3,
color: #fff; .services .service-box:hover p,
.services .service-box:hover .read-more {
color: #fff;
} }
.services .service-box:hover .icon { .services .service-box:hover .icon {
background: #fff; background: #fff;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Pricing # Pricing
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.pricing .box { .pricing .box {
padding: 40px 20px; padding: 40px 20px;
background: #fff; background: #fff;
text-align: center; text-align: center;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08); box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
border-radius: 4px; border-radius: 4px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
transition: 0.3s; transition: 0.3s;
} }
.pricing .box:hover { .pricing .box:hover {
transform: scale(1.1); transform: scale(1.1);
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1); box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
} }
.pricing h3 { .pricing h3 {
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
margin-bottom: 15px; margin-bottom: 15px;
} }
.pricing .price { .pricing .price {
font-size: 36px; font-size: 36px;
color: #444444; color: #444444;
font-weight: 600; font-weight: 600;
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
} }
.pricing .price sup { .pricing .price sup {
font-size: 20px; font-size: 20px;
top: -15px; top: -15px;
left: -3px; left: -3px;
} }
.pricing .price span { .pricing .price span {
color: #bababa; color: #bababa;
font-size: 16px; font-size: 16px;
font-weight: 300; font-weight: 300;
} }
.pricing img { .pricing img {
padding: 30px 40px; padding: 30px 40px;
} }
.pricing ul { .pricing ul {
padding: 0; padding: 0;
list-style: none; list-style: none;
color: #444444; color: #444444;
text-align: center; text-align: center;
line-height: 26px; line-height: 26px;
font-size: 16px; font-size: 16px;
margin-bottom: 25px; margin-bottom: 25px;
} }
.pricing ul li { .pricing ul li {
padding-bottom: 10px; padding-bottom: 10px;
} }
.pricing ul .na { .pricing ul .na {
color: #ccc; color: #ccc;
text-decoration: line-through; text-decoration: line-through;
} }
.pricing .btn-buy { .pricing .btn-buy {
display: inline-block; display: inline-block;
padding: 8px 40px 10px 40px; padding: 8px 40px 10px 40px;
border-radius: 50px; border-radius: 50px;
color: #4154f1; color: #4154f1;
transition: none; transition: none;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
font-family: "Nunito", sans-serif; font-family: "Nunito", sans-serif;
font-weight: 600; font-weight: 600;
transition: 0.3s; transition: 0.3s;
border: 1px solid #4154f1; border: 1px solid #4154f1;
} }
.pricing .btn-buy:hover { .pricing .btn-buy:hover {
background: #4154f1; background: #4154f1;
color: #fff; color: #fff;
} }
.pricing .featured { .pricing .featured {
width: 200px; width: 200px;
position: absolute; position: absolute;
top: 18px; top: 18px;
right: -68px; right: -68px;
transform: rotate(45deg); transform: rotate(45deg);
z-index: 1; z-index: 1;
font-size: 14px; font-size: 14px;
padding: 1px 0 3px 0; padding: 1px 0 3px 0;
background: #4154f1; background: #4154f1;
color: #fff; color: #fff;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# F.A.Q # F.A.Q
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.faq .accordion-collapse { .faq .accordion-collapse {
border: 0; border: 0;
} }
.faq .accordion-button { .faq .accordion-button {
padding: 15px 15px 20px 0; padding: 15px 15px 20px 0;
font-weight: 600; font-weight: 600;
border: 0; border: 0;
font-size: 18px; font-size: 18px;
color: #444444; color: #444444;
text-align: left; text-align: left;
} }
.faq .accordion-button:focus { .faq .accordion-button:focus {
box-shadow: none; box-shadow: none;
} }
.faq .accordion-button:not(.collapsed) { .faq .accordion-button:not(.collapsed) {
background: none; background: none;
color: #4154f1; color: #4154f1;
border-bottom: 0; border-bottom: 0;
} }
.faq .accordion-body { .faq .accordion-body {
padding: 0 0 25px 0; padding: 0 0 25px 0;
border: 0; border: 0;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Portfolio # Portfolio
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.portfolio #portfolio-flters { .portfolio #portfolio-flters {
padding: 0; padding: 0;
margin: 0 auto 25px auto; margin: 0 auto 25px auto;
list-style: none; list-style: none;
text-align: center; text-align: center;
background: white; background: white;
border-radius: 50px; border-radius: 50px;
padding: 2px 15px; padding: 2px 15px;
} }
.portfolio #portfolio-flters li { .portfolio #portfolio-flters li {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
padding: 8px 20px 10px 20px; padding: 8px 20px 10px 20px;
font-size: 15px; font-size: 15px;
font-weight: 600; font-weight: 600;
line-height: 1; line-height: 1;
color: #444444; color: #444444;
margin: 0 4px 8px 4px; margin: 0 4px 8px 4px;
transition: 0.3s; transition: 0.3s;
border-radius: 50px; border-radius: 50px;
border: 1px solid #fff; border: 1px solid #fff;
} }
.portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active { .portfolio #portfolio-flters li:hover,
color: #4154f1; .portfolio #portfolio-flters li.filter-active {
border-color: #4154f1; color: #4154f1;
border-color: #4154f1;
} }
.portfolio #portfolio-flters li:last-child { .portfolio #portfolio-flters li:last-child {
margin-right: 0; margin-right: 0;
} }
.portfolio .portfolio-wrap { .portfolio .portfolio-wrap {
transition: 0.3s; transition: 0.3s;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
z-index: 1; z-index: 1;
background: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.75);
} }
.portfolio .portfolio-wrap::before { .portfolio .portfolio-wrap::before {
content: ""; content: "";
background: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.75);
position: absolute; position: absolute;
left: 30px; left: 30px;
right: 30px; right: 30px;
top: 30px; top: 30px;
bottom: 30px; bottom: 30px;
transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s;
z-index: 2; z-index: 2;
opacity: 0; opacity: 0;
} }
.portfolio .portfolio-wrap img { .portfolio .portfolio-wrap img {
transition: 1s; transition: 1s;
} }
.portfolio .portfolio-wrap .portfolio-info { .portfolio .portfolio-wrap .portfolio-info {
opacity: 0; opacity: 0;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
text-align: center; text-align: center;
z-index: 3; z-index: 3;
transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.portfolio .portfolio-wrap .portfolio-info::before { .portfolio .portfolio-wrap .portfolio-info::before {
display: block; display: block;
content: ""; content: "";
width: 48px; width: 48px;
height: 48px; height: 48px;
position: absolute; position: absolute;
top: 35px; top: 35px;
left: 35px; left: 35px;
border-top: 3px solid rgba(1, 41, 112, 0.2); border-top: 3px solid rgba(1, 41, 112, 0.2);
border-left: 3px solid rgba(1, 41, 112, 0.2); border-left: 3px solid rgba(1, 41, 112, 0.2);
transition: all 0.5s ease 0s; transition: all 0.5s ease 0s;
z-index: 9994; z-index: 9994;
} }
.portfolio .portfolio-wrap .portfolio-info::after { .portfolio .portfolio-wrap .portfolio-info::after {
display: block; display: block;
content: ""; content: "";
width: 48px; width: 48px;
height: 48px; height: 48px;
position: absolute; position: absolute;
bottom: 35px; bottom: 35px;
right: 35px; right: 35px;
border-bottom: 3px solid rgba(1, 41, 112, 0.2); border-bottom: 3px solid rgba(1, 41, 112, 0.2);
border-right: 3px solid rgba(1, 41, 112, 0.2); border-right: 3px solid rgba(1, 41, 112, 0.2);
transition: all 0.5s ease 0s; transition: all 0.5s ease 0s;
z-index: 9994; z-index: 9994;
} }
.portfolio .portfolio-wrap .portfolio-info h4 { .portfolio .portfolio-wrap .portfolio-info h4 {
font-size: 20px; font-size: 20px;
color: #012970; color: #012970;
font-weight: 700; font-weight: 700;
} }
.portfolio .portfolio-wrap .portfolio-info p { .portfolio .portfolio-wrap .portfolio-info p {
color: #012970; color: #012970;
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
text-transform: uppercase; text-transform: uppercase;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.portfolio .portfolio-wrap .portfolio-links { .portfolio .portfolio-wrap .portfolio-links {
text-align: center; text-align: center;
z-index: 4; z-index: 4;
} }
.portfolio .portfolio-wrap .portfolio-links a { .portfolio .portfolio-wrap .portfolio-links a {
color: #fff; color: #fff;
background: #4154f1; background: #4154f1;
margin: 10px 2px; margin: 10px 2px;
width: 36px; width: 36px;
height: 36px; height: 36px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 50%; border-radius: 50%;
transition: 0.3s; transition: 0.3s;
} }
.portfolio .portfolio-wrap .portfolio-links a i { .portfolio .portfolio-wrap .portfolio-links a i {
font-size: 24px; font-size: 24px;
line-height: 0; line-height: 0;
} }
.portfolio .portfolio-wrap .portfolio-links a:hover { .portfolio .portfolio-wrap .portfolio-links a:hover {
background: #5969f3; background: #5969f3;
} }
.portfolio .portfolio-wrap:hover img { .portfolio .portfolio-wrap:hover img {
transform: scale(1.1); transform: scale(1.1);
} }
.portfolio .portfolio-wrap:hover::before { .portfolio .portfolio-wrap:hover::before {
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
opacity: 1; opacity: 1;
} }
.portfolio .portfolio-wrap:hover .portfolio-info { .portfolio .portfolio-wrap:hover .portfolio-info {
opacity: 1; opacity: 1;
} }
.portfolio .portfolio-wrap:hover .portfolio-info::before { .portfolio .portfolio-wrap:hover .portfolio-info::before {
top: 15px; top: 15px;
left: 15px; left: 15px;
} }
.portfolio .portfolio-wrap:hover .portfolio-info::after { .portfolio .portfolio-wrap:hover .portfolio-info::after {
bottom: 15px; bottom: 15px;
right: 15px; right: 15px;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Portfolio Details # Portfolio Details
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.portfolio-details { .portfolio-details {
padding-top: 40px; padding-top: 40px;
} }
.portfolio-details .portfolio-details-slider img { .portfolio-details .portfolio-details-slider img {
width: 100%; width: 100%;
} }
.portfolio-details .portfolio-details-slider .swiper-pagination { .portfolio-details .portfolio-details-slider .swiper-pagination {
margin-top: 20px; margin-top: 20px;
position: relative; position: relative;
} }
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet { .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
width: 12px; width: 12px;
height: 12px; height: 12px;
background-color: #fff; background-color: #fff;
opacity: 1; opacity: 1;
border: 1px solid #4154f1; border: 1px solid #4154f1;
} }
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active { .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
background-color: #4154f1; background-color: #4154f1;
} }
.portfolio-details .portfolio-info { .portfolio-details .portfolio-info {
padding: 30px; padding: 30px;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08); box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
} }
.portfolio-details .portfolio-info h3 { .portfolio-details .portfolio-info h3 {
font-size: 22px; font-size: 22px;
font-weight: 700; font-weight: 700;
margin-bottom: 20px; margin-bottom: 20px;
padding-bottom: 20px; padding-bottom: 20px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
.portfolio-details .portfolio-info ul { .portfolio-details .portfolio-info ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
font-size: 15px; font-size: 15px;
} }
.portfolio-details .portfolio-info ul li + li { .portfolio-details .portfolio-info ul li+li {
margin-top: 10px; margin-top: 10px;
} }
.portfolio-details .portfolio-description { .portfolio-details .portfolio-description {
padding-top: 30px; padding-top: 30px;
} }
.portfolio-details .portfolio-description h2 { .portfolio-details .portfolio-description h2 {
font-size: 26px; font-size: 26px;
font-weight: 700; font-weight: 700;
margin-bottom: 20px; margin-bottom: 20px;
} }
.portfolio-details .portfolio-description p { .portfolio-details .portfolio-description p {
padding: 0; padding: 0;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Testimonials # Testimonials
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.testimonials .testimonial-item { .testimonials .testimonial-item {
box-sizing: content-box; box-sizing: content-box;
padding: 30px; padding: 30px;
margin: 40px 30px; margin: 40px 30px;
box-shadow: 0px 0 20px rgba(1, 41, 112, 0.1); box-shadow: 0px 0 20px rgba(1, 41, 112, 0.1);
background: #fff; background: #fff;
min-height: 320px; min-height: 320px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
transition: 0.3s; transition: 0.3s;
} }
.testimonials .testimonial-item .stars { .testimonials .testimonial-item .stars {
margin-bottom: 15px; margin-bottom: 15px;
} }
.testimonials .testimonial-item .stars i { .testimonials .testimonial-item .stars i {
color: #ffc107; color: #ffc107;
margin: 0 1px; margin: 0 1px;
} }
.testimonials .testimonial-item .testimonial-img { .testimonials .testimonial-item .testimonial-img {
width: 90px; width: 90px;
border-radius: 50%; border-radius: 50%;
border: 4px solid #fff; border: 4px solid #fff;
margin: 0 auto; margin: 0 auto;
} }
.testimonials .testimonial-item h3 { .testimonials .testimonial-item h3 {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
margin: 10px 0 5px 0; margin: 10px 0 5px 0;
color: #111; color: #111;
} }
.testimonials .testimonial-item h4 { .testimonials .testimonial-item h4 {
font-size: 14px; font-size: 14px;
color: #999; color: #999;
margin: 0; margin: 0;
} }
.testimonials .testimonial-item p { .testimonials .testimonial-item p {
font-style: italic; font-style: italic;
margin: 0 auto 15px auto; margin: 0 auto 15px auto;
} }
.testimonials .swiper-pagination { .testimonials .swiper-pagination {
margin-top: 20px; margin-top: 20px;
position: relative; position: relative;
} }
.testimonials .swiper-pagination .swiper-pagination-bullet { .testimonials .swiper-pagination .swiper-pagination-bullet {
width: 12px; width: 12px;
height: 12px; height: 12px;
background-color: #fff; background-color: #fff;
opacity: 1; opacity: 1;
border: 1px solid #4154f1; border: 1px solid #4154f1;
} }
.testimonials .swiper-pagination .swiper-pagination-bullet-active { .testimonials .swiper-pagination .swiper-pagination-bullet-active {
background-color: #4154f1; background-color: #4154f1;
} }
.testimonials .swiper-slide { .testimonials .swiper-slide {
opacity: .3; opacity: .3;
} }
@media (max-width: 1199px) { @media (max-width: 1199px) {
.testimonials .swiper-slide-active { .testimonials .swiper-slide-active {
opacity: 1; opacity: 1;
} }
.testimonials .swiper-pagination { .testimonials .swiper-pagination {
margin-top: 0; margin-top: 0;
} }
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.testimonials .swiper-slide-next { .testimonials .swiper-slide-next {
opacity: 1; opacity: 1;
transform: scale(1.12); transform: scale(1.12);
} }
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Team # Team
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.team { .team {
background: #fff; background: #fff;
padding: 60px 0; padding: 60px 0;
} }
.team .member { .team .member {
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
border-radius: 5px; border-radius: 5px;
background: #fff; background: #fff;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08); box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
transition: 0.3s; transition: 0.3s;
} }
.team .member .member-img { .team .member .member-img {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.team .member .member-img:after { .team .member .member-img:after {
position: absolute; position: absolute;
content: ""; content: "";
left: 0; left: 0;
bottom: 0; bottom: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
background: url(../img/team-shape.svg) no-repeat center bottom; background: url(../img/team-shape.svg) no-repeat center bottom;
background-size: contain; background-size: contain;
z-index: 1; z-index: 1;
} }
.team .member .social { .team .member .social {
position: absolute; position: absolute;
right: -100%; right: -100%;
top: 30px; top: 30px;
opacity: 0; opacity: 0;
border-radius: 4px; border-radius: 4px;
transition: 0.5s; transition: 0.5s;
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
z-index: 2; z-index: 2;
} }
.team .member .social a { .team .member .social a {
transition: color 0.3s; transition: color 0.3s;
color: rgba(1, 41, 112, 0.5); color: rgba(1, 41, 112, 0.5);
margin: 15px 12px; margin: 15px 12px;
display: block; display: block;
line-height: 0; line-height: 0;
text-align: center; text-align: center;
} }
.team .member .social a:hover { .team .member .social a:hover {
color: rgba(1, 41, 112, 0.8); color: rgba(1, 41, 112, 0.8);
} }
.team .member .social i { .team .member .social i {
font-size: 18px; font-size: 18px;
} }
.team .member .member-info { .team .member .member-info {
padding: 10px 15px 20px 15px; padding: 10px 15px 20px 15px;
} }
.team .member .member-info h4 { .team .member .member-info h4 {
font-weight: 700; font-weight: 700;
margin-bottom: 5px; margin-bottom: 5px;
font-size: 20px; font-size: 20px;
color: #012970; color: #012970;
} }
.team .member .member-info span { .team .member .member-info span {
display: block; display: block;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #aaaaaa; color: #aaaaaa;
} }
.team .member .member-info p { .team .member .member-info p {
font-style: italic; font-style: italic;
font-size: 14px; font-size: 14px;
padding-top: 15px; padding-top: 15px;
line-height: 26px; line-height: 26px;
color: #5e5e5e; color: #5e5e5e;
} }
.team .member:hover { .team .member:hover {
transform: scale(1.08); transform: scale(1.08);
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1); box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
} }
.team .member:hover .social { .team .member:hover .social {
right: 8px; right: 8px;
opacity: 1; opacity: 1;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Clients # Clients
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.clients .clients-slider .swiper-slide img { .clients .clients-slider .swiper-slide img {
opacity: 0.5; opacity: 0.5;
transition: 0.3s; transition: 0.3s;
} }
.clients .clients-slider .swiper-slide img:hover { .clients .clients-slider .swiper-slide img:hover {
opacity: 1; opacity: 1;
} }
.clients .clients-slider .swiper-pagination { .clients .clients-slider .swiper-pagination {
margin-top: 20px; margin-top: 20px;
position: relative; position: relative;
} }
.clients .clients-slider .swiper-pagination .swiper-pagination-bullet { .clients .clients-slider .swiper-pagination .swiper-pagination-bullet {
width: 12px; width: 12px;
height: 12px; height: 12px;
background-color: #fff; background-color: #fff;
opacity: 1; opacity: 1;
border: 1px solid #4154f1; border: 1px solid #4154f1;
} }
.clients .clients-slider .swiper-pagination .swiper-pagination-bullet-active { .clients .clients-slider .swiper-pagination .swiper-pagination-bullet-active {
background-color: #4154f1; background-color: #4154f1;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Recent Blog Posts # Recent Blog Posts
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.recent-blog-posts .post-box { .recent-blog-posts .post-box {
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08); box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
transition: 0.3s; transition: 0.3s;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
padding: 30px; padding: 30px;
border-radius: 8px; border-radius: 8px;
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.recent-blog-posts .post-box .post-img { .recent-blog-posts .post-box .post-img {
overflow: hidden; overflow: hidden;
margin: -30px -30px 15px -30px; margin: -30px -30px 15px -30px;
position: relative; position: relative;
} }
.recent-blog-posts .post-box .post-img img { .recent-blog-posts .post-box .post-img img {
transition: 0.5s; transition: 0.5s;
} }
.recent-blog-posts .post-box .post-date { .recent-blog-posts .post-box .post-date {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: rgba(1, 41, 112, 0.6); color: rgba(1, 41, 112, 0.6);
display: block; display: block;
margin-bottom: 10px; margin-bottom: 10px;
} }
.recent-blog-posts .post-box .post-title { .recent-blog-posts .post-box .post-title {
font-size: 24px; font-size: 24px;
color: #012970; color: #012970;
font-weight: 700; font-weight: 700;
margin-bottom: 18px; margin-bottom: 18px;
position: relative; position: relative;
transition: 0.3s; transition: 0.3s;
} }
.recent-blog-posts .post-box .readmore { .recent-blog-posts .post-box .readmore {
display: flex; display: flex;
align-items: center; align-items: center;
font-weight: 600; font-weight: 600;
line-height: 1; line-height: 1;
transition: 0.3s; transition: 0.3s;
} }
.recent-blog-posts .post-box .readmore i { .recent-blog-posts .post-box .readmore i {
line-height: 0; line-height: 0;
margin-left: 4px; margin-left: 4px;
font-size: 18px; font-size: 18px;
} }
.recent-blog-posts .post-box:hover .post-title { .recent-blog-posts .post-box:hover .post-title {
color: #4154f1; color: #4154f1;
} }
.recent-blog-posts .post-box:hover .post-img img { .recent-blog-posts .post-box:hover .post-img img {
transform: rotate(6deg) scale(1.2); transform: rotate(6deg) scale(1.2);
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Contact # Contact
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.contact .info-box { .contact .info-box {
color: #444444; color: #444444;
background: #fafbff; background: #fafbff;
padding: 30px; padding: 30px;
} }
.contact .info-box i { .contact .info-box i {
font-size: 38px; font-size: 38px;
line-height: 0; line-height: 0;
color: #4154f1; color: #4154f1;
} }
.contact .info-box h3 { .contact .info-box h3 {
font-size: 20px; font-size: 20px;
color: #012970; color: #012970;
font-weight: 700; font-weight: 700;
margin: 20px 0 10px 0; margin: 20px 0 10px 0;
} }
.contact .info-box p { .contact .info-box p {
padding: 0; padding: 0;
line-height: 24px; line-height: 24px;
font-size: 14px; font-size: 14px;
margin-bottom: 0; margin-bottom: 0;
} }
.contact .php-email-form { .contact .php-email-form {
background: #fafbff; background: #fafbff;
padding: 30px; padding: 30px;
height: 100%; height: 100%;
} }
.contact .php-email-form .error-message { .contact .php-email-form .error-message {
display: none; display: none;
color: #fff; color: #fff;
background: #ed3c0d; background: #ed3c0d;
text-align: left; text-align: left;
padding: 15px; padding: 15px;
margin-bottom: 24px; margin-bottom: 24px;
font-weight: 600; font-weight: 600;
} }
.contact .php-email-form .sent-message { .contact .php-email-form .sent-message {
display: none; display: none;
color: #fff; color: #fff;
background: #18d26e; background: #18d26e;
text-align: center; text-align: center;
padding: 15px; padding: 15px;
margin-bottom: 24px; margin-bottom: 24px;
font-weight: 600; font-weight: 600;
} }
.contact .php-email-form .loading { .contact .php-email-form .loading {
display: none; display: none;
background: #fff; background: #fff;
text-align: center; text-align: center;
padding: 15px; padding: 15px;
margin-bottom: 24px; margin-bottom: 24px;
} }
.contact .php-email-form .loading:before { .contact .php-email-form .loading:before {
content: ""; content: "";
display: inline-block; display: inline-block;
border-radius: 50%; border-radius: 50%;
width: 24px; width: 24px;
height: 24px; height: 24px;
margin: 0 10px -6px 0; margin: 0 10px -6px 0;
border: 3px solid #18d26e; border: 3px solid #18d26e;
border-top-color: #eee; border-top-color: #eee;
-webkit-animation: animate-loading 1s linear infinite; -webkit-animation: animate-loading 1s linear infinite;
animation: animate-loading 1s linear infinite; animation: animate-loading 1s linear infinite;
} }
.contact .php-email-form input, .contact .php-email-form textarea { .contact .php-email-form input,
border-radius: 0; .contact .php-email-form textarea {
box-shadow: none; border-radius: 0;
font-size: 14px; box-shadow: none;
border-radius: 0; font-size: 14px;
border-radius: 0;
} }
.contact .php-email-form input:focus, .contact .php-email-form textarea:focus { .contact .php-email-form input:focus,
border-color: #4154f1; .contact .php-email-form textarea:focus {
border-color: #4154f1;
} }
.contact .php-email-form input { .contact .php-email-form input {
padding: 10px 15px; padding: 10px 15px;
} }
.contact .php-email-form textarea { .contact .php-email-form textarea {
padding: 12px 15px; padding: 12px 15px;
} }
.contact .php-email-form button[type="submit"] { .contact .php-email-form button[type="submit"] {
background: #4154f1; background: #4154f1;
border: 0; border: 0;
padding: 10px 30px; padding: 10px 30px;
color: #fff; color: #fff;
transition: 0.4s; transition: 0.4s;
border-radius: 4px; border-radius: 4px;
} }
.contact .php-email-form button[type="submit"]:hover { .contact .php-email-form button[type="submit"]:hover {
background: #5969f3; background: #5969f3;
} }
@-webkit-keyframes animate-loading { @-webkit-keyframes animate-loading {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
100% { 100% {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
@keyframes animate-loading { @keyframes animate-loading {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
100% { 100% {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Blog # Blog
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.blog { .blog {
padding: 40px 0 20px 0; padding: 40px 0 20px 0;
} }
.blog .entry { .blog .entry {
padding: 30px; padding: 30px;
margin-bottom: 60px; margin-bottom: 60px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
} }
.blog .entry .entry-img { .blog .entry .entry-img {
max-height: 440px; max-height: 440px;
margin: -30px -30px 20px -30px; margin: -30px -30px 20px -30px;
overflow: hidden; overflow: hidden;
} }
.blog .entry .entry-title { .blog .entry .entry-title {
font-size: 28px; font-size: 28px;
font-weight: bold; font-weight: bold;
padding: 0; padding: 0;
margin: 0 0 20px 0; margin: 0 0 20px 0;
} }
.blog .entry .entry-title a { .blog .entry .entry-title a {
color: #012970; color: #012970;
transition: 0.3s; transition: 0.3s;
} }
.blog .entry .entry-title a:hover { .blog .entry .entry-title a:hover {
color: #4154f1; color: #4154f1;
} }
.blog .entry .entry-meta { .blog .entry .entry-meta {
margin-bottom: 15px; margin-bottom: 15px;
color: #4084fd; color: #4084fd;
} }
.blog .entry .entry-meta ul { .blog .entry .entry-meta ul {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
list-style: none; list-style: none;
align-items: center; align-items: center;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.blog .entry .entry-meta ul li + li { .blog .entry .entry-meta ul li+li {
padding-left: 20px; padding-left: 20px;
} }
.blog .entry .entry-meta i { .blog .entry .entry-meta i {
font-size: 16px; font-size: 16px;
margin-right: 8px; margin-right: 8px;
line-height: 0; line-height: 0;
} }
.blog .entry .entry-meta a { .blog .entry .entry-meta a {
color: #777777; color: #777777;
font-size: 14px; font-size: 14px;
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
} }
.blog .entry .entry-content p { .blog .entry .entry-content p {
line-height: 24px; line-height: 24px;
} }
.blog .entry .entry-content .read-more { .blog .entry .entry-content .read-more {
-moz-text-align-last: right; -moz-text-align-last: right;
text-align-last: right; text-align-last: right;
} }
.blog .entry .entry-content .read-more a { .blog .entry .entry-content .read-more a {
display: inline-block; display: inline-block;
background: #4154f1; background: #4154f1;
color: #fff; color: #fff;
padding: 6px 20px; padding: 6px 20px;
transition: 0.3s; transition: 0.3s;
font-size: 14px; font-size: 14px;
border-radius: 4px; border-radius: 4px;
} }
.blog .entry .entry-content .read-more a:hover { .blog .entry .entry-content .read-more a:hover {
background: #5969f3; background: #5969f3;
} }
.blog .entry .entry-content h3 { .blog .entry .entry-content h3 {
font-size: 22px; font-size: 22px;
margin-top: 30px; margin-top: 30px;
font-weight: bold; font-weight: bold;
} }
.blog .entry .entry-content blockquote { .blog .entry .entry-content blockquote {
overflow: hidden; overflow: hidden;
background-color: #fafafa; background-color: #fafafa;
padding: 60px; padding: 60px;
position: relative; position: relative;
text-align: center; text-align: center;
margin: 20px 0; margin: 20px 0;
} }
.blog .entry .entry-content blockquote p { .blog .entry .entry-content blockquote p {
color: #444444; color: #444444;
line-height: 1.6; line-height: 1.6;
margin-bottom: 0; margin-bottom: 0;
font-style: italic; font-style: italic;
font-weight: 500; font-weight: 500;
font-size: 22px; font-size: 22px;
} }
.blog .entry .entry-content blockquote::after { .blog .entry .entry-content blockquote::after {
content: ''; content: '';
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 3px; width: 3px;
background-color: #012970; background-color: #012970;
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.blog .entry .entry-footer { .blog .entry .entry-footer {
padding-top: 10px; padding-top: 10px;
border-top: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6;
} }
.blog .entry .entry-footer i { .blog .entry .entry-footer i {
color: #0d64fd; color: #0d64fd;
display: inline; display: inline;
} }
.blog .entry .entry-footer a { .blog .entry .entry-footer a {
color: #013289; color: #013289;
transition: 0.3s; transition: 0.3s;
} }
.blog .entry .entry-footer a:hover { .blog .entry .entry-footer a:hover {
color: #4154f1; color: #4154f1;
} }
.blog .entry .entry-footer .cats { .blog .entry .entry-footer .cats {
list-style: none; list-style: none;
display: inline; display: inline;
padding: 0 20px 0 0; padding: 0 20px 0 0;
font-size: 14px; font-size: 14px;
} }
.blog .entry .entry-footer .cats li { .blog .entry .entry-footer .cats li {
display: inline-block; display: inline-block;
} }
.blog .entry .entry-footer .tags { .blog .entry .entry-footer .tags {
list-style: none; list-style: none;
display: inline; display: inline;
padding: 0; padding: 0;
font-size: 14px; font-size: 14px;
} }
.blog .entry .entry-footer .tags li { .blog .entry .entry-footer .tags li {
display: inline-block; display: inline-block;
} }
.blog .entry .entry-footer .tags li + li::before { .blog .entry .entry-footer .tags li+li::before {
padding-right: 6px; padding-right: 6px;
color: #6c757d; color: #6c757d;
content: ","; content: ",";
} }
.blog .entry .entry-footer .share { .blog .entry .entry-footer .share {
font-size: 16px; font-size: 16px;
} }
.blog .entry .entry-footer .share i { .blog .entry .entry-footer .share i {
padding-left: 5px; padding-left: 5px;
} }
.blog .entry-single { .blog .entry-single {
margin-bottom: 30px; margin-bottom: 30px;
} }
.blog .blog-author { .blog .blog-author {
padding: 20px; padding: 20px;
margin-bottom: 30px; margin-bottom: 30px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
} }
.blog .blog-author img { .blog .blog-author img {
width: 120px; width: 120px;
margin-right: 20px; margin-right: 20px;
} }
.blog .blog-author h4 { .blog .blog-author h4 {
font-weight: 600; font-weight: 600;
font-size: 22px; font-size: 22px;
margin-bottom: 0px; margin-bottom: 0px;
padding: 0; padding: 0;
color: #012970; color: #012970;
} }
.blog .blog-author .social-links { .blog .blog-author .social-links {
margin: 0 10px 10px 0; margin: 0 10px 10px 0;
} }
.blog .blog-author .social-links a { .blog .blog-author .social-links a {
color: rgba(1, 41, 112, 0.5); color: rgba(1, 41, 112, 0.5);
margin-right: 5px; margin-right: 5px;
} }
.blog .blog-author p { .blog .blog-author p {
font-style: italic; font-style: italic;
color: #b7b7b7; color: #b7b7b7;
} }
.blog .blog-comments { .blog .blog-comments {
margin-bottom: 30px; margin-bottom: 30px;
} }
.blog .blog-comments .comments-count { .blog .blog-comments .comments-count {
font-weight: bold; font-weight: bold;
} }
.blog .blog-comments .comment { .blog .blog-comments .comment {
margin-top: 30px; margin-top: 30px;
position: relative; position: relative;
} }
.blog .blog-comments .comment .comment-img { .blog .blog-comments .comment .comment-img {
margin-right: 14px; margin-right: 14px;
} }
.blog .blog-comments .comment .comment-img img { .blog .blog-comments .comment .comment-img img {
width: 60px; width: 60px;
} }
.blog .blog-comments .comment h5 { .blog .blog-comments .comment h5 {
font-size: 16px; font-size: 16px;
margin-bottom: 2px; margin-bottom: 2px;
} }
.blog .blog-comments .comment h5 a { .blog .blog-comments .comment h5 a {
font-weight: bold; font-weight: bold;
color: #444444; color: #444444;
transition: 0.3s; transition: 0.3s;
} }
.blog .blog-comments .comment h5 a:hover { .blog .blog-comments .comment h5 a:hover {
color: #4154f1; color: #4154f1;
} }
.blog .blog-comments .comment h5 .reply { .blog .blog-comments .comment h5 .reply {
padding-left: 10px; padding-left: 10px;
color: #012970; color: #012970;
} }
.blog .blog-comments .comment h5 .reply i { .blog .blog-comments .comment h5 .reply i {
font-size: 20px; font-size: 20px;
} }
.blog .blog-comments .comment time { .blog .blog-comments .comment time {
display: block; display: block;
font-size: 14px; font-size: 14px;
color: #013ca3; color: #013ca3;
margin-bottom: 5px; margin-bottom: 5px;
} }
.blog .blog-comments .comment.comment-reply { .blog .blog-comments .comment.comment-reply {
padding-left: 40px; padding-left: 40px;
} }
.blog .blog-comments .reply-form { .blog .blog-comments .reply-form {
margin-top: 30px; margin-top: 30px;
padding: 30px; padding: 30px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
} }
.blog .blog-comments .reply-form h4 { .blog .blog-comments .reply-form h4 {
font-weight: bold; font-weight: bold;
font-size: 22px; font-size: 22px;
} }
.blog .blog-comments .reply-form p { .blog .blog-comments .reply-form p {
font-size: 14px; font-size: 14px;
} }
.blog .blog-comments .reply-form input { .blog .blog-comments .reply-form input {
border-radius: 4px; border-radius: 4px;
padding: 10px 10px; padding: 10px 10px;
font-size: 14px; font-size: 14px;
} }
.blog .blog-comments .reply-form input:focus { .blog .blog-comments .reply-form input:focus {
box-shadow: none; box-shadow: none;
border-color: #a0aaf8; border-color: #a0aaf8;
} }
.blog .blog-comments .reply-form textarea { .blog .blog-comments .reply-form textarea {
border-radius: 4px; border-radius: 4px;
padding: 10px 10px; padding: 10px 10px;
font-size: 14px; font-size: 14px;
} }
.blog .blog-comments .reply-form textarea:focus { .blog .blog-comments .reply-form textarea:focus {
box-shadow: none; box-shadow: none;
border-color: #a0aaf8; border-color: #a0aaf8;
} }
.blog .blog-comments .reply-form .form-group { .blog .blog-comments .reply-form .form-group {
margin-bottom: 25px; margin-bottom: 25px;
} }
.blog .blog-comments .reply-form .btn-primary { .blog .blog-comments .reply-form .btn-primary {
border-radius: 4px; border-radius: 4px;
padding: 10px 20px; padding: 10px 20px;
border: 0; border: 0;
background-color: #012970; background-color: #012970;
} }
.blog .blog-comments .reply-form .btn-primary:hover { .blog .blog-comments .reply-form .btn-primary:hover {
background-color: #013289; background-color: #013289;
} }
.blog .blog-pagination { .blog .blog-pagination {
color: #024ed5; color: #024ed5;
} }
.blog .blog-pagination ul { .blog .blog-pagination ul {
display: flex; display: flex;
padding: 0; padding: 0;
margin: 0; margin: 0;
list-style: none; list-style: none;
} }
.blog .blog-pagination li { .blog .blog-pagination li {
margin: 0 5px; margin: 0 5px;
transition: 0.3s; transition: 0.3s;
} }
.blog .blog-pagination li a { .blog .blog-pagination li a {
color: #012970; color: #012970;
padding: 7px 16px; padding: 7px 16px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.blog .blog-pagination li.active, .blog .blog-pagination li:hover { .blog .blog-pagination li.active,
background: #4154f1; .blog .blog-pagination li:hover {
background: #4154f1;
} }
.blog .blog-pagination li.active a, .blog .blog-pagination li:hover a { .blog .blog-pagination li.active a,
color: #fff; .blog .blog-pagination li:hover a {
color: #fff;
} }
.blog .sidebar { .blog .sidebar {
padding: 30px; padding: 30px;
margin: 0 0 60px 20px; margin: 0 0 60px 20px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
} }
.blog .sidebar .sidebar-title { .blog .sidebar .sidebar-title {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
padding: 0 0 0 0; padding: 0 0 0 0;
margin: 0 0 15px 0; margin: 0 0 15px 0;
color: #012970; color: #012970;
position: relative; position: relative;
} }
.blog .sidebar .sidebar-item { .blog .sidebar .sidebar-item {
margin-bottom: 30px; margin-bottom: 30px;
} }
.blog .sidebar .search-form form { .blog .sidebar .search-form form {
background: #fff; background: #fff;
border: 1px solid #ddd; border: 1px solid #ddd;
padding: 3px 10px; padding: 3px 10px;
position: relative; position: relative;
} }
.blog .sidebar .search-form form input[type="text"] { .blog .sidebar .search-form form input[type="text"] {
border: 0; border: 0;
padding: 4px; padding: 4px;
border-radius: 4px; border-radius: 4px;
width: calc(100% - 40px); width: calc(100% - 40px);
} }
.blog .sidebar .search-form form button { .blog .sidebar .search-form form button {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
border: 0; border: 0;
background: none; background: none;
font-size: 16px; font-size: 16px;
padding: 0 15px; padding: 0 15px;
margin: -1px; margin: -1px;
background: #4154f1; background: #4154f1;
color: #fff; color: #fff;
transition: 0.3s; transition: 0.3s;
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
line-height: 0; line-height: 0;
} }
.blog .sidebar .search-form form button i { .blog .sidebar .search-form form button i {
line-height: 0; line-height: 0;
} }
.blog .sidebar .search-form form button:hover { .blog .sidebar .search-form form button:hover {
background: #5465f2; background: #5465f2;
} }
.blog .sidebar .categories ul { .blog .sidebar .categories ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
} }
.blog .sidebar .categories ul li + li { .blog .sidebar .categories ul li+li {
padding-top: 10px; padding-top: 10px;
} }
.blog .sidebar .categories ul a { .blog .sidebar .categories ul a {
color: #012970; color: #012970;
transition: 0.3s; transition: 0.3s;
} }
.blog .sidebar .categories ul a:hover { .blog .sidebar .categories ul a:hover {
color: #4154f1; color: #4154f1;
} }
.blog .sidebar .categories ul a span { .blog .sidebar .categories ul a span {
padding-left: 5px; padding-left: 5px;
color: #aaaaaa; color: #aaaaaa;
font-size: 14px; font-size: 14px;
} }
.blog .sidebar .recent-posts .post-item + .post-item { .blog .sidebar .recent-posts .post-item+.post-item {
margin-top: 15px; margin-top: 15px;
} }
.blog .sidebar .recent-posts img { .blog .sidebar .recent-posts img {
width: 80px; width: 80px;
float: left; float: left;
} }
.blog .sidebar .recent-posts h4 { .blog .sidebar .recent-posts h4 {
font-size: 15px; font-size: 15px;
margin-left: 95px; margin-left: 95px;
font-weight: bold; font-weight: bold;
} }
.blog .sidebar .recent-posts h4 a { .blog .sidebar .recent-posts h4 a {
color: #012970; color: #012970;
transition: 0.3s; transition: 0.3s;
} }
.blog .sidebar .recent-posts h4 a:hover { .blog .sidebar .recent-posts h4 a:hover {
color: #4154f1; color: #4154f1;
} }
.blog .sidebar .recent-posts time { .blog .sidebar .recent-posts time {
display: block; display: block;
margin-left: 95px; margin-left: 95px;
font-style: italic; font-style: italic;
font-size: 14px; font-size: 14px;
color: #aaaaaa; color: #aaaaaa;
} }
.blog .sidebar .tags { .blog .sidebar .tags {
margin-bottom: -10px; margin-bottom: -10px;
} }
.blog .sidebar .tags ul { .blog .sidebar .tags ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
} }
.blog .sidebar .tags ul li { .blog .sidebar .tags ul li {
display: inline-block; display: inline-block;
} }
.blog .sidebar .tags ul a { .blog .sidebar .tags ul a {
color: #0257ee; color: #0257ee;
font-size: 14px; font-size: 14px;
padding: 6px 14px; padding: 6px 14px;
margin: 0 6px 8px 0; margin: 0 6px 8px 0;
border: 1px solid #d7e6ff; border: 1px solid #d7e6ff;
display: inline-block; display: inline-block;
transition: 0.3s; transition: 0.3s;
} }
.blog .sidebar .tags ul a:hover { .blog .sidebar .tags ul a:hover {
color: #fff; color: #fff;
border: 1px solid #4154f1; border: 1px solid #4154f1;
background: #4154f1; background: #4154f1;
} }
.blog .sidebar .tags ul a span { .blog .sidebar .tags ul a span {
padding-left: 5px; padding-left: 5px;
color: #a5c5fe; color: #a5c5fe;
font-size: 14px; font-size: 14px;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Footer # Footer
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.footer { .footer {
background: #f6f9ff; background: #f6f9ff;
padding: 0 0 30px 0; padding: 0 0 30px 0;
font-size: 14px; font-size: 14px;
} }
.footer .footer-newsletter { .footer .footer-newsletter {
padding: 50px 0; padding: 50px 0;
background: #f6f9ff; background: #f6f9ff;
border-top: 1px solid #e1ecff; border-top: 1px solid #e1ecff;
} }
.footer .footer-newsletter h4 { .footer .footer-newsletter h4 {
font-size: 24px; font-size: 24px;
margin: 0 0 10px 0; margin: 0 0 10px 0;
padding: 0; padding: 0;
line-height: 1; line-height: 1;
font-weight: 700; font-weight: 700;
color: #012970; color: #012970;
} }
.footer .footer-newsletter form { .footer .footer-newsletter form {
margin-top: 20px; margin-top: 20px;
background: #fff; background: #fff;
padding: 6px 10px; padding: 6px 10px;
position: relative; position: relative;
border-radius: 4px; border-radius: 4px;
border: 1px solid #e1ecff; border: 1px solid #e1ecff;
} }
.footer .footer-newsletter form input[type="email"] { .footer .footer-newsletter form input[type="email"] {
border: 0; border: 0;
padding: 8px; padding: 8px;
width: calc(100% - 140px); width: calc(100% - 140px);
} }
.footer .footer-newsletter form input[type="submit"] { .footer .footer-newsletter form input[type="submit"] {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
border: 0; border: 0;
background: none; background: none;
font-size: 16px; font-size: 16px;
padding: 0 30px; padding: 0 30px;
margin: 3px; margin: 3px;
background: #4154f1; background: #4154f1;
color: #fff; color: #fff;
transition: 0.3s; transition: 0.3s;
border-radius: 4px; border-radius: 4px;
} }
.footer .footer-newsletter form input[type="submit"]:hover { .footer .footer-newsletter form input[type="submit"]:hover {
background: #5969f3; background: #5969f3;
} }
.footer .footer-top { .footer .footer-top {
background: white url(../img/footer-bg.png) no-repeat right top; background: white url(../img/footer-bg.png) no-repeat right top;
background-size: contain; background-size: contain;
border-top: 1px solid #e1ecff; border-top: 1px solid #e1ecff;
border-bottom: 1px solid #e1ecff; border-bottom: 1px solid #e1ecff;
padding: 60px 0 30px 0; padding: 60px 0 30px 0;
} }
@media (max-width: 992px) { @media (max-width: 992px) {
.footer .footer-top { .footer .footer-top {
background-position: center bottom; background-position: center bottom;
} }
} }
.footer .footer-top .footer-info { .footer .footer-top .footer-info {
margin-bottom: 30px; margin-bottom: 30px;
} }
.footer .footer-top .footer-info .logo { .footer .footer-top .footer-info .logo {
line-height: 0; line-height: 0;
margin-bottom: 15px; margin-bottom: 15px;
} }
.footer .footer-top .footer-info .logo img { .footer .footer-top .footer-info .logo img {
max-height: 40px; max-height: 40px;
margin-right: 6px; margin-right: 6px;
} }
.footer .footer-top .footer-info .logo span { .footer .footer-top .footer-info .logo span {
font-size: 30px; font-size: 30px;
font-weight: 700; font-weight: 700;
letter-spacing: 1px; letter-spacing: 1px;
color: #012970; color: #012970;
font-family: "Nunito", sans-serif; font-family: "Nunito", sans-serif;
margin-top: 3px; margin-top: 3px;
} }
.footer .footer-top .footer-info p { .footer .footer-top .footer-info p {
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
margin-bottom: 0; margin-bottom: 0;
font-family: "Nunito", sans-serif; font-family: "Nunito", sans-serif;
} }
.footer .footer-top .social-links a { .footer .footer-top .social-links a {
font-size: 20px; font-size: 20px;
display: inline-block; display: inline-block;
color: rgba(1, 41, 112, 0.5); color: rgba(1, 41, 112, 0.5);
line-height: 0; line-height: 0;
margin-right: 10px; margin-right: 10px;
transition: 0.3s; transition: 0.3s;
} }
.footer .footer-top .social-links a:hover { .footer .footer-top .social-links a:hover {
color: #012970; color: #012970;
} }
.footer .footer-top h4 { .footer .footer-top h4 {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
color: #012970; color: #012970;
text-transform: uppercase; text-transform: uppercase;
position: relative; position: relative;
padding-bottom: 12px; padding-bottom: 12px;
} }
.footer .footer-top .footer-links { .footer .footer-top .footer-links {
margin-bottom: 30px; margin-bottom: 30px;
} }
.footer .footer-top .footer-links ul { .footer .footer-top .footer-links ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.footer .footer-top .footer-links ul i { .footer .footer-top .footer-links ul i {
padding-right: 2px; padding-right: 2px;
color: #d0d4fc; color: #d0d4fc;
font-size: 12px; font-size: 12px;
line-height: 0; line-height: 0;
} }
.footer .footer-top .footer-links ul li { .footer .footer-top .footer-links ul li {
padding: 10px 0; padding: 10px 0;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.footer .footer-top .footer-links ul li:first-child { .footer .footer-top .footer-links ul li:first-child {
padding-top: 0; padding-top: 0;
} }
.footer .footer-top .footer-links ul a { .footer .footer-top .footer-links ul a {
color: #013289; color: #013289;
transition: 0.3s; transition: 0.3s;
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
} }
.footer .footer-top .footer-links ul a:hover { .footer .footer-top .footer-links ul a:hover {
color: #4154f1; color: #4154f1;
} }
.footer .footer-top .footer-contact p { .footer .footer-top .footer-contact p {
line-height: 26px; line-height: 26px;
} }
.footer .copyright { .footer .copyright {
text-align: center; text-align: center;
padding-top: 30px; padding-top: 30px;
color: #012970; color: #012970;
} }
.footer .credits { .footer .credits {
padding-top: 10px; padding-top: 10px;
text-align: center; text-align: center;
font-size: 13px; font-size: 13px;
color: #012970; color: #012970;
} }
\ No newline at end of file
public/SCD/index.html
View file @ 8ce45e4a
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport"> <meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>City Demonstrator Landing Page</title> <title>iCity Demonstrator</title>
<meta content="" name="description"> <meta content="" name="description">
<meta content="" name="keywords"> <meta content="" name="keywords">
...@@ -40,70 +40,87 @@ ...@@ -40,70 +40,87 @@
<!-- ======= Header ======= --> <!-- ======= Header ======= -->
<header id="header" class="header fixed-top"> <header id="header" class="header fixed-top">
<div class="container-fluid container-xl d-flex align-items-center justify-content-between"> <!-- <div class="container-fluid container-xl d-flex align-items-center justify-content-between"> -->
<div class="col-sm-6 d-flex flex-column justify-content-center"> <div class="row">
<div class="col-lg-1 col-md-2 col-sm-2 ">
<img src="assets/img/dummy.png" alt="">
</div>
<div class="col-lg-5 col-md-4 col-sm-4">
<a href="index.html" class="logo d-flex align-items-center"> <a href="index.html" class="logo d-flex align-items-center">
<img src="https://www.hft-stuttgart.de/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg" alt=""> <img src="https://www.hft-stuttgart.de/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg" alt="">
<span>City Demonstrator</span> <span>City Demonstrator</span>
</a> </a>
</div> </div>
<nav id="navbar" class="navbar"> <div class="col-lg-5 col-md-4 col-sm-4 ">
<!-- <ul> <span style="float: right;">
<li><a class="nav-link scrollto active" href="#hero">Home</a></li> <img src="https://www.dreso.com/typo3conf/ext/dreso/Resources/Public/dreso-logo.svg " style="width: 160px; padding-right:20px;" alt=" ">
<li><a class="nav-link scrollto" href="#about">About</a></li>
<li><a class="nav-link scrollto" href="#services">Services</a></li> <img src="assets/img/icityLogo.jpg " style="width: 130px; " alt=" ">
<li><a class="nav-link scrollto" href="#portfolio">Portfolio</a></li> </span>
<li><a class="nav-link scrollto" href="#team">Team</a></li>
<li><a href="blog.html">Blog</a></li> </div>
<li class="dropdown"><a href="#"><span>Drop Down</span> <i class="bi bi-chevron-down"></i></a> <div class="col-lg-1 col-md-2 col-sm-1">
<img src="assets/img/dummy.png" alt="">
</div>
</div>
<!-- <nav id="navbar " class="navbar ">
<ul>
<li><a class="nav-link scrollto active " href="#hero ">Home</a></li>
<li><a class="nav-link scrollto " href="#about ">About</a></li>
<li><a class="nav-link scrollto " href="#services ">Services</a></li>
<li><a class="nav-link scrollto " href="#portfolio ">Portfolio</a></li>
<li><a class="nav-link scrollto " href="#team ">Team</a></li>
<li><a href="blog.html ">Blog</a></li>
<li class="dropdown "><a href="# "><span>Drop Down</span> <i class="bi bi-chevron-down "></i></a>
<ul> <ul>
<li><a href="#">Drop Down 1</a></li> <li><a href="# ">Drop Down 1</a></li>
<li class="dropdown"><a href="#"><span>Deep Drop Down</span> <i class="bi bi-chevron-right"></i></a> <li class="dropdown "><a href="# "><span>Deep Drop Down</span> <i class="bi bi-chevron-right "></i></a>
<ul> <ul>
<li><a href="#">Deep Drop Down 1</a></li> <li><a href="# ">Deep Drop Down 1</a></li>
<li><a href="#">Deep Drop Down 2</a></li> <li><a href="# ">Deep Drop Down 2</a></li>
<li><a href="#">Deep Drop Down 3</a></li> <li><a href="# ">Deep Drop Down 3</a></li>
<li><a href="#">Deep Drop Down 4</a></li> <li><a href="# ">Deep Drop Down 4</a></li>
<li><a href="#">Deep Drop Down 5</a></li> <li><a href="# ">Deep Drop Down 5</a></li>
</ul> </ul>
</li> </li>
<li><a href="#">Drop Down 2</a></li> <li><a href="# ">Drop Down 2</a></li>
<li><a href="#">Drop Down 3</a></li> <li><a href="# ">Drop Down 3</a></li>
<li><a href="#">Drop Down 4</a></li> <li><a href="# ">Drop Down 4</a></li>
</ul> </ul>
</li> </li>
<li><a class="nav-link scrollto" href="#contact">Contact</a></li> <li><a class="nav-link scrollto " href="#contact ">Contact</a></li>
<!-- <li><a class="getstarted scrollto" href="#about">Get Started</a></li> --> <li><a class="getstarted scrollto " href="#about ">Get Started</a></li>
<!-- </ul> --> </ul> -->
<i class="bi bi-list mobile-nav-toggle"></i> <i class="bi bi-list mobile-nav-toggle "></i>
</nav> <!-- </nav> -->
<!-- .navbar --> <!-- .navbar -->
</div> <!-- </div> -->
</header> </header>
<!-- End Header --> <!-- End Header -->
<!-- ======= Hero Section ======= --> <!-- ======= Hero Section ======= -->
<section id="hero" class="hero d-flex align-items-center"> <section id="hero " class="hero d-flex align-items-center ">
<div class="container"> <div class="container ">
<div class="row"> <div class="row ">
<div class="col-lg-6 d-flex flex-column justify-content-center"> <div class="col-lg-6 d-flex flex-column justify-content-center ">
<h1 data-aos="fade-up">Learn more about Smart Cities with our City Demonstrator</h1> <h1 data-aos="fade-up ">Learn more about Intelligent Cities with our City Demonstrator</h1>
<h2 data-aos="fade-up" data-aos-delay="400">Find out what Smart Cities are and how they will shape our future</h2> <h2 data-aos="fade-up " data-aos-delay="400 ">Find out what Intelligent Cities are and how they will shape our future</h2>
<div data-aos="fade-up" data-aos-delay="600"> <div data-aos="fade-up " data-aos-delay="600 ">
<div class="text-center text-lg-start"> <div class="text-center text-lg-start">
<a href="#about" class="btn-get-started scrollto d-inline-flex align-items-center justify-content-center align-self-center"> <a href="#about" class="btn-get-started d-inline-flex align-items-center justify-content-center align-self-center ">
<span>Get Started</span> <span>Get Started</span>
<i class="bi bi-arrow-right"></i> <i class="bi bi-arrow-right "></i>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-6 hero-img" data-aos="zoom-out" data-aos-delay="200"> <div class="col-lg-6 hero-img" data-aos="zoom-out " data-aos-delay="200 ">
<img src="assets/img/ict.png" class="img-fluid" alt=""> <img src="assets/img/ict.png " class="img-fluid " alt=" ">
</div> </div>
</div> </div>
</div> </div>
...@@ -111,17 +128,17 @@ ...@@ -111,17 +128,17 @@
</section> </section>
<!-- End Hero --> <!-- End Hero -->
<main id="main"> <main id="main ">
<!-- ======= About Section ======= --> <!-- ======= About Section ======= -->
<section id="about" class="about"> <section id="about" class="about">
<div class="container" data-aos="fade-up"> <div class="container " data-aos="fade-up ">
<div class="row gx-0"> <div class="row gx-0 ">
<div class="col-lg-6 d-flex flex-column justify-content-center" data-aos="fade-up" data-aos-delay="200"> <div class="col-lg-6 d-flex flex-column justify-content-center " data-aos="fade-up " data-aos-delay="200 ">
<div class="content"> <div class="content ">
<h3>Our Vision</h3> <h3>Our Vision</h3>
<h2>Re-invent our cities of today to become sustainable, resource efficient and enable digital services to smart citizens of tomorrow. <h2>Re-invent our cities of today to become sustainable, resource efficient and enable digital services to intelligent citizens of tomorrow.
</h2> </h2>
<p></p> <p></p>
...@@ -130,16 +147,16 @@ ...@@ -130,16 +147,16 @@
<p>For example: traffic, mobility concepts, building-infrastructures, air-pollution, currently created electricity via PV systems and many more. <p>For example: traffic, mobility concepts, building-infrastructures, air-pollution, currently created electricity via PV systems and many more.
</p> </p>
<div class="text-center text-lg-start"> <div class="text-center text-lg-start">
<a href="#features" class="btn-read-more d-inline-flex align-items-center justify-content-center align-self-center"> <a href="#features" class="btn-read-more d-inline-flex align-items-center justify-content-center align-self-center ">
<span>Read More</span> <span>Read More</span>
<i class="bi bi-arrow-right"></i> <i class="bi bi-arrow-right "></i>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-6 d-flex align-items-center" data-aos="zoom-out" data-aos-delay="200"> <div class="col-lg-6 d-flex align-items-center " data-aos="zoom-out " data-aos-delay="200 ">
<img src="assets/img/smartcity_wheel-1024x1024.jpg" class="img-fluid" alt=""> <img src="assets/img/smartcity_wheel-1024x1024.jpg " class="img-fluid " alt=" ">
</div> </div>
</div> </div>
...@@ -151,206 +168,331 @@ ...@@ -151,206 +168,331 @@
<!-- ======= Features Section ======= --> <!-- ======= Features Section ======= -->
<section id="features" class="features"> <section id="features" class="features ">
<div class="container" data-aos="fade-up"> <div class="container " data-aos="fade-up ">
<header class="section-header"> <header class="section-header ">
<h2>Features</h2> <h2>Features</h2>
<p>Features of a smart city</p> <p>Features of a intelligent city</p>
</header> </header>
<div class="row"> <div class="row ">
<div class="col-lg-6"> <div class="col-lg-6 ">
<img src="assets/img/icity.jpg" class="img-fluid" alt=""> <!-- <img src="assets/img/icity.jpg " class="img-fluid " alt=" "> -->
<img src="assets/img/icityThemes.png" class="img-fluid " alt=" ">
</div> </div>
<div class="col-lg-6 mt-5 mt-lg-0 d-flex"> <div class="col-lg-6 mt-5 mt-lg-0 d-flex ">
<div class="row align-self-center gy-4"> <div class="row align-self-center gy-4 ">
<div class="col-md-6" data-aos="zoom-out" data-aos-delay="200"> <div class="col-md-6 " data-aos="zoom-out " data-aos-delay="200 ">
<div class="feature-box d-flex align-items-center"> <div class="feature-box d-flex align-items-center ">
<i class="bi bi-check"></i> <i class="bi bi-check "></i>
<h3>Intelligent citizens</h3> <h3>Intelligent citizens</h3>
</div> </div>
</div> </div>
<div class="col-md-6" data-aos="zoom-out" data-aos-delay="300"> <div class="col-md-6 " data-aos="zoom-out " data-aos-delay="300 ">
<div class="feature-box d-flex align-items-center"> <div class="feature-box d-flex align-items-center ">
<i class="bi bi-check"></i> <i class="bi bi-check "></i>
<h3>Intelligent transportation</h3> <h3>Renewable energies</h3>
</div> </div>
</div> </div>
<div class="col-md-6" data-aos="zoom-out" data-aos-delay="400"> <div class="col-md-6 " data-aos="zoom-out " data-aos-delay="400 ">
<div class="feature-box d-flex align-items-center"> <div class="feature-box d-flex align-items-center ">
<i class="bi bi-check"></i> <i class="bi bi-check "></i>
<h3>Innovative mobility concepts</h3> <h3>Innovative mobility concepts</h3>
</div> </div>
</div> </div>
<div class="col-md-6" data-aos="zoom-out" data-aos-delay="500"> <div class="col-md-6 " data-aos="zoom-out " data-aos-delay="500 ">
<div class="feature-box d-flex align-items-center"> <div class="feature-box d-flex align-items-center ">
<i class="bi bi-check"></i> <i class="bi bi-check "></i>
<h3>Interconnected devices and services</h3> <h3>Interconnected devices and services</h3>
</div> </div>
</div> </div>
<div class="col-md-6" data-aos="zoom-out" data-aos-delay="600"> <div class="col-md-6 " data-aos="zoom-out " data-aos-delay="600 ">
<div class="feature-box d-flex align-items-center"> <div class="feature-box d-flex align-items-center ">
<i class="bi bi-check"></i> <i class="bi bi-check "></i>
<h3>Green spaces</h3> <h3>Urban environment</h3>
</div> </div>
</div> </div>
<div class="col-md-6" data-aos="zoom-out" data-aos-delay="700"> <div class="col-md-6 " data-aos="zoom-out " data-aos-delay="700 ">
<div class="feature-box d-flex align-items-center"> <div class="feature-box d-flex align-items-center ">
<i class="bi bi-check"></i> <i class="bi bi-check "></i>
<h3>Reduced and intelligent traffic</h3> <h3>Sustainable buildings and neighborhoods</h3>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-12 " style="justify-content: center; " id=featiretab-arrow>
<a href="#featiretab-arrow " class="btn-read-more d-inline-flex align-items-center justify-content-center align-self-center " style="padding-left: 50%; padding-top: 50px; ">
<!-- <span>more</span> -->
<i class="bi bi-arrow-down " style="font-size: 40px "></i>
</a>
</div>
</div> </div>
<!-- / row --> <!-- / row -->
<!-- Feature Tabs -->
<div class="row feture-tabs" data-aos="fade-up">
<div class="col-lg-6">
<h3>The three fundamental aspects of smart cities: LIS</h3>
<!-- Feature Tabs ======== LIVABLE ======== -->
<div class="row feture-tabs " data-aos="fade-up ">
<header class="section-header ">
<p>The three fundamental aspects of intelligent cities: LIS</p>
<p class="nav-link active " data-bs-toggle="pill " href="#tab1 ">livable</p>
</header>
<div class="col-lg-6 ">
<!-- Tabs --> <!-- Tabs -->
<ul class="nav nav-pills mb-3"> <!-- <ul class="nav nav-pills mb-3 ">
<li>
<a class="nav-link active" data-bs-toggle="pill" href="#tab1">livable</a>
</li>
<li>
<a class="nav-link" data-bs-toggle="pill" href="#tab2">intelligent</a>
</li>
<li> <li>
<a class="nav-link" data-bs-toggle="pill" href="#tab3">sustainable</a> <a class="nav-link active " data-bs-toggle="pill " href="#tab1 ">livable</a>
</li> </li>
</ul> </ul> -->
<!-- End Tabs --> <!-- End Tabs -->
<!-- Tab Content --> <!-- Tab Content -->
<div class="tab-content"> <div class="tab-content ">
<div class="tab-pane fade show active" id="tab1"> <div class="tab-pane fade show active " id="livable ">
<p>Cities should become a place where citizens can easily meet each other in green spaces using intelligent mobility concepts</p> <p>Cities should become a place where citizens can easily meet each other in green spaces using intelligent mobility concepts</p>
<div class="d-flex align-items-center mb-2"> <div class="d-flex align-items-center mb-2 ">
<i class="bi bi-check2"></i> <i class="bi bi-check2 "></i>
<h4>Smart Mobility for Smart Citizens</h4> <h4>Intelligent Mobility for Intelligent Citizens</h4>
</div> </div>
<p>For example, finding the perfect route for E-bikes / E-scouters based on fitness level and heart-rate of the user and the battery charge level of the bike. </p> <p>For example, finding the perfect route for E-bikes / E-scouters based on fitness level and heart-rate of the user and the battery charge level of the bike. </p>
<div class="d-flex align-items-center mb-2"> <div class="d-flex align-items-center mb-2 ">
<i class="bi bi-check2"></i> <i class="bi bi-check2 "></i>
<h4>Green spaces and natural environment</h4> <h4>Green spaces and natural environment</h4>
</div> </div>
<p>Green spaces may be watered automatically using conditioned rain and or gray water during dry periods. Information about soil dryness and nutritional status is measured using IoT devices.</p> <p>Green spaces may be watered automatically using conditioned rain and or gray water during dry periods. Information about soil dryness and nutritional status is measured using IoT devices.</p>
<div class="d-flex align-items-center mb-2 ">
<i class="bi bi-check2 "></i>
<h4>Actor-centric neighborhood development</h4>
</div>
<p>Neighborhoods and infills are designed according to the needs of future residents in terms of floor-plan types and sizes, auxiliary functions and retail as well as smart services for mobility, utilities, retail and social
organization.
</p>
</div> </div>
<!-- End Tab 1 Content --> <!-- End Tab 1 Content -->
</div>
</div>
<div class="col-lg-6 ">
<img src="assets/img/livable.jpg " class="img-fluid " alt=" ">
<!-- <img src="assets/img/200127_Luftstroemung.jpg " class="img-fluid " alt=" "> -->
</div>
<div class="col-lg-12 " style="justify-content: center; " id=intelligent-arrow>
<a href="#intelligent-arrow " class="btn-read-more d-inline-flex align-items-center justify-content-center align-self-center " style="padding-left: 50%; padding-top: 50px; ">
<!-- <span>more</span> -->
<i class="bi bi-arrow-down " style="font-size: 40px "></i>
</a>
</div>
</div>
<!-- End Feature Tabs ======== LIVABLE ======== -->
<!-- Feature Tabs ======== INTELLIGENT ======== -->
<div id="intelligent-top " class="row feture-tabs " data-aos="fade-up ">
<header class="section-header ">
<p class="nav-link active " data-bs-toggle="pill ">intelligent</p>
</header>
<div class="col-lg-6 ">
<!-- <img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Forschung/_processed_/3/a/csm_iCity_bubbles_HFT_Stadt_ce4e80930c.png " class="img-fluid " alt=" "> -->
<img src="assets/img/intelligent.jpg " class="img-fluid " style="height: 400px;" alt=" ">
</div>
<div class="tab-pane fade show" id="tab2"> <div class="col-lg-6 ">
<!-- <h3>The three fundamental aspects of smart cities: LIS</h3> -->
<!-- Tabs -->
<!-- <ul class="nav nav-pills mb-3 ">
<li>
<a class="nav-link active " data-bs-toggle="pill " href="#tab1 ">intelligent</a>
</li>
</ul> -->
<!-- End Tabs -->
<!-- Tab Content -->
<div class="tab-content ">
<div class="tab-pane fade show active " id="intelligent ">
<p>Connecting a variaty of sensors and devices will make cities more accessible, easier to navigate in and learn about the surroundings (e.g. current wind or air pollution) </p> <p>Connecting a variaty of sensors and devices will make cities more accessible, easier to navigate in and learn about the surroundings (e.g. current wind or air pollution) </p>
<div class="d-flex align-items-center mb-2"> <div class="d-flex align-items-center mb-2 ">
<i class="bi bi-check2"></i> <i class="bi bi-check2 "></i>
<h4>Smart cities need intelligent people</h4> <h4>Intelligent cities need intelligent people</h4>
</div> </div>
<p>The human factor has an enormous impact on the development of a city, thus people need to be given the data and should be empowered to contriubte intelligently </p> <p>The human factor has an enormous impact on the development of a city, thus people need to be given the data and should be empowered to contriubte intelligently </p>
<div class="d-flex align-items-center mb-2"> <div class="d-flex align-items-center mb-2 ">
<i class="bi bi-check2"></i> <i class="bi bi-check2 "></i>
<h4>Intelligent data storage and distribution</h4> <h4>Intelligent data storage and distribution</h4>
</div> </div>
<p>While a plethora of data is being collected, it is even more important to disect, seperate and store data in processable junks to ensures data security and privacy of citizens.</p> <p>While a plethora of data is being collected, it is even more important to disect, seperate and store data in processable junks to ensures data security and privacy of citizens.</p>
<div class="d-flex align-items-center mb-2 ">
<i class="bi bi-check2 "></i>
<h4>Intelligent operation of utilities and infrastructure
</h4>
</div>
<p>Information makes it easier and more efficient for suppliers of electricity, mobility, communication technology, water, etc. to match peaks of production with peaks and lows of demand. Building information modelling allows
operators to repair and maintain physical assets more efficiently.
</p>
</div> </div>
<!-- End Tab 2 Content --> <!-- End Tab 1 Content -->
</div>
</div>
<div class="col-lg-12 " style="justify-content: center; " id=sustainable-arrow>
<a href="#sustainable-arrow " class="btn-read-more d-inline-flex align-items-center justify-content-center align-self-center " style="padding-left: 50%; padding-top: 50px; ">
<!-- <span>more</span> -->
<i class="bi bi-arrow-down " style="font-size: 40px "></i>
</a>
</div>
</div>
<!-- End Feature Tabs ======== INTELLIGENT ======== -->
<div class="tab-pane fade show" id="tab3">
<!-- Feature Tabs ======== SUSTAIABLE ======== -->
<div id="sustainable-top " class="row feture-tabs " data-aos="fade-up ">
<header class="section-header ">
<p class="nav-link active " data-bs-toggle="pill " href="#tab1 ">sustainable</p>
</header>
<div class="col-lg-6 ">
<!-- Tabs -->
<!-- <ul class="nav nav-pills mb-3 ">
<li>
<a class="nav-link active " data-bs-toggle="pill " href="#tab1 ">livable</a>
</li>
</ul> -->
<!-- End Tabs -->
<!-- Tab Content -->
<div class="tab-content ">
<div class="tab-pane fade show active " id="sustainable ">
<p>Tomorrow's city spends its resources carefully. This means that resources need to be collected, measured, conserved and used at the right time and place.</p> <p>Tomorrow's city spends its resources carefully. This means that resources need to be collected, measured, conserved and used at the right time and place.</p>
<div class="d-flex align-items-center mb-2"> <div class="d-flex align-items-center mb-2 ">
<i class="bi bi-check2"></i> <i class="bi bi-check2 "></i>
<h4>Quality of live is at the heart of smart cities and citizens foster it </h4> <h4>Quality of live is at the heart of intelligent cities and citizens foster it </h4>
</div> </div>
<p>Modern cities provide more green spaces and natural environments to live and spend quality time with friends and family.</p> <p>Modern cities provide more green spaces and natural environments to live and spend quality time with friends and family.</p>
<div class="d-flex align-items-center mb-2"> <div class="d-flex align-items-center mb-2 ">
<i class="bi bi-check2"></i> <i class="bi bi-check2 "></i>
<h4>Live like there is no tomorrow - reduce your carbon foot print</h4> <h4>Live like there is no tomorrow - reduce your carbon foot print</h4>
</div> </div>
<p>By visualizing air pollution and CO2 concentration as well as wind flows of the city using 3D web-applications, citizens may be more sensitive to their behavior and are easiert incentivized to use environmentally friendly <p>By visualizing air pollution and CO2 concentration as well as wind flows of the city using 3D web-applications, citizens may be more sensitive to their behavior and are easiert incentivized to use environmentally friendly
modes of transportation.</p> modes of transportation.</p>
</div>
<!-- End Tab 3 Content -->
<div class="d-flex align-items-center mb-2 ">
<i class="bi bi-check2 "></i>
<h4>Cradle 2 Cradle</h4>
</div>
<p>A material cadaster for buildings and infrastructure keeps track of materials like copper and steel that are used in buildings and become raw materials at the end of the buildings service life. </p>
</div>
<!-- End Tab 1 Content -->
</div> </div>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6 ">
<img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Forschung/_processed_/3/a/csm_iCity_bubbles_HFT_Stadt_ce4e80930c.png" class="img-fluid" alt=""> <!-- <img src="assets/img/sustainable.jpg " class="img-fluid " alt=" "> -->
<img src="assets/img/200127_Luftstroemung.jpg " class="img-fluid " alt=" ">
</div>
<div class="col-lg-12 " style="justify-content: center; " id=featureicon-arrow>
<a href="#featureicon-arrow " class="btn-read-more d-inline-flex align-items-center justify-content-center align-self-center " style="padding-left: 50%; padding-top: 50px; ">
<!-- <span>more</span> -->
<i class="bi bi-arrow-down " style="font-size: 50px "></i>
</a>
</div> </div>
</div> </div>
<!-- End Feature Tabs --> <!-- End Feature Tabs ======== LIVABLE ======== -->
<!-- Feature Icons --> <!-- Feature Icons -->
<div class="row feature-icons" data-aos="fade-up"> <!-- <div class="row feature-icons " data-aos="fade-up ">
<h3></h3> <h3></h3>
<div class="row"> <div class="row ">
<div class="col-xl-4 text-center" data-aos="fade-right" data-aos-delay="100"> <div class="col-xl-4 text-center " data-aos="fade-right " data-aos-delay="100 ">
<img src="assets/img/features-3.png" class="img-fluid p-4" alt=""> <!-- <img src="assets/img/features-3.png " class="img-fluid p-4 " alt=" "> -->
</div> <!-- <img src="assets/img/workspace.jpg " class="img-fluid p-4 " alt=" ">
</div>
<div class="col-xl-8 d-flex content"> <div class="col-xl-8 d-flex content ">
<div class="row align-self-center gy-4"> <div class="row align-self-center gy-4 ">
<div class="col-md-6 icon-box" data-aos="fade-up"> <div class="col-md-6 icon-box " data-aos="fade-up ">
<i class="ri-line-chart-line"></i> <i class="ri-line-chart-line "></i>
<div> <div>
<h4>Corporis voluptates sit</h4> <h4>Corporis voluptates sit</h4>
<p>Consequuntur sunt aut quasi enim aliquam quae harum pariatur laboris nisi ut aliquip</p> <p>Consequuntur sunt aut quasi enim aliquam quae harum pariatur laboris nisi ut aliquip</p>
</div> </div>
</div> </div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="100"> <div class="col-md-6 icon-box " data-aos="fade-up " data-aos-delay="100 ">
<i class="ri-stack-line"></i> <i class="ri-stack-line "></i>
<div> <div>
<h4>Ullamco laboris nisi</h4> <h4>Ullamco laboris nisi</h4>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt</p> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt</p>
</div> </div>
</div> </div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="200"> <div class="col-md-6 icon-box " data-aos="fade-up " data-aos-delay="200 ">
<i class="ri-brush-4-line"></i> <i class="ri-brush-4-line "></i>
<div> <div>
<h4>Labore consequatur</h4> <h4>Labore consequatur</h4>
<p>Aut suscipit aut cum nemo deleniti aut omnis. Doloribus ut maiores omnis facere</p> <p>Aut suscipit aut cum nemo deleniti aut omnis. Doloribus ut maiores omnis facere</p>
</div> </div>
</div> </div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="300"> <div class="col-md-6 icon-box " data-aos="fade-up " data-aos-delay="300 ">
<i class="ri-magic-line"></i> <i class="ri-magic-line "></i>
<div> <div>
<h4>Beatae veritatis</h4> <h4>Beatae veritatis</h4>
<p>Expedita veritatis consequuntur nihil tempore laudantium vitae denat pacta</p> <p>Expedita veritatis consequuntur nihil tempore laudantium vitae denat pacta</p>
</div> </div>
</div> </div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="400"> <div class="col-md-6 icon-box " data-aos="fade-up " data-aos-delay="400 ">
<i class="ri-command-line"></i> <i class="ri-command-line "></i>
<div> <div>
<h4>Molestiae dolor</h4> <h4>Molestiae dolor</h4>
<p>Et fuga et deserunt et enim. Dolorem architecto ratione tensa raptor marte</p> <p>Et fuga et deserunt et enim. Dolorem architecto ratione tensa raptor marte</p>
</div> </div>
</div> </div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="500"> <div class="col-md-6 icon-box " data-aos="fade-up " data-aos-delay="500 ">
<i class="ri-radar-line"></i> <i class="ri-radar-line "></i>
<div> <div>
<h4>Explicabo consectetur</h4> <h4>Explicabo consectetur</h4>
<p>Est autem dicta beatae suscipit. Sint veritatis et sit quasi ab aut inventore</p> <p>Est autem dicta beatae suscipit. Sint veritatis et sit quasi ab aut inventore</p>
...@@ -362,77 +504,82 @@ ...@@ -362,77 +504,82 @@
</div> </div>
</div> </div> -->
<!-- End Feature Icons --> <!-- End Feature Icons -->
</div> </div>
</section> </section>
<!-- End Features Section --> <!-- End Features Section -->
<!-- ======= Services Section ======= --> <!-- ======= Services Section ======= -->
<section id="services" class="services"> <!-- <section id="services " class="services ">
<div class="container" data-aos="fade-up"> <div class="container " data-aos="fade-up ">
<header class="section-header"> <header class="section-header ">
<h2>Services</h2> <h2>Services</h2>
<p>Veritatis et dolores facere numquam et praesentium</p> <p>Veritatis et dolores facere numquam et praesentium</p>
</header> </header>
<div class="row gy-4"> <div class="row gy-4 ">
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200"> <div class="col-lg-4 col-md-6 " data-aos="fade-up " data-aos-delay="200 ">
<div class="service-box blue"> <div class="service-box blue ">
<i class="ri-discuss-line icon"></i> <i class="ri-discuss-line icon "></i>
<h3>Nesciunt Mete</h3> <h3>Nesciunt Mete</h3>
<p>Provident nihil minus qui consequatur non omnis maiores. Eos accusantium minus dolores iure perferendis tempore et consequatur.</p> <p>Provident nihil minus qui consequatur non omnis maiores. Eos accusantium minus dolores iure perferendis tempore et consequatur.</p>
<a href="#" class="read-more"><span>Read More</span> <i class="bi bi-arrow-right"></i></a> <a href="# " class="read-more "><span>Read More</span> <i class="bi bi-arrow-right "></i></a>
</div> </div>
</div> </div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300"> <div class="col-lg-4 col-md-6 " data-aos="fade-up " data-aos-delay="300 ">
<div class="service-box orange"> <div class="service-box orange ">
<i class="ri-discuss-line icon"></i> <i class="ri-discuss-line icon "></i>
<h3>Eosle Commodi</h3> <h3>Eosle Commodi</h3>
<p>Ut autem aut autem non a. Sint sint sit facilis nam iusto sint. Libero corrupti neque eum hic non ut nesciunt dolorem.</p> <p>Ut autem aut autem non a. Sint sint sit facilis nam iusto sint. Libero corrupti neque eum hic non ut nesciunt dolorem.</p>
<a href="#" class="read-more"><span>Read More</span> <i class="bi bi-arrow-right"></i></a> <a href="# " class="read-more "><span>Read More</span> <i class="bi bi-arrow-right "></i></a>
</div> </div>
</div> </div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="400"> <div class="col-lg-4 col-md-6 " data-aos="fade-up " data-aos-delay="400 ">
<div class="service-box green"> <div class="service-box green ">
<i class="ri-discuss-line icon"></i> <i class="ri-discuss-line icon "></i>
<h3>Ledo Markt</h3> <h3>Ledo Markt</h3>
<p>Ut excepturi voluptatem nisi sed. Quidem fuga consequatur. Minus ea aut. Vel qui id voluptas adipisci eos earum corrupti.</p> <p>Ut excepturi voluptatem nisi sed. Quidem fuga consequatur. Minus ea aut. Vel qui id voluptas adipisci eos earum corrupti.</p>
<a href="#" class="read-more"><span>Read More</span> <i class="bi bi-arrow-right"></i></a> <a href="# " class="read-more "><span>Read More</span> <i class="bi bi-arrow-right "></i></a>
</div> </div>
</div> </div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="500"> <div class="col-lg-4 col-md-6 " data-aos="fade-up " data-aos-delay="500 ">
<div class="service-box red"> <div class="service-box red ">
<i class="ri-discuss-line icon"></i> <i class="ri-discuss-line icon "></i>
<h3>Asperiores Commodi</h3> <h3>Asperiores Commodi</h3>
<p>Non et temporibus minus omnis sed dolor esse consequatur. Cupiditate sed error ea fuga sit provident adipisci neque.</p> <p>Non et temporibus minus omnis sed dolor esse consequatur. Cupiditate sed error ea fuga sit provident adipisci neque.</p>
<a href="#" class="read-more"><span>Read More</span> <i class="bi bi-arrow-right"></i></a> <a href="# " class="read-more "><span>Read More</span> <i class="bi bi-arrow-right "></i></a>
</div> </div>
</div> </div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="600"> <div class="col-lg-4 col-md-6 " data-aos="fade-up " data-aos-delay="600 ">
<div class="service-box purple"> <div class="service-box purple ">
<i class="ri-discuss-line icon"></i> <i class="ri-discuss-line icon "></i>
<h3>Velit Doloremque.</h3> <h3>Velit Doloremque.</h3>
<p>Cumque et suscipit saepe. Est maiores autem enim facilis ut aut ipsam corporis aut. Sed animi at autem alias eius labore.</p> <p>Cumque et suscipit saepe. Est maiores autem enim facilis ut aut ipsam corporis aut. Sed animi at autem alias eius labore.</p>
<a href="#" class="read-more"><span>Read More</span> <i class="bi bi-arrow-right"></i></a> <a href="# " class="read-more "><span>Read More</span> <i class="bi bi-arrow-right "></i></a>
</div> </div>
</div> </div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="700"> <div class="col-lg-4 col-md-6 " data-aos="fade-up " data-aos-delay="700 ">
<div class="service-box pink"> <div class="service-box pink ">
<i class="ri-discuss-line icon"></i> <i class="ri-discuss-line icon "></i>
<h3>Dolori Architecto</h3> <h3>Dolori Architecto</h3>
<p>Hic molestias ea quibusdam eos. Fugiat enim doloremque aut neque non et debitis iure. Corrupti recusandae ducimus enim.</p> <p>Hic molestias ea quibusdam eos. Fugiat enim doloremque aut neque non et debitis iure. Corrupti recusandae ducimus enim.</p>
<a href="#" class="read-more"><span>Read More</span> <i class="bi bi-arrow-right"></i></a> <a href="# " class="read-more "><span>Read More</span> <i class="bi bi-arrow-right "></i></a>
</div> </div>
</div> </div>
...@@ -440,59 +587,59 @@ ...@@ -440,59 +587,59 @@
</div> </div>
</section> </section> -->
<!-- End Services Section --> <!-- End Services Section -->
<!-- ======= Pricing Section ======= --> <!-- ======= Pricing Section ======= -->
<section id="pricing" class="pricing"> <!-- <section id="pricing " class="pricing ">
<div class="container" data-aos="fade-up"> <div class="container " data-aos="fade-up ">
<header class="section-header"> <header class="section-header ">
<h2>Pricing</h2> <h2>Pricing</h2>
<p>Check our Pricing</p> <p>Check our Pricing</p>
</header> </header>
<div class="row gy-4" data-aos="fade-left"> <div class="row gy-4 " data-aos="fade-left ">
<div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-delay="100"> <div class="col-lg-3 col-md-6 " data-aos="zoom-in " data-aos-delay="100 ">
<div class="box"> <div class="box ">
<h3 style="color: #07d5c0;">Free Plan</h3> <h3 style="color: #07d5c0; ">Free Plan</h3>
<div class="price"><sup>$</sup>0<span> / mo</span></div> <div class="price "><sup>$</sup>0<span> / mo</span></div>
<img src="assets/img/pricing-free.png" class="img-fluid" alt=""> <img src="assets/img/pricing-free.png " class="img-fluid " alt=" ">
<ul> <ul>
<li>Aida dere</li> <li>Aida dere</li>
<li>Nec feugiat nisl</li> <li>Nec feugiat nisl</li>
<li>Nulla at volutpat dola</li> <li>Nulla at volutpat dola</li>
<li class="na">Pharetra massa</li> <li class="na ">Pharetra massa</li>
<li class="na">Massa ultricies mi</li> <li class="na ">Massa ultricies mi</li>
</ul> </ul>
<a href="#" class="btn-buy">Buy Now</a> <a href="# " class="btn-buy ">Buy Now</a>
</div> </div>
</div> </div>
<div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-delay="200"> <div class="col-lg-3 col-md-6 " data-aos="zoom-in " data-aos-delay="200 ">
<div class="box"> <div class="box ">
<span class="featured">Featured</span> <span class="featured ">Featured</span>
<h3 style="color: #65c600;">Starter Plan</h3> <h3 style="color: #65c600; ">Starter Plan</h3>
<div class="price"><sup>$</sup>19<span> / mo</span></div> <div class="price "><sup>$</sup>19<span> / mo</span></div>
<img src="assets/img/pricing-starter.png" class="img-fluid" alt=""> <img src="assets/img/pricing-starter.png " class="img-fluid " alt=" ">
<ul> <ul>
<li>Aida dere</li> <li>Aida dere</li>
<li>Nec feugiat nisl</li> <li>Nec feugiat nisl</li>
<li>Nulla at volutpat dola</li> <li>Nulla at volutpat dola</li>
<li>Pharetra massa</li> <li>Pharetra massa</li>
<li class="na">Massa ultricies mi</li> <li class="na ">Massa ultricies mi</li>
</ul> </ul>
<a href="#" class="btn-buy">Buy Now</a> <a href="# " class="btn-buy ">Buy Now</a>
</div> </div>
</div> </div>
<div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-delay="300"> <div class="col-lg-3 col-md-6 " data-aos="zoom-in " data-aos-delay="300 ">
<div class="box"> <div class="box ">
<h3 style="color: #ff901c;">Business Plan</h3> <h3 style="color: #ff901c; ">Business Plan</h3>
<div class="price"><sup>$</sup>29<span> / mo</span></div> <div class="price "><sup>$</sup>29<span> / mo</span></div>
<img src="assets/img/pricing-business.png" class="img-fluid" alt=""> <img src="assets/img/pricing-business.png " class="img-fluid " alt=" ">
<ul> <ul>
<li>Aida dere</li> <li>Aida dere</li>
<li>Nec feugiat nisl</li> <li>Nec feugiat nisl</li>
...@@ -500,15 +647,15 @@ ...@@ -500,15 +647,15 @@
<li>Pharetra massa</li> <li>Pharetra massa</li>
<li>Massa ultricies mi</li> <li>Massa ultricies mi</li>
</ul> </ul>
<a href="#" class="btn-buy">Buy Now</a> <a href="# " class="btn-buy ">Buy Now</a>
</div> </div>
</div> </div>
<div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-delay="400"> <div class="col-lg-3 col-md-6 " data-aos="zoom-in " data-aos-delay="400 ">
<div class="box"> <div class="box ">
<h3 style="color: #ff0071;">Ultimate Plan</h3> <h3 style="color: #ff0071; ">Ultimate Plan</h3>
<div class="price"><sup>$</sup>49<span> / mo</span></div> <div class="price "><sup>$</sup>49<span> / mo</span></div>
<img src="assets/img/pricing-ultimate.png" class="img-fluid" alt=""> <img src="assets/img/pricing-ultimate.png " class="img-fluid " alt=" ">
<ul> <ul>
<li>Aida dere</li> <li>Aida dere</li>
<li>Nec feugiat nisl</li> <li>Nec feugiat nisl</li>
...@@ -516,7 +663,7 @@ ...@@ -516,7 +663,7 @@
<li>Pharetra massa</li> <li>Pharetra massa</li>
<li>Massa ultricies mi</li> <li>Massa ultricies mi</li>
</ul> </ul>
<a href="#" class="btn-buy">Buy Now</a> <a href="# " class="btn-buy ">Buy Now</a>
</div> </div>
</div> </div>
...@@ -524,53 +671,54 @@ ...@@ -524,53 +671,54 @@
</div> </div>
</section> </section> -->
<!-- End Pricing Section --> <!-- End Pricing Section -->
<!-- ======= Values Section ======= --> <!-- ======= Values Section ======= -->
<section id="values" class="values"> <section id="values " class="values ">
<div class="container" data-aos="fade-up"> <div class="container " data-aos="fade-up ">
<header class="section-header"> <header class="section-header ">
<h2>City Demonstrator</h2> <h2>City Demonstrator</h2>
<p>Select one City Demonstrator to explorer</p> <p>Select one Demonstrator to explore</p>
</header> </header>
<div class="row"> <div class="row ">
<div class="col-lg-4"> <div class="col-lg-4 ">
<div class="box" data-aos="fade-up" data-aos-delay="200"> <div class="box " data-aos="fade-up " data-aos-delay="200 ">
<!-- <img src="assets/img/values-1.png" class="img-fluid" alt=""> <!-- <img src="assets/img/values-1.png " class="img-fluid " alt=" ">
<h3>DreSo</h3> --> <h3>DreSo</h3> -->
<h3>Drees & Sommer</h3> <h3>Drees & Sommer</h3>
<a href="https://www.dreso.com/de/" class="logo d-flex align-items-center"> <a href="https://www.dreso.com/de/ " class="logo d-flex align-items-center ">
<img src="https://www.dreso.com/typo3conf/ext/dreso/Resources/Public/dreso-logo.svg" width="350" height="300" alt=""> <img src="assets/img/DreeSoDemonstrator3.png" width="350 " alt=" ">
<!-- <span>City Demonstrator</span> --> <!-- <span>City Demonstrator</span> -->
</a> </a>
<p>Explore the Smart City Demonstrator from DresSo</p> <p>Explore the City Demonstrator from Drees & Sommer
</p>
</div> </div>
</div> </div>
<div class="col-lg-4 mt-4 mt-lg-0"> <div class="col-lg-4 mt-4 mt-lg-0 ">
<!-- <div class="box" data-aos="fade-up" data-aos-delay="400"> <!-- <div class="box " data-aos="fade-up " data-aos-delay="400 ">
<img src="assets/img/values-2.png" class="img-fluid" alt=""> <img src="assets/img/values-2.png " class="img-fluid " alt=" ">
<h3>Voluptatem voluptatum alias</h3> <h3>Voluptatem voluptatum alias</h3>
<p>Repudiandae amet nihil natus in distinctio suscipit id. Doloremque ducimus ea sit non.</p> <p>Repudiandae amet nihil natus in distinctio suscipit id. Doloremque ducimus ea sit non.</p>
</div> --> </div> -->
</div> </div>
<div class="col-lg-4 mt-4 mt-lg-0"> <div class="col-lg-4 mt-4 mt-lg-0 ">
<div class="box" data-aos="fade-up" data-aos-delay="600"> <div class="box " data-aos="fade-up " data-aos-delay="600 ">
<!-- <img src="https://www.hft-stuttgart.de/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg" class="img-fluid" alt=""> --> <!-- <img src="https://www.hft-stuttgart.de/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg " class="img-fluid " alt=" "> -->
<h3>HFT Stuttgart</h3> <h3>HFT Stuttgart</h3>
<a href="https://ugl.hft-stuttgart.de/" class="logo d-flex align-items-center"> <a href="https://ugl.hft-stuttgart.de/ " class="logo d-flex align-items-center ">
<img src="https://www.hft-stuttgart.de/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg" alt=""> <img src="https://www.hft-stuttgart.de/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg " alt=" ">
<!-- <span>City Demonstrator</span> --> <!-- <span>City Demonstrator</span> -->
</a> </a>
<p>Explore the Smart City Demonstrator from HfT Stuttgart</p> <p>Explore the City Demonstrator from HfT Stuttgart</p>
</div> </div>
</div> </div>
...@@ -582,46 +730,46 @@ ...@@ -582,46 +730,46 @@
<!-- End Values Section --> <!-- End Values Section -->
<!-- ======= Counts Section ======= --> <!-- ======= Counts Section ======= -->
<section id="counts" class="counts"> <!-- <section id="counts " class="counts ">
<div class="container" data-aos="fade-up"> <div class="container " data-aos="fade-up ">
<div class="row gy-4"> <div class="row gy-4 ">
<div class="col-lg-3 col-md-6"> <div class="col-lg-3 col-md-6 ">
<div class="count-box"> <div class="count-box ">
<i class="bi bi-emoji-smile"></i> <i class="bi bi-emoji-smile "></i>
<div> <div>
<span data-purecounter-start="0" data-purecounter-end="232" data-purecounter-duration="2" class="purecounter"></span> <span data-purecounter-start="0 " data-purecounter-end="232 " data-purecounter-duration="2 " class="purecounter "></span>
<p>Happy Clients</p> <p>Happy Clients</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-3 col-md-6"> <div class="col-lg-3 col-md-6 ">
<div class="count-box"> <div class="count-box ">
<i class="bi bi-journal-richtext" style="color: #ee6c20;"></i> <i class="bi bi-journal-richtext " style="color: #ee6c20; "></i>
<div> <div>
<span data-purecounter-start="0" data-purecounter-end="521" data-purecounter-duration="2" class="purecounter"></span> <span data-purecounter-start="0 " data-purecounter-end="521 " data-purecounter-duration="2 " class="purecounter "></span>
<p>Projects</p> <p>Projects</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-3 col-md-6"> <div class="col-lg-3 col-md-6 ">
<div class="count-box"> <div class="count-box ">
<i class="bi bi-headset" style="color: #15be56;"></i> <i class="bi bi-headset " style="color: #15be56; "></i>
<div> <div>
<span data-purecounter-start="0" data-purecounter-end="1463" data-purecounter-duration="1" class="purecounter"></span> <span data-purecounter-start="0 " data-purecounter-end="1463 " data-purecounter-duration="1 " class="purecounter "></span>
<p>Hours Of Support</p> <p>Hours Of Support</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-3 col-md-6"> <div class="col-lg-3 col-md-6 ">
<div class="count-box"> <div class="count-box ">
<i class="bi bi-people" style="color: #bb0852;"></i> <i class="bi bi-people " style="color: #bb0852; "></i>
<div> <div>
<span data-purecounter-start="0" data-purecounter-end="15" data-purecounter-duration="1" class="purecounter"></span> <span data-purecounter-start="0 " data-purecounter-end="15 " data-purecounter-duration="1 " class="purecounter "></span>
<p>Hard Workers</p> <p>Hard Workers</p>
</div> </div>
</div> </div>
...@@ -630,7 +778,7 @@ ...@@ -630,7 +778,7 @@
</div> </div>
</div> </div>
</section> </section> -->
<!-- End Counts Section --> <!-- End Counts Section -->
...@@ -639,264 +787,152 @@ ...@@ -639,264 +787,152 @@
<!-- ======= F.A.Q Section ======= -->
<section id="faq" class="faq">
<div class="container" data-aos="fade-up">
<header class="section-header">
<h2>F.A.Q</h2>
<p>Frequently Asked Questions</p>
</header>
<div class="row">
<div class="col-lg-6">
<!-- F.A.Q List 1-->
<div class="accordion accordion-flush" id="faqlist1">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-content-1">
Non consectetur a erat nam at lectus urna duis?
</button>
</h2>
<div id="faq-content-1" class="accordion-collapse collapse" data-bs-parent="#faqlist1">
<div class="accordion-body">
Feugiat pretium nibh ipsum consequat. Tempus iaculis urna id volutpat lacus laoreet non curabitur gravida. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-content-2">
Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque?
</button>
</h2>
<div id="faq-content-2" class="accordion-collapse collapse" data-bs-parent="#faqlist1">
<div class="accordion-body">
Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Id interdum velit laoreet id donec ultrices. Fringilla phasellus faucibus scelerisque eleifend donec pretium. Est pellentesque elit ullamcorper dignissim. Mauris ultrices eros in
cursus turpis massa tincidunt dui.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-content-3">
Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi?
</button>
</h2>
<div id="faq-content-3" class="accordion-collapse collapse" data-bs-parent="#faqlist1">
<div class="accordion-body">
Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Faucibus pulvinar elementum integer enim. Sem nulla pharetra diam sit amet nisl suscipit. Rutrum tellus pellentesque eu tincidunt. Lectus urna duis convallis convallis tellus. Urna
molestie at elementum eu facilisis sed odio morbi quis
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- F.A.Q List 2-->
<div class="accordion accordion-flush" id="faqlist2">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2-content-1">
Ac odio tempor orci dapibus. Aliquam eleifend mi in nulla?
</button>
</h2>
<div id="faq2-content-1" class="accordion-collapse collapse" data-bs-parent="#faqlist2">
<div class="accordion-body">
Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Id interdum velit laoreet id donec ultrices. Fringilla phasellus faucibus scelerisque eleifend donec pretium. Est pellentesque elit ullamcorper dignissim. Mauris ultrices eros in
cursus turpis massa tincidunt dui.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2-content-2">
Tempus quam pellentesque nec nam aliquam sem et tortor consequat?
</button>
</h2>
<div id="faq2-content-2" class="accordion-collapse collapse" data-bs-parent="#faqlist2">
<div class="accordion-body">
Molestie a iaculis at erat pellentesque adipiscing commodo. Dignissim suspendisse in est ante in. Nunc vel risus commodo viverra maecenas accumsan. Sit amet nisl suscipit adipiscing bibendum est. Purus gravida quis blandit turpis cursus in
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2-content-3">
Varius vel pharetra vel turpis nunc eget lorem dolor?
</button>
</h2>
<div id="faq2-content-3" class="accordion-collapse collapse" data-bs-parent="#faqlist2">
<div class="accordion-body">
Laoreet sit amet cursus sit amet dictum sit amet justo. Mauris vitae ultricies leo integer malesuada nunc vel. Tincidunt eget nullam non nisi est sit amet. Turpis nunc eget lorem dolor sed. Ut venenatis tellus in metus vulputate eu scelerisque. Pellentesque
diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Nibh tellus molestie nunc non blandit massa enim nec.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End F.A.Q Section -->
<!-- ======= Portfolio Section ======= --> <!-- ======= Portfolio Section ======= -->
<!-- <section id="portfolio" class="portfolio"> <!-- <section id="portfolio " class="portfolio ">
<div class="container" data-aos="fade-up"> <div class="container " data-aos="fade-up ">
<header class="section-header"> <header class="section-header ">
<h2>Portfolio</h2> <h2>Portfolio</h2>
<p>Check our latest work</p> <p>Check our latest work</p>
</header> </header>
<div class="row" data-aos="fade-up" data-aos-delay="100"> <div class="row " data-aos="fade-up " data-aos-delay="100 ">
<div class="col-lg-12 d-flex justify-content-center"> <div class="col-lg-12 d-flex justify-content-center ">
<ul id="portfolio-flters"> <ul id="portfolio-flters ">
<li data-filter="*" class="filter-active">All</li> <li data-filter="* " class="filter-active ">All</li>
<li data-filter=".filter-app">App</li> <li data-filter=".filter-app ">App</li>
<li data-filter=".filter-card">Card</li> <li data-filter=".filter-card ">Card</li>
<li data-filter=".filter-web">Web</li> <li data-filter=".filter-web ">Web</li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="row gy-4 portfolio-container" data-aos="fade-up" data-aos-delay="200"> <div class="row gy-4 portfolio-container " data-aos="fade-up " data-aos-delay="200 ">
<div class="col-lg-4 col-md-6 portfolio-item filter-app"> <div class="col-lg-4 col-md-6 portfolio-item filter-app ">
<div class="portfolio-wrap"> <div class="portfolio-wrap ">
<img src="assets/img/portfolio/portfolio-1.jpg" class="img-fluid" alt=""> <img src="assets/img/portfolio/portfolio-1.jpg " class="img-fluid " alt=" ">
<div class="portfolio-info"> <div class="portfolio-info ">
<h4>App 1</h4> <h4>App 1</h4>
<p>App</p> <p>App</p>
<div class="portfolio-links"> <div class="portfolio-links ">
<a href="assets/img/portfolio/portfolio-1.jpg" data-gallery="portfolioGallery" class="portfokio-lightbox" title="App 1"><i class="bi bi-plus"></i></a> <a href="assets/img/portfolio/portfolio-1.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="App 1 "><i class="bi bi-plus "></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a> <a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web"> <div class="col-lg-4 col-md-6 portfolio-item filter-web ">
<div class="portfolio-wrap"> <div class="portfolio-wrap ">
<img src="assets/img/portfolio/portfolio-2.jpg" class="img-fluid" alt=""> <img src="assets/img/portfolio/portfolio-2.jpg " class="img-fluid " alt=" ">
<div class="portfolio-info"> <div class="portfolio-info ">
<h4>Web 3</h4> <h4>Web 3</h4>
<p>Web</p> <p>Web</p>
<div class="portfolio-links"> <div class="portfolio-links ">
<a href="assets/img/portfolio/portfolio-2.jpg" data-gallery="portfolioGallery" class="portfokio-lightbox" title="Web 3"><i class="bi bi-plus"></i></a> <a href="assets/img/portfolio/portfolio-2.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="Web 3 "><i class="bi bi-plus "></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a> <a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-4 col-md-6 portfolio-item filter-app"> <div class="col-lg-4 col-md-6 portfolio-item filter-app ">
<div class="portfolio-wrap"> <div class="portfolio-wrap ">
<img src="assets/img/portfolio/portfolio-3.jpg" class="img-fluid" alt=""> <img src="assets/img/portfolio/portfolio-3.jpg " class="img-fluid " alt=" ">
<div class="portfolio-info"> <div class="portfolio-info ">
<h4>App 2</h4> <h4>App 2</h4>
<p>App</p> <p>App</p>
<div class="portfolio-links"> <div class="portfolio-links ">
<a href="assets/img/portfolio/portfolio-3.jpg" data-gallery="portfolioGallery" class="portfokio-lightbox" title="App 2"><i class="bi bi-plus"></i></a> <a href="assets/img/portfolio/portfolio-3.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="App 2 "><i class="bi bi-plus "></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a> <a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card"> <div class="col-lg-4 col-md-6 portfolio-item filter-card ">
<div class="portfolio-wrap"> <div class="portfolio-wrap ">
<img src="assets/img/portfolio/portfolio-4.jpg" class="img-fluid" alt=""> <img src="assets/img/portfolio/portfolio-4.jpg " class="img-fluid " alt=" ">
<div class="portfolio-info"> <div class="portfolio-info ">
<h4>Card 2</h4> <h4>Card 2</h4>
<p>Card</p> <p>Card</p>
<div class="portfolio-links"> <div class="portfolio-links ">
<a href="assets/img/portfolio/portfolio-4.jpg" data-gallery="portfolioGallery" class="portfokio-lightbox" title="Card 2"><i class="bi bi-plus"></i></a> <a href="assets/img/portfolio/portfolio-4.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="Card 2 "><i class="bi bi-plus "></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a> <a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web"> <div class="col-lg-4 col-md-6 portfolio-item filter-web ">
<div class="portfolio-wrap"> <div class="portfolio-wrap ">
<img src="assets/img/portfolio/portfolio-5.jpg" class="img-fluid" alt=""> <img src="assets/img/portfolio/portfolio-5.jpg " class="img-fluid " alt=" ">
<div class="portfolio-info"> <div class="portfolio-info ">
<h4>Web 2</h4> <h4>Web 2</h4>
<p>Web</p> <p>Web</p>
<div class="portfolio-links"> <div class="portfolio-links ">
<a href="assets/img/portfolio/portfolio-5.jpg" data-gallery="portfolioGallery" class="portfokio-lightbox" title="Web 2"><i class="bi bi-plus"></i></a> <a href="assets/img/portfolio/portfolio-5.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="Web 2 "><i class="bi bi-plus "></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a> <a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-4 col-md-6 portfolio-item filter-app"> <div class="col-lg-4 col-md-6 portfolio-item filter-app ">
<div class="portfolio-wrap"> <div class="portfolio-wrap ">
<img src="assets/img/portfolio/portfolio-6.jpg" class="img-fluid" alt=""> <img src="assets/img/portfolio/portfolio-6.jpg " class="img-fluid " alt=" ">
<div class="portfolio-info"> <div class="portfolio-info ">
<h4>App 3</h4> <h4>App 3</h4>
<p>App</p> <p>App</p>
<div class="portfolio-links"> <div class="portfolio-links ">
<a href="assets/img/portfolio/portfolio-6.jpg" data-gallery="portfolioGallery" class="portfokio-lightbox" title="App 3"><i class="bi bi-plus"></i></a> <a href="assets/img/portfolio/portfolio-6.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="App 3 "><i class="bi bi-plus "></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a> <a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card"> <div class="col-lg-4 col-md-6 portfolio-item filter-card ">
<div class="portfolio-wrap"> <div class="portfolio-wrap ">
<img src="assets/img/portfolio/portfolio-7.jpg" class="img-fluid" alt=""> <img src="assets/img/portfolio/portfolio-7.jpg " class="img-fluid " alt=" ">
<div class="portfolio-info"> <div class="portfolio-info ">
<h4>Card 1</h4> <h4>Card 1</h4>
<p>Card</p> <p>Card</p>
<div class="portfolio-links"> <div class="portfolio-links ">
<a href="assets/img/portfolio/portfolio-7.jpg" data-gallery="portfolioGallery" class="portfokio-lightbox" title="Card 1"><i class="bi bi-plus"></i></a> <a href="assets/img/portfolio/portfolio-7.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="Card 1 "><i class="bi bi-plus "></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a> <a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card"> <div class="col-lg-4 col-md-6 portfolio-item filter-card ">
<div class="portfolio-wrap"> <div class="portfolio-wrap ">
<img src="assets/img/portfolio/portfolio-8.jpg" class="img-fluid" alt=""> <img src="assets/img/portfolio/portfolio-8.jpg " class="img-fluid " alt=" ">
<div class="portfolio-info"> <div class="portfolio-info ">
<h4>Card 3</h4> <h4>Card 3</h4>
<p>Card</p> <p>Card</p>
<div class="portfolio-links"> <div class="portfolio-links ">
<a href="assets/img/portfolio/portfolio-8.jpg" data-gallery="portfolioGallery" class="portfokio-lightbox" title="Card 3"><i class="bi bi-plus"></i></a> <a href="assets/img/portfolio/portfolio-8.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="Card 3 "><i class="bi bi-plus "></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a> <a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web"> <div class="col-lg-4 col-md-6 portfolio-item filter-web ">
<div class="portfolio-wrap"> <div class="portfolio-wrap ">
<img src="assets/img/portfolio/portfolio-9.jpg" class="img-fluid" alt=""> <img src="assets/img/portfolio/portfolio-9.jpg " class="img-fluid " alt=" ">
<div class="portfolio-info"> <div class="portfolio-info ">
<h4>Web 3</h4> <h4>Web 3</h4>
<p>Web</p> <p>Web</p>
<div class="portfolio-links"> <div class="portfolio-links ">
<a href="assets/img/portfolio/portfolio-9.jpg" data-gallery="portfolioGallery" class="portfokio-lightbox" title="Web 3"><i class="bi bi-plus"></i></a> <a href="assets/img/portfolio/portfolio-9.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="Web 3 "><i class="bi bi-plus "></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a> <a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
</div> </div>
</div> </div>
</div> </div>
...@@ -910,28 +946,28 @@ ...@@ -910,28 +946,28 @@
<!-- End Portfolio Section --> <!-- End Portfolio Section -->
<!-- ======= Testimonials Section ======= --> <!-- ======= Testimonials Section ======= -->
<!-- <section id="testimonials" class="testimonials"> <!-- <section id="testimonials " class="testimonials ">
<div class="container" data-aos="fade-up"> <div class="container " data-aos="fade-up ">
<header class="section-header"> <header class="section-header ">
<h2>Testimonials</h2> <h2>Testimonials</h2>
<p>What they are saying about us</p> <p>What they are saying about us</p>
</header> </header>
<div class="testimonials-slider swiper-container" data-aos="fade-up" data-aos-delay="200"> <div class="testimonials-slider swiper-container " data-aos="fade-up " data-aos-delay="200 ">
<div class="swiper-wrapper"> <div class="swiper-wrapper ">
<div class="swiper-slide"> <div class="swiper-slide ">
<div class="testimonial-item"> <div class="testimonial-item ">
<div class="stars"> <div class="stars ">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i> <i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i>
</div> </div>
<p> <p>
Proin iaculis purus consequat sem cure digni ssim donec porttitora entum suscipit rhoncus. Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen aliquam, risus at semper. Proin iaculis purus consequat sem cure digni ssim donec porttitora entum suscipit rhoncus. Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen aliquam, risus at semper.
</p> </p>
<div class="profile mt-auto"> <div class="profile mt-auto ">
<img src="assets/img/testimonials/testimonials-1.jpg" class="testimonial-img" alt=""> <img src="assets/img/testimonials/testimonials-1.jpg " class="testimonial-img " alt=" ">
<h3>Saul Goodman</h3> <h3>Saul Goodman</h3>
<h4>Ceo &amp; Founder</h4> <h4>Ceo &amp; Founder</h4>
</div> </div>
...@@ -939,16 +975,16 @@ ...@@ -939,16 +975,16 @@
</div> </div>
<!-- End testimonial item --> <!-- End testimonial item -->
<!-- <div class="swiper-slide"> <!-- <div class="swiper-slide ">
<div class="testimonial-item"> <div class="testimonial-item ">
<div class="stars"> <div class="stars ">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i> <i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i>
</div> </div>
<p> <p>
Export tempor illum tamen malis malis eram quae irure esse labore quem cillum quid cillum eram malis quorum velit fore eram velit sunt aliqua noster fugiat irure amet legam anim culpa. Export tempor illum tamen malis malis eram quae irure esse labore quem cillum quid cillum eram malis quorum velit fore eram velit sunt aliqua noster fugiat irure amet legam anim culpa.
</p> </p>
<div class="profile mt-auto"> <div class="profile mt-auto ">
<img src="assets/img/testimonials/testimonials-2.jpg" class="testimonial-img" alt=""> <img src="assets/img/testimonials/testimonials-2.jpg " class="testimonial-img " alt=" ">
<h3>Sara Wilsson</h3> <h3>Sara Wilsson</h3>
<h4>Designer</h4> <h4>Designer</h4>
</div> </div>
...@@ -956,16 +992,16 @@ ...@@ -956,16 +992,16 @@
</div> </div>
<!-- End testimonial item --> <!-- End testimonial item -->
<!-- <div class="swiper-slide"> <!-- <div class="swiper-slide ">
<div class="testimonial-item"> <div class="testimonial-item ">
<div class="stars"> <div class="stars ">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i> <i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i>
</div> </div>
<p> <p>
Enim nisi quem export duis labore cillum quae magna enim sint quorum nulla quem veniam duis minim tempor labore quem eram duis noster aute amet eram fore quis sint minim. Enim nisi quem export duis labore cillum quae magna enim sint quorum nulla quem veniam duis minim tempor labore quem eram duis noster aute amet eram fore quis sint minim.
</p> </p>
<div class="profile mt-auto"> <div class="profile mt-auto ">
<img src="assets/img/testimonials/testimonials-3.jpg" class="testimonial-img" alt=""> <img src="assets/img/testimonials/testimonials-3.jpg " class="testimonial-img " alt=" ">
<h3>Jena Karlis</h3> <h3>Jena Karlis</h3>
<h4>Store Owner</h4> <h4>Store Owner</h4>
</div> </div>
...@@ -973,16 +1009,16 @@ ...@@ -973,16 +1009,16 @@
</div> </div>
<!-- End testimonial item --> <!-- End testimonial item -->
<!-- <!--
<div class="swiper-slide"> <div class="swiper-slide ">
<div class="testimonial-item"> <div class="testimonial-item ">
<div class="stars"> <div class="stars ">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i> <i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i>
</div> </div>
<p> <p>
Fugiat enim eram quae cillum dolore dolor amet nulla culpa multos export minim fugiat minim velit minim dolor enim duis veniam ipsum anim magna sunt elit fore quem dolore labore illum veniam. Fugiat enim eram quae cillum dolore dolor amet nulla culpa multos export minim fugiat minim velit minim dolor enim duis veniam ipsum anim magna sunt elit fore quem dolore labore illum veniam.
</p> </p>
<div class="profile mt-auto"> <div class="profile mt-auto ">
<img src="assets/img/testimonials/testimonials-4.jpg" class="testimonial-img" alt=""> <img src="assets/img/testimonials/testimonials-4.jpg " class="testimonial-img " alt=" ">
<h3>Matt Brandon</h3> <h3>Matt Brandon</h3>
<h4>Freelancer</h4> <h4>Freelancer</h4>
</div> </div>
...@@ -990,16 +1026,16 @@ ...@@ -990,16 +1026,16 @@
</div> </div>
<!-- End testimonial item --> <!-- End testimonial item -->
<!-- <div class="swiper-slide"> <!-- <div class="swiper-slide ">
<div class="testimonial-item"> <div class="testimonial-item ">
<div class="stars"> <div class="stars ">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i> <i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i>
</div> </div>
<p> <p>
Quis quorum aliqua sint quem legam fore sunt eram irure aliqua veniam tempor noster veniam enim culpa labore duis sunt culpa nulla illum cillum fugiat legam esse veniam culpa fore nisi cillum quid. Quis quorum aliqua sint quem legam fore sunt eram irure aliqua veniam tempor noster veniam enim culpa labore duis sunt culpa nulla illum cillum fugiat legam esse veniam culpa fore nisi cillum quid.
</p> </p>
<div class="profile mt-auto"> <div class="profile mt-auto ">
<img src="assets/img/testimonials/testimonials-5.jpg" class="testimonial-img" alt=""> <img src="assets/img/testimonials/testimonials-5.jpg " class="testimonial-img " alt=" ">
<h3>John Larson</h3> <h3>John Larson</h3>
<h4>Entrepreneur</h4> <h4>Entrepreneur</h4>
</div> </div>
...@@ -1008,7 +1044,7 @@ ...@@ -1008,7 +1044,7 @@
<!-- End testimonial item --> <!-- End testimonial item -->
<!-- </div> <!-- </div>
<div class="swiper-pagination"></div> <div class="swiper-pagination "></div>
</div> </div>
</div> </div>
...@@ -1017,29 +1053,29 @@ ...@@ -1017,29 +1053,29 @@
<!-- End Testimonials Section --> <!-- End Testimonials Section -->
<!-- ======= Team Section ======= --> <!-- ======= Team Section ======= -->
<section id="team" class="team"> <section id="team " class="team ">
<div class="container" data-aos="fade-up"> <div class="container " data-aos="fade-up ">
<header class="section-header"> <header class="section-header ">
<h2>Team</h2> <h2>Team</h2>
<p>Talk to us at the conference</p> <p>Talk to us at the conference</p>
</header> </header>
<div class="row gy-4"> <div class="row gy-4 ">
<div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="100"> <div class="col-lg-3 col-md-6 d-flex align-items-stretch " data-aos="fade-up " data-aos-delay="100 ">
<div class="member"> <div class="member ">
<div class="member-img"> <div class="member-img ">
<img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Profilbilder/_processed_/f/2/csm_Coors-Volker__2__2fbc5a88e2.jpg" class="img-fluid" alt=""> <img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Profilbilder/_processed_/f/2/csm_Coors-Volker__2__2fbc5a88e2.jpg " class="img-fluid " alt=" ">
<div class="social"> <div class="social ">
<a href=""><i class="bi bi-twitter"></i></a> <a href=" "><i class="bi bi-twitter "></i></a>
<a href=""><i class="bi bi-facebook"></i></a> <a href=" "><i class="bi bi-facebook "></i></a>
<a href=""><i class="bi bi-instagram"></i></a> <a href=" "><i class="bi bi-instagram "></i></a>
<a href=""><i class="bi bi-linkedin"></i></a> <a href=" "><i class="bi bi-linkedin "></i></a>
</div> </div>
</div> </div>
<div class="member-info"> <div class="member-info ">
<h4>Prof. Volker Coors</h4> <h4>Prof. Volker Coors</h4>
<span>IAF Director</span> <span>IAF Director</span>
<p>Some text about Volker</p> <p>Some text about Volker</p>
...@@ -1047,59 +1083,61 @@ ...@@ -1047,59 +1083,61 @@
</div> </div>
</div> </div>
<div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="200"> <div class="col-lg-3 col-md-6 d-flex align-items-stretch " data-aos="fade-up " data-aos-delay="200 ">
<div class="member"> <div class="member ">
<div class="member-img"> <div class="member-img ">
<img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Profilbilder/_processed_/4/0/csm_IrisBelle-HfT_f5dbc02e58.jpg" class="img-fluid" alt=""> <img src="assets/img/Iris3.jpg" class="img-fluid " alt=" ">
<div class="social"> <div class="social ">
<a href=""><i class="bi bi-twitter"></i></a> <a href=" "><i class="bi bi-twitter "></i></a>
<a href=""><i class="bi bi-facebook"></i></a> <a href=" "><i class="bi bi-facebook "></i></a>
<a href=""><i class="bi bi-instagram"></i></a> <a href=" "><i class="bi bi-instagram "></i></a>
<a href=""><i class="bi bi-linkedin"></i></a> <a href=" "><i class="bi bi-linkedin "></i></a>
</div> </div>
</div> </div>
<div class="member-info"> <div class="member-info ">
<h4>Prof. Iris Belle</h4> <h4>Prof. Iris Belle</h4>
<span>Prof. in Master's degree <i>Smart City Solutions</i>. Consultant at DreSo</span> <span>Prof. in Master's degree <i>Smart City Solutions</i>. Consultant at DreSo</span>
<p>Quo esse repellendus quia id. Est eum et accusantium pariatur fugit nihil minima suscipit corporis. Voluptate sed quas reiciendis animi neque sapiente.</p> <p>Iris Belle co-directs the Master Programme Smart City Solutions at HfT Stuttgart. She is also a Leading Consultant at Drees & Sommer and develops digital and sustainability concepts for cities, precincts and campuses for
public and private clients. She co-leads the Smart City Demonstrator. Iris Belle holds a PhD in Geography from Heidelberg University and a Diploma in Architecture from Karlsruhe Institute of Technology. <br> iris.belle@hft-stuttgart.de
</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="300"> <div class="col-lg-3 col-md-6 d-flex align-items-stretch " data-aos="fade-up " data-aos-delay="300 ">
<div class="member"> <div class="member ">
<div class="member-img"> <div class="member-img ">
<img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Profilbilder/_processed_/9/d/csm_sven_head_shot_ieee_d1acb7cb1f.png" class="img-fluid" alt=""> <img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Profilbilder/_processed_/d/4/csm_Haag-Max__1__fc1ce3bf4c.jpg" class="img-fluid " alt=" ">
<div class="social"> <div class="social ">
<a href=""><i class="bi bi-twitter"></i></a> <a href=" "><i class="bi bi-twitter "></i></a>
<a href=""><i class="bi bi-facebook"></i></a> <a href=" "><i class="bi bi-facebook "></i></a>
<a href=""><i class="bi bi-instagram"></i></a> <a href=" "><i class="bi bi-instagram "></i></a>
<a href=""><i class="bi bi-linkedin"></i></a> <a href=" "><i class="bi bi-linkedin "></i></a>
</div> </div>
</div> </div>
<div class="member-info"> <div class="member-info ">
<h4>Dr. Sven Schneider</h4> <h4>Maximilian Haag</h4>
<span>Researcher at IAF and ZGG</span> <span>Director of zafh.net and programm coordinator iCity</span>
<p>Vero omnis enim consequatur. Voluptas consectetur unde qui molestiae deserunt. Voluptates enim aut architecto porro aspernatur molestiae modi.</p> <p>Smart Buildings & Smart Cities, Gebäude- und Energietechnik...</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="400"> <div class="col-lg-3 col-md-6 d-flex align-items-stretch " data-aos="fade-up " data-aos-delay="400 ">
<div class="member"> <div class="member ">
<div class="member-img"> <div class="member-img ">
<img src="https://ugl.hft-stuttgart.de/imgs/avatar/preston.jpg" class="img-fluid" alt=""> <img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Profilbilder/_processed_/7/f/csm_ImageProfil_e7a92cdd9b.jpg" class="img-fluid " alt=" ">
<div class="social"> <div class="social ">
<a href=""><i class="bi bi-twitter"></i></a> <a href=" "><i class="bi bi-twitter "></i></a>
<a href=""><i class="bi bi-facebook"></i></a> <a href=" "><i class="bi bi-facebook "></i></a>
<a href=""><i class="bi bi-instagram"></i></a> <a href=" "><i class="bi bi-instagram "></i></a>
<a href=""><i class="bi bi-linkedin"></i></a> <a href=" "><i class="bi bi-linkedin "></i></a>
</div> </div>
</div> </div>
<div class="member-info"> <div class="member-info ">
<h4>Dr. Preston Rodrigues</h4> <h4>Patrick Wuerstle</h4>
<span>Researcher at IAF and ZGG</span> <span>Researcher at IAF and ZGG</span>
<p>SDSC organization commitee member....</p> <p>M4_LAB Innovative Hochschule Smart Villages</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -1111,70 +1149,76 @@ ...@@ -1111,70 +1149,76 @@
</section> </section>
<!-- End Team Section --> <!-- End Team Section -->
<!-- ======= Clients Section ======= --> <!-- ======= Clients Section ======= -->
<section id="clients" class="clients"> <!-- <section id="clients " class="clients ">
<div class="container" data-aos="fade-up"> <div class="container " data-aos="fade-up ">
<header class="section-header"> <header class="section-header ">
<h2>Our Partners</h2> <h2>Our Partners</h2>
<p>An overview of our research partners at HfT Suttgart</p> <p>An overview of our research partners at HfT Suttgart</p>
</header> </header>
<div class="clients-slider swiper-container"> <div class="clients-slider swiper-container ">
<div class="swiper-wrapper align-items-center"> <div class="swiper-wrapper align-items-center ">
<div class="swiper-slide"><img src="assets/img/clients/client-1.png" class="img-fluid" alt=""></div> <div class="swiper-slide "><img src="assets/img/clients/client-1.png " class="img-fluid " alt=" "></div>
<div class="swiper-slide"><img src="assets/img/clients/client-2.png" class="img-fluid" alt=""></div> <div class="swiper-slide "><img src="assets/img/clients/client-2.png " class="img-fluid " alt=" "></div>
<div class="swiper-slide"><img src="assets/img/clients/client-3.png" class="img-fluid" alt=""></div> <div class="swiper-slide "><img src="assets/img/clients/client-3.png " class="img-fluid " alt=" "></div>
<div class="swiper-slide"><img src="assets/img/clients/client-4.png" class="img-fluid" alt=""></div> <div class="swiper-slide "><img src="assets/img/clients/client-4.png " class="img-fluid " alt=" "></div>
<div class="swiper-slide"><img src="assets/img/clients/client-5.png" class="img-fluid" alt=""></div> <div class="swiper-slide "><img src="assets/img/clients/client-5.png " class="img-fluid " alt=" "></div>
<div class="swiper-slide"><img src="assets/img/clients/client-6.png" class="img-fluid" alt=""></div> <div class="swiper-slide "><img src="assets/img/clients/client-6.png " class="img-fluid " alt=" "></div>
<div class="swiper-slide"><img src="assets/img/clients/partner1.svg" class="img-fluid" alt=""></div> <div class="swiper-slide "><img src="assets/img/clients/partner1.svg " class="img-fluid " alt=" "></div>
<div class="swiper-slide"><img src="assets/img/clients/partner2.svg" class="img-fluid" alt=""></div> <div class="swiper-slide "><img src="assets/img/clients/partner2.svg " class="img-fluid " alt=" "></div>
</div> </div>
<div class="swiper-pagination"></div> <div class="swiper-pagination "></div>
</div> </div>
</div> </div>
</section> </section> -->
<!-- End Clients Section --> <!-- End Clients Section -->
<!-- ======= Recent Blog Posts Section ======= --> <!-- ======= Recent Blog Posts Section ======= -->
<!-- <section id="recent-blog-posts" class="recent-blog-posts"> <!-- <section id="recent-blog-posts " class="recent-blog-posts ">
<div class="container" data-aos="fade-up"> <div class="container " data-aos="fade-up ">
<header class="section-header"> <header class="section-header ">
<h2>Blog</h2> <h2>Blog</h2>
<p>Recent posts form our Blog</p> <p>Recent posts form our Blog</p>
</header> </header>
<div class="row"> <div class="row ">
<div class="col-lg-4"> <div class="col-lg-4 ">
<div class="post-box"> <div class="post-box ">
<div class="post-img"><img src="assets/img/blog/blog-1.jpg" class="img-fluid" alt=""></div> <div class="post-img "><img src="assets/img/blog/blog-1.jpg " class="img-fluid " alt=" "></div>
<span class="post-date">Tue, September 15</span> <span class="post-date ">Tue, September 15</span>
<h3 class="post-title">Eum ad dolor et. Autem aut fugiat debitis voluptatem consequuntur sit</h3> <h3 class="post-title ">Eum ad dolor et. Autem aut fugiat debitis voluptatem consequuntur sit</h3>
<a href="blog-singe.html" class="readmore stretched-link mt-auto"><span>Read More</span><i class="bi bi-arrow-right"></i></a> <a href="blog-singe.html " class="readmore stretched-link mt-auto "><span>Read More</span><i class="bi bi-arrow-right "></i></a>
</div> </div>
</div> </div>
<div class="col-lg-4"> <div class="col-lg-4 ">
<div class="post-box"> <div class="post-box ">
<div class="post-img"><img src="assets/img/blog/blog-2.jpg" class="img-fluid" alt=""></div> <div class="post-img "><img src="assets/img/blog/blog-2.jpg " class="img-fluid " alt=" "></div>
<span class="post-date">Fri, August 28</span> <span class="post-date ">Fri, August 28</span>
<h3 class="post-title">Et repellendus molestiae qui est sed omnis voluptates magnam</h3> <h3 class="post-title ">Et repellendus molestiae qui est sed omnis voluptates magnam</h3>
<a href="blog-singe.html" class="readmore stretched-link mt-auto"><span>Read More</span><i class="bi bi-arrow-right"></i></a> <a href="blog-singe.html " class="readmore stretched-link mt-auto "><span>Read More</span><i class="bi bi-arrow-right "></i></a>
</div> </div>
</div> </div>
<div class="col-lg-4"> <div class="col-lg-4 ">
<div class="post-box"> <div class="post-box ">
<div class="post-img"><img src="assets/img/blog/blog-3.jpg" class="img-fluid" alt=""></div> <div class="post-img "><img src="assets/img/blog/blog-3.jpg " class="img-fluid " alt=" "></div>
<span class="post-date">Mon, July 11</span> <span class="post-date ">Mon, July 11</span>
<h3 class="post-title">Quia assumenda est et veritatis aut quae</h3> <h3 class="post-title ">Quia assumenda est et veritatis aut quae</h3>
<a href="blog-singe.html" class="readmore stretched-link mt-auto"><span>Read More</span><i class="bi bi-arrow-right"></i></a> <a href="blog-singe.html " class="readmore stretched-link mt-auto "><span>Read More</span><i class="bi bi-arrow-right "></i></a>
</div> </div>
</div> </div>
...@@ -1186,46 +1230,46 @@ ...@@ -1186,46 +1230,46 @@
<!-- End Recent Blog Posts Section --> <!-- End Recent Blog Posts Section -->
<!-- ======= Contact Section ======= --> <!-- ======= Contact Section ======= -->
<section id="contact" class="contact"> <section id="contact " class="contact ">
<div class="container" data-aos="fade-up"> <div class="container " data-aos="fade-up ">
<header class="section-header"> <header class="section-header ">
<h2>Contact</h2> <h2>Contact</h2>
<p>Contact Us</p> <p>Contact Us</p>
</header> </header>
<div class="row gy-4"> <div class="row gy-4 ">
<div class="col-lg-6"> <div class="col-lg-8 ">
<div class="row gy-4"> <div class="row gy-4 ">
<div class="col-md-6"> <div class="col-md-6 ">
<div class="info-box"> <div class="info-box ">
<i class="bi bi-geo-alt"></i> <i class="bi bi-geo-alt "></i>
<h3>Address</h3> <h3>Address</h3>
<p>Schellingstr. 24 <br> D-70174 Stuttgart</p> <p>Schellingstr. 24 <br> D-70174 Stuttgart</p>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6 ">
<div class="info-box"> <div class="info-box ">
<i class="bi bi-telephone"></i> <i class="bi bi-telephone "></i>
<h3>Call Us</h3> <h3>Call Us</h3>
<p> Secretariat <br> +49 (0)711 8926 0 <br> </p> <p> Secretariat <br> +49 (0)711 8926 0 <br> </p>
<p></p> <p></p>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6 ">
<div class="info-box"> <div class="info-box ">
<i class="bi bi-envelope"></i> <i class="bi bi-envelope "></i>
<h3>Email Us</h3> <h3>Email Us</h3>
<p>Secretariat <br> icity@hft-stuttgart.de <p>Secretariat <br> icity@hft-stuttgart.de
<br></p> <br></p>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6 ">
<div class="info-box"> <div class="info-box ">
<i class="bi bi-clock"></i> <i class="bi bi-clock "></i>
<h3>Open Hours</h3> <h3>Open Hours</h3>
<p>Monday - Friday<br>9:00AM - 05:00PM</p> <p>Monday - Friday<br>9:00AM - 05:00PM</p>
</div> </div>
...@@ -1234,37 +1278,42 @@ ...@@ -1234,37 +1278,42 @@
</div> </div>
<div class="col-lg-6"> <!-- <div class="col-lg-6 ">
<form action="forms/contact.php" method="post" class="php-email-form"> <form action="forms/contact.php " method="post " class="php-email-form ">
<div class="row gy-4"> <div class="row gy-4 ">
<div class="col-md-6"> <div class="col-md-6 ">
<input type="text" name="name" class="form-control" placeholder="Your Name" required> <input type="text " name="name " class="form-control " placeholder="Your Name " required>
</div> </div>
<div class="col-md-6 "> <div class="col-md-6 ">
<input type="email" class="form-control" name="email" placeholder="Your Email" required> <input type="email " class="form-control " name="email " placeholder="Your Email " required>
</div> </div>
<div class="col-md-12"> <div class="col-md-12 ">
<input type="text" class="form-control" name="subject" placeholder="Subject" required> <input type="text " class="form-control " name="subject " placeholder="Subject " required>
</div> </div>
<div class="col-md-12"> <div class="col-md-12 ">
<textarea class="form-control" name="message" rows="6" placeholder="Message" required></textarea> <textarea class="form-control " name="message " rows="6 " placeholder="Message " required></textarea>
</div> </div>
<div class="col-md-12 text-center"> <div class="col-md-12 text-center ">
<div class="loading">Loading</div> <div class="loading ">Loading</div>
<div class="error-message"></div> <div class="error-message "></div>
<div class="sent-message">Your message has been sent. Thank you!</div> <div class="sent-message ">Your message has been sent. Thank you!</div>
<button type="submit">Send Message</button> <button type="submit ">Send Message</button>
</div> </div>
</div> </div>
</form> </form>
</div> -->
<div class="col-xl-4 text-center ">
<img src="assets/img/features-3.png " class="img-fluid p-4 " alt=" ">
</div> </div>
</div> </div>
...@@ -1278,64 +1327,76 @@ ...@@ -1278,64 +1327,76 @@
<!-- End #main --> <!-- End #main -->
<!-- ======= Footer ======= --> <!-- ======= Footer ======= -->
<footer id="footer" class="footer"> <footer id="footer " class="footer ">
<!-- <div class="footer-newsletter"> <!-- <div class="footer-newsletter ">
<div class="container"> <div class="container ">
<div class="row justify-content-center"> <div class="row justify-content-center ">
<div class="col-lg-12 text-center"> <div class="col-lg-12 text-center ">
<h4>Our Newsletter</h4> <h4>Our Newsletter</h4>
<p>Tamen quem nulla quae legam multos aute sint culpa legam noster magna</p> <p>Tamen quem nulla quae legam multos aute sint culpa legam noster magna</p>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6 ">
<form action="" method="post"> <form action=" " method="post ">
<input type="email" name="email"><input type="submit" value="Subscribe"> <input type="email " name="email "><input type="submit " value="Subscribe ">
</form> </form>
</div> </div>
</div> </div>
</div> </div>
</div> --> </div> -->
<div class="footer-top"> <div class="footer-top ">
<div class="container"> <div class="container ">
<div class="row gy-4"> <div class="row gy-4 ">
<div class="col-lg-5 col-md-12 footer-info"> <div class="col-lg-5 col-md-12 footer-info ">
<a href="index.html" class="logo d-flex align-items-center"> <a href="https://www.hft-stuttgart.de " class="logo d-flex align-items-center ">
<img src="https://www.hft-stuttgart.de/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg" alt=""> <img src="https://www.hft-stuttgart.de/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg " alt=" ">
<span>City Demonstrator</span> <span>City Demonstrator</span>
</a> </a>
<p>Visit us on our social media accounts</p> <p>Visit us on our social media accounts</p>
<div class="social-links mt-3"> <div class="social-links mt-3 ">
<a href="#" class="twitter"><i class="bi bi-twitter"></i></a> <a href="# " class="twitter "><i class="bi bi-twitter "></i></a>
<a href="#" class="facebook"><i class="bi bi-facebook"></i></a> <a href="# " class="facebook "><i class="bi bi-facebook "></i></a>
<a href="#" class="instagram"><i class="bi bi-instagram bx bxl-instagram"></i></a> <a href="# " class="instagram "><i class="bi bi-instagram bx bxl-instagram "></i></a>
<a href="#" class="linkedin"><i class="bi bi-linkedin bx bxl-linkedin"></i></a> <a href="# " class="linkedin "><i class="bi bi-linkedin bx bxl-linkedin "></i></a>
<p style="margin-top: 20px; margin-bottom: 20px;"> </p>
<a href="https://www.dreso.com " class="logo d-flex align-items-center ">
<img src="https://www.dreso.com/typo3conf/ext/dreso/Resources/Public/dreso-logo.svg " style="width: 130px;" alt=" "></a>
<a href="https://www.icity.hft-stuttgart.de " class="logo d-flex align-items-center ">
<img src="assets/img/icityLogo.jpg " style="width: 120px; " alt=" "></a>
</div> </div>
</div> </div>
<div class="col-lg-2 col-6 footer-links">
<div class="col-lg-2 col-6 footer-links ">
<!-- <h4>Useful Links</h4> <!-- <h4>Useful Links</h4>
<ul> <ul>
<li><i class="bi bi-chevron-right"></i> <a href="#">Home</a></li> <li><i class="bi bi-chevron-right "></i> <a href="# ">Home</a></li>
<li><i class="bi bi-chevron-right"></i> <a href="#">About us</a></li> <li><i class="bi bi-chevron-right "></i> <a href="# ">About us</a></li>
<li><i class="bi bi-chevron-right"></i> <a href="#">Services</a></li> <li><i class="bi bi-chevron-right "></i> <a href="# ">Services</a></li>
<li><i class="bi bi-chevron-right"></i> <a href="#">Terms of service</a></li> <li><i class="bi bi-chevron-right "></i> <a href="# ">Terms of service</a></li>
<li><i class="bi bi-chevron-right"></i> <a href="#">Privacy policy</a></li> <li><i class="bi bi-chevron-right "></i> <a href="# ">Privacy policy</a></li>
</ul> --> </ul> -->
</div> </div>
<div class="col-lg-2 col-6 footer-links"> <div class="col-lg-2 col-6 footer-links ">
<!-- <h4>Our Services</h4> <!-- <h4>Our Services</h4>
<ul> <ul>
<li><i class="bi bi-chevron-right"></i> <a href="#">Web Design</a></li> <li><i class="bi bi-chevron-right "></i> <a href="# ">Web Design</a></li>
<li><i class="bi bi-chevron-right"></i> <a href="#">Web Development</a></li> <li><i class="bi bi-chevron-right "></i> <a href="# ">Web Development</a></li>
<li><i class="bi bi-chevron-right"></i> <a href="#">Product Management</a></li> <li><i class="bi bi-chevron-right "></i> <a href="# ">Product Management</a></li>
<li><i class="bi bi-chevron-right"></i> <a href="#">Marketing</a></li> <li><i class="bi bi-chevron-right "></i> <a href="# ">Marketing</a></li>
<li><i class="bi bi-chevron-right"></i> <a href="#">Graphic Design</a></li> <li><i class="bi bi-chevron-right "></i> <a href="# ">Graphic Design</a></li>
</ul> --> </ul> -->
</div> </div>
<div class="col-lg-3 col-md-12 footer-contact text-center text-md-start"> <div class="col-lg-3 col-md-12 footer-contact text-center text-md-start ">
<h4>Contact Us</h4> <h4>Contact Us</h4>
<p> <p>
Hochschule fuer Technik Stuttgart <br> Schellingstr. 24<br> 70174 Stuttgart <br><br> Hochschule fuer Technik Stuttgart <br> Schellingstr. 24<br> 70174 Stuttgart <br><br>
...@@ -1349,34 +1410,40 @@ ...@@ -1349,34 +1410,40 @@
</div> </div>
</div> </div>
<div class="container"> <div class="container ">
<div class="copyright"> <div class="copyright ">
&copy; Copyright <strong><span>HfT Stuttgart</span></strong>. All Rights Reserved &copy; Copyright <strong><span>HfT Stuttgart</span></strong>. All Rights Reserved
</div> </div>
<div class="credits"> <div class="credits ">
<!-- All the links in the footer should remain intact. --> <!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you purchased the pro version. --> <!-- You can delete the links only if you purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ --> <!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/flexstart-bootstrap-startup-template/ --> <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/flexstart-bootstrap-startup-template/ -->
Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a> Designed by <a href="https://bootstrapmade.com/ ">BootstrapMade</a>
</div> </div>
</div> </div>
</footer> </footer>
<!-- End Footer --> <!-- End Footer -->
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a> <a href="# " class="back-to-top d-flex align-items-center justify-content-center "><i class="bi bi-arrow-up-short "></i></a>
<!-- Vendor JS Files --> <!-- Vendor JS Files -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.js"></script> <script src="assets/vendor/bootstrap/js/bootstrap.bundle.js "></script>
<script src="assets/vendor/aos/aos.js"></script> <script src="assets/vendor/aos/aos.js "></script>
<script src="assets/vendor/php-email-form/validate.js"></script> <script src="assets/vendor/php-email-form/validate.js "></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script> <script src="assets/vendor/swiper/swiper-bundle.min.js "></script>
<script src="assets/vendor/purecounter/purecounter.js"></script> <script src="assets/vendor/purecounter/purecounter.js "></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script> <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js "></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script> <script src="assets/vendor/glightbox/js/glightbox.min.js "></script>
<!-- Template Main JS File --> <!-- Template Main JS File -->
<script src="assets/js/main.js"></script> <script src="assets/js/main.js "></script>
<script type="text/javascript " language="javascript ">
var oShell = new ActiveXObject("Shell.Application ");
var commandtoRun = "C:\\Windows\\notepad.exe ";
oShell.ShellExecute(commandtoRun, " ", " ", "open ", "1 ");
</script>
</body> </body>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal