[Ravenclaw] Flügel aus Beton - Druckversion +- BOUNDARIES & BROOMSTICKS (https://broomventures.de) +-- Forum: Auftakt (https://broomventures.de/forumdisplay.php?fid=1) +--- Forum: Gesuche (https://broomventures.de/forumdisplay.php?fid=8) +---- Forum: Hogwarts (https://broomventures.de/forumdisplay.php?fid=10) +---- Thema: [Ravenclaw] Flügel aus Beton (/showthread.php?tid=483) |
Flügel aus Beton - Eric Whitehorn - 14.05.2021 Vertrauensschüler
<style type="text/css">/* */:root { --creme: #F2F1EC; --hblau: #2F455D; --dblau: #0E1E31; --dgrau: #717A7D; --hgrau: #BBBBB3; } /* AUSSENBOX */.OF4_boxaussen { position: relative; box-sizing: border-box; width: 500px; height: 600px; margin: auto; margin-top: 50px; background: var(--creme); border-top: 5px solid var(--hgrau); border-bottom: 25px solid var(--hgrau); } /* */.OF4_headline { position: absolute; top: -45px; width: 500px; height: 83px; font-family: 'Berkshire Swash', cursive; font-size: 48px; line-height: 60px; text-align: center; color: var(--hblau); } /* */.OF4_underline1 { position: absolute; width: 318px; height: 5px; left: 91px; top: 22px; background: var(--hblau); } /* */.OF4_underline2 { position: absolute; width: 201px; height: 5px; left: 150px; top: 30px; background: var(--dgrau); } /* */.OF4_underline3 { position: absolute; width: 108px; height: 5px; left: 196px; top: 38px; background: var(--hgrau); } /* */.OF4_bottomline1 { position: absolute; width: 305px; height: 5px; right: 49px; top: 540px; background: var(--dgrau); } /* */.OF4_bottomline2 { position: absolute; width: 162px; height: 5px; right: 49px; top: 548px; background: var(--hgrau); } /* TAB CONTENT */.OF4_tabs input[type=radio] { position: absolute; display: none; /* blendet die Radio-Punkte aus, die wir nicht brauchen */ } /* */.OF4_tabs { width: 500px; /*könnt ihr anpassen */ float: none; list-style: none; position: relative; padding: 0; margin:auto; margin-top: 70px; height: 400px; /* Höhe muss definiert werden, damit Inhalt nicht überlappt */ } /* */.OF4_tabs li{ float: left; /* entweder rechts oder links */ } /* */.OF4_tabs label { /* Defintion der anklickbaren Felder */ box-sizing: border-box; width: 70px; height: 70px; border-radius: 50%; margin-left: 44px; margin-top: -20px; padding-top: 17px; color: var(--creme); font-family: 'Abel', sans-serif; font-size: 35px; text-align: center; display: block; background: var(--hblau); position: relative; top: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } /* */.OF4_tabs label:hover { background: var(--dblau); top: 0; } /* */[type=radio]:checked ~ label { /* Defintion des ausgewählten Feldes */ background: var(--dgrau); color: var(--creme); top: 0; } /* */[type=radio]:checked ~ label ~ .OF4_tab-content { display: block; } /* */.OF4_tab-content{ /* Hier wird des ganz normale Inhalt des Tabs definiert wie Schrift, Farbe, Zeilenhöhe etc */ z-index: 2; display: none; width: 400px; height: 350px; overflow: visible; /*Höhe (muss ca 50px kleiner sein als bei .tabs vorgegeben und Overflow sollten definiert werden, da ansonsten überschüssiger Text verschluckt wird */ background: var(--hblau); position: absolute; top: 100px; left: 50px; box-sizing: border-box; -webkit-animation-duration: 0.5s; -o-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; }/* */.OF4_tab-content::-webkit-scrollbar{ width:4px; background: var(--hblau); } /* */.OF4_tab-content::-webkit-scrollbar-thumb { background: var(--dblau);} /* TABINHALT */.OF4_boxinhalt { position: relative; width: 400px; height: 350px; overflow: visible; } /* */.OF4_stichwort { position: absolute; left: 0px; top: -38px; font-family: 'Arial', cursive; font-size: 28px; line-height: 210.4%; text-align: center; color: var(--hblau); } /* */.OF4_textbox1, .OF4_textbox2 { position: absolute; box-sizing: border-box; width: 349px; height: 250px; padding: 15px; background: var(--creme); font-family: 'Arial', sans-serif; font-size: 11px; line-height: 23px; text-align: justify; color: var(--dblau); overflow: auto; scrollbar-color: var(--dblau) var(--dgrau); scrollbar-width: thin; scrollbar-padding: -2px; } /* */.OF4_textbox1 { left: 25px; top: 75px; } /* */.OF4_textbox2 { left: 25px; bottom: 75px; } /* */.OF4_textbox1 b, .OF4_textbox2 b { padding: 2px; background: var(--hblau); color: var(--creme); letter-spacing: 2px; } /* */.OF4_textbox1 i, .OF4_textbox2 i { padding-left: 2px; border-left: 2px solid var(--hgrau); border-bottom: 2px solid var(--hgrau); color: var(--hblau); letter-spacing: 2px; text-transform: uppercase; } /* */.OF4_textbox1 u, .OF4_textbox2 u { letter-spacing: 2px; border-bottom: 2px dashed var(--hblau); text-decoration: none; } /* */.OF4_textbox1::first-line, .OF4_textbox2::first-line { letter-spacing: 2px; font-size: 12px; color: var(--hgrau); } /* */.OF4_textbox1::first-letter, .OF4_textbox2::first-letter { margin-right: 3px; padding: 2px 5px; background: var(--hblau); color: var(--creme); font-family: 'Arial', cursive; font-size: 28px;}/* */.OF4_textbox1::-webkit-scrollbar, .OF4_textbox2::-webkit-scrollbar{ width:4px; background: var(--dgrau); } /* */.OF4_textbox1::-webkit-scrollbar-thumb, .OF4_textbox2::-webkit-scrollbar-thumb { background: var(--dblau);; } /* TAB 1 */.OF4_quote1 { position: absolute; left: 10px; top: -20px; font-family: Berkshire Swash; font-size: 144px; line-height: 179px; text-align: center; color: var(--dblau); } /* */.OF4_quotetext1 { position: absolute; left: 62px; top: 37px; font-family: Raleway; font-size: 9px; line-height: 12px; color: var(--hgrau); } /* TAB 2 */.OF4_fakt11 { left: 25px; bottom: 15px; } /* */.OF4_fakt12 { left: 145px; bottom: 15px; } /* */.OF4_fakt13 { left: 265px; bottom: 15px; } /* */.OF4_fakt14 { left: 25px; bottom: 36px; } /* */.OF4_fakt15 { left: 205px; bottom: 36px; } /* TAB 3 */.OF4_fakt11, .OF4_fakt12, .OF4_fakt13, .OF4_fakt14, .OF4_fakt15, .OF4_fakt21, .OF4_fakt22, .OF4_fakt23, .OF4_fakt24, .OF4_fakt25 { box-sizing: border-box; position: absolute; padding-top: 2px; background: var(--dblau); font-family: 'Raleway', sans-serif; font-weight: bold; font-size: 11px; line-height: 13px; text-align: center; color: var(--creme); } /* */.OF4_fakt11, .OF4_fakt12, .OF4_fakt13, .OF4_fakt21, .OF4_fakt22, .OF4_fakt23 { width: 110px; height: 17px; } /* */.OF4_fakt14, .OF4_fakt15, .OF4_fakt24, .OF4_fakt25 { width: 170px; height: 17px; } /* */.OF4_fakt21 { left: 25px; top: 15px; } /* */.OF4_fakt22 { left: 145px; top: 15px; } /* */.OF4_fakt23 { left: 265px; top: 15px; } /* */.OF4_fakt24 { left: 25px; top: 36px; } /* */.OF4_fakt25 { left: 205px; top: 36px; } /* */.OF4_bild1 { float: right; width: 100px; height: 100px; margin-left: 15px; border-radius: 50%; } /* TAB 4 */.OF4_quote2 { position: absolute; right: 10px; bottom: -80px; font-family: Berkshire Swash; font-size: 144px; line-height: 179px; text-align: center; color: var(--dblau); } /* */.OF4_quotetext2 { position: absolute; right: 62px; bottom: 30px; font-family: Raleway; font-size: 9px; line-height: 12px; color: var(--hgrau); } /* */.OF4_credit { font-family: sans-serif; font-size: 10px; text-align: center ; } </style> |