Files
pas/Web/src/app/pages/front-pages/contact/contact.component.html
Marek Lesko 9d644a9b79 WIP
2025-10-22 14:44:25 +00:00

102 lines
4.9 KiB
HTML
Executable File

<div class="contact-content">
<!-- Light Blue Section -->
<div class="banner-section bg-light-primary p-y-80">
<div class="container m-b-80 p-b-80">
<div class="container-content">
<p class="text-primary text-center text-uppercase f-s-14 m-t-0"> Chceme sa dozvedieť viac do vás</p>
<h1 class="text-center f-s-48 section-sub-title lh-normal">Kontaktujte nás
</h1>
</div>
</div>
</div>
<div class="form-content">
<form>
<div class="container">
<!-- Map stays inside, but will visually float out -->
<div class="map-container overflow-hidden rounded">
<iframe class="overflow-hidden rounded"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6335071.017601874!2d7.472741070779207!3d34.000243243063756!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x126c2c82aeb63e77%3A0xb5b3d1a2f1304c8e!2sTunisia!5e0!3m2!1sen!2stn!4v1715499362503!5m2!1sen!2stn"
width="100%" height="400" style="border: 0" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="spacing-top-bottom">
<div class="row">
<div class="col-md-8 m-b-30">
<div class="row ">
<div class="col-md-6">
<!-- input -->
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Meno<span>*</span></mat-label>
<mat-form-field appearance="outline" class="w-100" color="primary">
<input matInput type="text" placeholder="Meno" />
</mat-form-field>
<!-- input -->
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Telefónne číslo<span>*</span></mat-label>
<mat-form-field appearance="outline" class="w-100" color="primary">
<input matInput type="tel" placeholder="xxxx xxx xxxx" />
</mat-form-field>
</div>
<div class="col-md-6">
<!-- input -->
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Priezvisko<span>*</span></mat-label>
<mat-form-field appearance="outline" class="w-100" color="primary">
<input matInput type="text" placeholder="Priezvisko" />
</mat-form-field>
<!-- input -->
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Email<span>*</span></mat-label>
<mat-form-field appearance="outline" class="w-100" color="primary">
<input matInput type="mail" placeholder="Emailová adresa" />
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Dopyt týkajúci sa<span>*</span>
</mat-label>
<mat-form-field appearance="outline" class="w-100">
<mat-select value="General Enquiry">
<mat-option value="General Enquiry">Všeobecný dopyt</mat-option>
<mat-option value="Registration Enquiry">Žiadosť o registráciu</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Správa</mat-label>
<mat-form-field appearance="outline" class="w-100" color="primary">
<textarea matInput rows="5" placeholder="Napíšte svoju správu sem"></textarea>
</mat-form-field>
</div>
</div>
<button mat-flat-button>Odoslať</button>
</div>
<div class="col-md-4 right-side-content">
<mat-card class="shadow-none bg-primary rounded-8 p-8">
<mat-card-content>
<div>
<h6 class="f-s-20 m-b-16 text-white">Kontaktujte nás dnes</h6>
<p class="f-s-14 m-0 text-white">
Máte otázky alebo potrebujete pomoc? Napíšte nám správu.
</p>
</div>
<mat-divider class="m-y-30"></mat-divider>
<div>
<h6 class="f-s-20 m-b-16 text-white">Naša lokalita</h6>
<p class="f-s-14 m-0 text-white">
Navštívte nás osobne alebo nájdite naše kontaktné údaje, aby ste sa s nami mohli priamo spojiť.
</p>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="footer">
<app-footer></app-footer>
</div>
</div>