likelionsg · neronsoda · Apr 12, 2023 · fressh1127 · Apr 12, 2023 · Goonco
diff --git a/README.md b/README.md
@@ -1,2 +1,2 @@
 # 11th_HTML-CSS
-4월 5일 세션에 대한 미니 프로젝트 과제를 제출하는 레포입니다.
+강민석 프로필 페이지 추가 완료!
diff --git a/home.html b/home.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Profile</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div id="main-container">
+    <header></header>
+    <main>
+      <div id="top">
+        <p>강민석's Profile</p>
+      </div>
+      <div id="container">
+        <section id="introduce">
+          <p>
+            [자기소개]<br>
+            이름 : 강민석<br>
+            나이 : 25세<br>
+            전공 : 수학과<br>
+            포지션 : 백엔드<br>
+            MBTI : ISFP
+          </p>
+        </section>
+        <section id="selfie">
+          <div class="sel"></div>
+          <p>나의 사진</p>
+        </section>
+        <section id="course">
+          <p>
+            [수강 중인 과목]<br>
+            데이터베이스시스템<br>
+            컴퓨터네트워크<br>
+            멀티코어프로그래밍<br>
+            기초머신러닝<br>
+            소프트웨어공학<br>
+            푸리에해석 및 응용
+          </p>
+        </section>
+        <section id="football">
+          <p>
+            좋아하는 운동
+          </p>
+        </section>
+        <section id="sing">
+          <p>
+            [노래방 애창곡]<br>
+            izi - 응급실<br>
+            이승기 - 삭제<br>
+            윤종신 - 좋니<br>
+            김민석 - 취중고백<br>
+            성시경 - 너의 모든 순간
+          </p>
+        </section>
+        <section id="movie">
+          <p>인생 영화</p>
+        </section>
+      </div>
+      <aside>
+        <div id="team">
+          <p>
+            [디버깅 4조 퀴즈]<br>
+            정인영은 코로나에 4번 걸렸다.<br>
+            송경호가 키우는 고양이는 9kg이다.<br>
+            강민석의 시력은 왼쪽 0.1 오른쪽 1.0이다.
+          </p>
+        </div>
+        <div id="hi">
+          <p>
+            Email : [email protected]<br>
+            Instagram : attra66it<br>
+            BOJ handle : neveralone
+          </p>
+        </div>
+      </aside>
+    </main>
+    <footer>
+      <p>멋쟁이사자처럼 11기 강민석</p>
+    </footer>
+  </div>
+  <div id="alert">
+    PC화면에서 접속해주세요!
+  </div>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,192 @@
+*{
+  box-sizing : border-box;
+  margin : 0;
+}
+
+body{
+  background-color: #f8f8f8;
+}
+
+header{
+  height : 40px;
+  background-color : black;
+}
+
+main{
+  height : 600px;
+  width : 750px;
+  margin : 0 auto;
+  background-color: rgb(247, 230, 233);
+}
+
+footer{
+  color : black;
+  font-size : 25px;
+  font-family : 'establishRoomNo703OTF';
+  height : 200px;
+  background-color: rgba(247, 131, 247, 0.441);
+  text-align : center;
+  padding : 30px;
+}
+
+#top{
+  padding : 3px;
+  height : 35px;
+  background-color: rgb(238, 76, 76);
+  margin-bottom : 25px;
+  border-radius : 0 0 10px 10px;
+  color : white;
+  font-family : 'establishRoomNo703OTF';
+  font-size : 20px;
+  text-align : center;
+  line-height : 35px;
+}
+
+#container{
+  height : 410px;
+  padding : 10px;
+  display : flex;
+  flex-wrap : wrap;
+  justify-content: space-around;
+  align-content: space-around;
+}
+
+aside{
+  font-family: 'establishRoomNo703OTF';
+  height : 80px;
+  background-color : rgb(247, 230, 233);
+  margin-bottom : 60px;
+  margin : 0 15px 60px 15px;
+  display : flex;
+  flex-wrap : wrap;
+  justify-content : space-around;
+}
+
+section{
+  height : 45%;
+  width : 30%;
+  background-color: white;
+  border-radius : 7px;
+}
+
+section p{
+  text-align : center;
+  font-family: 'establishRoomNo703OTF';
+  position: relative;
+  padding : 20px;
+}
+
+#introduce{
+  /* padding : 30px; */
+  font-size : 20px;
+
+}
+.sel{
+  border-radius : 7px;
+  background-color : rgba(0, 0, 0, 0.3);
+  position : absolute;
+  width : 100%;
+  height : 100%;
+}
+
+#selfie{
+  font-size : 23px;
+  color : white;
+  background-image : url("./image/selfie.jpg");
+  background-size : cover;
+  background-repeat : no-repeat;
+  background-position : center;
+  position : relative;
+}
+
+
+
+#selfie:hover{
+  transform : scale(1.4);
+  transition : all 0.2s linear;
+}
+
+#course{
+  /* padding : 20px; */
+  font-size : 16px;
+}
+
+#football{
+  color : white;
+  font-size : 23px;
+  /* padding : 20px; */
+  background-image : url("./image/football.jpg");
+  background-size : cover;
+  background-repeat : no-repeat;
+  background-position : center;
+}
+
+#football:hover{
+  transform : scale(1.4);
+  transition : all 0.2s linear;
+}
+
+#sing{
+  /* padding : 22px; */
+  font-size : 17px;
+}
+
+#movie{
+  /* padding : 20px; */
+  font-size : 23px;
+  color : white;
+  background-image : url("./image/potter.jpg");
+  background-size : cover;
+  background-repeat : no-repeat;
+  background-position : center;
+}
+
+#movie:hover{
+  transform : scale(1.4);
+  transition : all 0.2s linear;
+}
+
+#team{
+  padding : 7px;
+  width : 465px;
+  height : 100%;
+  background-color: #f2776b91;
+  color : black;
+  text-align : center;
+  border-radius : 5px;
+  font-size : 14px;
+}
+
+#hi{
+  padding : 10px;
+  width : 220px;
+  height : 100%;
+  background-color: rgba(244, 177, 32, 0.642);
+  color : black;
+  border-radius : 5px;
+  font-size : 15px;
+  text-align : center;
+}
+
+@font-face {
+  font-family: 'establishRoomNo703OTF';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/establishRoomNo703OTF.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+#alert{
+  display : none;
+  text-align : center;
+  padding-top : 300px;
+}
+
+@media(max-width : 800px){
+  #main-container{
+    display : none;
+  }
+
+  #alert{
+    display : block;
+  }
+}