diff --git a/README.md b/README.md index ecc7750..096e463 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,2 @@ -# tp-web-statique-chien +# Chien diff --git a/annexes/exercice.png b/annexes/exercice.png new file mode 100755 index 0000000..24b0d0c Binary files /dev/null and b/annexes/exercice.png differ diff --git a/annexes/notes.txt b/annexes/notes.txt new file mode 100755 index 0000000..e88e5ef --- /dev/null +++ b/annexes/notes.txt @@ -0,0 +1,2 @@ +Couleurs : #397f80, #7e8039, #444 +Typo : Arial \ No newline at end of file diff --git a/img/1.jpg b/img/1.jpg new file mode 100755 index 0000000..df55f83 Binary files /dev/null and b/img/1.jpg differ diff --git a/img/2.jpg b/img/2.jpg new file mode 100755 index 0000000..4f5a471 Binary files /dev/null and b/img/2.jpg differ diff --git a/img/3.jpg b/img/3.jpg new file mode 100755 index 0000000..f24a3bd Binary files /dev/null and b/img/3.jpg differ diff --git a/img/4.jpg b/img/4.jpg new file mode 100755 index 0000000..85f8eef Binary files /dev/null and b/img/4.jpg differ diff --git a/img/5.jpg b/img/5.jpg new file mode 100755 index 0000000..81276d5 Binary files /dev/null and b/img/5.jpg differ diff --git a/img/logo.avif b/img/logo.avif new file mode 100755 index 0000000..8f3171e Binary files /dev/null and b/img/logo.avif differ diff --git a/index.html b/index.html new file mode 100755 index 0000000..e9bd2c4 --- /dev/null +++ b/index.html @@ -0,0 +1,89 @@ + + + + + + + + Exercice + + + + +
+

Lorem ipsum dolor sit amet.

+
+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, + architecto? Voluptatem perspiciatis suscipit eum ratione modi fugiat + tempora nemo cum, nam dolores obcaecati minima qui sequi! Quas magnam + nihil architecto? +

+
+
+
+

Lorem ipsum dolor sit amet.

+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, + architecto? Voluptatem perspiciatis suscipit eum ratione modi fugiat + tempora nemo cum, nam dolores obcaecati minima qui sequi! Quas magnam + nihil architecto? +

+
+ +
+
+ + + + +
+
+
+ +
+
+
+

Contactez-nous

+ + + + + + + +
+
+ +

222 Boulevard Gustave Flaubert

+
+
+ +

+33 0123456789

+
+
+ +

test@test.fr

+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100755 index 0000000..3b31ae7 --- /dev/null +++ b/style.css @@ -0,0 +1,177 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + color: white; + text-align: center; +} + +.navbar { + display: flex; + justify-content: space-between; + height: 75px; +} + +.logo { + margin: 15px; + margin-left: 100px; +} + +.navbar ul, +.logo { + display: flex; + align-items: center; +} + +.navbar ul { + display: flex; + justify-content: space-around; + list-style-type: none; + margin-right: 100px; +} + +.navbar li a { + color: rgba(0, 0, 0, .6); + text-decoration: none; + text-transform: uppercase; + margin: 10px; +} + +header, +.section-form { + background-color: rgb(56, 127, 128); +} + +.header-section { + padding: 25px; +} + +.header-section h2 { + margin-bottom: 10px; +} + +.btn-shop { + margin-top: 5px; + padding: 5px 15px; + background-color: lightgray; + border: 1px solid white; + border-radius: 5px +} + +.btn-shop i { + margin-right: 5px; +} + +.header-content, +.header-section-content { + display: flex; + align-items: center; + justify-content: center; + width: 900px; + margin: 0 auto; +} + +header h1 { + text-align: center; + padding: 20px; +} + +.header-section, +footer { + background-color: rgb(126, 128, 62); +} + +.img-round { + width: 250px; + border-radius: 50%; + margin: 25px; +} + +main { + display: flex; + justify-content: center; + flex-wrap: wrap; + margin: 25px auto; + max-width: 1500px; +} + +main img { + margin: 10px; +} + +.section-infos { + display: flex; +} + +iframe { + width: 100%; + height: 100%; +} + +.map, +.section-form { + width: 50%; +} + +.section-form { + text-align: left; +} + +.section-form h2 { + margin-bottom: 20px; +} + +.contact-form { + display: flex; + flex-direction: column; + margin: 30px; +} + +.contact-form label { + margin-bottom: 5px; +} + +.contact-form input, +.contact-form textarea { + width: 500px; + padding: 10px; + margin-bottom: 10px; + border: none; + border-radius: 5px; +} + +textarea { + height: 100px; +} + +.contact-infos { + display: flex; + flex-direction: column; +} + +.contact-infos div { + display: flex; + margin-bottom: 5px; +} + +.contact-infos div i { + margin-right: 10px; +} + +.btn-submit { + width: 50px; + padding: 5px; + background-color: rgb(126, 128, 62); + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + margin-bottom: 15px; +} + +footer { + padding: 15px 0; +} \ No newline at end of file