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
+
+
+
+
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
+}