<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>여기서부터는 P4J1팀의 페이지입니다</title>
<link rel="stylesheet" href="./css/common.css">
</head>
<body>
<div class="page">
<div class="head">
<span style="color: white; font-size: 30px; position: relative; right: 47%; top: 2%;">P4J1</span>
<div class="mBox">
<div class="m1">내일배움캠프 5조</div>
<div class="m2"><span style="font-weight: 700;">초보들로</span> 똘똘 뭉친</div>
<div class="m3">P4J1팀을 소개합니다</div>
<div class="m4">#P4J1 #뜻 #MBTI #P #4명 #J #1명</div>
</div>
</div>
<div>
<div class="slideDiv">
<div class="yDiv"><span class="yellow"> 각오 한마디 </span></div>
<div class="slideCard">
<div><span class="slideTitle">나의 각오</span></div>
<div class="slideContent">"세상을 놀라게 할<br>준비가 되어 있습니다"</div>
<div>(5조)</div>
</div>
</div>
</div>
<div class="teamDiv">
<div class="yDiv"><span class="yellow" id="teamInfoContent"> 팀 소개 내용 </span></div>
<div class="teamInfo" style="font-size: 30px;">비전공자 <span style="color: #FF6C7A;">4명!</span><br>전공자 <span
style="color: #FF6C7A;">1명!</span></div>
<div class="teamInfoDown">
<div class="teamInfo" style="font-size: 32px;">매일 9:30 ~ 10:30 회의 진행</div>
<div class="teamInfo" style="font-size: 32px;">자리 비울 시 이야기 하기</div>
<div class="teamInfo" style="font-size: 32px;">지각 절대 금지!!</div>
</div>
</div>
<div>
<div class="linkDiv">
<div class="yDiv"><span class="yellow" id="teamMembers"> 팀원 </span></div>
<div class="memberCards">
<div class="linkCard">
<div>{image}</div>
<div>이</div>
</div>
<div class="linkCard">
<div>{image}</div>
<div>유</div>
</div>
<div class="linkCard">
<div>{image}</div>
<div>김</div>
</div>
<div class="linkCard">
<div>{image}</div>
<div>이</div>
</div>
<div class="linkCard">
<div>{image}</div>
<div>이</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
* {
text-align: center;
}
.yellow {
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
line-height: center;
height: 10px;
background-color: #FFF6A9;
font-weight: 700;
}
.yDiv {
margin: 40px auto;
}
.head {
background-image: linear-gradient(to bottom, black, rgb(60, 60, 60));
height: 800PX;
width: 100%;
}
.m1 {
color: #FF6C7A;
font-weight: 700;
font-size: 20px;
margin: 10px auto;
}
.m2 {
color: white;
display: inline-block;
padding: 5px 15px;
background-color: #FF6C7A;
border-radius: 10px;
font-size: 60px;
margin: 20px auto;
}
.m3 {
color: white;
font-size: 80px;
font-weight: 700;
}
.m4 {
color: white;
font-weight: bold;
margin-top: 200px;
margin-bottom: 10px;
}
.mBox {
position: absolute;
width: 1000px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.slideDiv {
width: 100%;
height: 800px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.slideCard {
display: block;
width: 600px;
border: 1px solid gray;
border-radius: 30px;
justify-content: start;
}
.slideTitle {
background-color: #FF6C7A;
color: white;
font-size: 30px;
}
.slideContent {
color: #FF6C7A;
font-size: 40px;
}
.teamDiv {
width: 100%;
height: 800px;
background-color: #F6F9FA;
display: flex;
font-weight: 700;
flex-direction: column;
justify-content: center;
align-items: center;
}
.teamInfo {
margin: 30px auto;
}
.teamInfoDown {
margin-top: 150px;
}
.linkDiv {
height: 800px;
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
font-weight: 700;
}
.memberCards {
width: 1200px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
background-color: antiquewhite;
}
.linkCard {
width: 200px;
height: 200px;
margin: auto;
background-color: aquamarine;
}
'완성한 코드' 카테고리의 다른 글
| 영화 팀 프로젝트 리뷰 파트 (0) | 2024.08.13 |
|---|---|
| 영화 카드 리스트 js파일*2 (0) | 2024.07.26 |
| To Do List(본 페이지/간단하게) (0) | 2024.07.12 |
| 한식 메뉴 렌더링 (0) | 2024.07.08 |
| 숫자 기억 게임 (0) | 2024.07.08 |