프론트엔드 8일차 f1드라이버

waymo·2022년 5월 3일
프론트엔드
0

패캠 FE 공부

목록 보기
8/28

8일차

어제 공부한 오버워치 캐릭터 선택 예제를 복습하기 위해
F1 드라이버들로 다시 따라 만들어봤다

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>F1 racer</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
  <link rel="stylesheet" href="./main.css">
</head>

<body>
  
  <div class="container">
    <div class="logo">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/F1.svg/320px-F1.svg.png" alt="logo">
    </div>
    <div class="racers">
      <div class="racer">
        <div class="image"></div>
      </div>
      <div class="racer">
        <div class="image"></div>
      </div>
      <div class="racer">
        <div class="image"></div>
      </div>
      <div class="racer">
        <div class="image"></div>
      </div>
      <div class="racer">
        <div class="image"></div>
      </div>
      <div class="racer">
        <div class="image"></div>
      </div>
      <div class="racer">
        <div class="image"></div>
      </div>
      <div class="racer">
        <div class="image"></div>
      </div>
      <div class="racer">
        <div class="image"></div>
      </div>
      <div class="racer">
        <div class="image"></div>
      </div>
      <div class="racer">
        <div class="image"></div>
      </div>
      <div class="racer">
        <div class="image"></div>
      </div>
      <div class="racer">
        <div class="image"></div>
      </div>
      <div class="racer">
        <div class="image"></div>
      </div>
      <div class="racer">
        <div class="image"></div>
      </div>
      <div class="racer">
        <div class="image"></div>
      </div>
      <div class="racer">
        <div class="image"></div>
      </div>
      <div class="racer">
        <div class="image"></div>
      </div>
      <div class="racer">
        <div class="image"></div>
      </div>
      <div class="racer">
        <div class="image"></div>
      </div>
    </div>
  </div>

</body>

</html>
body {
    height: 100vh;
    background-color: #15151e;
}



.container {
    padding: 50px 0;
}

.container .logo {
    max-width: 300px;
    margin: 0 auto;
    padding: 0px 20px;
}

.container .logo img {
    width: 100%;
}

.container .racers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 600px;
    margin: 0 auto;
    padding: 40px 20px;
}

.container .racers .racer {
    width: 90px;
    height: 84px;
    margin: 4px;
    border: 3px solid gray;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: white;
    transition: .5s;
    overflow: hidden;
}

.container .racers .racer:hover {
    background-color: black;
    transform: scale(1.3);
    z-index: 1;
}

.container .racers .racer .image {
    width: 140%;
    height: 100%;
    background-position: center;
    background-size: 90px;
    background-repeat: no-repeat;
    transform: translateX(-15px);
}


.container .racers .racer:nth-child(1) .image   {background-image: url("https://www.formula1.com/content/dam/fom-website/drivers/C/CHALEC01_Charles_Leclerc/chalec01.png.transform/2col/image.png");}
.container .racers .racer:nth-child(2) .image   {background-image: url("https://www.formula1.com/content/dam/fom-website/drivers/C/CARSAI01_Carlos_Sainz/carsai01.png.transform/2col/image.png");}
.container .racers .racer:nth-child(3) .image   {background-image: url("https://www.formula1.com/content/dam/fom-website/drivers/M/MAXVER01_Max_Verstappen/maxver01.png.transform/2col/image.png");}
.container .racers .racer:nth-child(4) .image   {background-image: url("https://www.formula1.com/content/dam/fom-website/drivers/S/SERPER01_Sergio_Perez/serper01.png.transform/2col/image.png");}
.container .racers .racer:nth-child(5) .image   {background-image: url("https://www.formula1.com/content/dam/fom-website/drivers/L/LEWHAM01_Lewis_Hamilton/lewham01.png.transform/2col/image.png");}
.container .racers .racer:nth-child(6) .image   {background-image: url("https://www.formula1.com/content/dam/fom-website/drivers/G/GEORUS01_George_Russell/georus01.png.transform/2col/image.png");}
.container .racers .racer:nth-child(7) .image   {background-image: url("https://www.formula1.com/content/dam/fom-website/drivers/L/LANNOR01_Lando_Norris/lannor01.png.transform/2col/image.png");}
.container .racers .racer:nth-child(8) .image   {background-image: url("https://www.formula1.com/content/dam/fom-website/drivers/D/DANRIC01_Daniel_Ricciardo/danric01.png.transform/2col/image.png");}
.container .racers .racer:nth-child(9) .image   {background-image: url("https://www.formula1.com/content/dam/fom-website/drivers/F/FERALO01_Fernando_Alonso/feralo01.png.transform/2col/image.png");}
.container .racers .racer:nth-child(10) .image   {background-image: url("https://www.formula1.com/content/dam/fom-website/drivers/E/ESTOCO01_Esteban_Ocon/estoco01.png.transform/2col/image.png");}

.container .racers .racer:nth-child(11) .image   {background-image: url("https://www.formula1.com/content/dam/fom-website/drivers/S/SEBVET01_Sebastian_Vettel/sebvet01.png.transform/2col/image.png");}
.container .racers .racer:nth-child(12) .image   {background-image: url("https://www.formula1.com/content/dam/fom-website/drivers/L/LANSTR01_Lance_Stroll/lanstr01.png.transform/2col/image.png");}
.container .racers .racer:nth-child(13) .image   {background-image: url("https://www.formula1.com/content/dam/fom-website/drivers/V/VALBOT01_Valtteri_Bottas/valbot01.png.transform/2col/image.png");}
.container .racers .racer:nth-child(14) .image   {background-image: url("https://www.formula1.com/content/dam/fom-website/drivers/G/GUAZHO01_Guanyu_Zhou/guazho01.png.transform/2col/image.png");}
.container .racers .racer:nth-child(15) .image   {background-image: url("https://www.formula1.com/content/dam/fom-website/drivers/P/PIEGAS01_Pierre_Gasly/piegas01.png.transform/2col/image.png");}
.container .racers .racer:nth-child(16) .image   {background-image: url("https://www.formula1.com/content/dam/fom-website/drivers/Y/YUKTSU01_Yuki_Tsunoda/yuktsu01.png.transform/2col/image.png");}
.container .racers .racer:nth-child(17) .image   {background-image: url("https://www.formula1.com/content/dam/fom-website/drivers/K/KEVMAG01_Kevin_Magnussen/kevmag01.png.transform/2col/image.png");}
.container .racers .racer:nth-child(18) .image   {background-image: url("https://www.formula1.com/content/dam/fom-website/drivers/M/MICSCH02_Mick_Schumacher/micsch02.png.transform/2col/image.png");}
.container .racers .racer:nth-child(19) .image   {background-image: url("https://www.formula1.com/content/dam/fom-website/drivers/A/ALEALB01_Alexander_Albon/alealb01.png.transform/2col/image.png");}
.container .racers .racer:nth-child(20) .image   {background-image: url("https://www.formula1.com/content/dam/fom-website/drivers/N/NICLAF01_Nicholas_Latifi/niclaf01.png.transform/2col/image.png");}
profile
waymo
FE 개발자(진)가 되고 싶습니다
이전 포스트

프론트엔드 공부 7일차 CSS 실습예제

다음 포스트

프론트엔드 8일차 JS

0개의 댓글