일본 만화 영화

프런트엔드 챌린지 - 12월 에디션, Glam Up My Markup: Winter Solstice

에 대한 제출물입니다.

내가 만든 것

CSS

*{
여백: 0;
패딩: 0;
상자 크기 조정: 테두리 상자;
글꼴 계열: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

본체{
오버플로-x:숨김 ;
}
.main-너비{
너비: 1400px;
최대 너비: 95%;
여백: 0 자동;
}
.영웅{
높이: 100%;
너비: 100%;
최소 높이: 100vh;
배경 이미지: url(Tanjiro1.png);
배경 크기: 100%;
background-repeat: 반복하지 않음;
}

.hero 헤더 .logo h2 a{
디스플레이: 블록;
글꼴 크기: 30px;
글꼴 두께: 600;
텍스트 장식: 없음;
색상: 흰색;
글꼴 계열:'Noto Sans JP', sans-serif;
}

.hero 헤더{
디스플레이: 플렉스;
항목 정렬: 중앙;
내용 정당화: 공백 사이;
패딩: 40px 0 30px;

}

nav ul li{
목록 스타일: 없음;
디스플레이: 인라인 블록;

}

nav ul li a{
텍스트 장식:없음;
색상: aliceblue;
여백 왼쪽: 80px;
글꼴 크기: 20px;
글꼴 두께: 600;
border-bottom: 2px 단색 흰색;
전환: 4초;

}

nav ul li:not(:last-child) a:hover
nav ul li:not(:last-child) a:focus{
border-bottom: 2px 단색 흰색;

}

nav ul li.active a{
border-bottom: 2px 단색 흰색;
}

nav ul li.btn a{
배경: 투명;
색상: 흰색;
테두리: 1px 단색 #f5dca8;
패딩: 9px 20px;
테두리 반경: 80px;
줄 높이: 1.4;
글꼴 크기: 18px;
글꼴 두께: 600;
여백-왼쪽: 150px;

}

nav ul li.btn:hover a{
테두리: 1px 단색 흰색;
색상: 검정색;
배경: 흰색;
전환: .4초;

}

.콘텐츠{
패딩 상단: 140px;
}

.content .main-text{
위치: 상대;
Z-색인: 2;
여백 하단: 50px;

}

.content .main-text h6{
글꼴 크기: 14px;
글꼴 두께: 400;
색상: 흰색;
여백 하단: 40px;

}

.content .main-text h1{
글꼴 크기: 60px;
줄 높이: 1;
색상: 흰색;
여백: 0px 0px 45px;
글꼴 계열: '영구 마커', 필기체;

}

.content .main-text p{
최대 너비: 100%;
너비: 480px;
색상: 흰색;
줄 높이: 1.8;
글꼴 크기: 15px;
여백-하단: 50px
}

.content .main-text a{
디스플레이: 인라인 블록;
텍스트 장식: 없음;
색상: 검정색;
배경: 흰색;
테두리: 1px 단색 흰색;
패딩: 9px 25px;
줄 높이: 1.4;
테두리 반경: 30px;
글꼴 크기: 14px;
글꼴 두께: 500;

}

.content .main-text a:hover{
변환: scale(1.2);
테두리: 1px 단색 #f5dca8;
배경: 투명;
색상: 흰색;
전환: .4초;

}

HTML

애니메이션

鬼滅の刃

• 계절
• 에피소드
• 만화
• 지금 플레이하기

최고의 애니메이션
고토게 코요하루가 글과 그림을 그린 일본 만화 시리즈입니다.

데몬 슬레이어

한 가족이 악마의 공격을 받고 단 두 명만 살아남습니다. 탄지로와 서서히 악마로 변해가는 그의 여동생 네즈코. 탄지로는 가족의 복수와 여동생의 치료를 위해 악마 사냥꾼이 되기로 결심하는데.....

지금 시청하세요

이것은 나만의 애니메이션 웹사이트로 최고의 애니메이션 버튼과 부드러운 전환을 제공합니다

Swally의 모든 권리는 나에게 있습니다

위 내용은 일본 만화 영화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!