diff --git a/city.jpg b/city.jpg new file mode 100644 index 0000000..8f30694 Binary files /dev/null and b/city.jpg differ diff --git a/facade.jpg b/facade.jpg new file mode 100644 index 0000000..8641f53 Binary files /dev/null and b/facade.jpg differ diff --git a/font/roboto/NOTICE.txt b/font/roboto/NOTICE.txt new file mode 100644 index 0000000..2df9f2e --- /dev/null +++ b/font/roboto/NOTICE.txt @@ -0,0 +1 @@ +You may use the materials in this file without restriction to develop your apps and to use in your apps. \ No newline at end of file diff --git a/font/roboto/Roboto-Black.ttf b/font/roboto/Roboto-Black.ttf new file mode 100644 index 0000000..86ec2b2 Binary files /dev/null and b/font/roboto/Roboto-Black.ttf differ diff --git a/font/roboto/Roboto-BlackItalic.ttf b/font/roboto/Roboto-BlackItalic.ttf new file mode 100644 index 0000000..1904c99 Binary files /dev/null and b/font/roboto/Roboto-BlackItalic.ttf differ diff --git a/font/roboto/Roboto-Bold.ttf b/font/roboto/Roboto-Bold.ttf new file mode 100644 index 0000000..91ec212 Binary files /dev/null and b/font/roboto/Roboto-Bold.ttf differ diff --git a/font/roboto/Roboto-BoldCondensed.ttf b/font/roboto/Roboto-BoldCondensed.ttf new file mode 100644 index 0000000..d7ea883 Binary files /dev/null and b/font/roboto/Roboto-BoldCondensed.ttf differ diff --git a/font/roboto/Roboto-BoldCondensedItalic.ttf b/font/roboto/Roboto-BoldCondensedItalic.ttf new file mode 100644 index 0000000..3c9635a Binary files /dev/null and b/font/roboto/Roboto-BoldCondensedItalic.ttf differ diff --git a/font/roboto/Roboto-BoldItalic.ttf b/font/roboto/Roboto-BoldItalic.ttf new file mode 100644 index 0000000..4013bf8 Binary files /dev/null and b/font/roboto/Roboto-BoldItalic.ttf differ diff --git a/font/roboto/Roboto-Condensed.ttf b/font/roboto/Roboto-Condensed.ttf new file mode 100644 index 0000000..6e7575a Binary files /dev/null and b/font/roboto/Roboto-Condensed.ttf differ diff --git a/font/roboto/Roboto-CondensedItalic.ttf b/font/roboto/Roboto-CondensedItalic.ttf new file mode 100644 index 0000000..5ed712c Binary files /dev/null and b/font/roboto/Roboto-CondensedItalic.ttf differ diff --git a/font/roboto/Roboto-Italic.ttf b/font/roboto/Roboto-Italic.ttf new file mode 100644 index 0000000..9f49ffd Binary files /dev/null and b/font/roboto/Roboto-Italic.ttf differ diff --git a/font/roboto/Roboto-Light.ttf b/font/roboto/Roboto-Light.ttf new file mode 100644 index 0000000..d43e943 Binary files /dev/null and b/font/roboto/Roboto-Light.ttf differ diff --git a/font/roboto/Roboto-LightItalic.ttf b/font/roboto/Roboto-LightItalic.ttf new file mode 100644 index 0000000..c11442c Binary files /dev/null and b/font/roboto/Roboto-LightItalic.ttf differ diff --git a/font/roboto/Roboto-Medium.ttf b/font/roboto/Roboto-Medium.ttf new file mode 100644 index 0000000..8798341 Binary files /dev/null and b/font/roboto/Roboto-Medium.ttf differ diff --git a/font/roboto/Roboto-MediumItalic.ttf b/font/roboto/Roboto-MediumItalic.ttf new file mode 100644 index 0000000..5e86637 Binary files /dev/null and b/font/roboto/Roboto-MediumItalic.ttf differ diff --git a/font/roboto/Roboto-Regular.ttf b/font/roboto/Roboto-Regular.ttf new file mode 100644 index 0000000..7d9a6c4 Binary files /dev/null and b/font/roboto/Roboto-Regular.ttf differ diff --git a/font/roboto/Roboto-Thin.ttf b/font/roboto/Roboto-Thin.ttf new file mode 100644 index 0000000..861d63a Binary files /dev/null and b/font/roboto/Roboto-Thin.ttf differ diff --git a/font/roboto/Roboto-ThinItalic.ttf b/font/roboto/Roboto-ThinItalic.ttf new file mode 100644 index 0000000..e65145f Binary files /dev/null and b/font/roboto/Roboto-ThinItalic.ttf differ diff --git a/font/roboto/Roboto_Specimen_Book.pdf b/font/roboto/Roboto_Specimen_Book.pdf new file mode 100644 index 0000000..594a366 Binary files /dev/null and b/font/roboto/Roboto_Specimen_Book.pdf differ diff --git a/index.html b/index.html index b93d66c..d51d2b1 100644 --- a/index.html +++ b/index.html @@ -28,6 +28,8 @@
+
+

