new file: css/people.css

modified: people.html
Freakybob-Team · Sep 21, 2024 · 7338d53 · 7338d53
1 parent 1bdc5e6
commit 7338d53
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 90 deletions.
diff --git a/css/people.css b/css/people.css
@@ -0,0 +1,88 @@
+body {
+    background-color: #2cfd9b; 
+    font-family: Arial, sans-serif;
+}
+h1 {
+    color: #333;
+    text-align: center;
+}
+.button-container {
+    text-align: center;
+    margin-top: 20px;
+}
+.button-container button {
+    background: none;
+    border: none;
+    color: #555;
+    margin: 0 15px;
+    font-size: 20px;
+    cursor: pointer;
+    padding: 10px 20px;
+    border-radius: 5px;
+    border: 2px solid #555;
+    transition: color 0.3s, background-color 0.3s;
+}
+.button-container button:hover {
+    color: #6f0279;
+    background-color: #f3ef14;
+}
+.contributors {
+    text-align: center;
+    margin-top: 30px;
+}
+.contributors button {
+    background-color: #d6c20b;
+    border: none;
+    color: #6d5a05;
+    font-size: 24px;
+    cursor: pointer;
+    padding: 10px;
+    margin: 0 10px;
+}
+.contributors button:hover {
+    color: #f106f1;
+}
+.description {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 20px;
+    color: #333;
+}
+.image-container {
+    text-align: center;
+    margin-top: 20px;
+}
+.image-container img {
+    width: 200px;
+    height: auto;
+    border-radius: 50%;
+    cursor: pointer;
+}
+audio {
+    display: none;
+}
+#main-image {
+    display: none;
+}
+#pfpcred {width: 150px;}
+    #pfpcred {
+        margin-left: 90px;
+    }
+    #pfpcred {
+    position: fixed;
+    background: none;
+    border: 2px solid #555;
+    color: #555;
+    font-size: 18px;
+    cursor: pointer;
+    padding: 5px px;
+    border-radius: 5px;
+    transition: color 0.3s, background-color 0.3s;
+    margin: 5px;
+    margin-left: 600px;
+}
+#pfpcred:hover {
+    color: #ffffff;
+    background-color: rgb(4, 128, 133);
+}
+#pfpcred {width: 170px;}
diff --git a/people.html b/people.html
@@ -11,96 +11,7 @@
     <meta content="#006b79" data-react-helmet="true" name="theme-color" />
     <link rel="icon" type="image/png" href="images/Freaky_Bob_people.png">
     <title>Others</title>
-    <style>
-        body {
-            background-color: #2cfd9b; 
-            font-family: Arial, sans-serif;
-        }
-        h1 {
-            color: #333;
-            text-align: center;
-        }
-        .button-container {
-            text-align: center;
-            margin-top: 20px;
-        }
-        .button-container button {
-            background: none;
-            border: none;
-            color: #555;
-            margin: 0 15px;
-            font-size: 20px;
-            cursor: pointer;
-            padding: 10px 20px;
-            border-radius: 5px;
-            border: 2px solid #555;
-            transition: color 0.3s, background-color 0.3s;
-        }
-        .button-container button:hover {
-            color: #6f0279;
-            background-color: #f3ef14;
-        }
-        .contributors {
-            text-align: center;
-            margin-top: 30px;
-        }
-        .contributors button {
-            background-color: #d6c20b;
-            border: none;
-            color: #6d5a05;
-            font-size: 24px;
-            cursor: pointer;
-            padding: 10px;
-            margin: 0 10px;
-        }
-        .contributors button:hover {
-            color: #f106f1;
-        }
-        .description {
-            text-align: center;
-            margin-top: 20px;
-            font-size: 20px;
-            color: #333;
-        }
-        .image-container {
-            text-align: center;
-            margin-top: 20px;
-        }
-        .image-container img {
-            width: 200px;
-            height: auto;
-            border-radius: 50%;
-            cursor: pointer;
-        }
-        audio {
-            display: none;
-        }
-        #main-image {
-            display: none;
-        }
-        #pfpcred {width: 150px;}
-            #pfpcred {
-                margin-left: 90px;
-            }
-            #pfpcred {
-            position: fixed;
-            background: none;
-            border: 2px solid #555;
-            color: #555;
-            font-size: 18px;
-            cursor: pointer;
-            padding: 5px px;
-            border-radius: 5px;
-            transition: color 0.3s, background-color 0.3s;
-            margin: 5px;
-            margin-left: 600px;
-        }
-        #pfpcred:hover {
-            color: #ffffff;
-            background-color: rgb(4, 128, 133);
-        }
-        #pfpcred {width: 170px;}
-    </style>
+    <link rel="stylesheet" href="css/people.css">
 </head>
 <body>
     <img id="main-image" src="images/pfps/giancafort.jpeg" alt="Main Image">