Kaynağa Gözat

added contact field

BaumSplitter41 1 hafta önce
ebeveyn
işleme
6a4a6dd154
2 değiştirilmiş dosya ile 34 ekleme ve 13 silme
  1. 22 7
      css/style.css
  2. 12 6
      index.html

+ 22 - 7
css/style.css

@@ -4,7 +4,14 @@ html {
 
 body {
   	background-color: #121212;
+	font-family: 'Times New Roman', Times, serif;
 }
+
+h1 {
+  	color: white;
+  	text-align: center;
+}
+
 .maintaince {
 	color: white;
 	font-size: 30px;
@@ -15,14 +22,14 @@ body {
 .main_container {
 	position: relative; 
   	width: 99%;
-  	min-height: 100vh;
+  	min-height: 70%;
 	margin: 20px;
 }
 
 .main_text {
 	position: absolute;
-  	top: 5%; 
-  	left: 28%;
+  	top: 50px;
+  	left: 20%;
   	transform: translate(-50%, -50%);
 	text-align: left;
 	border: 0.5px solid white;
@@ -34,7 +41,7 @@ body {
 
 .main_img {
 	position: absolute;
-  	top: 0%; 
+  	top: 50px; 
   	left: 68%;
 	width: 25%;
   	height: auto;
@@ -42,7 +49,15 @@ body {
 	object-fit: cover;
 }
 
-h1 {
-  	color: white;
-  	text-align: center;
+.contacts {
+	position: absolute;
+  	top: 250px; 
+  	left: 17.5%;
+  	transform: translate(-50%, -50%);
+	text-align: left;
+	border: 0.5px solid white;
+	border-radius: 0px;
+	padding: 15px;
+	margin: 20px;
+	color: white;
 }

+ 12 - 6
index.html

@@ -19,18 +19,24 @@
 	</div>
 	<div class="main_container">
 		<div class="main_text">
-		<p>I'm BaumSplitter41, I'm am an IT student from germany.</p>
-		<p> </p>
+			<p>I'm BaumSplitter41, I'm am an IT student from germany.</p>
+			<p>This Website is  </p>
+		</div>
+
+		<div class="contacts">
+			<h2>Contact</h2>
+			<p> You can contact me via the following channels:</p>
+			<p>Email: baumsplitter41@baumsplitter41.eu</p>
+			<p>Matrix: @baumsplitter41:baumsplitter41.eu</p>
+			<p>Discord: baumsplitter41</p>
+
 		</div>
 
 
 		<img src="/assets/Logo_BaumSplitter41.png" alt="Logo BaumSplitter41", class = "main_img">
 	</div>
 
-	<div class="contacts">
-		<h2>Contact</h2>
-		<p> You can contact me via <a href="mailto:">email</a></p>
-	</div>
+