diff options
| -rw-r--r-- | contact.html | 23 | ||||
| -rw-r--r-- | stylesheets/contact.css | 36 |
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; } } |