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 { ...@@ -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 { footer .footer-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -235,8 +301,6 @@ footer .footer-nav { ...@@ -235,8 +301,6 @@ footer .footer-nav {
justify-content: center; justify-content: center;
} }
a { a {
text-decoration: none; text-decoration: none;
transition: box-shadow 300ms ease; transition: box-shadow 300ms ease;
...@@ -256,6 +320,7 @@ a { ...@@ -256,6 +320,7 @@ a {
.button:hover { .button:hover {
box-shadow: 0px 5px 40px -5px rgba(var(--primary), 0.35); 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 @@ ...@@ -131,48 +131,41 @@
</div> </div>
</div> </div>
</section> </section>
<section class="contact-form" id="contact"> <section class="contact-section" id="contact">
<h2>Get in touch</h2> <div class="content-container contact-container">
<p> <h2>Get in touch</h2>
Do you still have a question? Just contact us directly and we will be glad <p>
to help you resolve the issue. Do you still have a question? Just contact us directly and we will be glad
</p> to help you resolve the issue.
<form action="mailto:dplanoetscher@unibz.it" method="POST"> </p>
<table> <form class="contact-form" action="mailto:dplanoetscher@unibz.it" method="GET">
<tr> <div class="contact-form-input">
<td> <div class="contact-fields">
<div class="contact-field">
<label for="firstname">Firstname</label> <br> <label for="firstname">Firstname</label>
<input type="text" required name="firstname" id="firstname"> <input type="text" required name="firstname" id="firstname">
</td> </div>
<td> <div class="contact-field">
<label for="lastname">Lastname</label> <br> <label for="lastname">Lastname</label>
<input type="text" required name="lastname" id="lastname"> <input type="text" required name="lastname" id="lastname">
</td> </div>
</tr> <div class="contact-field">
<tr> <label for="email">Email</label>
<td> <input type="email" required name="email" id="email">
<label for="email">Email</label> <br> </div>
<input type="email" required name="email" id="email"> <div class="contact-field">
</td> <label for="subject">Subject</label>
<td> <input type="text" required name="subject" id="subject">
<label for="subject">Subject</label> <br> </div>
<input type="text" required name="subject" id="subject"> </div>
</td> <div class="contact-message">
</tr> <label for="message">Message</label>
<tr> <textarea name="message" required id="message" cols="48" rows="13"></textarea>
<td colspan="2"> </div>
<label for="message">Message</label> <br> </div>
<textarea name="message" required id="message" cols="48" rows="10"></textarea> <input class="button submit-button" type="submit" value="Send">
</td> </form>
</tr> </div>
<tr>
<td>
<input type="submit" value="Send">
</td>
</tr>
</table>
</form>
</section> </section>
</main> </main>
<footer> <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