Fill in contact information

2 files changed, 41 insertions, 18 deletions

diff --git a/contact.html b/contact.html
index cf849a0..f0c22ec 100644
--- a/contact.html
+++ b/contact.html
@@ -1,20 +1,17 @@
 <main>
   <div id="contact-us">
-    <h1>Contact</h1>
-    <p>Nos coordonnées :</p>
+    <h1>Nos coordonnées</h1>
+    <dl>
+      <dt>Email : </dt>
+      <dd><a href="mailto:quatuorbellefeuille@gmail.com">quatuorbellefeuille@gmail.com</a></dd>
     <dl>
-      <dt>Email :
-        <dd><a href="mailto:contact@example.com">contact@example.com</a></dd>
-      </dt>
-      <dt>Téléphone :
-        <dd><a href="tel:+33-01-99-00-01-02">01 99 00 01 02</a></dd>
-      </dt>
     </dl>
-    <p>
-      Tenez-vous au courant des actualités du
-      quatuor <a href="feed.xml">en vous abonnant à notre
-        flux.</a>
-    </p>
+      <dt>Téléphone : </dt>
+      <dd><a href="tel:+33-06-52-26-21-92">06 52 26 21 92</a></dd>
+    </dl>
+    <figure>
+      <img src="images/contact.jpg">
+    </figure>
   </div>
   <div id="partners">
     <h1>Partenaires</h1>
diff --git a/stylesheets/contact.css b/stylesheets/contact.css
index ba32d8e..f1dc4ae 100644
--- a/stylesheets/contact.css
+++ b/stylesheets/contact.css
@@ -1,15 +1,41 @@
 @media (min-width: 40em) {
     main {
         display: grid;
-        grid-template-columns: 60% 40%;
+        grid-template-columns: 1fr 1fr;
     }
 
-    #contact-us dl {
-        display: grid;
-        grid-template-columns: 1fr 2fr;
+    main h1 {
+        color: #377d1f;
+        margin-top: 0;
+    }
+
+    #contact-us {
+        border-right: solid 1px #e05a00;
+        /* Try to set this so that border does not go too far below photo. */
+        height: 28em;
+    }
+    #contact-us, #partners {
+        margin: 2em;
     }
 
+    #contact-us dl:not(:first) {
+        margin-top: 0.2em;
+    }
+    #contact-us dl:not(:last) {
+        margin-bottom: 0.2em;
+    }
     #contact-us dd {
-        margin-left: inherit;
+        margin-left: 0;
+    }
+    #contact-us dt, #contact-us dd {
+        display: inline;
+    }
+
+    #contact-us figure {
+        margin-left: 0;
+    }
+
+    #contact-us figure img {
+        max-width: 30em;
     }
 }