Home page work

2024-07-23 19:14:29 +05:30
parent 35f32e73c8
commit 1e2287b73e
3 changed files with 107 additions and 3 deletions
@@ -3,10 +3,114 @@
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Reflections from Nirmal Kumar R</title>
-    <link href="css/style.css" rel="stylesheet">
+    <title>Nirmal Kumar R</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: verdana;
+        font-size: 13px;
+        max-width: 46em;
+      }
+
+      header {
+        margin: 1em 1em 1em 9em;
+      }
+
+      nav {
+        display: flex;
+        flex-direction: column;
+        align-items: start;
+        margin-left: 1em;
+        float: left;
+      }
+
+      nav a {
+        background-color: #BF1717;
+        font-family: verdana;
+        color: white;
+        font-size: 0.8rem;
+        text-shadow: 0px 0px 1px #cccccc;
+        min-width: 70px;
+        padding: 0.3em 0.5em;
+        text-decoration: none;
+        box-shadow: 1px 2px 2px #dfb7b7 inset;
+        border-bottom: 4px solid #992727;
+        border-right: 3px solid #f29595;
+        border-left: 2px solid #b77272;
+        border-top: 1px solid #ac3e3e;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        text-rendering: optimizeLegibility;
+      }
+
+      p {
+        margin: 2em 0;
+      }
+
+      .home,
+      .content-wrapper {
+        margin-left: 9em;
+      }
+
+      .content-wrapper {
+        margin-top: 1em;
+      }
+
+      .content-title {
+        color: #663333;
+        font-weight: bold;
+        margin-left: 9em;
+      }
+
+      .contact {
+        background-color: #ffcc33;
+        padding: 0.6em;
+      }
+
+      footer {
+        color: #cccccc;
+        margin: 3em 0 3em 9em;
+      }
+
+      footer hr {
+        margin-bottom: 1em;
+      }
+    </style>
  </head>
  <body>
-	Hello, World!  
+    <header>
+      <div>
+        <img src="img/name.png" alt="My Full Name - Nirmal Kumar R" width="479px">
+      </div>
+    </header>
+    
+    <nav>
+      <a href="/">Home</a>
+      <a href="/blog">Blog</a>
+      <a href="/poems">Poems</a>
+      <a href="https://river.sh">Devlog</a>
+      <a href="mailto:inbox@nirm.al">Contact</a>
+    </nav>
+
+    <section class="home">
+      <img src="img/ashram.jpg" alt="A picture of an ashram garden" width="479px">
+    </section>
+
+    <section class="content-wrapper">
+      <div class="content">
+        <p>This is my personal website. A place where you can read all my public musings. Rest of it is my internal flight and experience which I cannot put it into words although I try my best.</p>
+        <p class="contact">If you have any questions or suggestions, write to — <a href="mailto:inbox@nirm.al">inbox@nirm.al</a></p>
+      </div>
+    </section>
+
+    <footer>
+      <hr>
+      © Nirmal Kumar R
+    </footer>
  </body>
 </html>