feat: Add contact page

This commit is contained in:
Fándly Gergő 2021-01-05 23:39:16 +02:00
parent 41be8ee976
commit 9de47005e6
4 changed files with 123 additions and 2 deletions

View File

@ -1,11 +1,57 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Core Computing</title> <title>Contact - Core Computing</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<script src="./index.js"></script> <script src="./index.js"></script>
</head> </head>
<body> <body>
<app-header /> <app-header></app-header>
<div class="contact_bg"></div>
<div class="contact_content">
<div class="contact_form">
<p class="contact_form_title">Ai întrebări? Scrie-ne!</p>
<input
id="c_email"
type="email"
class="contact_form_field"
placeholder="Email"
/>
<textarea
id="c_message"
class="contact_form_field"
placeholder="Mesajul tău"
rows="15"
></textarea>
<app-button
onclick="window.location.href = `mailto:contact@corecomputing.ro?subject=${document.getElementById('c_email').value}&body=${document.getElementById('c_message').value}`"
data-text="Trimite!"
></app-button>
</div>
<div class="contact_info">
<div>
<p class="contact_info_name">SC Core Computing SRL</p>
<p class="contact_info_details">
Adresa: Oradea, Str. Universității 15
<br />
Telefon: 0359 - 444 555
<br />
Nr. Reg. Com.: 153/4441
<br />
CUI: 123456
</p>
</div>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1143.0965017714987!2d21.920660481729392!3d47.04499920169418!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47464794d87a183f%3A0x26127af0a86f755a!2sStrada%20Universit%C4%83%C8%9Bii%2015%2C%20Oradea%20417498!5e0!3m2!1shu!2sro!4v1609882271325!5m2!1shu!2sro"
width="300"
height="250"
frameborder="0"
style="border: 0"
allowfullscreen=""
aria-hidden="false"
tabindex="0"
></iframe>
</div>
</div>
</body> </body>
</html> </html>

BIN
src/res/contact_bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

View File

@ -6,6 +6,7 @@ import '../style/index.scss';
import '../style/about.scss'; import '../style/about.scss';
import '../style/services.scss'; import '../style/services.scss';
import '../style/prices.scss'; import '../style/prices.scss';
import '../style/contact.scss';
// load components // load components
import './components/app-header'; import './components/app-header';

74
src/style/contact.scss Normal file
View File

@ -0,0 +1,74 @@
.contact {
&_bg {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('../res/contact_bg.png') center center;
background-repeat: no-repeat;
background-size: cover;
}
&_content {
position: relative;
margin-top: 60px;
padding-top: 100px;
padding-left: 60px;
padding-right: 60px;
margin: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
&_form {
background: #ffffffd0;
padding: 20px;
border-radius: 16px;
width: 450px;
&_title {
font-size: 24px;
line-height: 36px;
text-align: center;
margin-bottom: 40px;
color: #0072bc;
}
&_field {
width: 100%;
border-radius: 8px;
border: 1px solid #707070;
padding: 10px 15px;
font-size: 24px;
line-height: 32px;
color: #707070;
margin-bottom: 20px;
}
}
&_info {
background: #ffffffd0;
padding: 20px;
border-radius: 16px;
flex: 1;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-left: 40px;
&_name {
font-size: 18px;
line-height: 24px;
font-weight: bold;
margin-bottom: 40px;
}
&_details {
font-size: 18px;
line-height: 24px;
}
}
}