In Urbe

@@ -35,59 +37,63 @@
-

Les Parcours

-
+
+

Qui sommes-nous?

Ce site est à l'initiative de Bastien Grégis, charpentier, technicien cordiste et étudiant en architecture. Mais surtout passionné par la ville de Lyon. Il a créé son entreprise d'animation culturelle en août 2017 pour faire profiter de sa passion, aux visiteurs occasionnels comme aux résidents de longue date souhaitant porter un nouveau regard sur la ville. @@ -95,19 +101,10 @@

Inurbe.fr se propose d'être une plateforme de rassemblement pour que des passionnés de la ville et du territoire puissent partager leurs connaissances avec vous au travers de visites guidées originales.

-

- -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec aliquet neque. Aenean imperdiet lorem sed diam placerat convallis. Ut vehicula vel neque ac interdum. In tincidunt, massa non feugiat auctor, ligula neque auctor risus, a suscipit felis tellus nec sem. Donec egestas erat et lectus convallis, id mollis massa malesuada. Nunc magna nibh, sagittis eget mi a, tempus dictum nisi. Proin sed arcu feugiat, scelerisque est nec, vulputate enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam pharetra dolor nec lectus accumsan efficitur non in justo. Morbi a facilisis massa. - -Donec pretium, eros sit amet commodo aliquet, ligula odio gravida mauris, id dignissim risus ipsum eget ipsum. Aenean dictum ante sit amet posuere gravida. Sed nec arcu a leo laoreet vestibulum in id nulla. Etiam id mattis sem. Praesent ultrices pellentesque nisl, bibendum venenatis magna fermentum vitae. Proin et mattis diam. Fusce ante lectus, placerat ultricies maximus id, dapibus sit amet arcu. Proin luctus velit auctor ante rhoncus pretium. Mauris ut urna vel mi iaculis hendrerit vitae eu quam. - -Quisque sed lobortis ante. Donec sed blandit ante. Nulla porta felis vel nibh euismod dignissim. In at mattis mauris, ut condimentum neque. Nunc bibendum at erat sed finibus. Nullam gravida auctor turpis vitae suscipit. Curabitur erat turpis, placerat gravida ex quis, ullamcorper mollis nisl. - -Ut interdum quis ligula sagittis placerat. Fusce commodo pulvinar ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse vel justo at augue eleifend efficitur. Nulla in dictum est. Proin tempor ipsum dolor, cursus finibus diam posuere at. Mauris ex sapien, eleifend vitae justo et, consequat dapibus tellus. Vestibulum elementum placerat diam, et placerat libero fermentum at. Curabitur euismod quam sed metus dictum, ut euismod magna varius. Aliquam nec ultricies felis, eget sagittis odio. Nulla et metus sit amet lacus elementum commodo dignissim quis risus. - -Sed tempor ex at arcu consectetur maximus. Etiam condimentum mauris vitae quam commodo, ac porttitor massa vestibulum. Aliquam a mauris et tellus fermentum semper sit amet id turpis. Donec posuere vitae dui at tempor. Aliquam tortor urna, interdum et varius quis, facilisis id sem. Quisque in aliquet risus, nec tempus metus. Fusce consectetur risus quis ante vulputate aliquet. Aliquam erat volutpat. Duis pretium bibendum tincidunt. Donec at interdum libero, a elementum augue. Morbi volutpat mauris vel ligula tempor, quis pulvinar felis blandit.

