From 6044074f6c72f960527ed1431b00419cc91bef66 Mon Sep 17 00:00:00 2001 From: nbillard Date: Tue, 29 Nov 2022 17:01:13 +0100 Subject: [PATCH] =?UTF-8?q?le=20css=20que=20j'avais=20oubli=C3=A9,=20LOL?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style.css | 186 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 186 insertions(+) create mode 100644 style.css diff --git a/style.css b/style.css new file mode 100644 index 0000000..f4065fd --- /dev/null +++ b/style.css @@ -0,0 +1,186 @@ + +/* * { */ +/* border: 1px solid black; */ +/* } */ + +.highlight { + border: 1px solid red; +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@keyframes bounce { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.2); + } + 100% { + transform: scale(1); + } +} + +.bounce-repeat:hover { + animation-name: bounce; + animation-duration: 0.3s; + animation-iteration-count: infinite; +} + +#Title { + font-family: Arial; + font-size: 80px; + color:red; +} + +#denonciation > h3 { + color: red; +} + +#denonciation { + padding-bottom: 100px; +} + +.to-middle { + display:table; + margin-left:auto; + margin-right:auto; +} + +.fun:hover { + background-color: green; + animation-name: spin; + animation-duration: 2s; +} + +.be-big { + line-height: 100px; +} + +#logo { + width:300px; +} + +#logo:hover { + width:400px; +} + +.side-to-side { + display: inline-block; + padding: 50px; + /* padding-left: 50px; */ + /* padding-right: 50px; */ +} + +.side-to-side-small { + display: inline-block; + padding: 5px; +} + +p { + text-align: center; +} + +strong { + text-transform: uppercase; +} + +.right-sidebar { + float: right; +} + +thead { + font-size: 40px; +} + +footer { + text-align: center; + background-color: lightgray; + left:0px; + width:100vw; + position: fixed; + bottom:0px; +} + +#css-image { + float: right; +} + +#css-image > div { + /* background-color:red; */ +} + +.insideColor { + background-color: red; +} +.half-circle-container { + background-color:white; + height: 70px; + padding:0px; + margin:0px; +} +.half-circle { + + display:inline-block; + border-radius: 50px 50px 0px 0px; + width: 100px; + height: 70px; + margin: 0px; + padding: 0px; +} + +.triangle { + width: 0px; + height:0px; + background-color:transparent; + border-left: 100px solid transparent; + border-right: 100px solid transparent; + border-top: 200px solid red; +} + +#y_rotation { + z-index: 1; + margin-right: auto; + margin-left:auto; + width: 300px; + /* padding-left: 50%; */ + /* transform: translateX(-50%) translateY(-30px); */ + /* width: 300px; */ +} + +.y_slider { + position:absolute; + /* transform: translateX(50%); */ + bottom: 20px; + transform: translateX(50%); +} + +#x_rotation { + z-index: 1; + width: 300px; + /* width: 300px; */ +} + +.x_slider { + position:absolute; + transform: rotate(90deg) translateX(-87%); + right: -80px; + /* margin-top: 50%; */ +} + +.glCanvas { + z-index: 0; +} + +#canvas-container { + position: relative; + width: auto; + height: auto; +}