About.html

tayrp · Sep 17, 2024 · 205f01e · 205f01e
1 parent 81cee7b
commit 205f01e
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 15 deletions.
diff --git a/about.html b/about.html
@@ -11,6 +11,8 @@
         <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
         <link rel="stylesheet" href="assets/css/animate.css">
         <link rel="stylesheet" href="assets/css/style.css">
+		<link rel="stylesheet" href="assets\css\about\style.css">
+
 
         <!-- Favicon -->
         <link rel="shortcut icon" href="assets//assets\imgs\favicon.png">
@@ -46,9 +48,9 @@
 							<h1>Tee</h1>
 							<p>Heya! I'm Tee, A small Modrinth creator.</p>
 							<div id="aboutimages">
-								<a href="https://discord.com/users/1050531216589332581" target="_blank"><img src="assets/imgs/discord.png" class="aboutsocial-logo" alt="Discord"></a>
-								<a href="https://github.com/tayrp" target="_blank"><img src="assets/imgs/github.png" class="aboutsocial-logo" alt="Github"></a>
-								<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank"><img src="assets/imgs/youtube.png" class="aboutsocial-logo" alt="YouTube"></a>
+								<a href="https://discord.com/users/1050531216589332581" target="_blank"><img src="assets/imgs/discord.png" class="social-logo" alt="Discord"></a>
+								<a href="https://github.com/tayrp" target="_blank"><img src="assets/imgs/github.png" class="social-logo" alt="Github"></a>
+								<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank"><img src="assets/imgs/youtube.png" class="social-logo" alt="YouTube"></a>
 							</div>
 						</div>
 

diff --git a/assets/css/about/style.css b/assets/css/about/style.css
@@ -0,0 +1,44 @@
+body {
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: black;
+    z-index: 1;
+}
+
+.content {
+    text-align: center;
+    color: white;
+    z-index: 1;
+    font-size: 30px;
+}
+
+#images {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.social-logo {
+    padding-left: 15px;
+    padding-right: 1px;
+    transition: transform 0.2s;
+    width: 65px;
+    height: 47px;
+}
+
+video {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    min-width: 100%;
+    min-height: 100%;
+    width: auto;
+    height: auto;
+    transform: translateX(-50%) translateY(-50%);
+    z-index: -1;
+    filter: blur(7px);
+    opacity: 65%;
+}
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -101,16 +101,6 @@ ul.navbar-nav {
 	font-size: 22px;
 }
 
-/* About */
-.about {
-	text-align: center;
-	margin: auto;
-	width: 1000px; 
-	padding: 260px;
-	color: #b1cbcc;
-	font-size: 22px;
-}
-
 /* Footer */
 footer { padding: 40px 0 45px 0; background: none; }
 
@@ -128,7 +118,6 @@ center {
     margin: 0 auto;
 }
 
-
 /* Project List */	
 div.pl {
 	text-align: center;
@@ -144,6 +133,17 @@ div.pl {
   }
 
 /* About Page */
+
+/* About */
+.about {
+	text-align: center;
+	margin: auto;
+	width: 1000px; 
+	padding: 260px;
+	color: #b1cbcc;
+	font-size: 22px;
+}
+
 .aboutcontent {
     text-align: center;
     color: white;
@@ -157,7 +157,7 @@ div.pl {
     align-items: center;
 }
 
-.aboutsocial-logo {
+.about-social-logo {
     padding-left: 15px;
     padding-right: 1px;
     transition: transform 0.2s;