feat: h1 텍스트 수정 #3

LIKELION-SOGANG · Apr 5, 2024 · 826dd62 · 826dd62
1 parent 5fc29f5
commit 826dd62
Show file tree

Hide file tree

Showing 10 changed files with 278 additions and 11 deletions.
diff --git a/USER-3/images/CEO.jpg b/USER-3/images/CEO.jpg
diff --git a/USER-3/images/front-end.png b/USER-3/images/front-end.png
diff --git a/USER-3/images/github.svg b/USER-3/images/github.svg
diff --git a/USER-3/images/instagram.svg b/USER-3/images/instagram.svg
diff --git a/USER-3/images/mbti.png b/USER-3/images/mbti.png
diff --git a/USER-3/images/movie.jpeg b/USER-3/images/movie.jpeg
diff --git a/USER-3/images/person.jpeg b/USER-3/images/person.jpeg
diff --git a/USER-3/images/valorant.png b/USER-3/images/valorant.png
diff --git a/USER-3/index.html b/USER-3/index.html
@@ -1,12 +1,104 @@
 <!DOCTYPE html>
-<html lang="ko">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>USER-3</title>
-    <link rel="stylesheet" href="style.css" />
-  </head>
-  <body>
-    <h1>USER-3</h1>
-  </body>
-</html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Profile</title>
+    <link rel="stylesheet" href="style.css">
+
+
+</head>
+<body>
+    <header>
+    <div id="header-brand">Likelion Sogang</div>
+        <div class="navigation-menu">
+        <div class="menu-item">About</div>
+        <div class="menu-item">What I like</div>
+        <div class="menu item">Contact</div>
+        </div>
+
+    </header>
+    <main>
+        <section id="profile-summary">
+            <h1>나를 소개할게요</h1>
+            <h2>이형빈</h2>
+        </section>
+        <section id="about-me">
+           <article class="simple-profile">
+            <figure class="profile-figure">
+                <img id="article-img" src="./images/front-end.png" />
+                <div class="info-label">Position</div>
+                <div class="info-value">Front-End</div>
+            </figure>
+        </article>
+            <article class="simple-profile">
+                <figure class="profile-figure">
+                    <img id="article-img" src="./images/buisness.jpg" />
+                    <div class="info-label">Major</div>
+                    <div class="info-value">buisness</div>
+                </figure>
+            </article>
+            <article class="simple-profile">
+                <figure class="profile-figure">
+                    <img id="article-img" src="./images/mbti.png" />
+                    <div class="info-label">MBTI</div>
+                    <div class="info-value">ESTJ</div>
+                </figure>
+            </article>
+        </section>
+
+        <section id="favorite">
+            <h2 class="favorites-title">What I Like</h2>
+            <div class="favorite-gallery">
+                <article class="image-block">
+                    <img
+                    class="favorite-image"
+                    src="./images/movie.jpeg"
+                    alt="영화 엔드게임 포스터"
+                    />
+                    <figcaption class="image-caption">
+                        <div class="caption-title">영화</div>
+                        <div class="caption-subtitle">엔드게임</div>
+                    </figcaption>
+                </article>
+                <article class="image-block">
+                    <img
+                    class="favorite-image"
+                    src="./images/person.jpeg"
+                    alt="아티스트 창모 사진"
+                    />
+                    <figcaption class="image-caption">
+                        <div class="caption-title">아티스트</div>
+                        <div class="caption-subtitle">창모</div>
+                    </figcaption>
+                </article>
+                <article class="image-block">
+                    <img
+                    class="favorite-image"
+                    src="./images/valorant.png"
+                    alt="취미 운동 사진"
+                    />
+                    <figcaption class="image-caption">
+                        <div class="caption-title">취미</div>
+                        <div class="caption-subtitle">발로란트</div>
+                    </figcaption>
+                </article>
+                </div>
+                </section>
+            </main>
+                <footer>
+                    <h2 class="footer-heading">Connect with me!</h2>
+                    <div class="contact-details">
+                        <div class="contact-info">Email: [email protected]</div>
+                        <p class="copyright"> Hyoung Been. All Rights Reserved</p>
+                        <div class="social-media-links">
+                            <a href="https://www.instagram.com/hyoungbeeni/" target="_blank">
+                                <img class="social-icon" src="./images/instagram.svg" />
+                            </a>
+                            <a href="https://github.com/beenscreen" target="_blank">
+                                <img class="social-icon" src="./images/github.svg" />
+                            </a>
+                    </div>
+                </footer>
+</body>
+</html>
diff --git a/USER-3/style.css b/USER-3/style.css
@@ -0,0 +1,161 @@
+/*Global Style*/
+*{
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+ }
+ /*header*/
+
+ header{
+     height: 78px;
+     padding: 24px 42px;
+     display: flex;
+     justify-content: space-between;
+     align-items: center;
+
+ }
+ #header-brand {
+     font-size: 20px;
+     font-weight: 600;
+ }
+
+ .navigation-menu {
+     width: 233px;
+     display: flex;
+     justify-content: space-between;
+ }
+
+ .menu-item {
+     font-size: 17px;
+ }
+ #profile-summary {
+     padding: 42px;
+ }
+ h1 {
+     font-size: 20px
+     font-weight: 400;
+     margin-bottom: 20px;
+ }
+ h2 {
+     font-size: 60px;
+     font-weight: 600;
+ }
+
+ /* Section */
+ #about-me {
+     display: flex;
+     flex-wrap: wrap;
+     justify-content: space-between;
+     padding: 42px 24px;
+
+ }
+
+ .simple-profile {
+     display: flex;
+     flex-direction: column;
+     font-weight: 600;
+     align-items: center;
+     text-align: center;
+     flex-grow: 1;
+     flex-shrink: 0;
+     flex-basis: 320px;
+ }
+ #article-img {
+     width: 124px;
+     height: 124px;
+     margin-top: 30px;
+     margin-bottom: 42px;
+ }
+ .info-label {
+     font-size: 20px;
+     margin-bottom: 22px;
+     color: #9f9f9f;
+ }
+ .info-value {
+     font-size: 32px;
+ }
+
+ /* Section*/
+ #favorite {
+     padding: 42px 24px 82px 24px;
+     background-color: beige;
+ }
+ .favorites-title {
+     background-color: yellow;
+     font-size: 32px;
+     font-weight: 600;
+     margin-bottom: 42px;
+     text-align: center;
+ }
+
+ .favorite-gallery {
+     display: flex;
+     gap: 30px;
+     flex-direction: row;
+     flex-wrap: wrap;
+     justify-content: space-between;
+     object-fit: cover;
+ }
+ .image-block {
+     position: relative;
+     width: 320px;
+     height: 320px;
+     flex: 1 0 320px;
+ }
+ .favorite-image {
+     opacity: 0.7;
+     width: 100%;
+     height: 100%;
+     /* object-fit: cover; */
+ }
+
+ .image-caption {
+     position: absolute;
+     top: 30%;
+     left: 30%;
+     color: white;
+ }
+ .caption-title {
+     font-size: 20px;
+     font-weight: 500;
+ }
+ .caption-subtitle {
+     font-size: 32px;
+     font-weight: 600;
+ }
+ /* footer*/
+ footer {
+     background-color: black;
+     padding: 42px 24px;
+     color: white;
+     display: flex;
+     flex-wrap: wrap;
+     justify-content: space-between;
+ }
+
+ .footer-heading {
+     width: 400px;
+     font-size: 32px;
+     font-weight: 600;
+ }
+
+ .contact-details {
+     width: 400px;
+     font-size: 17px;
+     font-weight: 400;
+     height: 137px;
+ }
+
+ .contact-info,
+ .copyright {
+     margin-bottom: 12px;
+ }
+
+ .social-media-links {
+     margin-top: 30px;
+ }
+ .social-icon {
+     width: 36px;
+     height: 36px;
+     margin-right: 24px;
+ }