Upload New File

style.css

+@import url('https://fonts.googleapis.com/css2?family=Electrolize&display=swap');
+*{
+	font-family: 'Electrolize', sans-serif; /*Ausgewaehlte Font*/
+	font-size: 110%;
+	user-select: none;
+	scroll-behavior: smooth; /*Damit die Schnellauswahl oben auf der ersten Seite nicht sofort runter springt*/
+}
+body{
+	margin:0;
+	text-align: center;
+}
+
+.header{ /*Alle Elemente werden mit Flex-Box positioniert*/
+	display:flex;
+	justify-content:space-around;
+	width:100vw;
+	background-color:#282828;
+}
+.header a{
+	margin: 0.1rem;
+	color: white;
+	text-decoration: none;
+}
+.header a:hover{ /*Uns eine wichtige Kleinigkeit, dass der Cursor sich aendert damit man weiss, dass man diesen Text anklickbar ist*/
+	cursor: pointer;
+}
+
+.zentriert h1{
+	margin:1rem;
+	margin-top:3rem;
+	font-size: 250%;
+}
+
+.zentriert {
+	display: flex;
+	width: 100vw;
+	flex-direction: column;
+	align-items: center;
+}
+.zentriert p{
+	margin: 0;
+	margin-bottom: 4rem;
+}
+
+.Bild1{
+    width: 45rem;
+	border-radius: 0.5rem;
+	filter: blur(2px);
+	transition: 0.2s ease-out;
+}
+
+.Bild1:hover{
+	/*Bild wird erst "sichtbar", wenn man mit dem Cursor darueber faehrt*/
+	transform: scale(1.05) rotate(2deg);
+	filter: blur(0px);
+}
+
+.Bild2{
+    width: 20rem;
+	border-radius: 0.5rem;
+}
+
+.container {
+    display: flex;
+	width: 100vw;
+	align-items: center;
+	justify-content:space-evenly;	
+}
+.container p{
+	margin:0;
+	font-size: 75%;
+	max-width: 20rem;
+}
+
+.container div{
+	margin:3rem;
+}
+
+.container2{
+	display: flex;
+	width: 100vw;
+	align-items: center;
+	justify-content:space-evenly;		
+}
+
+.container2 p{
+	max-width: 45rem;
+}
+
+#video1{
+	background-color:black;
+	border-radius: 0.5rem;
+}
+
+.video2{	
+    border-radius: 4rem;
+    overflow: hidden; 
+	transition: 0.2s ease-out; 
+	/*
+	transition wird verwendet, damit bei :hover der neue Zustand nicht sofort, 
+	sondern mit einer kleinen Annimation wechselt.
+	*/
+}
+.video2:hover{
+	border-radius: 2rem;
+	transform: scale(1.05);
+}
+.video2 video{
+	width: 20rem;
+}
+
+#scroll_main{
+	height: 100vh;
+	overflow-y: auto;
+	scroll-snap-type: y; /*mandatory*/ 
+}
+
+#scroll_main section{
+	overflow: hidden;
+	/*Elemente sollen nicht in andere Sektionen ueberlappen*/
+}
+
+.scroll_snap_item{
+	display:flex;
+	height: 100vh;
+	scroll-snap-align: start;
+	/*Sagt dass das scroll-snapping hier stehen bleiben soll*/
+}
+
+.container3{
+	display: flex;
+	width: 100vw;
+	align-items: center;
+	justify-content:center;	
+}
+
+.container3 img{
+	width: 40rem;
+	border-radius: 3.5rem;
+	transition: 0.2s ease-in-out;
+}
+.container3 img:hover{
+	box-shadow:0px 0px 2rem gray;
+	transform: scale(1.03) rotate(-3deg);
+	/*aehnlich wie auf der ersten Seite.*/
+}
+
+#title2{
+	font-weight: bold;
+}
+.container3 p{
+	text-align: right;
+	margin: 0;
+}
+
+.container3 h1{
+	font-size: 250%;
+	text-align: right;
+}
+
+.container3 div{
+	margin: 2rem;
+}
+
+/*
+Farbe von Hintergruenden und den Texten auf jewheils jeder Seite.
+(Es macht keinen Sinn schwarzen Text auf einem schwarzem Hintergrund darzustellen.)
+*/
+#page1{
+	background-color:black;
+	color:white;
+}
+
+#page2{
+	background-color:white;
+	color:black;
+}
+
+#page3{
+	background-color:black;
+	color:white;
+}
+
+#page4{
+	background-color:white;
+	color:black;
+}
+
+#back_to_top{
+	position: fixed;
+	right:2rem;
+	bottom:2rem;
+	transition: 0.1s ease-out;
+}
+#back_to_top:hover{
+	transform: scale(1.04);
+}
+#back_to_top:active{
+	transform: scale(0.94);
+}
\ No newline at end of file