Skip to content
Snippets Groups Projects
Commit 0cefabfd authored by Planoetscher Daniel (Student Com20)'s avatar Planoetscher Daniel (Student Com20)
Browse files

Merge branch 'adding-css' of... 

Merge branch 'adding-css' of gitlab.inf.unibz.it:Roland.Bernard/wie_202021_csbillero11 into adding-css
parents a5164e6a cecbc2bb
No related branches found
No related tags found
1 merge request!1Adding css
Hide whitespace changes
Inline Side-by-side
src/css/style.css
+ 67
− 2
View file @ 0cefabfd
......@@ -202,6 +202,72 @@ h4 {
}
}
.contact-section .contact-container {
display: flex;
flex-direction: column;
margin: 5rem auto;
text-align: center;
}
.contact-section .contact-form {
margin-top: 2rem;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.contact-section .contact-form-input {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: start;
justify-content: center;
width: 100%;
}
.contact-section .contact-fields {
margin-right: 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.contact-section .contact-field {
margin: 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.contact-section .contact-message {
margin: 0.5rem;
}
.contact-section .contact-message textarea {
width: 100%;
box-sizing: border-box;
}
.contact-section .submit-button {
appearance: none;
border: none;
margin: 0.5rem;
}
@media screen and (max-width: 600px) {
.contact-section .contact-form-input {
flex-direction: column;
align-items: center;
}
.contact-section .contact-fields {
flex-direction: row;
flex-wrap: wrap;
}
}
footer .footer-container {
display: flex;
flex-direction: row;
......@@ -235,8 +301,6 @@ footer .footer-nav {
justify-content: center;
}
a {
text-decoration: none;
transition: box-shadow 300ms ease;
......@@ -256,6 +320,7 @@ a {
.button:hover {
box-shadow: 0px 5px 40px -5px rgba(var(--primary), 0.35);
cursor: pointer;
}
* {
......
src/index.html
+ 35
− 42
View file @ 0cefabfd
......@@ -131,48 +131,41 @@
</div>
</div>
</section>
<section class="contact-form" id="contact">
<h2>Get in touch</h2>
<p>
Do you still have a question? Just contact us directly and we will be glad
to help you resolve the issue.
</p>
<form action="mailto:dplanoetscher@unibz.it" method="POST">
<table>
<tr>
<td>
<label for="firstname">Firstname</label> <br>
<input type="text" required name="firstname" id="firstname">
</td>
<td>
<label for="lastname">Lastname</label> <br>
<input type="text" required name="lastname" id="lastname">
</td>
</tr>
<tr>
<td>
<label for="email">Email</label> <br>
<input type="email" required name="email" id="email">
</td>
<td>
<label for="subject">Subject</label> <br>
<input type="text" required name="subject" id="subject">
</td>
</tr>
<tr>
<td colspan="2">
<label for="message">Message</label> <br>
<textarea name="message" required id="message" cols="48" rows="10"></textarea>
</td>
</tr>
<tr>
<td>
<input type="submit" value="Send">
</td>
</tr>
</table>
</form>
<section class="contact-section" id="contact">
<div class="content-container contact-container">
<h2>Get in touch</h2>
<p>
Do you still have a question? Just contact us directly and we will be glad
to help you resolve the issue.
</p>
<form class="contact-form" action="mailto:dplanoetscher@unibz.it" method="GET">
<div class="contact-form-input">
<div class="contact-fields">
<div class="contact-field">
<label for="firstname">Firstname</label>
<input type="text" required name="firstname" id="firstname">
</div>
<div class="contact-field">
<label for="lastname">Lastname</label>
<input type="text" required name="lastname" id="lastname">
</div>
<div class="contact-field">
<label for="email">Email</label>
<input type="email" required name="email" id="email">
</div>
<div class="contact-field">
<label for="subject">Subject</label>
<input type="text" required name="subject" id="subject">
</div>
</div>
<div class="contact-message">
<label for="message">Message</label>
<textarea name="message" required id="message" cols="48" rows="13"></textarea>
</div>
</div>
<input class="button submit-button" type="submit" value="Send">
</form>
</div>
</section>
</main>
<footer>
......
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