likelionsg · fressh1127 · Apr 12, 2023 · Goonco · Apr 12, 2023 · rmdnps10
diff --git a/README.md b/README.md
@@ -1,2 +1,3 @@
 # 11th_HTML-CSS
-4월 5일 세션에 대한 미니 프로젝트 과제를 제출하는 레포입니다.
+
+너무너무배고파요.....
diff --git a/home.html b/home.html
@@ -0,0 +1,95 @@
+<!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">My profile</div> 
+        <div id="container">
+            <section id="profile">
+                <div class="bg"></div>
+                <p>
+                    [내 프로필]<br>
+                    이름: 신선희<br>
+                    포지션: 백엔드<br>
+                    학과: 수학과<br>
+                    생년월일: 1999.01.14
+                </p>
+            </section>
+            <section id="MBTI">
+                <div class="bg"></div>
+                <P>
+                    [MBTI]<br>
+                    ENFP<br>
+                    재기발랄한 활동가<br>
+                </P>
+
+            </section>
+            <section id="food">
+                <div class="bg"></div>
+                <p>
+                    [좋아하는 음식]<br>
+                    맥주<br>
+                    쭈꾸미<br>
+                    유부초밥<br>
+                    해삼<br>
+                    샤브샤브<br>
+                </p>
+
+            </section>
+            <section id="movie">
+                <div class="bg"></div>
+                <p>
+                    [인생영화]<br><br><br>
+                    라라랜드
+                </p>
+            </section>
+            <section id="song">
+                <div class="bg"></div>
+                <p>
+                    [요즘 자주 듣는 노래]<br><br><br>
+                    Tai Verdes-How deep?
+                </p>
+
+            </section>
+            <section id="alcohol">
+                <div class="bg"></div>
+                <p>
+                    [좋아하는 술]<br><br><br>
+                    파우스트
+                </p>
+
+            </section>
+        </div>
+        <aside>
+            <div id="team">
+                <p><br>
+                    [디버깅조]<br>
+                    1. 정인영은 코로나에 4번 걸렸다. <br>
+                    2. 송경호가 키우는 고양이는 9kg다. <br>
+                    3. 강민석의 시력은 왼쪽 0.1 오른쪽 1.0 이다.<br>
+                </p>
+            </div>
+            <div id="hi">
+                <p>
+                   <br> 🦁🦁🦁반가워요!!!🦁🦁🦁
+                </p>
+            </div>
+        </aside>
+    </main>
+    <footer>
+        Copyright © 2023 멋쟁이사자처럼 신선희. All right Reserved.
+    </footer>
+</div>
+<div id="alert">
+    PC화면에서 접속해주세요!
+</div>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,157 @@
+@font-face {
+    font-family: 'Dovemayo_gothic';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.1/Dovemayo_gothic.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+*{
+    box-sizing: border-box;
+    margin: 0;
+    font-family: 'Dovemayo_gothic';
+}
+
+body{
+    background-color: #f8f8f8;
+}
+
+header{
+    height: 40px;
+    background-color: black;
+}
+
+main{
+    height: 600px;
+    width: 750px;
+    margin: 0 auto;
+    background-color: #f8f8f8;
+}
+
+footer{
+    height: 200px;
+    background-color: white;
+    text-align: center;
+    padding: 50px;
+    color: gray;
+    font-family:Arial, Helvetica, sans-serif
+}
+
+#top{
+    height: 35px;
+    background-color: #f0cdea;
+    margin-bottom: 25px;
+    border-radius: 0 0 10px 10px;
+    color: white;
+    font-size: 18px;
+    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{
+    height: 110px;
+
+    margin-bottom: 60px;
+    margin: 0 15px 60px 15px;
+    display: flex;
+    justify-content: space-between;
+}
+
+section{
+    height: 45%;
+    width: 30%;
+    background-color: rgb(4, 250, 135);
+    border-radius: 7px;
+    position: relative;
+    color: white;
+}
+
+section:hover{
+    transform: scale(1.4);
+    transition: all 0.2s linear;
+}
+
+section p{
+    padding: 30px;
+    text-align: center;
+    position: relative;
+}
+
+
+#MBTI{
+    background-image: url("./images/ENFP.jpg");
+    background-size: cover;
+
+}
+
+#movie{
+    background-image: url("./images/movie.jpg");
+    background-size: cover;
+
+}
+
+#song{
+    background-image: url("./images/song.jpg");
+    background-size: cover;
+
+}
+
+#alcohol{
+    background-image: url("./images/alcohol.jpg");
+    background-size: cover;
+
+}
+
+#team{
+    width:470px;
+    height:100%;
+    background-color: #31999c;
+    color: white;
+    border-radius: 5px;
+    font-size: 15px;
+    text-align: center;
+}
+
+#hi{
+    width: 230px;
+    height: 100%;
+    background-color: pink;
+    color: black;
+    border-radius: 5px;
+    font-size: 15px;
+    text-align: center;
+}
+
+.bg{
+    background-color: rgb(0,0,0,0.4);
+    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;
+    }
+}