오늘은 인준님이 새롭게 디자인을 해오셨다. 고생이 정말 많으셨다.
어제 이야기했던데로 나는 메인부분을 하게 되었다.
어제 소스에 이어서 메인은 높이를 100vh로 했고 꽉차는 화면으로 했다.
아래로 스크롤부분은 css애니메이션으로 구현했다.
밑에 장점부분은 코딩하고 시간이 남아서 이 부분을 해도 되는지 물어서 해본 것이다.
배경위에 색상을 어떻게 입힐까하다가 rgba 속성이 생각나서 해보았다.
선택자도 오랜만에 자세히 쓸 수 있어서 좋았다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>새싹의 반란</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
<div id="wrap">
<header id="header" class="d-flex justify-content-center py-3 bg-success" style="display: none !important;">
<ul class="nav nav-pills">
<li class="nav-item "><a href="#" class="nav-link text-white" aria-current="page">홈으로</a></li>
<li class="nav-item"><a href="#" class="nav-link text-white">김희찬</a></li>
<li class="nav-item"><a href="#" class="nav-link text-white">여인준</a></li>
<li class="nav-item"><a href="#" class="nav-link text-white">이다원</a></li>
<li class="nav-item"><a href="#" class="nav-link text-white">진영호</a></li>
</ul>
</header>
<section id="main">
<div class="main_box">
<p class="main_img"><img src="images/Union.png"> <img src="images/Union_2.png"></p>
<h1>새싹의 반란</h1>
</div>
<div class="main_txt">
<div class="scroll_icon">
<a href="#team_info"></a>
<p class="scroll_down">아래로 스크롤 해주세요 :)</p>
<p class="scroll_down"><img src="images/mouse.png"></p>
</div>
</div>
</section>
<section id="team_info">
<p><img src="images/team_logo.png"></p>
<p class="main_tit">새싹의 반란</p>
<p class="team_info_txt">우리 ‘새싹의 반란’은 코딩 교육생으로 새싹이지만</p>
<p class="team_info_txt">새싹의 반란으로 일취월장 성장해 개발자로 취업에 성공한다는 의미를 담았어요</p>
</section>
<section id="my_point">
<h2>저의 <span>‘장점’</span> 이에요</h2>
<div class="point_big_box">
<div class="point_box">
<p class="box_gray"> </p>
<p>씩씩한!</p>
<p>꼼꼼함!</p>
<p>눈치가 빨라요!</p>
<p class="box_gray"> </p>
</div>
<div class="point_box">
<p class="box_gray"> </p>
<p>집중력!</p>
<p>낭만가득!</p>
<p>돈계산을 잘해요!</p>
<p class="box_gray"> </p>
</div>
</div>
<p class="point_txt">뭐 저의 장점은 이렇게 돼서 이러한 삶을 살아가고 있다가 코딩에 눈을 떠서 캠프를</p>
<p class="point_txt">시작하고 이러한 장점이 캠프에 도움이 되고 좋은 개발자가 되고 싶어요</p>
</section>
</body>@font-face {
font-family: 'Pretendard-Regular';
src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
* {
padding: 0;
margin: 0;
font-family: 'Pretendard-Regular';
}
a{color:inherit; text-decoration: none;}
.bg-success {
background-color: #34c88a !important;
font-size: 16px;
position: absolute;
z-index: 999999;
width: 100%;
}
#main {
width: 100%;
height: 100vh;
background: url('images/main_bg.png');
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
#main::before {
position: absolute;
content: "";
top: 0px;
left: 0px;
width: 100%;
height: 100vh;
background-color: rgba(52, 200, 138, 50%);
}
#main .main_box {
position: absolute;
color: #fff;
left: 50%;
transform: translate(-50%, 0);
top: 305px;
}
#main h1{
font-size: 8rem;
}
#main .main_img, #main .main_txt{
text-align: center;
}
#main .main_txt{
position: absolute;
color: #fff;
left: 50%;
transform: translate(-50%, 0);
bottom: 30px;
bottom: 150px;
width: 100%;
}
#main .scroll_icon {
position:absolute;
z-index:9999;
margin:0 auto;
text-align:center;
width:100%;
}
#main .scroll_down {
position: relative;
animation-name: scroll_down;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#main .scroll_icon a{
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
display: block;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0);
transition: 0.5s;}
@keyframes scroll_down {
0% {top:0px;}
50% {top:20px;}
100% {top:0px;}
}
#team_info{
text-align: center;
margin: 372px 0;
}
#team_info img{
width: 440px;padding: 40px;
border:5px solid #eee;
border-radius: 70px;
box-shadow: 0px 4px 20px #eee;
}
#team_info .main_tit{
font-size:6.25rem;
color:#34c88a
}
#team_info .team_info_txt{
font-size: 2.5rem;
color:#9a9a9a;
line-height: 47px;
}
@media all and (max-width:1200px){
#main h1{
transition: 0.5s;
font-size: 6rem;
}
#team_info .team_info_txt{
transition: 0.5s;
font-size: 2rem;
line-height: 2rem;
}
}
#my_point{
text-align: center;
margin: 372px 0;
font-weight: 700;
}
#my_point h2{
color:#9a9a9a;
font-size: 6rem;
font-weight: 700;
}
#my_point h2 span{
color:#34c88a;
}
#my_point .point_txt{
font-size:2.5rem;
color: #9a9a9a;
line-height: 47px;
}
#my_point .point_big_box{
overflow: hidden;
margin: 50px 0;
}
#my_point .point_box{
display: flex;
flex-wrap: wrap;
width: 250vw;
}
#my_point .point_box p{
font-size:74px;
background-color: #34c88a;
color:#fff;
border-radius: 78px;
padding: 32px 53px;
margin: 20px 10px;
}
#my_point .point_box .box_gray{
background-color: #eee;
}
#my_point .point_box p:first-child{
border-top-left-radius: 0;
border-bottom-left-radius:0;
margin-left:0
}
#my_point .point_box p:last-child{
border-top-right-radius: 0;
border-bottom-right-radius:0;
margin-right:0;
}
@keyframes flowToLeft {
0% {
left: 100%;
}
100% {
left: -100%; /* 원하는 이동 거리로 조절할 수 있습니다. */
}
}
@keyframes flowToLeft2 {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
#my_point2{
text-align: center;
margin: 372px 0;
overflow: hidden;
}
#my_point2 h2{
color:#9a9a9a;
font-size: 6rem;
}
#my_point2 h2 span{
color:#34c88a;
}
#my_point2 .point_txt{
font-size:2.5rem;
color: #9a9a9a;
line-height: 47px;
}
#my_point2 .point_big_box{
margin: 50px 0;
animation: flowToLeft2 10s linear infinite;
position: relative;
}
#my_point2 .point_big_box:hover {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
#my_point2 .point_box{
display: flex;
flex-wrap: wrap;
width: 250vw;
}
#my_point2 .point_box p{
font-size:74px;
background-color: #34c88a;
color:#fff;
border-radius: 78px;
padding: 32px 53px;
margin: 20px 10px;
}
#my_point2 .point_box .box_gray{
background-color: #eee;}
#cooperation{
text-align: center;
margin: 372px 0;
}
#cooperation h2{
color:#9a9a9a;
font-size: 6rem;
}
#cooperation h2 span{
color:#34c88a;
}오늘의 한줄평 : 코딩은 재밌고 즐겁다. 특히 어려웠다가 해결할때 그 쾌감은 아주 그냥 멋지다.
귀여운 걸 좋아하고 흥미가 있으면 불타오릅니다💙 최근엔 코딩이 흥미가 많아요🥰