Skip to content
GitLab
Commit 202a58b3 authored by Traboulsi's avatar Traboulsi
Browse files

Update public/assets/css/main.css, public/index.html

parent f83cced6
Pipeline #11691 passed with stage
in 13 seconds
Hide whitespace changes
Inline Side-by-side
public/assets/css/main.css
View file @ 202a58b3
...@@ -3527,4 +3527,78 @@ body { ...@@ -3527,4 +3527,78 @@ body {
min-height: 400px; min-height: 400px;
} }
.team-member-custom {
background: #fff;
border-radius: 15px;
box-shadow: 0 8px 20px rgba(0,0,0,0.12);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem;
}
.team-member-custom:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.25);
}
.member-img-custom {
position: relative;
width: 160px;
height: 160px;
margin-bottom: 1rem;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.member-img-custom img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.social-custom {
position: absolute;
bottom: 8px;
right: 8px;
display: flex;
gap: 10px;
opacity: 0;
transition: opacity 0.3s ease;
}
.team-member-custom:hover .social-custom {
opacity: 1;
}
.social-custom a {
color: #0077b5; /* LinkedIn blue */
font-size: 1.2rem;
background: #f1f1f1;
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: background 0.3s ease, color 0.3s ease;
}
.social-custom a:hover {
background: #0077b5;
color: #fff;
}
.member-info-custom h4 {
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 0.3rem;
text-align: center;
}
.member-info-custom span {
font-size: 0.9rem;
color: #555;
text-align: center;
display: block;
}
/* ---- End New Service -- added Juni 2025 ***/ /* ---- End New Service -- added Juni 2025 ***/
public/index.html
View file @ 202a58b3
...@@ -752,214 +752,142 @@ ...@@ -752,214 +752,142 @@
<p>Unser engagiertes Team</p> <p>Unser engagiertes Team</p>
</div> </div>
<div class="container"> <div class="row gy-4">
<div class="row gy-4"> <!-- Team Member 1 -->
<div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="100">
<!-- Team Member 1 --> <div class="team-member-custom">
<div class="col-xl-3 col-md-6 d-flex align-items-stretch"> <div class="member-img-custom">
<div class="team-member"> <img src="assets/img/team/DieterUckelmann.png" alt="Prof. Dr.-Ing. Dieter Uckelmann">
<div class="member-img"> <div class="social-custom">
<img src="assets/img/team/DieterUckelmann.png" class="img-fluid" alt=""> <a href="https://www.linkedin.com/in/dieter-uckelmann-58aaa93/" target="_blank" aria-label="LinkedIn Dieter Uckelmann"><i class="bi bi-linkedin"></i></a>
<div class="social"> <a href="https://www.hft-stuttgart.de/p/dieter-uckelmann" title="HFT Stuttgart Profilseite" target="_blank" aria-label="Profilseite Dieter Uckelmann"><i class="bi bi-person"></i></a>
<a href="https://www.linkedin.com/in/dieter-uckelmann-58aaa93/"><i class="bi bi-linkedin"></i></a>
<a href="https://www.hft-stuttgart.de/p/dieter-uckelmann"><i class="bi bi-person"></i></a>
</div>
</div>
<div class="member-info">
<h4>Prof. Dr.-Ing. Dieter Uckelmann</h4>
<span>Professor / Wissenschaftlicher Direktor</span>
</div>
</div> </div>
</div> </div>
<div class="member-info-custom">
<!-- Team Member 2 --> <h4>Prof. Dr.-Ing. Dieter Uckelmann</h4>
<div class="col-xl-3 col-md-6 d-flex align-items-stretch"> <span>Professor / Wissenschaftlicher Direktor</span>
<div class="team-member">
<div class="member-img">
<img src="assets/img/team/avatar.png" class="img-fluid" alt="">
<div class="social">
<a href="https://www.hft-stuttgart.de/p/peter-heusch"><i class="bi bi-person"></i></a>
</div>
</div>
<div class="member-info">
<h4>Prof. Dr. Peter Heusch</h4>
<span>Professor</span>
</div>
</div>
</div> </div>
</div>
</div>
<!-- Team Member 3 --> <!-- Team Member 2 -->
<div class="col-xl-3 col-md-6 d-flex align-items-stretch"> <div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="200">
<div class="team-member"> <div class="team-member-custom">
<div class="member-img"> <div class="member-img-custom">
<img src="assets/img/team/avatar.png" class="img-fluid" alt=""> <img src="assets/img/team/avatar.png" alt="Prof. Dr. Peter Heusch">
<div class="social"> <div class="social-custom">
<a href="#"><i class="bi bi-linkedin"></i></a> <a href="https://www.hft-stuttgart.de/p/peter-heusch" title="HFT Stuttgart Profilseite" target="_blank" aria-label="Profilseite Peter Heusch"><i class="bi bi-person"></i></a>
<a href="https://www.hft-stuttgart.de/p/michael-mommert"><i class="bi bi-person"></i></a>
</div>
</div>
<div class="member-info">
<h4>Prof. Dr. rer. nat. Michael Mommert</h4>
<span>Professor</span>
</div>
</div> </div>
</div> </div>
<div class="member-info-custom">
<!-- Team Member 4 --> <h4>Prof. Dr. Peter Heusch</h4>
<div class="col-xl-3 col-md-6 d-flex align-items-stretch"> <span>Professor / Dekan</span>
<div class="team-member">
<div class="member-img">
<img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Profilbilder/_processed_/0/6/csm_Popovic-Tobias__4__bearbeitet_0cd4ce34b7.jpg" class="img-fluid" alt="">
<div class="social">
<a href="#"><i class="bi bi-linkedin"></i></a>
<a href="#"><i class="bi bi-person"></i></a>
</div>
</div>
<div class="member-info">
<h4>Prof. Dr. Tobias Popovic</h4>
<span>Professor / Ethikbeauftragter der HFT Stuttgart</span>
</div>
</div>
</div> </div>
</div>
</div>
<!-- Team Member 5 --> <!-- Team Member 3 -->
<div class="col-xl-3 col-md-6 d-flex align-items-stretch"> <div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="300">
<div class="team-member"> <div class="team-member-custom">
<div class="member-img"> <div class="member-img-custom">
<img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Profilbilder/_processed_/1/5/csm_Rausch-Alexander__2__29cbc409b2.jpg" class="img-fluid" alt=""> <img src="assets/img/team/avatar.png" alt="Prof. Dr. rer. nat. Michael Mommert">
<div class="social"> <div class="social-custom">
<a href="#"><i class="bi bi-linkedin"></i></a> <a href="" aria-label="LinkedIn Michael Mommert"><i class="bi bi-linkedin"></i></a>
<a href="https://www.hft-stuttgart.de/p/alexander-rausch"><i class="bi bi-person"></i></a> <a href="https://www.hft-stuttgart.de/p/michael-mommert" title="HFT Stuttgart Profilseite" target="_blank" aria-label="Profilseite Michael Mommert"><i class="bi bi-person"></i></a>
</div>
</div>
<div class="member-info">
<h4>Prof. Dr. Alexander Rausch</h4>
<span>Professor für Wirtschaftsinformatik</span>
</div>
</div> </div>
</div> </div>
<div class="member-info-custom">
<!-- Team Member 6 --> <h4>Prof. Dr. rer. nat. Michael Mommert</h4>
<div class="col-xl-3 col-md-6 d-flex align-items-stretch"> <span>Professor</span>
<div class="team-member">
<div class="member-img">
<img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Profilbilder/_processed_/2/2/csm_Pado-Ulrike__4__5a061080e9.jpg" class="img-fluid" alt="">
<div class="social">
<a href="#"><i class="bi bi-linkedin"></i></a>
<a href="https://www.hft-stuttgart.de/p/ulrike-pado"><i class="bi bi-person"></i></a>
</div>
</div>
<div class="member-info">
<h4>Prof. Dr. Ulrike Pado</h4>
<span>Professorin</span>
</div>
</div>
</div> </div>
</div>
</div>
<!-- Team Member 7 --> <!-- Team Member 4 -->
<div class="col-xl-3 col-md-6 d-flex align-items-stretch"> <div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="400">
<div class="team-member"> <div class="team-member-custom">
<div class="member-img"> <div class="member-img-custom">
<img src="assets/img/team/Tatyana.jpg" class="img-fluid" alt=""> <img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Profilbilder/_processed_/0/6/csm_Popovic-Tobias__4__bearbeitet_0cd4ce34b7.jpg" alt="Prof. Dr. Tobias Popovic">
<div class="social"> <div class="social-custom">
<a href="#"><i class="bi bi-linkedin"></i></a> <a href="" aria-label="LinkedIn Tobias Popovic"><i class="bi bi-linkedin"></i></a>
<a href="https://www.hft-stuttgart.de/p/tatyana-podgayetskaya"><i class="bi bi-person"></i></a> <a href="" title="HFT Stuttgart Profilseite" aria-label="Profilseite Tobias Popovic"><i class="bi bi-person"></i></a>
</div>
</div>
<div class="member-info">
<h4>Dr. Tatyana Podgayetskaya</h4>
<span>Akademische Mitarbeiterin</span>
</div>
</div> </div>
</div> </div>
<div class="member-info-custom">
<!-- Team Member 8 --> <h4>Prof. Dr. Tobias Popovic</h4>
<div class="col-xl-3 col-md-6 d-flex align-items-stretch"> <span>Professor / Ethikbeauftragter der HFT Stuttgart</span>
<div class="team-member">
<div class="member-img">
<img src="assets/img/team/sunita.jpg" class="img-fluid" alt="">
<div class="social">
<a href="#"><i class="bi bi-linkedin"></i></a>
<a href="https://www.hft-stuttgart.de/p/sunita-hirsch"><i class="bi bi-person"></i></a>
</div>
</div>
<div class="member-info">
<h4>Dr. Sunita Hirsch</h4>
<span>Akademische Mitarbeiterin</span>
</div>
</div>
</div> </div>
</div>
</div>
<!-- Team Member 9 --> <!-- Team Member 5 -->
<div class="col-xl-3 col-md-6 d-flex align-items-stretch"> <div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="500">
<div class="team-member"> <div class="team-member-custom">
<div class="member-img"> <div class="member-img-custom">
<img src="assets/img/team/avatar.png" class="img-fluid" alt=""> <img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Profilbilder/_processed_/1/5/csm_Rausch-Alexander__2__29cbc409b2.jpg" alt="Prof. Dr. Alexander Rausch">
<div class="social"> <div class="social-custom">
<a href="#"><i class="bi bi-linkedin"></i></a> <a href="" aria-label="LinkedIn Alexander Rausch"><i class="bi bi-linkedin"></i></a>
<a href="https://www.hft-stuttgart.de/p/diana-arfeli"><i class="bi bi-person"></i></a> <a href="https://www.hft-stuttgart.de/p/alexander-rausch" title="HFT Stuttgart Profilseite" target="_blank" aria-label="Profilseite Alexander Rausch"><i class="bi bi-person"></i></a>
</div>
</div>
<div class="member-info">
<h4>Dr. phil. Diana Arfeli</h4>
<span>Referentin für Ethik</span>
</div>
</div> </div>
</div> </div>
<div class="member-info-custom">
<h4>Prof. Dr. Alexander Rausch</h4>
<span>Professor für Wirtschaftsinformatik</span>
</div>
</div>
</div>
<!-- Team Member 10 --> <!-- Team Member 6 -->
<div class="col-xl-3 col-md-6 d-flex align-items-stretch"> <div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="600">
<div class="team-member"> <div class="team-member-custom">
<div class="member-img"> <div class="member-img-custom">
<img src="assets/img/team/avatar.png" class="img-fluid" alt=""> <img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Profilbilder/_processed_/2/2/csm_Pado-Ulrike__4__5a061080e9.jpg" alt="Prof. Dr. Ulrike Pado">
<div class="social"> <div class="social-custom">
<a href="#"><i class="bi bi-linkedin"></i></a> <a href="" aria-label="LinkedIn Ulrike Pado"><i class="bi bi-linkedin"></i></a>
<a href="#"><i class="bi bi-person"></i></a> <a href="https://www.hft-stuttgart.de/p/ulrike-pado" title="HFT Stuttgart Profilseite" target="_blank" aria-label="Profilseite Ulrike Pado"><i class="bi bi-person"></i></a>
</div>
</div>
<div class="member-info">
<h4>Tim Herbst</h4>
<span>Teammitglied</span>
</div>
</div> </div>
</div> </div>
<div class="member-info-custom">
<h4>Prof. Dr. Ulrike Pado</h4>
<span>Professorin</span>
</div>
</div>
</div>
<!-- Team Member 11 --> <!-- Team Member 7 -->
<div class="col-xl-3 col-md-6 d-flex align-items-stretch"> <div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="700">
<div class="team-member"> <div class="team-member-custom">
<div class="member-img"> <div class="member-img-custom">
<img src="assets/img/team/avatar.png" class="img-fluid" alt=""> <img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Profilbilder/_processed_/c/8/csm_Pfeiffer-Hermann__3__17b45e3d1b.jpg" alt="Prof. Dr. Hermann Pfeiffer">
<div class="social"> <div class="social-custom">
<a href="#"><i class="bi bi-linkedin"></i></a> <a href="" aria-label="LinkedIn Hermann Pfeiffer"><i class="bi bi-linkedin"></i></a>
<a href="https://www.hft-stuttgart.de/p/annegret-hoepner"><i class="bi bi-person"></i></a> <a href="https://www.hft-stuttgart.de/p/hermann-pfeiffer" title="HFT Stuttgart Profilseite" target="_blank" aria-label="Profilseite Hermann Pfeiffer"><i class="bi bi-person"></i></a>
</div>
</div>
<div class="member-info">
<h4>Annegret Höpner</h4>
<span>Akademische Mitarbeiterin</span>
</div>
</div> </div>
</div> </div>
<div class="member-info-custom">
<h4>Prof. Dr. Hermann Pfeiffer</h4>
<span>Professor / Studiendekan</span>
</div>
</div>
</div>
<!-- Team Member 12 --> <!-- Team Member 8 -->
<div class="col-xl-3 col-md-6 d-flex align-items-stretch"> <div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="800">
<div class="team-member"> <div class="team-member-custom">
<div class="member-img"> <div class="member-img-custom">
<img src="assets/img/team/avatar.png" class="img-fluid" alt=""> <img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Profilbilder/_processed_/3/0/csm_Wolf-Eva__2__a31237ec32.jpg" alt="Eva Wolf">
<div class="social"> <div class="social-custom">
<a href="#"><i class="bi bi-linkedin"></i></a> <a href="" aria-label="LinkedIn Eva Wolf"><i class="bi bi-linkedin"></i></a>
<a href="#"><i class="bi bi-person"></i></a> <a href="https://www.hft-stuttgart.de/p/eva-wolf" title="HFT Stuttgart Profilseite" target="_blank" aria-label="Profilseite Eva Wolf"><i class="bi bi-person"></i></a>
</div>
</div>
<div class="member-info">
<h4>[Name einfügen]</h4>
<span>[Rolle / Funktion einfügen]</span>
</div>
</div> </div>
</div> </div>
<div class="member-info-custom">
<h4>Eva Wolf</h4>
<span>Wissenschaftliche Mitarbeiterin</span>
</div>
</div> </div>
</div> </div>
</div>
</section> </section>
......
Supports Markdown
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