Πώς να δημιουργήσετε: Σελίδα "Παρουσίαση Ομάδας"

Μάθετε πώς να δημιουργήσετε μια ανα��τική σελίδα "Παρουσίαση Ομάδας" χρησιμοποιώντας το CSS.

Η σελίδα/τμήμα "Παρουσίαση Ομάδας" χρησιμοποιείται συχνά για να αναφέρεται στους εργοδότες της εταιρείας και να παρέχει συγκεκριμένες πληροφορίες επικοινωνίας:

Bill
Bill Gates

CEO & Founder

Μερικός κείμενο που περιγράφει εμένα lorem ipsum ipsum lorem.

[email protected]

Mike
Elon Musk

Διευθυντής Τέχνης

Μερικός κείμενο που περιγράφει εμένα lorem ipsum ipsum lorem.

[email protected]

John
Steve Jobs

Σχεδιαστής

Μερικός κείμενο που περιγράφει εμένα lorem ipsum ipsum lorem.

[email protected]

Δοκιμάστε το προσωπικά

Πώς να δημιουργήσετε τη σελίδα "Παρουσίαση Ομάδας"

Βήμα 1 - Προσθήκη HTML:

<div class="row">
  <div class="column">
    <div class="card">
      <img src="img1.jpg" alt="Jane" style="width:100%">
      <div class="container">
        <h2>Bill Gates</h2>
        <p class="title">CEO & Founder</p>
        <p>Κάποιο κείμενο που περιγράφει εμένα lorem ipsum ipsum lorem.</p>
        <p>[email protected]</p>
        <p><button class="button">Επικοινωνία</button></p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <img src="img2.jpg" alt="Mike" style="width:100%">
      <div class="container">
        <h2>Elon Musk</h2>
        <p class="title">Διευθυντής Τέχνης</p>
        <p>Κάποιο κείμενο που περιγράφει εμένα lorem ipsum ipsum lorem.</p>
        <p>[email protected]</p>
        <p><button class="button">Επικοινωνία</button></p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <img src="img3.jpg" alt="John" style="πλάτος:100%">
      <div class="container">
        <h2>Steve Jobs</h2>
        <p class="title">Σχεδιαστής</p>
        <p>Κάποιο κείμενο που περιγράφει εμένα lorem ipsum ipsum lorem.</p>
        <p>[email protected]</p>
        <p><button class="button">Επικοινωνία</button></p>
      </div>
    </div>
  </div>
</div>

Δεύτερη Βήμα - Προσθήκη CSS:

/* Παράλληλα τρία κολώνες */
.column {
  κατάλογος: αριστερά;
  πλάτος: 33.3%;
  απόσταση κάτω: 16px;
  πλατύτητα: 0 8px;
}
/* Στο μικρό οθόνης, εμφανίζονται οι στήλες από πάνω προς τα κάτω αντί για παράλληλα */
@media screen and (μέγιστο πλάτος: 650px) {
  .column {
    πλάτος: 100%;
    προσθήκη: block;
  }
}
/* Προσθήκη κάποιων σκιάσεων για να δημιουργηθεί το αποτέλεσμα κάρτας */
.card {
  σκιές: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
/* Μερικές αριστερά και δεξιά εσωτερικές περιθώρια στο κουτί */
.container {
  πλατύτητα: 0 16px;
}
/* Καθαρισμός αναταραχής */
.container::after, .row::after {
  περιεχόμενο: "";
  καθαρισμός: και;
  προσθήκη πίνακα: table;
}
.title {
  χρώμα: γκρι;
}
.button {
  γραμμή: δεν υπάρχει;
  καθορισμός ορίων: 0;
  προσθήκη γραμμής: inline-block;
  πλατύτητα: 8px;
  χρώμα: λευκό;
  χρώμα φόντου: #000;
  συγχρονισμός κειμένου: κέντρο;
  σφής: σπαθί;
  πλάτος: 100%;
}
.button:hover {
  background-color: #555;
}

Δοκιμάστε το προσωπικά