save file

javascript-2020 · javascript-2020 · commit 8518496ff802 · 2026-04-18T11:17:11.000+01:00
diff --git a/contact.html b/contact.html
@@ -54,14 +54,49 @@
     {height:100%}
     
   body
-    { font-family:arial;line-height:24px;height:calc(100% - 16px);
+    {font-family:arial;line-height:24px;height:calc(100% - 16px);
       display:flex;flex-direction:column
     }
     
     
-  #contact-form
-    {display:flex;flex-direction:column;gap:20px;border:1px solid lightgray;padding:20px;border-radius:10px;background:whitesmoke}
     
+  .hdr
+    {position:relative;margin-top:0;margin-bottom:20px;background:white;
+      padding-bottom:10px;border-bottom:3px solid lightblue;height:50px
+    }
+    
+  .hdr-icon
+    { display:inline-block;text-align:center;background:whitesmoke;border-radius:5px;
+      border:1px solid lightgray;padding:5px 3px 0px;cursor:pointer;margin-right:10px;
+      min-width:50px
+    }
+    
+  .hdr-icon-img
+    {}
+    
+  .hdr-icon-label
+    {margin:2px 0 0}
+    
+  .hdr-title
+    {position:absolute;left:0;right:0;z-index:0;margin:0 auto}
+    
+  .hdr-date
+    {float:right}
+    
+    
+    
+    
+    
+    
+  #center
+    {margin:20px auto;max-width:1000px}
+    
+    
+    
+  #contact-form
+    {display:flex;flex-direction:column;gap:20px;border:1px solid lightgray;padding:20px;border-radius:10px;background:whitesmoke;
+      box-sizing:border-box}
+      
   #contact-form>div
     {display:flex;gap:20px}
     
@@ -72,7 +107,7 @@
     {flex:1}
     
   #text-root
-    {width:500px;height:200px}
+    {width:100%;height:200px}
     
   textarea
     {width:100%;height:100%}
@@ -92,29 +127,52 @@
       <body>
       
       
-      
-            <div id=contact-form>
+            <div class=hdr>
+                <img class=hdr-title src='/images/contact.png' style='height:80px;top:10px'>
+                <time class=hdr-date datetime=2026-04-18>
+                      18 Apr 2026
+                </time>
+            </div hdr>
             
-                  <div id=name-root>
-                        <div class=label>
-                              Name
-                        </div>
-                        <input id=name spellcheck=off autocomplete=false>
+            
+            
+            <div id=center>
+            
+            
+            
+                  <div>
+                        If you’d like to get in touch, feel free to reach out by using the contact form below.
+                        Replies usually take 24–48 hours to process.
                   </div>
-                  <div id=email-root>
-                        <div class=label>
-                              Email
+                  
+                  
+                  <div id=contact-form>
+                  
+                        <div id=name-root>
+                              <div class=label>
+                                    Name
+                              </div>
+                              <input id=name spellcheck=off autocomplete=false>
                         </div>
-                        <input id=email spellcheck=off autocomplete=false>
-                  </div>
-                  <div id=text-root>
-                        <textarea>
-                        </textarea>
-                  </div>
-                  <div id=btns-root>
-                        <input value=send type=button>
+                        <div id=email-root>
+                              <div class=label>
+                                    Email
+                              </div>
+                              <input id=email spellcheck=off autocomplete=false>
+                        </div>
+                        <div id=text-root>
+                              <textarea>
+                              </textarea>
+                        </div>
+                        <div id=btns-root>
+                              <input value=send type=button>
+                        </div>
+                        
                   </div>
                   
+                  
+                  
+                  
             </div>
             
             
