heyo

met18001 · Mar 12, 2020 · 5944525 · 5944525
1 parent 4baa55a
commit 5944525
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 6 deletions.
diff --git a/css/main.css b/css/main.css
@@ -15,6 +15,12 @@ h1{
     border-radius: 40px;
     color: white;
     font-size: 15px;
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+            justify-content: space-between;
 }
 #chatBox{
     width: 100%;
@@ -60,9 +66,7 @@ p{
 text-align: center;
 
 }
-.button{
 
-}
 .user{
 display: -webkit-box;
 display: flex;
@@ -114,8 +118,49 @@ a:link {
       display: -webkit-box;
       display: flex;
       -webkit-box-pack: center;
-              justify-content: center;
+        justify-content: center;
+        -webkit-box-align: center;
+                align-items: center;
   }
   .smallImage {
     width:20px;
+}
+span{
+    padding-left: 3px;
+    padding-right: 3px;
+}
+#usernameInput{
+    background-color: lightcoral;
+    font-family: 'Advent Pro';
+    color: white;
+    border-radius: 30px;
+    padding: 1em;
+    border: none;
+}
+input{
+    color: white;
+}
+#statusInput{
+    background-color: lightcoral;
+    font-family: 'Advent Pro';
+    color: white;
+    border-radius: 30px;
+    padding: 1em;
+    border: none;    
+}
+#profilePicInput{
+    background-color: lightcoral;
+    font-family: 'Advent Pro';
+    color: white;
+    border-radius: 30px;
+    border: none;  
+}
+.button{
+    background-color: lightcoral;
+    padding: 1em;
+    font-family: 'Advent Pro';
+    border-radius: 40px;
+    color: white;
+    font-size: 15px;
+    border: none;
 }
diff --git a/index.html b/index.html
@@ -14,12 +14,13 @@
     <body>
 
     <div class="box">
-        <header><h1>Sending messages as <img class="smallImage" src="#" id="profilePicInput"/><span id="usernameInput">{UserName}</span></a> <span class="small" id="statusInput">{Status}</span></h1></header>
+        <header><h1>Sending messages as: <span id="usernameInput">{UserName}</span></a> Message Status: <span class="small" id="statusInput">{Status}</span><img class="smallImage" src="#" id="profilePicInput"/></h1></header>
         <header><h1><a href="profile.html">~Set your profile here~</a></h1></header>
     </div>   
+
 
         <div id="chatBox">
-            <img class="smallImage" id="userProfilePic"></img>
+
 
         <div id="chatInput">
             <input type="Text" id="newMsg" placeholder=" Type a Messege!">

diff --git a/profile.html b/profile.html
@@ -12,7 +12,7 @@
     <p><input type="text" placeholder="Display Name" name="UserName" id="usernameInput"></p>
     <p><input type="text" placeholder="Status Message" name="StatusMessage" id="statusInput"></p>
     <p><input type="file" id="profilePicInput" name="profilePicInput"></p>
-    <button id="saveProfile">Save Profile</button>
+    <button class="button" id="saveProfile">Save Profile</button>
     <h1 class="button"> <a href="index.html">Go Back to Chat App</a></h1>
     <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt numquam, consequatur eos error ducimus quisquam nam ut quasi sint adipisci sit molestiae, ad dolorum iste possimus deleniti rerum ipsum repudiandae.