Skip to content
Snippets Groups Projects
Commit 51e46a40 authored by Minho Lim's avatar Minho Lim
Browse files

feat file

parent 4c76e09e
No related branches found
No related tags found
No related merge requests found
Pipeline #5866 passed
Stage: deploy
Show whitespace changes
Inline Side-by-side
public/index.html
+ 54
− 14
View file @ 51e46a40
...@@ -7,18 +7,17 @@ ...@@ -7,18 +7,17 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<!-- <div class="navbar"> <div class="navbar">
<a href="https://pages.gitlab.io/plain-html/">Plain HTML Example</a> <a href="http://snowfluppy.ajousw.kr/testhomepage" target="_blank">친구 웹페이지</a>
<a href="https://gitlab.com/pages/plain-html/">Repository</a> </div>
<a href="https://gitlab.com/pages/">Other Examples</a>
</div> -->
<div class="container"> <div class="container">
<div class="parent-container"> <div class="parent-container">
<h1 class="title">내 정보</h1> <h1 class="title">내 정보</h1>
<div class="flex flex-col">
<div class="child-container"> <div class="child-container">
<img class="cover" src="images/cover.jpg"> <img class="cover" src="images/cover.jpg">
<div class="info-box"> <div class="info-container">
<h2>이름</h2> <h2>이름</h2>
<h3>임민호</h3> <h3>임민호</h3>
<h2>학번</h2> <h2>학번</h2>
...@@ -27,6 +26,47 @@ ...@@ -27,6 +26,47 @@
<h3>소프트웨어학과</h3> <h3>소프트웨어학과</h3>
</div> </div>
</div> </div>
<div class="feature-container">
<h2>향후 할 일</h2>
<ol>
<h6><li>운전면허 합격</li></h6>
<h6><li>캡스톤디자인 앱 디자인</li></h6>
<h6><li>React-native 공부</li></h6>
</ol>
</div>
</div>
</div>
<div class="parent-container">
<h1 class="title">내가 좋아하는 가수</h1>
<div class="child2-container">
<div class="img-box">
<img class="cover" src="images/singer.jpg">
</div>
<div class="info-container">
<div class="info-box">
<h4>이름</h4>
<h5>조유리</h5>
</div>
<div class="info-box">
<h4>나이</h4>
<h5>23</h5>
</div>
<div class="info-box">
<h4>솔로 데뷔일</h4>
<h5>2021.10.07</h5>
</div>
</div>
<div class="feature-container">
<h2>특징</h4>
<ul>
<h6><li>그룹 '아이즈원'으로 활동함</li></h6>
<h6><li>그룹 '아이즈원' 활동 종료 후 솔로 데뷔함</li></h6>
<h6><li>솔로 데뷔 타이틀 곡 "GLASSY"</li></h6>
</ul>
</div>
</div>
</div> </div>
</div> </div>
......
public/style.css
+ 92
− 14
View file @ 51e46a40
...@@ -5,15 +5,19 @@ ...@@ -5,15 +5,19 @@
body { body {
font-family: sans-serif; font-family: sans-serif;
padding-top: 3rem;
margin: auto; margin: auto;
max-width: 1280px; margin-bottom: 3rem;
display: flex;
flex-direction: column;
align-items: center;
} }
/* .navbar { .navbar {
background-color: #313236; background-color: #313236;
border-radius: 2px; width: 100%;
max-width: 800px;
margin-bottom: 3rem;
text-align: center;
} }
.navbar a { .navbar a {
...@@ -26,13 +30,27 @@ body { ...@@ -26,13 +30,27 @@ body {
.navbar a:hover { .navbar a:hover {
color: #ffffff; color: #ffffff;
} */ }
.container { .container {
max-width: 1280px;
width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.flex-row {
flex-direction: row;
}
.container > .parent-container:not(:first-child) { .container > .parent-container:not(:first-child) {
margin-top: 3rem; margin-top: 3rem;
} }
...@@ -41,7 +59,7 @@ body { ...@@ -41,7 +59,7 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 1rem 3rem; padding: 1.5rem 3rem;
margin: 0 2rem; margin: 0 2rem;
border: solid 1px grey; border: solid 1px grey;
...@@ -52,22 +70,82 @@ body { ...@@ -52,22 +70,82 @@ body {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.child-container > .cover { .child-container {
height: 300px; display: flex;
flex-direction: row;
margin-bottom: 3rem;
}
.img-box {
display: flex;
justify-content: center;
}
.cover {
min-width: 200px;
min-height: 200px;
max-width: 600px;
max-height: 500px;
width: fit-content;
height: fit-content;
margin-right: 1.5rem; margin-right: 1.5rem;
object-fit: cover; object-fit: cover;
border-radius: 16px; border-radius: 16px;
} }
.child-container { .info-container {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
margin-top: 3rem;
} }
.info-box > h2 { .info-container > h2 {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.info-box > h2:not(:first-child) { .info-container > h2:not(:first-child) {
margin-top: 1.5rem; margin-top: 2rem;
}
.child2-container {
display: flex;
flex-direction: column;
text-align: center;
}
.info-box {
display: flex;
align-items: center;
}
.info-box:not(:first-child) {
margin-top: 1rem;
}
.info-box h4 {
margin-right: 1rem;
}
.feature-container {
display: flex;
flex-direction: column;
align-items: start;
text-align: left;
margin-top: 2rem;
}
.feature-container > h2 {
margin-bottom: 1rem;
background-color: antiquewhite;
font-size: 2rem;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.feature-container h6:not(:first-child) {
margin-top: 0.5rem;
} }
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

feedback to tooltime@ajou.ac.kr or hwan@ajou.ac.kr