ajout contact.html
This commit is contained in:
parent
6cec47c38c
commit
e1073ab21f
GPG Key ID:
194A92D1103ACB2A
|
|
@ -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>
|
||||
|
|
@ -2,10 +2,11 @@
|
|||
<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">
|
||||
<style></style>
|
||||
</head>
|
||||
<body>
|
||||
<ul id="navbar">
|
||||
|
|
@ -14,7 +15,7 @@
|
|||
<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</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
</ul>
|
||||
<div id="title">
|
||||
<h1>Anna Uetwiller</h1>
|
||||
|
|
|
|||
|
|
@ -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
45
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
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue