diff --git a/style.css b/style.css index 95aafaf..9823ef0 100644 --- a/style.css +++ b/style.css @@ -1,404 +1,404 @@ -@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: 7rem; - 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; -} - -.cache { - display:none; -} - -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: 70rem; - 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; - font-size: 1.4em; - text-decoration: none; -} - -#twt_swift { - background-color: red; - width:100%; -} - -.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; -} - -li { - text-decoration: none; -} - -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"; -} - -.main_header { - position: sticky; - top: 0; -} - - -@media screen and (max-width: 768px) { - - - header { - flex-direction: column; - align-items: center; - height: auto; - - } - - header li { - display:none; - } - - #closeBtn { - font-family: "Kanit", serif; - font-weight: 400; - font-style: normal; - font-size:2em; - } - - - - header .logo { - height: 8rem; - width: 8rem; - } - - #openBtn { - width:100%; - margin-left:2em; - } - - .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: #537ca2; - 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; - } -} - - +@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{ + user-zoom:50%; + 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: 7rem; + 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; +} + +.cache { + display:none; +} + +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: 70rem; + 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; + font-size: 1.4em; + text-decoration: none; +} + +#twt_swift { + background-color: red; + width:100%; +} + +.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; +} + +li { + text-decoration: none; +} + +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"; +} + +.main_header { + position: sticky; + top: 0; +} + + +@media screen and (max-width: 768px) { + + + header { + flex-direction: column; + align-items: center; + height: auto; + + } + + header li { + display:none; + } + + #closeBtn { + font-family: "Kanit", serif; + font-weight: 400; + font-style: normal; + font-size:2em; + } + + + + header .logo { + height: 8rem; + width: 8rem; + } + + #openBtn { + width:100%; + margin-left:2em; + } + + .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: #537ca2; + 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; + } +} + +