Merge pull request #6 from nyun-nye/main

Create 0주차 윤예진
HSU-Likelion-Front-12th · Apr 8, 2024 · fd0f298 · fd0f298
2 parents ca3f0e8 + 04a7112
commit fd0f298
Show file tree

Hide file tree

Showing 11 changed files with 296 additions and 0 deletions.
diff --git a/Week0/윤예진/EnvelopeSimple.png b/Week0/윤예진/EnvelopeSimple.png
diff --git a/Week0/윤예진/MapPin.png b/Week0/윤예진/MapPin.png
diff --git a/Week0/윤예진/Phone.png b/Week0/윤예진/Phone.png
diff --git a/Week0/윤예진/dog.jpg b/Week0/윤예진/dog.jpg
diff --git a/Week0/윤예진/index.html b/Week0/윤예진/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css">
+    <title>자기소개 웹 페이지 제작하기</title>
+  </head>
+  <body>
+    <header>
+      <img class="portfolio" src="portfolio.png" alt="포트폴리오로고">
+      <nav>
+        <span>ABOUT</span>
+        <span>HOBBY</span>
+        <span>CONTACT</span>
+      </nav>
+    </header>
+    <main>
+      <article class="intro">
+        <h1>
+          안녕하세요!<br>
+          제 이름은 윤예진 입니다.<br>
+          소통하는 개발자가 되고 싶어요.
+        </h1>
+      </article>
+      <article>
+          <h2 class="title">ABOUT</h2>
+          <div class="about">
+            <div class="about-left">
+              <img class="me" src="me.jpg" alt="">
+              <div class="name">윤예진</div>
+              <div class="left-content">
+                <div class="mark">
+                  <img src="Phone.png" alt="">
+                  <img src="EnvelopeSimple.png" alt="">
+                  <img src="MapPin.png" alt="">
+                </div>
+                <div class="mark-content">
+                  <p>010.2496.9985</p>
+                  <p>[email protected]</p>
+                  <p>경기도 화성시 동탄2신도시</p>  
+                </div>
+              </div>
+            </div>
+            <div class="about-right">
+              <table>
+                <tr>
+                  <th>EDUCATION</th>
+                  <th>SKILLS</th>
+                </tr>
+                <tr>
+                  <td>
+                    한성대학교 컴퓨터공학부<br>
+                    2023.03~2027.02
+                  </td>
+                  <td>
+                      Phython<br>
+                      C<br>
+                      C++<br>
+                  </td>
+                </tr>
+                <tr>
+                  <th>WORK</th>
+                  <th>ACTIVITIES</th>
+                </tr>
+                <tr>
+                  <td>
+                    프론트엔드 개발자
+                  </td>
+                  <td>멋쟁이사자처럼 12기</td>
+                </tr>
+              </table>
+
+            </div>
+          </div>
+      </article>
+      <article>
+          <h2 class="title">HOBBY</h2>
+          <div class="hobbyIndex">
+            <div id="hobby1" class="hobbies">
+              <div><p class="hobbytext">강아지 산책</p></div>
+              <img src="dog.jpg" alt="">
+            </div>
+            <div id="hobby2" class="hobbies">
+              <div><p class="hobbytext">루피 모으기</p></div>
+              <img src="loopy.jpg" alt="">
+            </div>
+            <div id="hobby3" class="hobbies">
+              <div><p class="hobbytext">여행 다니기</p></div>
+              <img src="travel.jpg" alt="">
+            </div>
+          </div>
+      </article>
+    </main>
+  </body>
+</html>
diff --git a/Week0/윤예진/loopy.jpg b/Week0/윤예진/loopy.jpg
diff --git a/Week0/윤예진/me.jpg b/Week0/윤예진/me.jpg
diff --git a/Week0/윤예진/portfolio.png b/Week0/윤예진/portfolio.png
diff --git a/Week0/윤예진/readme.md b/Week0/윤예진/readme.md
diff --git a/Week0/윤예진/style.css b/Week0/윤예진/style.css
@@ -0,0 +1,200 @@
+*{
+    margin: 0;
+}
+html{
+    text-align: center;
+    background-color: #f3f5ff;
+}
+header {
+    background-color: #ffffff;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    justify-content: center;
+    align-items: center;
+}
+nav{
+    display: inline-flex;
+    align-items: center;
+    justify-self: center;
+    gap: 32px;
+}
+
+nav span{
+    display: flex;
+    padding: 12px 24px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+}
+
+.portfolio{
+    width: 340px;
+    height: 62px;
+    align-items: center;
+    justify-self: center;
+}
+
+.intro {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 800px;
+    background-color: #4A86FF;
+}
+
+.intro h1{
+    margin: 0;
+    width: 100%;
+    height: 360px;
+    color: #ffffff;
+    align-items: center;
+    justify-content: center;
+    font-family: Inter;
+    font-size: 80px;
+    font-style: normal;
+    font-weight: 800;
+    line-height: 150%; /* 120px */
+}
+
+.title{
+    color: #4A86FF;
+    text-align: center;
+    font-family: Inter;
+    font-size: 70px;
+    font-style: normal;
+    font-weight: 800;
+    line-height: normal;
+    margin-top: 60px;
+    margin-bottom: 59px;
+}
+
+.about-left{
+    margin-left: 300px;
+    width: 380px;
+    height: 498px;
+    border-radius: 16px;
+    border: 1px solid #ebedf8;
+    background-color: #ffffff;
+}
+.me{
+    width: 196.078px;
+    height: 200px;
+    border-radius: 50%;
+    margin-top: 30px;
+}
+.name{
+    color: #4A86FF;
+    text-align: center;
+    font-family: Inter;
+    font-size: 40px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    margin-top: 25px;
+}
+.left-content{
+    display: flex;
+}
+.mark{
+    margin-top: 15px;
+    width: 40px;
+    height: 40px;
+    margin-left: 40px;
+}
+.mark>img{
+    margin-bottom: 8px;
+}
+.mark-content{
+    text-align: left;
+    color: #484a64;
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    margin-top: 26px;
+    margin-left: 16px;
+}
+.mark-content>p{
+    margin-bottom: 29px;
+}
+.about{
+    display: flex;
+}
+table{
+    margin-left: 40px;
+    width: 700px;
+    height: 500px;
+    text-align: left;
+}
+.about-right th{
+    color: #000000;
+    font-family: Inter;
+    font-size: 32px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    vertical-align: top;
+    height: 50px;
+}
+.about-right td{
+    color: #626682;
+    font-family: Inter;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 170%;
+    height: 200px;
+    vertical-align: top;
+    width: 350px;
+}
+
+.index{
+    display: flex;
+}
+.index>div{
+    align-items: center;
+    justify-content: center;
+}
+
+.hobbies{
+    width: 380px;
+    height: 377px;
+    margin-top: 80px;
+    margin-right: 20px;
+    border-radius: 16px;
+    border: 1px solid #ebedf8;
+    background-color: #ffffff;
+    display: inline-block;
+}
+.hobbies>div{
+    display: flex;
+    width: 380px;
+    height: 80px;
+    border-radius: 16px 16px 0px 0px;
+    background-color: #4A86FF;
+    line-height: normal;
+    justify-content: center;
+    align-items: center; 
+}
+.hobbytext{
+    line-height: 80px;
+    text-align: center;
+    color: #ffffff;
+    text-align: center;
+    align-items: center;
+    font-family: Inter;
+    font-size: 32px;
+    font-style: normal;
+    font-weight: 700;
+}
+.hobbies img{
+    position: relative;
+    bottom: -40px;
+    width: 300px;
+    height: 220px;
+}
+
+main{
+    margin-bottom: 342px;
+}
diff --git a/Week0/윤예진/travel.jpg b/Week0/윤예진/travel.jpg