Merge pull request #2 from TommyOh0428/issue_2/create_header

add header section in the page
TommyOh0428 · Nov 21, 2023 · 7231885 · 7231885
2 parents 0d2bf2d + 779f1ab
commit 7231885
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 3 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/index.html b/index.html
@@ -8,9 +8,35 @@
 </head>
 <body>
     <div id="header">
-
+        <div class="container">
+            <nav>
+                <img src="photo/logo.jpg" class="logo">
+                <ul>
+                    <li><a href="#">Home</a></li>
+                    <li><a href="#">About Me</a></li>
+                    <li><a href="#">Portfolio</a></li>
+                    <li><a href="#">Contact</a></li>
+                </ul>
+            </nav>
+            <div class="header-text">
+                <p>SFU Software System</p>
+                <h1>Hello, I'm <span>Tommy Oh</span> <br>who is pursuing the program <br>in Simon Fraser University</h1>
+            </div>
+        </div>
     </div>
-
+<!-------------------- About Me ----------------->
+<div class="about">
+    <div class="container">
+        <div class="row">
+            <div class="about-col-1">
+                <img src="photo/selfie-2.jpg">
+            </div>
+            <div class="about-col-2">
+                <h1>About Me</h1>
+            </div>
+        </div>
+    </div>
+</div>
 
 </body>
 </html>
diff --git a/photo/.DS_Store b/photo/.DS_Store
diff --git a/photo/logo.jpg b/photo/logo.jpg
diff --git a/photo/selfie-2.jpg b/photo/selfie-2.jpg
diff --git a/photo/selfie.jpg b/photo/selfie.jpg
diff --git a/style.css b/style.css
@@ -13,5 +13,87 @@ body {
 #header {
     width: 100%;
     height: 100vh;
-    background-image: url();
+    background-image: url(photo/selfie.jpg);
+    background-size: cover;
+    background-position: center;
+}
+
+.container {
+    padding: 10px 10%;
+}
+
+nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.logo {
+    width: 140px;
+}
+
+nav ul li {
+    display: inline-block;
+    list-style: none;
+    margin: 10px 20px;
+}
+
+nav ul li a {
+    color: #fff;
+    text-decoration: none;
+    font-size: 20px;
+    position: relative;
+}
+
+nav ul li a::after {
+    content: '';
+    width: 0;
+    height: 3px;
+    background: #ff004f;
+    position: absolute;
+    left: 0;
+    bottom: -6px;
+    transition: 0.5s;
+}
+
+nav ul li a:hover::after {
+    width: 100%;
+}
+
+.header-text {
+    margin-top: 20%;
+    font-size: 30px;
+    color: #080808;
+}
+
+.header-text h1 {
+    font-size: 60px;
+    margin-top: 20px;
+}
+
+.header-text h1 span {
+    color: #ff004f;
+}
+
+/* -------------- About Me ---------------*/
+
+#about {
+    padding: 80px 0;
+    color: #ababab;
+}
+
+.row {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.about-col-1 {
+    flex-basis: 100%;
+}
+
+.about-col-1 img {
+    width: 100%;
+    border-radius: 15px;
 }