diff --git a/entreprise.html b/entreprise.html new file mode 100644 index 0000000..433007f --- /dev/null +++ b/entreprise.html @@ -0,0 +1,71 @@ + + + + + + SAE + + + +
+ +

SwiftRescue

+
+ +

Qui sommes nous ?

+ +
+ +

Présentation de SwiftRescue

+

SwiftRescue est une entreprise de trois passionés d'informatique souhaitant utiliser leurs connaissances + au service des autres, en se spécialisant dans le sauvetage. +

+ +
+
+ + + +

Lukas SIMOES

+

+ +
+
+ + +

Yann MOUCHOU

+

+ +
+
+ + +

Mathias PLACIDE--CONTRERAS

+

+ + +
+
+ + + + \ No newline at end of file diff --git a/formulaire.html b/formulaire.html new file mode 100644 index 0000000..1e858cc --- /dev/null +++ b/formulaire.html @@ -0,0 +1,72 @@ + + + + + + SAE + + + + + + + + +
+
+ +

SwiftRescue

+ +
+
+
+

Nous contacter

+

Certaines de ces informations ne sont pas nécessaires à l'envoi de votre message mais nous permettent d'en apprendre plus sur vous, notre clientèle.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Homme + Femme + Autre +
+
+
+
+
+
+ + +
+
+
+ + + + + + \ No newline at end of file diff --git a/formulaire_envoye.css b/formulaire_envoye.css new file mode 100644 index 0000000..b8f1caf --- /dev/null +++ b/formulaire_envoye.css @@ -0,0 +1,368 @@ +@import url(https://db.onlinewebfonts.com/c/d7e8a95865396cddca89b00080d2cba6?family=SoDo+Sans+SemiBold); +@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,700&family=Montserrat&family=Open+Sans:wght@300&family=Oswald&family=Playfair+Display:wght@500&display=swap'); +body{ + padding: 0; + margin: 0; + background: rgb(255, 255, 255); +} + +header a{ + + color: #FFFF; + text-decoration: none; +} + + + +li{ + list-style: none; +} + +h2{ + padding-top: 1em; + font-size: 3em; + font-family: "Montserrat", serif; + font-optical-sizing: auto; + font-weight: 800; + font-style: normal; + color: rgb(46, 52, 118) +} + +.close{ + display: none; +} + +.title_page{ + text-align: center; + margin: 2rem 0; +} + +.main_header { + position: sticky; +} + +header{ + background: #003B73; + height: 90px; + padding: 1rem 0; + display: flex; + justify-content: start; + align-items: center; + text-align: center; +} + +header ul { + display: flex; + justify-content: space-evenly; +} + +h1 { + font-family: "SoDo Sans SemiBold"; + font-size: 2.5rem; +} + + +#disclaimer { + padding-left: 20%; + padding-right: 20%; + text-align: center; + font-family: "Montserrat", serif; + font-optical-sizing: auto; + font-weight: 500; + font-style: normal; +} + +header .logo { + height: 7rem; + width: 7rem; + object-position: left top; +} + + +ul { + display: flex; + justify-content: space-between; + align-items: center; + font-family: "SoDo Sans SemiBold"; +} + +li { + padding-right:3em; +} + +.content{ + margin: auto; + box-shadow: 0 5px 10px #BFD7ED; + background: rgba(255, 255, 255, 0.651); + width: 50%; + height: 40rem; + border-radius: 1.5rem; +} + +.content h3{ + font-size: 1.5rem; + margin: 1rem; + font-family: "SoDo Sans SemiBold"; + color: #003B73; +} + +.content p{ + margin: 1rem; + font-family: "SoDo Sans SemiBold"; + +} + +article{ + display: grid; + grid-template-columns: 30% 70%; + background: #BFD7ED; + height: 16rem; + margin: 20px; + border-radius: 20px; + text-decoration: none; +} + +.closeBtn { + font-family: "SoDo Sans SemiBold"; +} + + +article img{ + height: 16rem; + width: 100%; + border-radius: 20px; + border-radius: 20px 0px 0px 20px ; +} + + +footer{ + background: rgba(255, 255, 255, 0.651); + margin: 20px; + height: 100px; + +} + +form { + display:grid; + margin-left:20%; + width:60%; + padding-top: 10em; + grid-template-columns: 100%; + row-gap: 3em; +} + +input { + border-radius: 10px; + box-shadow: 7px 7px rgb(190, 193, 225); + width:100%; + height:70%; + font-size: 1em; +} + +div.nom, div.mail, div.naissance, div.sexe, div.message, div.submit { + display:flex; + justify-content: space-between; + gap: 1em; +} + +div.sexe > input { + font-size: 1.5em; + height:50%; + box-shadow: none; +} + +div.sexe { + border: 0px; + height: 1.5em; + font-size: 1.5em; + font-family: "Montserrat", serif; + font-optical-sizing: auto; + font-weight: 500; + font-style: normal; + display:flex; + align-items: center; +} + +div.sexe > label { + font-size: 1.4em; +} + +div.message > input { + height:5em; +} + +div.submit { + width:50%; +} + +div.submit > input { + height:3em; + border-radius: 5px; + border-color: rgb(98, 93, 168); + background-color: #003B73; + color: white; + cursor: pointer; + font-family: "Montserrat", serif; + font-optical-sizing: auto; + font-weight: 500; + font-style: normal; +} + +label { + color: rgb(10, 16, 73); + font-family: "Kanit", serif; + font-weight: 400; + font-style: normal; + font-size:2em; +} + + +textarea { + width:100%; + height:10em; + font-size:1em; + font-family: "Montserrat", serif; + font-optical-sizing: auto; + font-weight: 500; + font-style: normal; +} + + + + + +.radio-content { + display: flex; + font-family: "SoDo Sans SemiBold"; +} + + + +@media (max-width: 768px) { + + + header { + flex-direction: column; + align-items: center; + height: auto; + + } + + header .logo { + height: 8rem; + width: 8rem; + } + + .sidenav{ + height: 100%; + width: 100%; + position: fixed; + z-index: 1; + top: 0; + left: -100%; + background-color: #BFD7ED; + padding-top: 60px; + transition: left 0.5s ease; + } + + .sidenav a { + padding: 8px 8px 8px 32px; + text-decoration: none; + font-size: 25px; + color: #0074B7; + display: block; + transition: 0.3s; + } + + .sidenav a:hover { + color: #003B73; + } + + .sidenav ul { + list-style-type: none; + padding: 0; + margin: 0; + } + + /* Active class */ + .sidenav.active { + left: 0; + } + + /* Close btn */ + .sidenav .close { + position: absolute; + top: 0; + right: 25px; + font-size: 36px; + } + + /* Icône burger */ + .burger-icon span { + display: block; + width: 35px; + height: 5px; + background-color: #003B73; + margin: 6px 0; + } + + + + nav { + height: auto; + justify-content: center; + padding: 10px; + } + + nav ul { + flex-direction: column; + align-items: center; + justify-content: center; + gap: 15px; + padding: 0; + margin: 0; + display: block; + } + + nav ul li { + font-size: 1rem; + } + + .content { + height: auto; + width: 100%; + margin: auto; + padding-bottom: 1rem; + } + + .content a{ + width: 90%; + height: 16rem; + } + + article{ + display: flex; + flex-flow: column nowrap; + height: 30%; + margin: 1rem; + } + + + + .image{ + border-radius: 20px; + height: 90%; + width: 90%; + padding: 0.5rem; + margin: auto; + } + + /* Footer */ + footer { + height: auto; + padding: 10px; + text-align: center; + } +} + + diff --git a/formulaire_envoye.html b/formulaire_envoye.html new file mode 100644 index 0000000..fe83ccb --- /dev/null +++ b/formulaire_envoye.html @@ -0,0 +1,37 @@ + + + + + + SAE + + + + + + + + +
+ +

SwiftRescue

+
+ x + +
+
+
+

Nous contacter

+

Certaines de ces informations ne sont pas nécessaires à l'envoi de votre message mais nous permet d'en apprendre plus sur vous, notre clientèle.

+

Votre message a bien été envoyé !

+
+ + + + \ No newline at end of file diff --git a/header.js b/header.js new file mode 100644 index 0000000..3a2f494 --- /dev/null +++ b/header.js @@ -0,0 +1,33 @@ +const boutons = [ + document.getElementById("accueil"), + document.getElementById("entreprise"), + document.getElementById("produits"), + document.getElementById("contact") +] + + + + +function change_fond(element) { + console.log(element); + element.style.textShadow = "2px 2px 5px black"; + element.style.transition = "transform 0.2s ease" + element.style.transform = "scale(1.1)"; + console.log("Ombre changée !"); +} + +function reset_fond(element) { + element.style.textShadow = ""; + element.style.transform = "" + console.log("Ombre retirée !"); +} + +for(let i = 0; i != 4; i++) { + boutons[i].addEventListener("mouseover", function() { + change_fond(boutons[i]); + }); + + boutons[i].addEventListener("mouseout", function() { + reset_fond(boutons[i]); + }); +} \ No newline at end of file