Skip to content

Commit

Permalink
New styles and content for school page
Browse files Browse the repository at this point in the history
  • Loading branch information
@leontm-dev
leontm-dev committed Nov 8, 2024
1 parent 1fbb60b commit 39065a5
Show file tree
Hide file tree
Showing 8 changed files with 542 additions and 24 deletions.
190 changes: 166 additions & 24 deletions schulen.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,17 @@
<link rel="stylesheet" href="src/general/nav.css" />
<link rel="stylesheet" href="src/general/footer.css" />
<link rel="stylesheet" href="src/general/content.css" />
<link rel="stylesheet" href="src/general/fonts.css" />
<link rel="stylesheet" href="src/schule/style.css" />
<link rel="stylesheet" href="src/schule/scroller.css" />
<link rel="stylesheet" href="src/general/download-button.css" />
<link rel="stylesheet" href="src/unternehmen/style.css" />
<link rel="stylesheet" href="src/schule/panels.css" />
<link rel="stylesheet" href="src/schule/schulen.css" />
<link rel="stylesheet" href="src/schule/front-section.css" />
<link rel="stylesheet" href="src/schule/email-section.css" />
<link rel="stylesheet" href="src/schule/materials.css" />
<link rel="icon" href="src/images/finda-Logo-only.png" />
<link rel="stylesheet" href="src/general/section.css" />
<link rel="stylesheet" href="src/unternehmen/gallery.css" />
<link rel="stylesheet" href="src/unternehmen/chooser.css" />
</head>
<body>
<div class="content">
Expand Down Expand Up @@ -63,29 +70,164 @@
</button>
</div>
</div>
<div class="section-eins">
<p>Bringen Sie jetzt finda an Ihre Schule!</p>
<img src="/src//images/schule-1.jpg" />
</div>
<div class="section-scroll">
<span class="scroller"></span>
</div>
<div class="section-details">
<div class="detail">
<div>Aktive personalisierte Berufsorientierung</div>
<p>
Durch die personalisierten Ergebnisse können die Schüler sich
perfekt über das regionale Angebot an Ausbildungs- und
Praktikumsplätzen informieren und sich somit einen guten Überblick
verschaffen, um auf dessen Basis zu entscheiden, welche Stellen man
für eine Bewerbung matchen möchte.
</p>
<section class="front-section">
<div class="front-content">
<h1 class="front-text">
Bringen Sie jetzt die finda App in Ihre Schule
</h1>
<button class="mouse">
<div class="scroll"></div>
</button>
</div>
<div class="detail">
<div>Direkte Unterstützung im Bewerbungsprozess</div>
</section>
<section class="panel-section">
<div class="panel">
<div class="panel-image-container">
<img src="src/images/schule-3.jpg" class="panel-image" />
</div>
<div class="panel-texts">
<div class="panel-title">
Aktive <span>personalisierte</span> Berufsorientierung
</div>
<div class="panel-description">
Durch die personalisierten Ergebnisse können die Schüler sich
perfekt über das regionale Angebot an Ausbilduns- und
Praktikumsplätzen informieren und sich somit einen guten Überblick
verschaffen, um auf dessen Basis zu entscheiden, welche
</div>
<div class="panel-seperator"></div>
</div>
</div>
<div class="detail"></div>
</div>
<div class="panel">
<div class="panel-image-container">
<img src="src/images/schule-2.jpg" alt="" class="panel-image" />
</div>
<div class="panel-texts">
<div class="panel-title">
<span>Direkte Unterstützung</span> im Bewerbungsprozess
</div>
<div class="panel-description">
Hat ein Schüler nachdem er einige Stellen gematcht hat, sich nun
dafür entschieden, ein Unternehmen im Chat anzuschreiben, können
Lehrkräfte nun direkt im Unterricht den Schüler bei jeglichen
Fragen zum Bewerbungsprozess aktiv unterstützen, anstatt wie sonst
nut auf einen Anruf beim Unternehmen direkt zu verweisen oder
Vorschläge zu machen, wie der Schüler jetzt am besten vorgehen
kann, die der Schüler spätestens mittags eh wieder vergessen hat.
</div>
<div class="panel-seperator"></div>
</div>
</div>
<div class="panel">
<div class="panel-image-container">
<img src="src/images/schule-5.jpg" alt="" class="panel-image" />
</div>
<div class="panel-texts">
<div class="panel-title">DSGVO Konform</div>
<div class="panel-description">
Jeder Schüler kann selber entscheiden welche Informationen man
über sich in der App angeben möchte und welche den Unternehmen
angezeigt - über die personenbezogenen Daten hinaus ist auch die
komplette Datenverarbeitung und Speicherung DSGVO-konform und
erfolgt ausschließlich in der EU.
</div>
<div class="panel-seperator"></div>
</div>
</div>
</section>
<section class="schulen">
<div class="schulen-title">Unsere bisherigen Partnerschulen</div>
<div class="schulen-list">
<div class="schule-container">
<img src="src/images/schulen/AFS.png" alt="" class="schule" />
</div>
<div class="schule-container">
<img
src="src/images/schulen/BödikerOberschule.png"
alt=""
class="schule"
/>
</div>
<div class="schule-container">
<img
src="src/images/schulen/Friedensschule.png"
alt=""
class="schule"
/>
</div>
<div class="schule-container">
<img
src="src/images/schulen/IMG_0617-removebg-preview.png"
alt=""
class="schule"
/>
</div>
<div class="schule-container">
<img src="src/images/schulen/JSM.png" alt="" class="schule" />
</div>
<div class="schule-container">
<img src="src/images/schulen/KvG.png" alt="" class="schule" />
</div>
<div class="schule-container">
<img
src="src/images/schulen/MartinusOberschule.png"
alt=""
class="schule"
/>
</div>
<div class="schule-container">
<img
src="src/images/schulen/SchuleAmSee.png"
alt=""
class="schule"
/>
</div>
<div class="schule-container">
<img src="src/images/schulen/WGM.png" alt="" class="schule" />
</div>
</div>
</section>
<section class="materials">
<div class="materials-title">
Materialien um finda bestmöglich im Unterricht zu benutzen
</div>
<div class="materials-buttons">
<a
href="src/material/Anleitung-finda-im-Unterricht.pdf"
download="Anleitung-finda-im-Unterricht"
>Download: Anleitung-finda-im-Unterricht.pdf</a
>
<a
href="src/material/InfoTextSchüler.pdf"
download="Info-Text-Schüler-finda"
>Download: Info-Text-Schüler-finda.pdf</a
>
<a
href="src/material/Texte-Lehrer-Infos-zur-App.pdf"
download="Texte-Lehrer-Infos-zur-App"
>Download: Texte-Lehrer-Infos-zur-App.pdf</a
>
</div>
</section>
<section class="email-section">
<div class="email-content">
<div class="email-row">
<div class="email-title">Wir kommen zu Ihnen!</div>
</div>
<div class="email-row" style="justify-content: flex-start">
<div class="email-subtitle">
Gerne kommen wir für eine Präsentation der App vor der
Schülerschaft auch an Ihre Schule.
<br />
Kontaktieren Sie uns gerne direkt wenn Sie diesbezüglich oder
allgemein Fragen haben sollten:
</div>
<a href="mailto:[email protected]" class="email-button"
>Schreiben Sie uns!</a
>
</div>
</div>
</section>
</div>
<footer>
<div class="footer-content">
Expand Down
91 changes: 91 additions & 0 deletions src/schule/email-section.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
.email-section {
background-image: url("../images/schule-4.jpg");
background-size: cover;
height: 100vh;
display: flex;
flex-direction: column;
aspect-ratio: 3 / 2;
justify-content: center;
align-items: center;
}
.email-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.3);
height: 100%;
width: 100%;
gap: 4rem;
}
.email-row {
width: 80%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 4rem;
}
.email-title {
font-size: 120px;
font-family: Arial, Helvetica, sans-serif;
color: white;
font-weight: 700;
width: 100%;
text-align: start;
}
.email-subtitle {
font-size: 30px;
color: white;
font-family: Arial, Helvetica, sans-serif;
width: 60%;
}
.email-button {
cursor: pointer;
text-decoration: none;
padding: 2rem;
font-size: 25px;
color: white;
border: dashed 0.25rem white;
border-radius: 1rem;
}

