diff --git a/Opera Instantané_2021-11-24_191711_www.google.fr.png b/Opera Instantané_2021-11-24_191711_www.google.fr.png new file mode 100644 index 0000000..d70e855 Binary files /dev/null and b/Opera Instantané_2021-11-24_191711_www.google.fr.png differ diff --git a/mousse.jpg b/mousse.jpg new file mode 100644 index 0000000..c8da6fe Binary files /dev/null and b/mousse.jpg differ diff --git a/poliakov-07l-vodka.png b/poliakov-07l-vodka.png new file mode 100644 index 0000000..6dbb4c3 Binary files /dev/null and b/poliakov-07l-vodka.png differ diff --git a/projetx.jpg b/projetx.jpg new file mode 100644 index 0000000..92ed742 Binary files /dev/null and b/projetx.jpg differ diff --git a/stylepage.css b/stylepage.css new file mode 100644 index 0000000..fa472a4 --- /dev/null +++ b/stylepage.css @@ -0,0 +1,282 @@ + +*{ +margin-left: 0px; +margin-right: 0px; +list-style: none; +text-decoration: none; +font-family: Century Gothic; + + +} + +header +{ + width: 100vw; + height: 100px; + border-bottom: solid 0px rgba(16, 16, 16, 0.1); + background-color: black; + +} +header .inner{ + width: 1300px; + height: 100%; + display: block; + margin: 0 auto; +} + +header .logo{ + display: table; + height: 100%; + float: left; +} + +header .logo div{ + height: 100%; + display: table-cell; + vertical-align: middle; +} + +header .logo img{ + height: 75px; + margin-top: 0px; +} +header nav{ + float: right; + height: 100%; + vertical-align: middle; +} + +header nav li{ + display: table; + height: 100%; + float: left; + margin-right: 30px; +} + +header nav li:last-of-type{ + margin-right: 0; +} + +header nav span { + display: table-cell; + vertical-align: middle; +} + +header nav a{ + color: white; +} +header nav .button{ + background-color: #460080; + color: #FFF; + padding: 10px 20px; + border-radius: 4px; + font-family: Century Gothic; +} +header nav .button:hover{ + filter: brightness(1.05); +} + + + +footer{ + bottom: 0; + left: 0; + right: 0; + background: #111; + height: auto; + width: 100vw; + padding-top: 40px; + color: #fff; +} +.footer-content{ + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + text-align: center; + height: 10%; +} +.footer-content h3 { + font-size: 1.8rem; + font-weight: 400; + text-transform: capitalize; + line-height: 3rem; +} +.footer-content p{ + max-width: 500px; + margin: 10px auto; + line-height: 28px; + font-size: 14px; +} +.footer-bottom{ + background: #000; + width: 100vw; + padding: 20px 0; + text-align: center; +} +.footer-bottom p{ + font-size: 14px; + word-spacing: 2px; + text-transform: capitalize; +} +.footer-bottom span{ + text-transform: uppercase; + opacity: .4; + font-weight: 200; +} +body { + background: #574d62; + text-align: center; + margin: 0; + } + +#textPresentation { + width: 900px; + + background-color: purple; +} + + +.imagethemes { + display: grid; + width: 2300px; + grid-template-columns: 120px 120px 120px; + align-items: start; + justify-content: space-around; +} +.imagethemes :first-child { + align-self: center; +} + +.contact{ + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + text-align: center; + background-color: black; +} +.contact h3{ + font-size: 1.8rem; + font-weight: 400; + text-transform: capitalize; + line-height: 3rem; +} +.contact p{ + max-width: 500px; + margin: 10px auto; + line-height: 28px; + font-size: 14px; +} +.socials{ + list-style: none; + display: flex; + align-items: center; + justify-content: space-around; + margin: 1rem 0 1rem 0; +} +.socials li{ + margin: 0 55px; +} +.socials a{ + text-decoration: none; + color: #fff; +} +.socials a i{ + font-size: 10.10rem; + transition: color .4s ease; + +} +.socials a:hover i{ + color: #460080; +} + +section#contact { + background-color: black; + padding: 50px 0; +} + +section#contact .container { + max-width: 1100px; + margin: 0px auto; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + background-color: white; + padding: 30px 10px; + border-radius: 15px; + box-sizing: border-box; + box-shadow: 0px 10px 50px -10px #d6d6d; +} + +section#contact .container.title +{ + text-align: center; + color: #2a2a2a; + margin-bottom: 50px; +} + +section#contact .container.title h6 { + font-size: 1em; +} + +section#contact .container .title h3 { + font-size: 2.2em; +} + +section#contact .container from { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + max-width: 600px; +} + + input { + width: 47%; + margin-bottom: 20px; +} + + + textarea { + width: 100%; + margin-bottom: 20px; +} + +.bar { + display: flex; + align-items: center; + justify-content: space-around; +} +.bar li { + width: 500px +} + +.video-bar { + width: 300px; + height: 1100px; + +} + +.menu { + text-align: LEFT; + width: 500px; + height: 950px; + +} + +.presentation { + display: grid; + width: 2000px; + grid-template-columns: 900px 250px ; + + justify-content: space-around; +} + + +.presentation :first-child { + align-self: center; +} +.présentation-text h1{ + margin: 50px; + font-size: 1.9em \ No newline at end of file