하지만 우승은 DRX...

가 했습니다... 하지만 롤드컵에서 LCK팀이 우승했다고 생각하고 홈페이지를 만들어 볼려고 합니다.

메인베너

일단 홈페이지의 배너에 애니메이션을 넣어서 제작했습니다.

뒤에서 DRX 선수들의 매드무비가 영상이 나오게 했죠.

  <section id="hero" class="d-flex align-items-center justify-content-center">
    <div class="video-wrap">
      <video src="/Gp/video/DRX 월즈 매드무비   2022 월드 챔피언십.mp4" autoplay muted loop></video>
    </div>

video 함수를 사용하여 파일에있는 MP4영상을 가져왔습니다.
autoplay : 홈페이지에 들어오게되면 자동으로 영상이 실행되는 명령어 입니다.
muted : 영상의 소리가 나오지 않도록 하는 명령어 입니다.
loop : 영상의 시간이 무한루프로 끊기지않고 반복되는 명령어 입니다.

이것 말고도 다른 명령어들이 있었습니다.
poster : 용양이 많은 영상이 나오기전 버퍼링을 예상하여 미리 이미지를 넣어 이미지를 보여주는 명령어입니다.

정보

이런식으로 이미지를 넣고 이번에 DRX선수들이 달성한 타이틀을 적어 정리 해봤습니다.

후원사의 로고

이번 롤드컵에서는 후원사들이 정말 많았어요. 제가 좋아하는 게임이 멋진 경기가 될수있도록 만들어주신 후원사들의 로고를 보여질수있게 만들어 봤습니다.

밑에 동그란 사이드바가 왼쪽으로 자동 움직이며 넘어가게 만들어 봤어요.

CHECK OUR PORTFOLIO

이번 롤드컵에 사용된 이미지들과 우승컵 사진들을 모아봤습니다.

이렇게 마우스를 올리면 반응하게 만들어봤어요. 아직까지 들어가지는 링크나 페이지는 구현하지 못했습니다.
차츰 차츰 더 만들어 나갈꺼 같아요. 아직은 미완성이지만 열심히 노력해서 완성해 보겠습니다.