nyanloutre/anna-uetwiller-architecture
1
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

ajout contact.html

Browse Source
This commit is contained in:
nyanloutre 2020-05-12 18:12:47 +02:00
parent 6cec47c38c
commit e1073ab21f
Signed by: nyanloutre
GPG Key ID: 194A92D1103ACB2A
4 changed files with 118 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
contact.html Normal file
View File

@ -0,0 +1,32 @@
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anna Uetwiller - Architecte</title>
<meta content="">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul id="navbar">
<li><img id="logo" src="logo.svg"></li>
<li><a href="index.html">Accueil</a></li>
<li><a href="#">Réalisation de plans 2D</a></li>
<li><a href="#">Modélisation 3D</a></li>
<li><a href="#">CV</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div id="title">
<h1>Anna Uetwiller</h1>
<h2>Architecte - Dessinatrice</h2>
</div>
<div id="content">
<div id="contact">
<p>Adresse: 16, rue du Ziegelfeld, 67100 STRASBOURG</p>
<p>Téléphone: <a href="tel:0678825821">0678825821</a></p>
<p>email: <a href="mailto:anna.tsoi.fr@gmail.com">anna.tsoi.fr@gmail.com</a></p>
</div>
</div>
</body>
</html>

5
index.html
View File

@ -2,10 +2,11 @@
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anna Uetwiller - Architecte</title> <title>Anna Uetwiller - Architecte</title>
<meta content=""> <meta content="">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<style></style>
</head> </head>
<body> <body>
<ul id="navbar"> <ul id="navbar">
@ -14,7 +15,7 @@
<li><a href="#">Réalisation de plans 2D</a></li> <li><a href="#">Réalisation de plans 2D</a></li>
<li><a href="#">Modélisation 3D</a></li> <li><a href="#">Modélisation 3D</a></li>
<li><a href="#">CV</a></li> <li><a href="#">CV</a></li>
<li><a href="#">Contact</a></li> <li><a href="contact.html">Contact</a></li>
</ul> </ul>
<div id="title"> <div id="title">
<h1>Anna Uetwiller</h1> <h1>Anna Uetwiller</h1>

48
reset.css Normal file
View File

@ -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;
}

45
style.css
View File

@ -4,7 +4,7 @@ body {
display: grid; display: grid;
} }
@media (min-width: 900px) { @media (min-width: 1025px) {
body { body {
grid-template-columns: 250px; grid-template-columns: 250px;
grid-template-areas: grid-template-areas:
@ -14,20 +14,34 @@ body {
#navbar { #navbar {
height: 100vh; height: 100vh;
position: fixed; position: fixed;
padding: 1rem;
margin-right: 1rem;
} }
} }
@media (max-width: 900px) { @media (max-width: 1024px) {
body { body {
grid-template-areas: grid-template-areas:
'title' 'title'
'menu' 'menu'
'content'; 'content';
} }
#navbar {
width: 100%;
margin-bottom: 1rem;
}
} }
#title { #title {
grid-area: title; grid-area: title;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 1rem;
}
#title h1,h2 {
margin: 0;
} }
#navbar { #navbar {
@ -36,10 +50,6 @@ body {
align-items: center; align-items: center;
background-color: #eadecc; background-color: #eadecc;
list-style: none; list-style: none;
margin: 0;
margin-right: 1rem;
padding-top: 1rem;
padding-right: 1rem;
grid-area: menu; grid-area: menu;
} }
@ -66,12 +76,16 @@ h1, h2, h3 {
color: #8c877d; color: #8c877d;
} }
#content h1 { #title {
margin-bottom: 0; margin-bottom: 2rem;
} }
#content h2 { #title h1 {
margin-top: 0; font-size: xx-large;
}
#title h2 {
font-size: x-large;
} }
.galery { .galery {
@ -83,3 +97,14 @@ h1, h2, h3 {
.galery a img { .galery a img {
margin: 0.5rem; margin: 0.5rem;
} }
#contact {
background-color: #f6f1ea;
width: 100%
}
#contact p {
margin: 1rem;
font-size: large;
color: #8c877d
}