Esports Team Profile Card Using HTML & CSS

In the dynamic world of esports, we create an eye-catching Esports Team Profile Card using HTML & CSS. Unleash your creativity and coding skills to design a visually stunning banner that perfectly represents your esports team. To increase your team’s online presence a website must be needed. So, you can easily modify this code and crate your own esports card. So let’s start to create a Esports Team Profile Card Using HTML & CSS.

Key Features:

Completely responsive
Well optimized
Eye-catchy colors
Modern looks
Lightweight and quick loading.
Easily customizable

Let’s dive into the realm of modern portfolio design with our tutorial on Esports Team Profile Card Using HTML & CSS

SOURCE CODE

HTML:

HTML

div class="blog-slider__item swiper-slide">
        <div class="blog-slider__img">
          <img src="images/Team-Soul.jpg" alt="">
        </div>
        <div class="blog-slider__content">
          <span class="blog-slider__code"><b>Created :</b> 2022</span>
          <div class="blog-slider__title">Team SouL Esports</div>
          <div class="blog-slider__text">Team SouL is an Indian team that competes under the parent company S8UL
            Esports.</div>
          <a href="#" class="blog-slider__button">READ MORE</a>
        </div>
      </div>
      <div class="blog-slider__item swiper-slide">
        <div class="blog-slider__img">
          <img src="images/BLIND.png" alt="">
        </div>
        <div class="blog-slider__content">
          <span class="blog-slider__code"><b>Created :</b> 2024</span>
          <div class="blog-slider__title">Blind Esports</div>
          <div class="blog-slider__text">Blind eSports' is a Indian based Esports organization that was formed in April
            2024.</div>
          <a href="#" class="blog-slider__button">READ MORE</a>
        </div>
      </div>

CSS:

CSS

@import url("https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-color: #FFE53B;
  background-image: linear-gradient(147deg, #FFE53B 0%, #fd3838 74%);
  min-height: 100vh;
  font-family: "Fira Sans", sans-serif;
  display: flex;
}

.blog-slider {
  width: 95%;
  position: relative;
  max-width: 800px;
  margin: auto;
  background: #fff;
  box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
  padding: 25px;
  border-radius: 25px;
  height: 400px;
  transition: all 0.3s;
}
/* <!-- coded by : cybercript.in --> */

@media screen and (max-width: 992px) {
  .blog-slider {
    max-width: 680px;
    height: 400px;
  }
}

@media screen and (max-width: 768px) {
  .blog-slider {
    min-height: 500px;
    height: auto;
    margin: 180px auto;
  }
}

@media screen and (max-height: 500px) and (min-width: 992px) {
  .blog-slider {
    height: 350px;
  }
}

.blog-slider__item {
  display: flex;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .blog-slider__item {
    flex-direction: column;
  }
}

JavaScript

// <!-- coded by : cybercript.in -->

var swiper = new Swiper('.blog-slider', {
      spaceBetween: 30,
      effect: 'fade',
      loop: true,
      mousewheel: {
        invert: false,
      },
      // autoHeight: true,
      pagination: {
        el: '.blog-slider__pagination',
        clickable: true,
      }
    });

    // <!-- coded by : cybercript.in -->

Complete Portfolio Website Template Using Bootstrap

In the dynamic world of web development, a portfolio website is most important for…

DOWNLOAD COMPLETE SOURCE CODE

378 KB

Conclusion:

And there you go – Esports Team Profile Card Using HTML & CSS. You can modify the styles, extend them with new features, or use them in your projects to provide stylish visuals for the users.

Post Views: 860

Finite number of lines code and infinite possibilities

Programmer, Arpan Bera