+
+

NOUS CONTACTER

diff --git a/style/main.css b/style/main.css index c4b20d1..5de42ad 100644 --- a/style/main.css +++ b/style/main.css @@ -1,7 +1,27 @@ +html { + font-family: roboto, sans-serif; + color: white; +} + #entete { display: flex; justify-content: center; } + +#entete, #accueil > div:last-child > div { + margin-left: auto; + margin-right: auto; + background-color: rgba(0,0,0,0.5); + color: white; + padding: 10px; + -webkit-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.5); + -moz-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.5); + box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.5); + margin-bottom: 25px; +} +h1,h2,h3,h4,nav { + font-family: roboto, sans-serif; +} h1 { margin:0; } @@ -13,11 +33,13 @@ h1 { flex-direction: column; margin: auto 0; text-align: center; + padding: 0 10px; } .icone { width: 34%; border: 3px solid black; + border-color: inherit; border-radius: 50%; padding: 20px; } @@ -27,6 +49,15 @@ img, svg { max-height: 100%; } +svg { + fill: white; + stroke-width: 0; +} + +main img { + filter: invert(100%); +} + h2 { text-align: center; } @@ -62,7 +93,7 @@ li a { } ol li a { - padding: 0 10px; + padding: 0 15px; display: flex; height: 100%; width: 100%; @@ -75,19 +106,25 @@ nav { position: sticky; top: 0; background-color: #2f2e2e; + z-index: 1; } -section, nav div { +section > *:not(.background-image), nav div { max-width: 1100px; - margin: auto; - box-sizing: border-box; } section { + align-items: center; padding-top: 60px; - margin-top: -60px; + margin-top: -20px; + min-height: 100vh; + justify-content: center; + display: flex; + flex-direction: column; + position: relative; } nav div { + margin: auto; display: flex; justify-content: space-between; padding: 8px; @@ -101,6 +138,15 @@ nav div { #accueil { padding-top: 75px; + display: flex; + flex-direction: column; +} + +#accueil>div:last-child { + flex: 1 0 auto; + display: flex; + flex-direction: column; + justify-content: center; } #contact > form > div { @@ -109,6 +155,10 @@ nav div { padding: 0 20%; } + form { + width: 100%; + } + #input { display: flex; flex-direction: column; @@ -125,4 +175,31 @@ form button { color: white; border: 0; padding: 4px 10px; +} + +#accueil .background-image { + top: 0; + background-image: url("https://static.wixstatic.com/media/809106_a54ac556210f4ada8dd7ad3af6fb9fe0~mv2_d_2237_2237_s_2.jpg/v1/fill/w_1920,h_1920,al_b,q_85,usm_0.66_1.00_0.01/809106_a54ac556210f4ada8dd7ad3af6fb9fe0~mv2_d_2237_2237_s_2.webp"); +} +#qui .background-image { + background-image: url("https://static.wixstatic.com/media/1e47b2_cd5df08585b64f40a575e620ed3bf997.jpg/v1/fill/w_1903,h_650,al_c,q_85,usm_0.66_1.00_0.01/1e47b2_cd5df08585b64f40a575e620ed3bf997.webp"); +} + +#contact .background-image { + background-image: url("https://static.wixstatic.com/media/809106_a54ac556210f4ada8dd7ad3af6fb9fe0~mv2_d_2237_2237_s_2.jpg/v1/fill/w_1920,h_1920,al_b,q_85,usm_0.66_1.00_0.01/809106_a54ac556210f4ada8dd7ad3af6fb9fe0~mv2_d_2237_2237_s_2.webp"); +} + +.background-image { + position: absolute; + top: 40px; + width: calc(100% + 16px); + object-position: 50% 100%; + background-size: cover; + background-position: center bottom; + background-repeat: no-repeat; + height: 120%; + transform: matrix(1, 0, 0, 1, 0, 0); + margin: 0px; + z-index: -1; + left: -8px; } \ No newline at end of file