Skip to main content

Responsive Our Team Page Design Using Html and Css Only

by Rustcode

Our Team Page Design Using Html And Css Only

"Responsive team page design using only HTML and CSS" is a smart and straightforward way to showcase your team members on your website. With HTML, you can structure the page, and CSS helps you style it beautifully. This approach ensures that your team page looks good on all devices, from desktop computers to mobile phones. By using these two web technologies, you can easily arrange team member profiles, add their names, titles, and images, and even include some hover effects to make the page interactive. This way, your website visitors can learn more about your team in an attractive and user-friendly manner without the need for complex coding or additional plugins.

For gsap animations, you can follow the gsap playlist. You can explore further articles on web development by checking out this list.

 

Table Of Contents

HTML:

Let's begin with the foundational structure of an HTML document, as depicted below.

<!DOCTYPE html>
<html>
<head>
  <title>Our Team Page Design Using Html And Css Only</title>
</head>
<body>

  // Content

</body>
</html>

 

You can easily include all the necessary links and dependencies in your HTML document by using the provided code snippet below. With the fundamental HTML structure in place and all essential dependencies properly integrated into your HTML document, you can now proceed to write the HTML code as presented below. 

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Our Team Page Design | Rustcode</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="our-team-container">

    <div class="card-container">
      <div class="image-wrapper">
        <img src="01.jpg">
      </div>
      <div class="content">
        <h1>Lady Gaga</h1>
        <h4>Senior Developer</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt et doloremt.</p>
      </div>
    </div>
       
    <div class="card-container">
      <div class="image-wrapper">
        <img src="02.jpg">
      </div>
      <div class="content">
        <h1>Selena Gomez</h1>
        <h4>Marketing Manager</h4>        
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt et dolore.</p>
      </div>
    </div>

    <div class="card-container">
      <div class="image-wrapper">
        <img src="03.jpg">
      </div>
      <div class="content">
        <h1>Katy Perry</h1>
        <h4>Frontend Developer</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt et dolore.</p>
      </div>
    </div>

    <div class="card-container">
      <div class="image-wrapper">
        <img src="04.jpg">
      </div>
      <div class="content">
        <h1>Taylor Swift</h1>
        <h4>Backend Developer</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt et dolore.</p>
      </div>
    </div>
    
  </div>

<script src="script.js"></script>
</body>
</html>

  • <div class="our-team-container">: This is a container for the team members' profiles.

  • <div class="card-container">: Each team member is represented within a "card-container" div.

  • <div class="image-wrapper">: This div wraps the team member's image.

  • <img src="01.jpg">: An image tag with the source attribute pointing to the team member's picture (01.jpg).

  • <div class="content">: This div contains the team member's information.

  • <h1>Lady Gaga</h1>: An h1 element displaying the team member's name, "Lady Gaga".

  • <h4>Senior Developer</h4>: An h4 element indicating the team member's job title, "Senior Developer".

  • <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt et doloremt.</p>: A paragraph (p) element containing a brief description(dummy description) of the team member.

  • <div class="card-container">: This represents the second team member's profile, following the same structure as the first.

  • <div class="card-container">: This is for the third team member, again following the same structure.

  • <div class="card-container">: Represents the fourth team member, using the same structure as the previous ones.

Read Also:

CSS:

@import url('https://fonts.googleapis.com/css2?family=Eczar:wght@400;500;600;700;800&display=swap');

* {
  padding: 0px;
  margin: 0px;
}

img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid black;
}

body {
  background: #181818;        
  font-family: 'Eczar', serif;  
  font-weight: 400;
  height: 100vh;
  display: grid;
  place-items: center;
}

.our-team-container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap;
  width: 90%;
  max-width: 1300px;
  margin: auto;
}

.card-container {
  background: white;
  padding: 24px 16px;
  border-radius: 8px;
  width: 250px;
  text-align: center;
  margin: auto;
  cursor: pointer;
  transition: all 0.3s;
  margin: 10px;
}

.card-container:hover {
  transform: translateY(-10px);
}

h1 {
  margin: 10px 0px 0px 0px;
  padding: 0px;
  font-size: 30px;
  font-weight: 00;
  line-height: 1.2;
}

h4 {
  margin: 0px;
  color: #353534;
  font-weight: 600;
}

p {
  margin-top: 8px;
  line-height: 1.4;
  font-weight: 500;
  color: #37444F;
}

  • Imports a Google Font called "Eczar" with various font weights (400, 500, 600, 700, 800) to be used for text on the page.

  • Sets some universal styles for all elements on the page, removing padding and margin by default.

  • Styles images to be 150x150 pixels with a circular border and a 3px black border around them.

  • Styles the overall page background to a dark color (#181818) and sets the default font to 'Eczar', a serif font with a weight of 400. It also centers the page content both vertically and horizontally.

  • Defines a container for a team section with flex properties to arrange team member cards evenly. It limits the container width to 90% of the available space but not exceeding 1300px, and centers it horizontally.

  • Styles individual team member cards with a white background, padding, rounded corners, and a width of 250px. They have a cursor pointer on hover and a slight upward movement (transform) on hover as well.

  • Defines styles for heading elements (h1, h4) and paragraphs (p) with various font sizes, weights, and colors.

Read Also:

Output:

Read Also:

Youtube Video:

We also made a youtube video for "Our Team Page Design Using Html And Css Only", if you want to watch demo you can click on below video.

Read Also:

 

Comments

Post a Comment