Added Headshot

smruti-s · Apr 13, 2024 · adf3fa5 · adf3fa5
1 parent 5417142
commit adf3fa5
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 3 deletions.
diff --git a/assets/css/images.css b/assets/css/images.css
@@ -0,0 +1,26 @@
+.header-2 {
+    display: flex;
+    align-items: center; /* Vertically center the items */
+    }
+
+.h1-2 {
+    font-size: 2.75em;
+    font-weight: 700;
+    line-height: 1.3;
+    margin: 2em; /* Adjust margin as needed */
+    letter-spacing: -0.035em;
+  }
+
+  .circular-headshot {
+    width: 353px; /* Adjust this according to your preference */
+    height: 326px; /* Adjust this according to your preference */
+    border-radius: 50%; /* This makes the element circular */
+    overflow: hidden; /* This ensures that the image is clipped to the circular shape */
+    margin-left: 500px; /* Adjust the margin as needed to separate the heading and the headshot */
+  }
+
+  .circular-headshot img {
+    width: 100%;
+    height: auto;
+  }
+
diff --git a/images/Smruti_Suresh.JPG b/images/Smruti_Suresh.JPG
diff --git a/main.html b/main.html
@@ -10,6 +10,7 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
 		<link rel="stylesheet" href="assets/css/main.css" />
+		<link rel="stylesheet" href="assets/css/images.css" />
 		<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
 	</head>
 	<body class="is-preload">
@@ -46,13 +47,18 @@ <h2>Menu</h2>
 							<!-- <li><a href="elements.html">Elements</a></li> -->
 						</ul>
 					</nav>
-
+				<div class="header-2">	
+					<div class="h1-2">Hi! I'm Smruti Suresh.<br/>
+						A roboticist in the making </h1>		
+					</div>
+					<div class="circular-headshot">
+						<img src="images/Smruti_Suresh.JPG" alt="Smruti Suresh">
+					</div>
+				</div>	
 				<!-- Main -->
 					<div id="main">
 						<div class="inner">
 							<header>
-								<h1>Hi! I'm Smruti Suresh.<br/>
-								A roboticist in the making </h1>
 								<h2> Recent Updates</h2>
 								<p> 
 									<b>December 2023:</b>