likelionsg · SojeongM · Apr 12, 2023 · SoftCoffee1 · Apr 12, 2023 · Als-ET
diff --git a/README.md b/README.md
@@ -1,2 +1,3 @@
 # 11th_HTML-CSS
-4월 5일 세션에 대한 미니 프로젝트 과제를 제출하는 레포입니다.
+
+문소정의 4월 5일자 실습입니다.
diff --git a/home.html b/home.html
@@ -0,0 +1,99 @@
+<!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>Home</title>
+    <link rel="stylesheet" href="style.css">
+
+</head>
+
+<body>
+    <div id="main-container">
+    <header></header>
+    <main>
+        <div id="top">
+            <p>My Page</p>
+        </div>
+        <div id="container">
+            <section id="profile">
+                <p>
+                    [내 프로필]<br>
+                    이름: 문소정<br>
+                    포지션: 프론트엔드<br>
+                    학과: 컴퓨터공학과👩‍💻<br>
+                    생년월일: 2001.02.27<br>
+                </p>
+            </section>
+            <section id="mbti">
+                <div class="bg"></div>
+                <p>
+                    [MBTI]<br>
+                    INTP👩‍🔬<br>
+                    논리술사<br>
+                    N/S T/P는 반반!<br>
+                </p>
+
+            </section>
+            <section id="food">
+                    <p>
+                        [좋아하는 음식🍽️]<br>
+                        떡볶이<br>
+                        마라탕<br>
+                        연어<br>
+                        마제소바<br>
+                    </p>
+            </section>
+            <section id="movie">
+                <div class="bg"></div>
+                    <p>
+                        [인생영화🎬]<br>
+                        everything everywhere all at once<br>
+                    </p>
+            </section>
+            <section id="music">
+                <p>
+                    [노래 ᕷ˖°]<br>
+                    </i>cupid💘<br>
+                    by fiftyfifty
+                </p>
+
+            </section>
+            <section id="with">
+                <div class="bg"></div>
+                <p>
+                    [취미]<br>
+                    타로보기✨<br>
+                    다이어리 꾸미기<br>
+                </p>
+
+            </section>
+        </div>
+        <aside>
+            <div id="team">
+                <p>
+                    [디버깅조]<br>
+                    1. 최승호의 최애곡은 히사이시조의 merry go round인데 한우석은 그것을 피아노로 칠 수 있다<br>
+                    2. 이상연은 오늘 1교시를 지각했다<br>
+                    3. 오은택의 어금니가 깨진걸 알고 치과 예약을 했다.
+                </p>
+
+            </div>
+            <div id="hi">
+                <p>
+                    2023.04.05<br>
+                    Wed
+                </p>
+            </div>
+        </aside>
+    </main>
+    <footer>
+        2023 서강대학교 멋쟁이사자처럼🦁 문소정 first project
+    </footer>
+</div>
+<div id="alert">
+    PC 화면에서 접속해주세요!
+</div>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,199 @@
+@font-face {
+    font-family: 'KimjungchulGothic-Bold';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/KimjungchulGothic-Bold.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+}
+
+*{
+    box-sizing: border-box;
+    margin:0;
+    font-family: 'KimjungchulGothic-Bold';
+}
+
+body{
+    background-color: rgba(255, 255, 255, 0.662);
+
+}
+
+header{
+    height: 40px;
+    background-color:rgb(230, 245, 220);
+}
+
+main{
+    height: 600px;
+    width: 750px;
+    margin: 0 auto;
+    background-color: rgb(159, 182, 159);
+}
+
+footer{
+    height: 200px;
+    background-color: rgb(230, 245, 220);
+    text-align: center;
+    color:rgba(63, 66, 66, 0.662);
+    padding: 20px;
+}
+
+#top{
+    height: 35px;
+    background-color:honeydew;
+    margin-bottom: 25px;
+    border-radius: 0 0 10px 10px;
+    color: rgb(28, 58, 41);
+    font-size: 18px;
+    text-align: center;
+    line-height: 35px;
+}
+
+#container{
+    height: 410px;
+    padding: 10px;
+   /* background-color:beige;*/
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-content: space-around;
+
+}
+
+aside{
+    height: 110px;
+    background-color:rgb(159, 182, 159);
+    margin-bottom: 60px;
+    margin: 0 23px 60px 23px;
+    border-radius: 5px;
+
+}
+
+section{
+    height: 45%;
+    width: 30%;
+    background-color: rgb(234, 246, 235);
+    border-radius: 7px;
+}
+
+#team{
+    height: 110px;
+    width: 58%;
+    background-color: rgb(203, 233, 191);
+    color: rgb(0, 0, 0);
+    border-radius: 5px;
+    font-size: 15px;
+    float: left;
+}
+
+#hi{
+    height: 110px;
+    width: 40%;
+    background-color: rgb(206, 222, 197);
+    color: black;
+    border-radius: 5px;
+    font-size: 15px;
+    float: right;
+}
+
+section{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+section p{
+    padding: 30px;
+    text-align: center;
+    position: relative;
+
+
+}
+
+#team p{
+    padding: 5px;
+    text-align: center;
+
+}
+
+#movie {
+    background-image: url(./image/eee.jpg);
+    background-size: cover;
+    height: 45%;
+    width: 30%;
+    position: relative;
+    color: white;
+}
+#movie:hover{
+    transform: scale(1.1);
+    transition: all 0.2s linear;
+}
+
+#mbti {
+    background-image: url(./image/inpt1.jpg);
+    background-size: cover;
+    height: 45%;
+    width: 30%;
+
+    color: white;
+    position: relative;
+}
+#mbti:hover{
+    transform: scale(1.1);
+    transition: all 0.2s linear;
+}
+
+#with {
+    background-image: url(./image/ttt.jpg);
+    background-size: cover;
+    height: 45%;
+    width: 30%;
+    position: relative;
+    color: white
+
+}
+#with:hover{
+    transform: scale(1.1);
+    transition: all 0.2s linear;
+}
+
+#profile:hover{
+    transform: scale(1.1);
+    transition: all 0.2s linear;
+}
+#music:hover{
+    transform: scale(1.1);
+    transition: all 0.2s linear;
+
+
+}
+#food:hover{
+    transform: scale(1.1);
+    transition: all 0.2s linear;
+}
+
+#hi p{
+    padding: 30px;
+    text-align: center;
+}
+
+.bg{
+    background-color: rgba(0,0,0,0.5);
+    width:100%;
+    height: 100%;
+    border-radius: 5px;
+    position: absolute;
+}
+
+#alert{
+    display: none;
+    text-align: center;
+    padding-top: 300px;
+}
+
+@media(max-width: 800px){
+    #main-container{
+        display: none;
+    }
+    #alert{
+        display:block;
+    }
+}