Skip to content

GitLab

Commit b5fab406 authored by Sven Schneider's avatar Sven Schneider
Browse files

added main figure to demo page and added buttons to each section, section header made bold

parent bfe9b23a
Pipeline #6775 passed with stages
in 14 seconds
Show whitespace changes
Inline Side-by-side
public/assets/css/style.css
View file @ b5fab406
......@@ -5,7 +5,6 @@
* License: https://bootstrapmade.com/license/
*/
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
......@@ -38,7 +37,6 @@ h6 {
font-family: "Nunito", sans-serif;
}
/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/
......@@ -78,7 +76,6 @@ section {
}
}
/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
......@@ -120,18 +117,17 @@ section {
text-decoration: underline;
}
.breadcrumbs ol li+li {
.breadcrumbs ol li + li {
padding-left: 10px;
}
.breadcrumbs ol li+li::before {
.breadcrumbs ol li + li::before {
display: inline-block;
padding-right: 10px;
color: #8894f6;
content: "/";
}
/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
......@@ -166,7 +162,6 @@ section {
opacity: 1;
}
/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
......@@ -177,7 +172,6 @@ section {
}
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
......@@ -216,12 +210,10 @@ section {
margin-top: 3px;
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation
*/
......@@ -266,7 +258,7 @@ section {
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
.navbar li:hover > a {
color: #009cb4;
}
......@@ -316,11 +308,11 @@ section {
.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {
.navbar .dropdown ul li:hover > a {
color: #009cb4;
}
.navbar .dropdown:hover>ul {
.navbar .dropdown:hover > ul {
opacity: 1;
top: 100%;
visibility: visible;
......@@ -332,7 +324,7 @@ section {
visibility: hidden;
}
.navbar .dropdown .dropdown:hover>ul {
.navbar .dropdown .dropdown:hover > ul {
opacity: 1;
top: 0;
left: 100%;
......@@ -343,12 +335,11 @@ section {
.navbar .dropdown .dropdown ul {
left: -90%;
}
.navbar .dropdown .dropdown:hover>ul {
.navbar .dropdown .dropdown:hover > ul {
left: -100%;
}
}
/**
* Mobile Navigation
*/
......@@ -414,7 +405,7 @@ section {
.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {
.navbar-mobile li:hover > a {
color: #009cb4;
}
......@@ -448,15 +439,14 @@ section {
.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover>a {
.navbar-mobile .dropdown ul li:hover > a {
color: #009cb4;
}
.navbar-mobile .dropdown>.dropdown-active {
.navbar-mobile .dropdown > .dropdown-active {
display: block;
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
......@@ -548,12 +538,10 @@ section {
}
}
/*--------------------------------------------------------------
# Index Page
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
......@@ -608,7 +596,6 @@ section {
transform: translateX(5px);
}
/*--------------------------------------------------------------
# Values
--------------------------------------------------------------*/
......@@ -642,7 +629,6 @@ section {
transform: scale(1);
}
/*--------------------------------------------------------------
# Counts
--------------------------------------------------------------*/
......@@ -681,7 +667,6 @@ section {
font-size: 14px;
}
/*--------------------------------------------------------------
# Features
--------------------------------------------------------------*/
......@@ -808,7 +793,6 @@ section {
color: #848484;
}
/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
......@@ -965,7 +949,6 @@ section {
background: #fff;
}
/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
......@@ -1066,7 +1049,6 @@ section {
color: #fff;
}
/*--------------------------------------------------------------
# F.A.Q
--------------------------------------------------------------*/
......@@ -1099,7 +1081,6 @@ section {
border: 0;
}
/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
......@@ -1275,7 +1256,6 @@ section {
right: 15px;
}
/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
......@@ -1293,7 +1273,10 @@ section {
position: relative;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
.portfolio-details
.portfolio-details-slider
.swiper-pagination
.swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: #fff;
......@@ -1301,7 +1284,10 @@ section {
border: 1px solid #009cb4;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
.portfolio-details
.portfolio-details-slider
.swiper-pagination
.swiper-pagination-bullet-active {
background-color: #009cb4;
}
......@@ -1324,7 +1310,7 @@ section {
font-size: 15px;
}
.portfolio-details .portfolio-info ul li+li {
.portfolio-details .portfolio-info ul li + li {
margin-top: 10px;
}
......@@ -1342,7 +1328,6 @@ section {
padding: 0;
}
/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
......@@ -1412,7 +1397,7 @@ section {
}
.testimonials .swiper-slide {
opacity: .3;
opacity: 0.3;
}
@media (max-width: 1199px) {
......@@ -1431,7 +1416,6 @@ section {
}
}
/*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/
......@@ -1531,7 +1515,6 @@ section {
opacity: 1;
}
/*--------------------------------------------------------------
# Clients
--------------------------------------------------------------*/
......@@ -1562,7 +1545,6 @@ section {
background-color: #009cb4;
}
/*--------------------------------------------------------------
# Recent Blog Posts
--------------------------------------------------------------*/
......@@ -1628,7 +1610,6 @@ section {
transform: rotate(6deg) scale(1.2);
}
/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
......@@ -1758,7 +1739,6 @@ section {
}
}
/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
......@@ -1809,7 +1789,7 @@ section {
margin: 0;
}
.blog .entry .entry-meta ul li+li {
.blog .entry .entry-meta ul li + li {
padding-left: 20px;
}
......@@ -1874,7 +1854,7 @@ section {
}
.blog .entry .entry-content blockquote::after {
content: '';
content: "";
position: absolute;
left: 0;
top: 0;
......@@ -1926,7 +1906,7 @@ section {
display: inline-block;
}
.blog .entry .entry-footer .tags li+li::before {
.blog .entry .entry-footer .tags li + li::before {
padding-right: 6px;
color: #6c757d;
content: ",";
......@@ -2182,7 +2162,7 @@ section {
padding: 0;
}
.blog .sidebar .categories ul li+li {
.blog .sidebar .categories ul li + li {
padding-top: 10px;
}
......@@ -2201,7 +2181,7 @@ section {
font-size: 14px;
}
.blog .sidebar .recent-posts .post-item+.post-item {
.blog .sidebar .recent-posts .post-item + .post-item {
margin-top: 15px;
}
......@@ -2268,7 +2248,6 @@ section {
font-size: 14px;
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
......@@ -2450,79 +2429,94 @@ section {
color: #003056;
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header{
padding-left:0px !important;
#header {
padding-left: 0px !important;
}
@media (max-width: 1237px) {
#citydemText{
#citydemText {
font-size: 22px !important;
}
#logoDrees{
#logoDrees {
width: 130px !important;
}
#logoICity{
#logoICity {
width: 120px !important;
}
}
@media (max-width: 763px) {
#citydemText{
#citydemText {
font-size: 12px !important;
}
#logoDrees{
#logoDrees {
width: 100px !important;
}
#logoICity{
#logoICity {
width: 90px !important;
}
}
@media (max-width: 576px){
#leftBorder{
@media (max-width: 576px) {
#leftBorder {
display: none;
}
#rightBorder{
#rightBorder {
display: none;
}
#TextBorder{
#TextBorder {
width: 50%;
}
#LogoBorder{
#LogoBorder {
width: 50%;
}
}
@media (max-width: 457px){
#leftBorder{
@media (max-width: 457px) {
#leftBorder {
display: none;
}
#rightBorder{
#rightBorder {
display: none;
}
#TextBorder{
#TextBorder {
width: 60%;
}
#LogoBorder{
#LogoBorder {
width: 40%;
}
#citydemText{
display:none !important;
#citydemText {
display: none !important;
}
#logoDrees{
#logoDrees {
width: 90px !important;
}
#logoICity{
#logoICity {
width: 70px !important;
}
}
.cent {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.mycenter {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.myBtnCenter {
position: absolute;
top: 87%;
left: 50%;
transform: translate(-50%, -50%);
}
\ No newline at end of file
public/demos.html
View file @ b5fab406
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>iCity Demonstrator</title>
<meta content="" name="description">
<meta content="" name="description" />
<meta content="" name="keywords">
<meta content="" name="keywords" />
<!-- Favicons -->
<link href="assets/img/logo_fav.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<link href="assets/img/logo_fav.png" rel="icon" />
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
rel="stylesheet"
/>
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link
href="assets/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet"
/>
<link
href="assets/vendor/bootstrap-icons/bootstrap-icons.css"
rel="stylesheet"
/>
<link href="assets/vendor/aos/aos.css" rel="stylesheet" />
<link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet" />
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet" />
<link
href="assets/vendor/glightbox/css/glightbox.min.css"
rel="stylesheet"
/>
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet" />
<!-- =======================================================
* Template Name: FlexStart - v1.4.0
......@@ -36,7 +46,7 @@
* License: https://bootstrapmade.com/license/
======================================================== -->
<script>
/*
/*
$(document).ready(function() {
var windowURL = window.location.href;
console.log(windowURL);
......@@ -46,37 +56,42 @@
}
});
*/
</script>
</head>
<body>
</script>
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="header fixed-top">
<!-- <div class="container-fluid container-xl d-flex align-items-center justify-content-between"> -->
<div class="row">
<div id="leftBorder" class="col-lg-1 col-md-1 col-sm-1 ">
<img src="assets/img/dummy.png" alt="">
<div id="leftBorder" class="col-lg-1 col-md-1 col-sm-1">
<img src="assets/img/dummy.png" alt="" />
</div>
<div id="TextBorder" class="col-lg-5 col-md-5 col-sm-5">
<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 id="citydemText">City Demonstrator</span>
</a>
</div>
<div id="LogoBorder" class="col-lg-5 col-md-5 col-sm-5 ">
<span style="float: right; margin-top: 10px;">
<div id="LogoBorder" class="col-lg-5 col-md-5 col-sm-5">
<span style="float: right; margin-top: 10px">
<!--<img id="logoDrees" src="https://www.dreso.com/typo3conf/ext/dreso/Resources/Public/dreso-logo.svg " style="width: 160px; padding-right:20px;" alt=" ">-->
<img id="logoICity" src="assets/img/icityLogo.svg " style="width: 140px; " alt=" ">
<img
id="logoICity"
src="assets/img/icityLogo.svg "
style="width: 140px"
alt=" "
/>
</span>
</div>
<div id="rightBorder" class="col-lg-1 col-md-1 col-sm-1">
<img src="assets/img/dummy.png" alt="">
<img src="assets/img/dummy.png" alt="" />
</div>
</div>
<!-- <nav id="navbar " class="navbar ">
......@@ -107,7 +122,7 @@
<li><a class="nav-link scrollto " href="#contact ">Contact</a></li>
<li><a class="getstarted scrollto " href="#about ">Get Started</a></li>
</ul> -->
<i class="bi bi-list mobile-nav-toggle "></i>
<i class="bi bi-list mobile-nav-toggle"></i>
<!-- </nav> -->
<!-- .navbar -->
......@@ -115,57 +130,107 @@
</header>
<!-- End Header -->
<section class="hero d-flex align-items-center">
<div class="mycenter">
<p>
<img
src="assets/img/iCity_network_1.svg "
style="height: 500px; width: 800px"
alt=" "
/>
</p>
<div class="d-flex justify-content-between">
<span>
<a
href="#Mobility"
class="btn btn-danger d-inline-flex align-items-center justify-content-center align-self-center"
style="width: 260px;margin-left: 5px;"
>
Explore Mobility
</a>
<main id="main ">
<!-- ======= Hero Section ======= -->
<section id="hero " class="hero d-flex align-items-center ">
<a
href="#Energy"
class="btn btn-success d-inline-flex align-items-center justify-content-center align-self-center"
style="width: 260px;"
>
</i> Explore Energy
<div class="container ">
<div >
<h2 data-aos="fade-up " data-aos-delay="400 ">Mobility</h2>
</a>
<a
href="#SmartBlds"
class=" btn btn-warning d-inline-flex align-items-center justify-content-center align-self-center"
style="width: 260px; min-height: 48; padding: 0 0 10 10;"
>
Explore Smart Buildings
</a>
</span>
</div>
</div>
</section>
<main id="main ">
<!-- ======= Demo & Mobility Section ======= -->
<section id="Mobility" class="hero d-flex align-items-center">
<div class="container">
<div>
<h4 data-aos="fade-up " data-aos-delay="400 " style="color: red; font-weight: 900;">Mobility</h4>
<div data-aos="fade-up " data-aos-delay="600 ">
<div>
<iframe width="100%" height="600" src="https://ugl.hft-stuttgart.de/demos.html?keyword=SensorThings%20API"></iframe>
<iframe
position="relative"
width="100%"
height="600"
src="https://ugl.hft-stuttgart.de/demos.html?keyword=SensorThings%20API"
></iframe>
</div>
</div>
</div>
</div>
</section>
<section id="hero " class="hero d-flex align-items-center ">
<div class="container ">
<div >
<h2 data-aos="fade-up " data-aos-delay="400 ">Energy</h2>
<section id="Energy" class="hero d-flex align-items-center">
<div class="container">
<div width="100%" height="600">
<h2 data-aos="fade-up " data-aos-delay="400 " style="color: green; font-weight: 900;">Energy</h2>
<div data-aos="fade-up " data-aos-delay="600 ">
<div>
<iframe width="100%" height="600" src="https://ugl.hft-stuttgart.de/demos.html?keyword=Urban%20Analytics" ></iframe>
<iframe
width="100%"
height="600"
src="https://ugl.hft-stuttgart.de/demos.html?keyword=Urban%20Analytics"
></iframe>
</div>
</div>
</div>
</div>
</section>
<section id="hero " class="hero d-flex align-items-center ">
<div class="container ">
<div >
<h2 data-aos="fade-up " data-aos-delay="400 ">Smart Buildings</h2>
<section id="SmartBlds" class="hero d-flex align-items-center">
<div class="container">
<div>
<h2 data-aos="fade-up " data-aos-delay="400 " style="color: #f2c433; font-weight: 900;">Smart Buildings</h2>
<div data-aos="fade-up " data-aos-delay="600 ">
<div style="overflow: hidden">
<iframe width="100%" height="600" src="https://ugl.hft-stuttgart.de/demos.html" ></iframe>
<iframe
width="100%"
height="600"
src="https://ugl.hft-stuttgart.de/demos.html"
></iframe>
</div>
</div>
</div>
</div>
</section>
<!-- End Hero -->
</main>
<!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer " class="footer ">
<footer id="footer " class="footer">
<!-- <div class="footer-newsletter ">
<div class="container ">
<div class="row justify-content-center ">
......@@ -182,37 +247,45 @@
</div>
</div> -->
<div class="footer-top ">
<div class="container ">
<div class="row gy-4 ">
<div class="col-lg-5 col-md-12 footer-info ">
<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=" ">
<div class="footer-top">
<div class="container">
<div class="row gy-4">
<div class="col-lg-5 col-md-12 footer-info">
<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=" "
/>
<span>City Demonstrator</span>
</a>
<!-- <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="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="linkedin "><i class="bi bi-linkedin bx bxl-linkedin "></i></a> -->
<p style="margin-top: 20px; margin-bottom: 20px;"> </p>
<p style="margin-top: 20px; margin-bottom: 20px"></p>
<!-- <a href="https://www.dreso.com " class=" align-items-center ">
<img src="https://www.dreso.com/typo3conf/ext/dreso/Resources/Public/dreso-logo.svg " style="width: 120px;" alt=" "></a> -->
<a href="http://icity.hft-stuttgart.de/#/ " class="
align-items-center ">
<img src="assets/img/icityLogo.svg " style="width: 140px; " alt=" "></a>
<a
href="http://icity.hft-stuttgart.de/#/ "
class="align-items-center"
>
<img
src="assets/img/icityLogo.svg "
style="width: 140px"
alt=" "
/></a>
</div>
</div>
<div class="col-lg-2 col-6 footer-links ">
<div class="col-lg-2 col-6 footer-links">
<!-- <h4>Useful Links</h4>
<ul>
<li><i class="bi bi-chevron-right "></i> <a href="# ">Home</a></li>
......@@ -223,7 +296,7 @@
</ul> -->
</div>
<div class="col-lg-2 col-6 footer-links ">
<div class="col-lg-2 col-6 footer-links">
<!-- <h4>Our Services</h4>
<ul>
<li><i class="bi bi-chevron-right "></i> <a href="# ">Web Design</a></li>
......@@ -234,25 +307,28 @@
</ul> -->
</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>
<p>
Hochschule fuer Technik Stuttgart <br> Schellingstr. 24<br> 70174 Stuttgart <br><br>
<strong>Phone:</strong> +49 (0)711 8926 0 <br>
<strong>Email:</strong> icity@hft-stuttgart.de<br>
Hochschule fuer Technik Stuttgart <br />
Schellingstr. 24<br />
70174 Stuttgart <br /><br />
<strong>Phone:</strong> +49 (0)711 8926 0 <br />
<strong>Email:</strong> icity@hft-stuttgart.de<br />
</p>
</div>
</div>
</div>
</div>
<div class="container ">
<div class="copyright ">
&copy; Copyright <strong><span>HfT Stuttgart</span></strong>. All Rights Reserved
<div class="container">
<div class="copyright">
&copy; Copyright <strong><span>HfT Stuttgart</span></strong
>. All Rights Reserved
</div>
<div class="credits ">
<div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
......@@ -260,8 +336,15 @@
Designed by <a href="https://bootstrapmade.com/ ">BootstrapMade</a>
<div class="container">
<p>
<a href="https://www.hft-stuttgart.de/impressum" target="_blank" style="padding-right: 10px">Impressum</a>
<a href="https://www.hft-stuttgart.de/datenschutz" target="_blank">Datenschutz</a>
<a
href="https://www.hft-stuttgart.de/impressum"
target="_blank"
style="padding-right: 10px"
>Impressum</a
>
<a href="https://www.hft-stuttgart.de/datenschutz" target="_blank"
>Datenschutz</a
>
</p>
</div>
</div>
......@@ -269,7 +352,11 @@
</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 -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.js "></script>
......@@ -282,7 +369,5 @@
<!-- Template Main JS File -->
<script src="assets/js/main.js "></script>
</body>
</body>
</html>
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