likelionsg · ROHYUNSEO · Apr 12, 2023 · go-the-extra-mile · Apr 12, 2023 · SehwanChang
diff --git a/home.html b/home.html
@@ -0,0 +1,78 @@
+<!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>
+
+    <div id="main-container">
+        <body>
+    <header></header>
+    <main>
+        <div id="top">My profile</div>
+        <div id="container">
+            <section id="profile">
+                <p>
+                    [내 프로필]<br>
+                    <br>
+                    이름 : 노현서<br>
+                    포지션 : 백엔드<br>
+                    학과 : 물리학과<br>
+                    생년월일 : 2001.02.24<br>
+            </section>
+            <section id="mbti">
+                <p>
+                    [MBTI]<br>
+                    <br>
+                    INTJ<br>
+            </section>
+            <section>
+                <p>
+                    [좋아하는 음식]<br>
+                    <br>
+                    밥<br>
+                    고기<br>
+                    냉면<br>
+            </section>
+            <section id="movie">
+                <p>[인생영화]<br>
+                    <br>
+                    휴고<br>
+            </section>
+            <section id="music">
+                <div class="bg"></div>
+                <p>[요즘 자주 듣는 노래]<br>
+                    <br>
+                    실리카겔 - NO PAIN<br>
+            </section>
+            <section id="dog">
+                <p>[반려동물]<br>
+                    <br>
+                    (리트리버 희망)<br>
+            </section>
+        </div>
+        <aside>
+            <div id="team">
+            <br>
+             퀴즈 1. 우리 조에는 주민번호 뒷자리가 3,4로 시작하는 사람이 5명이다! (O/X)<br>
+             퀴즈 2. 보미는 전국대학생테니스대회에 나가 128강에 진출했다! (O/X)<br>
+             퀴즈 3. 기철이는 뉴질랜드에서 산 적이 있다! (O/X)<br>
+             퀴즈 4. 명준이는 고소공포증이 있지만 패러글라이딩을 해본 적이 있다! (O/X)<br>
+            </div>
+            <div id="hi">
+            <br>
+            멋쟁이사자처럼:)
+            </div>
+        </aside>
+    </main>
+    <footer>Copyright 2023 서강대학교 멋쟁이사자처럼 노현서</footer>
+    </body>
+</div>
+<div id="alert">
+    PC로 접속해주세요
+</div>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,166 @@
+@font-face {
+    font-family: 'GangwonEduPowerExtraBoldA';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduPowerExtraBoldA.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+*{
+    box-sizing: border-box;
+    margin: 0;
+    font-family: 'GangwonEduPowerExtraBoldA';
+}
+body{
+    background-color:#f8f8f8;
+}
+header{
+    height:40px;
+    background-color: #333;
+}
+main{
+        height:600px;
+        width: 750px;
+        margin: 0 auto;
+        background-color: #f8f8f8;
+}
+footer{
+    height: 30px;
+    background-color: #fdf8f8;
+    text-align: center;
+    color: #3366cc;
+    padding: 50px;
+
+}
+#top{
+    height:30px;
+    background-color: #d1e6fb;
+    margin-bottom: 25px;
+    border-radius: 0 0 10px 10px;
+    color:#333;
+    font-size: 18px;
+    text-align: center;
+    line-height: 35px;
+}
+#container{
+    height:410px;
+    padding: 10px;
+    background-color: white;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-content: space-around;
+}
+aside{
+    height: 110px;
+    background-color: #fdf8f8;
+    margin-bottom: 60px;
+    margin: 0 15px 60px 15px;
+}
+section{
+    height: 45%;
+    width: 30%;
+    background-color: rgb(185, 185, 185);
+    border-radius: 7px;
+}
+#team{
+    width: 470px;
+    height: 100%;
+    background-color: #c4d2aa;
+    color: #070303;
+    border-radius: 5px;
+    font-size: 14px;
+    float: left;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    line-height: 1.3;
+}
+#hi{
+    width:230px;
+    height:100%;
+    background-color: rgb(229, 180, 192);
+    color: black;
+    border-radius: 5px;
+    font-size: 15px;
+    float: right;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    line-height: 1.3;
+}
+section p {
+    padding: 30px;
+    text-align: center;
+    position: relative;
+}
+
+#profile:hover {
+    background-image: url("./image/blue.jpg");
+    background-size: cover;
+    height: 45%;
+    width: 30%;
+    transform: scale(1.4);
+    transition: all 0.2s linear;
+}
+
+#mbti {
+    background-image: url("./image/mbti.jpg");
+    background-size: cover;
+    height: 45%;
+    width: 30%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-start;
+}
+
+#movie {
+    background-image: url("./image/movie.jpg");
+    background-size: cover;
+    height: 45%;
+    width: 30%;
+}
+
+#dog {
+    background-image: url("./image/dog.jpg");
+    background-size: cover;
+    height: 45%;
+    width: 30%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-start;
+}
+
+#music {
+    background-image: url("./image/music.jpg");
+    background-size: cover;
+    height: 45%;
+    width: 30%;
+    position: relative;
+    color: black;
+}
+
+.bg{
+    background-color: hwb(0 78% 22% / 0.438);
+    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;
+    }
+}