A
ATARI
New member
- Beiträge
- 1
- Punkte Reaktionen
- 0
Hallo Leute,
Ich bin am verzweifeln.
Um was es geht: ich möchte die senkrechte pinke Linie mit dem Text drin nicht mittig platziert haben, sondern am rechten Bildschirmrand (aber auch nicht ganz rechts, sondern in etwa da wo im Bild der Mauszeiger grad ist), und schaffs einfach nicht, dass ich sie um-platziere weg von der Mitte.
Im Anhang ein Bild davon, damit man es sich besser vorstellen kann.
Hier der Code wie ich es bisher versucht habe (es geht um die CSS Klasse info3, ganz unten):
eingefügt habe ich es mit:
Ich krieg es einfach ums Verrecken nicht hin, kann mir bitte jemand helfen?
Ich danke euch von Herzen!
Ich bin am verzweifeln.
Um was es geht: ich möchte die senkrechte pinke Linie mit dem Text drin nicht mittig platziert haben, sondern am rechten Bildschirmrand (aber auch nicht ganz rechts, sondern in etwa da wo im Bild der Mauszeiger grad ist), und schaffs einfach nicht, dass ich sie um-platziere weg von der Mitte.
Im Anhang ein Bild davon, damit man es sich besser vorstellen kann.
Hier der Code wie ich es bisher versucht habe (es geht um die CSS Klasse info3, ganz unten):
Code:
<style>
@font-face {
font-family: 'Audiowide Regular';
font-style: normal;
font-weight: normal;
src: local('Audiowide Regular'), url('Audiowide-Regular.woff') format('woff');
}
body{background: (linear-gradient to bottom right, #063FAB, #01258A);color:#DEDEDE;font-size:19px;text-align:center;margin:0;overflow:hidden;
padding-top: 5em;
display: block;
justify-content: center;
background-image: url(/luna.jpg);
background-repeat: no-repeat;
background-position: center center;
font-family: 'Audiowide Regular';}
.info1 h1 {
color: #FFFFFF;
display: block;
justify-content: center;
font-family: 'Audiowide Regular';
font-style: italic;
position:relative;top:0%;
overflow: hidden; /* Ensures the content is not revealed until the animation */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
animation: blink 2.4s infinite;
animation-fill-mode: both;
}
@keyframes blink {
0% { opacity: 0 }
50% { opacity: 1 }
100% { opacity: 0 }
}
.info2 h2 {
display:block;
font-family: 'Audiowide Regular';
font-size: 24px;
font-color: #DEDEDE;
position:relative;top:66%;
background-color: #FF1493;
opacity: 0.6;
}
.info3 {
display: flex;
font-family: 'Audiowide Regular';
font-size: 24px;
font-color: #DEDEDE;
position: relative;;
justify-content: center;
place-items: center;
background-color: #FF1493;
opacity: 0.6;
border-right: 6px solid #FF1493;
transform:rotate(90deg);
text-align: center;
}
html, body {background-color: #DEDEDE;}
</style>eingefügt habe ich es mit:
Code:
<div class="info3">ULTIMATE SCRIPT</div>Ich krieg es einfach ums Verrecken nicht hin, kann mir bitte jemand helfen?
Ich danke euch von Herzen!
Anhänge