@media screen and (max-width: 1100px) {
.email-title {
font-size: 80px;
}
.email-subtitle {
font-size: 20px;
}
.email-button {
font-size: 20px;
}
}
@media screen and (max-width: 800px) {
.email-title {
font-size: 60px;
}
.email-subtitle {
font-size: 15px;
}
.email-button {
font-size: 15px;
padding: 0.75rem;
border-width: 0.125rem;
}
}

@media screen and (max-width: 700px) {
.email-row {
flex-direction: column;
gap: 2rem;
justify-content: center;
align-items: flex-start;
}
.email-section {
aspect-ratio: unset;
}
.email-content {
padding: 2rem 0;
}
}
95 changes: 95 additions & 0 deletions src/schule/front-section.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
.front-section {
background-image: url("../images/schule-1.jpg");
background-size: cover;
height: calc(100% - 60px);
aspect-ratio: 1170 / 660;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.front-content {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
padding: 2rem;
width: calc(100% - 4rem);
height: calc(100% - 4rem);
background-color: rgba(0, 0, 0, 0.3);
}
.front-text {
color: white;
font-weight: 700;
font-size: 130px;
}
.mouse {
width: 45px;
height: 60px;
border: 1px solid rgb(196, 196, 196);
background-color: transparent;
border-radius: 13px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
}

.scroll {
width: 5px;
height: 20px;
background-color: rgb(196, 196, 196);
border-radius: 2px;
position: absolute;
bottom: 9px;
animation: move_918 1.5s linear infinite;
}

@keyframes move_918 {
0% {
bottom: 9px;
}

50% {
bottom: 5px;
}

100% {
bottom: 9px;
}
}

@media screen and (max-width: 1560px) {
.front-text {
font-size: 100px;
}
}

@media screen and (max-width: 1222px) {
.front-text {
font-size: 80px;
}
.mouse {
display: none;
}
}
@media screen and (max-width: 845px) {
.front-text {
font-size: 60px;
}
}
@media screen and (max-width: 660px) {
.front-section {
background-image: url("../images/schule-6.jpg");
aspect-ratio: unset;
}
}

@media screen and (max-width: 470px) {
.front-text {
font-size: 40px;
}
}
Loading

0 comments on commit 39065a5

Please sign in to comment.