From e1073ab21fee65c918ddfc972a4b5e9bad1b34ac Mon Sep 17 00:00:00 2001 From: nyanloutre Date: Tue, 12 May 2020 18:12:47 +0200 Subject: [PATCH] ajout contact.html --- contact.html | 32 ++++++++++++++++++++++++++++++++ index.html | 5 +++-- reset.css | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 45 +++++++++++++++++++++++++++++++++++---------- 4 files changed, 118 insertions(+), 12 deletions(-) create mode 100644 contact.html create mode 100644 reset.css diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..769e899 --- /dev/null +++ b/contact.html @@ -0,0 +1,32 @@ + + + + + + Anna Uetwiller - Architecte + + + + + + +
+

Anna Uetwiller

+

Architecte - Dessinatrice

+
+
+
+

Adresse: 16, rue du Ziegelfeld, 67100 STRASBOURG

+

Téléphone: 0678825821

+

email: anna.tsoi.fr@gmail.com

+
+
+ + diff --git a/index.html b/index.html index 5c3bce4..1d3cb87 100644 --- a/index.html +++ b/index.html @@ -2,10 +2,11 @@ + Anna Uetwiller - Architecte + -

Anna Uetwiller

diff --git a/reset.css b/reset.css new file mode 100644 index 0000000..e29c0f5 --- /dev/null +++ b/reset.css @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/style.css b/style.css index fc576af..fe8a00c 100644 --- a/style.css +++ b/style.css @@ -4,7 +4,7 @@ body { display: grid; } -@media (min-width: 900px) { +@media (min-width: 1025px) { body { grid-template-columns: 250px; grid-template-areas: @@ -14,20 +14,34 @@ body { #navbar { height: 100vh; position: fixed; + padding: 1rem; + margin-right: 1rem; } } -@media (max-width: 900px) { +@media (max-width: 1024px) { body { grid-template-areas: 'title' 'menu' 'content'; } + #navbar { + width: 100%; + margin-bottom: 1rem; + } } #title { grid-area: title; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 1rem; +} + +#title h1,h2 { + margin: 0; } #navbar { @@ -36,10 +50,6 @@ body { align-items: center; background-color: #eadecc; list-style: none; - margin: 0; - margin-right: 1rem; - padding-top: 1rem; - padding-right: 1rem; grid-area: menu; } @@ -66,12 +76,16 @@ h1, h2, h3 { color: #8c877d; } -#content h1 { - margin-bottom: 0; +#title { + margin-bottom: 2rem; } -#content h2 { - margin-top: 0; +#title h1 { + font-size: xx-large; +} + +#title h2 { + font-size: x-large; } .galery { @@ -83,3 +97,14 @@ h1, h2, h3 { .galery a img { margin: 0.5rem; } + +#contact { + background-color: #f6f1ea; + width: 100% +} + +#contact p { + margin: 1rem; + font-size: large; + color: #8c877d +}