Profile page start

Flyzie · Jan 9, 2024 · c370d66 · c370d66
1 parent feac1f4
commit c370d66
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 5 deletions.
diff --git a/artwork.html b/artwork.html
@@ -22,7 +22,7 @@ <h1>Portfolio Creator</h1>
 
         <div class="main_head">
             <ul class="links">
-                <li><a href="">Instrtuction</a></li>
+                <li><a href="">profile</a></li>
                 <li><a href="http://127.0.0.1:3000/index.html">home</a></li>
                 <li><a href="http://127.0.0.1:3000/artwork.html">portfolio</a></li>
             </ul>

diff --git a/index.html b/index.html
@@ -20,9 +20,9 @@ <h1>Portfolio Creator</h1>
 
         <div class="main_head">
             <ul class="links">
-                <li><a href="">Instrtuction</a></li>
-                <li><a href="">saved</a></li>
-                <li><a href="">templates</a></li>
+                <li><a href="">profile</a></li>
+                <li><a href="">home</a></li>
+                <li><a href="">portfolio</a></li>
             </ul>
             <button id="btn" class="artButton headBtn">Add Art</button>
         </div>

diff --git a/profile.html b/profile.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet">
+
+    <script src="main.js" defer></script>
+    <title>Document</title>
+</head>
+<body>
+
+    <header>
+        <img src="logo_site.png" class="logo">
+        <h1>Portfolio Creator</h1>
+
+        <div class="main_head">
+            <ul class="links">
+                <li><a href="">profile</a></li>
+                <li><a href="http://127.0.0.1:3000/index.html">home</a></li>
+                <li><a href="http://127.0.0.1:3000/artwork.html">portfolio</a></li>
+            </ul>
+            <button id="btn" class="artButton headBtn">Add Art</button>
+        </div>
+    </header>
+
+    <div class="main_c profile_c">
+            <div class = "creator_display profile_m">
+                <img class="profile_pic profile_p" alt="profile picture" src="m.png">
+                <div class="profile_info profile_i">
+                    <h1>placeholder name</h1>
+                    <p>quote/profile desc</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -300,6 +300,7 @@ p{
     margin-top: 3.5rem;
     height: 90vh;
     border-radius: 20px;
+
     background-color: rgb(20, 13, 17);
     overflow: hidden;
     aspect-ratio: 5/2;
@@ -341,11 +342,12 @@ p{
 .creator_display{
     display: flex;
     flex-wrap: wrap;
+    align-content: flex-start;
 }
 
 .profile_pic{
     border-radius: 1000px;
-    width: 8rem;
+    width: 30%;
     aspect-ratio: 1/1;
 
     object-fit:cover;
@@ -354,6 +356,7 @@ p{
 
 .profile_info{
     margin-left: 1rem;
+    width: 65%;
 }
 
 .profile_info > h1{
@@ -367,4 +370,39 @@ p{
     font-weight: 500;
     opacity: 0.7;
     margin: 0;
+}
+/*-------PROFILE SUBPAGE------*/
+
+.profile_c{
+    background-color: var(--pink_main);
+    height: 85vh;
+    width: 96%;
+    margin-top: 3.5rem;
+    border-radius: 30px;
+    padding: 2%;
+}
+
+.profile_m{
+    width: 100%;
+}
+
+.profile_p{
+    border-color: var(--yellow_main);
+    border-style: solid;
+    border-width: 10px;
+}
+
+.profile_info{
+    margin-left: 3rem;
+}
+
+.profile_i > h1{
+    margin: 0;
+    text-align: top;
+    font-size: 7em;
+}
+
+.profile_i > p{
+    font-size: 2em;
+
 }