letulip/cards.html

## cards.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- <link rel="stylesheet" href="style.css"> -->
  <title>Document</title>
  <style>
    html {
      background-color: darkgray;
    }

    .cards {
      display: flex;
      margin-top: 100px;
      counter-reset: i;
    }

    .cards__card {
      counter-increment: i;
      content: '';
      display: flex;
      width: 250px;
      height: 350px;
      border: 1px solid black;
      border-radius: 15px;
      background-color: blueviolet;
      transition: all;
      transition-duration: 0.3s;
    }

    .cards__text {
      width: 100%;
      font-size: medium;
      line-height: normal;
      font-family: 'Courier New', Courier, monospace;
      content: '' counter(i);
    }

    .cards__card:focus,
    .cards__card:active {
      /* outline: chartreuse solid 2px; */
      z-index: 2;
    }

    .cards__card:focus + .cards__card,
    .cards__card:active + .cards__card {
      /* outline: chartreuse solid 2px; */
      margin-left: 0;
    }

    .cards__card--1 {
      margin-left: calc(150px*1);
    }

    .cards__card--2 {
      margin-left: calc(-100px*1);
    }

    .cards__card--3 {
      margin-left: calc(-100px*1);
    }

    .cards__card--4 {
      margin-left: calc(-100px*1);
    }

    .cards__card--5 {
      margin-left: calc(-100px*1);
    }
  </style>
</head>
<body>
  <main class="main">
    <section class="cards">
      <article class="cards__card cards__card--1" tabindex="0">
        <p class="cards__text">

        </p>
      </article>
      <article class="cards__card cards__card--2" tabindex="0">
        <p class="cards__text">

        </p>
      </article>
      <article class="cards__card cards__card--3" tabindex="0">
        <p class="cards__text">

        </p>
      </article>
      <article class="cards__card cards__card--4" tabindex="0">
        <p class="cards__text">

        </p>
      </article>
      <article class="cards__card cards__card--5" tabindex="0">
        <p class="cards__text">

        </p>
      </article>
    </section>
  </main>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<!-- <link rel="stylesheet" href="style.css"> -->
	<title>Document</title>
	<style>
	html {
	background-color: darkgray;
	}

	.cards {
	display: flex;
	margin-top: 100px;
	counter-reset: i;
	}

	.cards__card {
	counter-increment: i;
	content: '';
	display: flex;
	width: 250px;
	height: 350px;
	border: 1px solid black;
	border-radius: 15px;
	background-color: blueviolet;
	transition: all;
	transition-duration: 0.3s;
	}

	.cards__text {
	width: 100%;
	font-size: medium;
	line-height: normal;
	font-family: 'Courier New', Courier, monospace;
	content: '' counter(i);
	}

	.cards__card:focus,
	.cards__card:active {
	/* outline: chartreuse solid 2px; */
	z-index: 2;
	}

	.cards__card:focus + .cards__card,
	.cards__card:active + .cards__card {
	/* outline: chartreuse solid 2px; */
	margin-left: 0;
	}

	.cards__card--1 {
	margin-left: calc(150px*1);
	}

	.cards__card--2 {
	margin-left: calc(-100px*1);
	}

	.cards__card--3 {
	margin-left: calc(-100px*1);
	}

	.cards__card--4 {
	margin-left: calc(-100px*1);
	}

	.cards__card--5 {
	margin-left: calc(-100px*1);
	}
	</style>
	</head>
	<body>
	<main class="main">
	<section class="cards">
	<article class="cards__card cards__card--1" tabindex="0">
	<p class="cards__text">

	</p>
	</article>
	<article class="cards__card cards__card--2" tabindex="0">
	<p class="cards__text">

	</p>
	</article>
	<article class="cards__card cards__card--3" tabindex="0">
	<p class="cards__text">

	</p>
	</article>
	<article class="cards__card cards__card--4" tabindex="0">
	<p class="cards__text">

	</p>
	</article>
	<article class="cards__card cards__card--5" tabindex="0">
	<p class="cards__text">

	</p>
	</article>
	</section>
	</main>
	</body>
	</html>