Home
code source
tutoriels

Recréer le site LinKedin avec HTML & CSS

Coding Team
Salut les lecteurs pour ce nouveau tutoriel on va essayer de créer la page d'acceuil de Linkedin avec du pur HTML & CSS. Si vous etes  pret donc allons y...


Code Source:

Tous d'abord nous allons devoir créer deux fichier l'une se nomme index.html et l'autre style.css n'oubliez pas d'associer ces deux fichier avec la fonction  <link href="/style.css" rel="stylesheet"></link>. Collez ce code sur votre page HTML.

Code HTML:


Ouvrer votre fichier HTML et collez y ce code: 

<html lang="en">
  <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" />

    <!-- Google Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <link rel="stylesheet" href="styles.css" />
    <title>Final - LinkedIn UI Clone</title>
  </head>
  <body>
    <!-- Header Starts -->
    <div class="header">
      <div class="header__left">
        <img src="https://www.flaticon.com/svg/static/icons/svg/174/174857.svg" alt="" />
        <div class="header__search">
          <i class="material-icons"> search </i>
          <input type="text" />
        </div>
      </div>

      <div class="header__right">
        <div class="headerOption">
          <i class="material-icons headerOption__icon"> home </i>
          <h3>Home</h3>
        </div>
        <div class="headerOption">
          <i class="material-icons headerOption__icon"> supervisor_account </i>
          <h3>My Network</h3>
        </div>
        <div class="headerOption">
          <i class="material-icons headerOption__icon"> business_center </i>
          <h3>Jobs</h3>
        </div>
        <div class="headerOption">
          <i class="material-icons headerOption__icon"> chat </i>
          <h3>Messaging</h3>
        </div>
        <div class="headerOption">
          <i class="material-icons headerOption__icon"> notifications </i>
          <h3>Notifications</h3>
        </div>
        <div class="headerOption">
          <i class="material-icons headerOption__icon"> account_circle </i>
          <h3>Me</h3>
        </div>
      </div>
    </div>
    <!-- Header Ends -->

    <!-- Main Body Starts -->
    <div class="body__main">
      <!-- Sidebar Starts -->
      <div class="sidebar">
        <div class="sidebar__top">
          <img src="https://images.unsplash.com/photo-1579546929518-9e396f3cc809?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxMjA3fDB8MXxhbGx8fHx8fHx8fA&ixlib=rb-1.2.1&q=80&w=1080" alt="" />
          <i class="material-icons sidebar__topAvatar"> account_circle </i>
          <h2>CodingTeam</h2>
          <h4>codingteam0@gmail.com</h4>
        </div>

        <div class="sidebar__stats">
          <div class="sidebar__stat">
            <p>Who Viewed You</p>
            <p class="sidebar__statNumber">2,453</p>
          </div>
          <div class="sidebar__stat">
            <p>Views on post</p>
            <p class="sidebar__statNumber">2,650</p>
          </div>
        </div>

        <div class="sidebar__bottom">
          <p>Recent</p>
          <div class="sidebar__recentItem">
            <span class="sidebar__hash">#</span>
            <p>reactjs</p>
          </div>
          <div class="sidebar__recentItem">
            <span class="sidebar__hash">#</span>
            <p>programming</p>
          </div>
          <div class="sidebar__recentItem">
            <span class="sidebar__hash">#</span>
            <p>softwareengineering</p>
          </div>
          <div class="sidebar__recentItem">
            <span class="sidebar__hash">#</span>
            <p>design</p>
          </div>
          <div class="sidebar__recentItem">
            <span class="sidebar__hash">#</span>
            <p>developer</p>
          </div>
        </div>
      </div>
      <!-- Sidebar Ends -->

      <!-- Feed Starts -->
      <div class="feed">
        <div class="feed__inputContainer">
          <div class="feed__input">
            <i class="material-icons"> create </i>
            <form>
              <input type="text" />
              <button type="submit">Send</button>
            </form>
          </div>

          <div class="feed__inputOptions">
            <div class="inputOption">
              <i style="color: #70b5f9" class="material-icons"> insert_photo </i>
              <h4>Photo</h4>
            </div>
            <div class="inputOption">
              <i style="color: #e7a33e" class="material-icons"> subscriptions </i>
              <h4>Video</h4>
            </div>
            <div class="inputOption">
              <i style="color: #c0cbcd" class="material-icons"> event_note </i>
              <h4>Event</h4>
            </div>
            <div class="inputOption">
              <i style="color: #7fc15e" class="material-icons"> calendar_view_day </i>
              <h4>Write Article</h4>
            </div>
          </div>
        </div>

        <!-- Post Starts -->
        <div class="post">
          <div class="post__header">
            <i class="material-icons sidebar__topAvatar"> account_circle </i>
            <div class="post__info">
              <h2>Coding Team</h2>
              <p>Job Description</p>
            </div>
          </div>

          <div class="post__body">
            <p>Message here</p>
          </div>

          <div class="feed__inputOptions">
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> thumb_up </i>
              <h4>Like</h4>
            </div>
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> comment </i>
              <h4>Comment</h4>
            </div>
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> share </i>
              <h4>Share</h4>
            </div>
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> send </i>
              <h4>Send</h4>
            </div>
          </div>
        </div>
        <!-- Post Ends -->

        <!-- Post Starts -->
        <div class="post">
          <div class="post__header">
            <i class="material-icons sidebar__topAvatar"> account_circle </i>
            <div class="post__info">
              <h2>Coding Team</h2>
              <p>Job Description</p>
            </div>
          </div>

          <div class="post__body">
            <p>Message here</p>
          </div>

          <div class="feed__inputOptions">
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> thumb_up </i>
              <h4>Like</h4>
            </div>
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> comment </i>
              <h4>Comment</h4>
            </div>
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> share </i>
              <h4>Share</h4>
            </div>
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> send </i>
              <h4>Send</h4>
            </div>
          </div>
        </div>
        <!-- Post Ends -->

        <!-- Post Starts -->
        <div class="post">
          <div class="post__header">
            <i class="material-icons sidebar__topAvatar"> account_circle </i>
            <div class="post__info">
              <h2>Coding Team</h2>
              <p>Job Description</p>
            </div>
          </div>

          <div class="post__body">
            <p>Message here</p>
          </div>

          <div class="feed__inputOptions">
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> thumb_up </i>
              <h4>Like</h4>
            </div>
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> comment </i>
              <h4>Comment</h4>
            </div>
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> share </i>
              <h4>Share</h4>
            </div>
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> send </i>
              <h4>Send</h4>
            </div>
          </div>
        </div>
        <!-- Post Ends -->

        <!-- Post Starts -->
        <div class="post">
          <div class="post__header">
            <i class="material-icons sidebar__topAvatar"> account_circle </i>
            <div class="post__info">
              <h2>Coding Team</h2>
              <p>Job Description</p>
            </div>
          </div>

          <div class="post__body">
            <p>Message here</p>
          </div>

          <div class="feed__inputOptions">
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> thumb_up </i>
              <h4>Like</h4>
            </div>
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> comment </i>
              <h4>Comment</h4>
            </div>
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> share </i>
              <h4>Share</h4>
            </div>
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> send </i>
              <h4>Send</h4>
            </div>
          </div>
        </div>
        <!-- Post Ends -->

        <!-- Post Starts -->
        <div class="post">
          <div class="post__header">
            <i class="material-icons sidebar__topAvatar"> account_circle </i>
            <div class="post__info">
              <h2>Coding Team</h2>
              <p>Job Description</p>
            </div>
          </div>

          <div class="post__body">
            <p>Message here</p>
          </div>

          <div class="feed__inputOptions">
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> thumb_up </i>
              <h4>Like</h4>
            </div>
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> comment </i>
              <h4>Comment</h4>
            </div>
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> share </i>
              <h4>Share</h4>
            </div>
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> send </i>
              <h4>Send</h4>
            </div>
          </div>
        </div>
        <!-- Post Ends -->

        <!-- Post Starts -->
        <div class="post">
          <div class="post__header">
            <i class="material-icons sidebar__topAvatar"> account_circle </i>
            <div class="post__info">
              <h2>Coding Team</h2>
              <p>Job Description</p>
            </div>
          </div>

          <div class="post__body">
            <p>Message here</p>
          </div>

          <div class="feed__inputOptions">
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> thumb_up </i>
              <h4>Like</h4>
            </div>
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> comment </i>
              <h4>Comment</h4>
            </div>
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> share </i>
              <h4>Share</h4>
            </div>
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> send </i>
              <h4>Send</h4>
            </div>
          </div>
        </div>
        <!-- Post Ends -->

        <!-- Post Starts -->
        <div class="post">
          <div class="post__header">
            <i class="material-icons sidebar__topAvatar"> account_circle </i>
            <div class="post__info">
              <h2>Mr-roober</h2>
              <p>Job Description</p>
            </div>
          </div>

          <div class="post__body">
            <p>Message here</p>
          </div>

          <div class="feed__inputOptions">
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> thumb_up </i>
              <h4>Like</h4>
            </div>
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> comment </i>
              <h4>Comment</h4>
            </div>
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> share </i>
              <h4>Share</h4>
            </div>
            <div class="inputOption">
              <i style="color: gray" class="material-icons"> send </i>
              <h4>Send</h4>
            </div>
          </div>
        </div>
        <!-- Post Ends -->
      </div>
      <!-- Feed Ends -->

      <!-- Widgets Starts -->
      <div class="widgets">
        <div class="widgets__header">
          <h2>LinkedIn Clone</h2>
          <i class="material-icons"> info </i>
        </div>
        <div class="widgets__article">
          <div class="widgets__articleLeft">
            <i class="material-icons"> fiber_manual_record </i>
          </div>
          <div class="widgets__articleRight">
            <h4>Coding LinkedIn Clone</h4>
            <p>Top news - 4500 readers</p>
          </div>
        </div>

        <div class="widgets__article">
          <div class="widgets__articleLeft">
            <i class="material-icons"> fiber_manual_record </i>
          </div>
          <div class="widgets__articleRight">
            <h4>Coding LinkedIn Clone</h4>
            <p>Top news - 4500 readers</p>
          </div>
        </div>

        <div class="widgets__article">
          <div class="widgets__articleLeft">
            <i class="material-icons"> fiber_manual_record </i>
          </div>
          <div class="widgets__articleRight">
            <h4>Coding LinkedIn Clone</h4>
            <p>Top news - 4500 readers</p>
          </div>
        </div>
      </div>

      <!-- Widgets Ends -->
    </div>
    <!-- Main Body Ends -->
  </body>
</html>

Code CSS:

Maintenant ouvrez votre fichier css et collez y ce code: 

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #f3f2ef;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header__left img {
  object-fit: contain;
  height: 40px;
  margin-right: 10px;
}

.header {
  width: 100%;
  display: flex;
  position: sticky;
  top: 0;
  z-index: 999;
  justify-content: space-evenly;
  border-bottom: 0.1px solid lightgray;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
  background-color: white;
}

.header__left {
  display: flex;
}

.header__right {
  display: flex;
}

.header__search {
  padding: 10px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  height: 22px;
  color: gray;
  background-color: #eef3f8;
}

.header__search > input {
  outline: none;
  border: none;
  background: none;
}

.headerOption {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
  color: gray;
  cursor: pointer;
}

.headerOption:hover {
  color: black;
}

.headerOption h3 {
  font-size: 12px;
  margin-top: 10px;
  font-weight: 400;
}

.headerOption__icon {
  margin-right: 5px;
  height: 20px;
  width: 20px;
}

/* Main Body */
.body__main {
  display: flex;
  margin-top: 35px;
  max-width: 1200px;
  margin-left: 20px;
  margin-right: 20px;
}
/* Sidebar */
.sidebar {
  position: sticky;
  top: 80px;
  flex: 0.2;
  border-radius: 10px;
  text-align: center;
  height: fit-content;
}

.sidebar__top > img {
  margin-bottom: -20px;
  width: 100%;
  height: 60px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  object-fit: cover;
}

.sidebar__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid lightgray;
  border-bottom: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: white;
  padding-bottom: 10px;
}

.sidebar__topAvatar {
  font-size: 40px;
}

.sidebar__stats {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid lightgray;
  background-color: white;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.sidebar__stat {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.sidebar__stat > p {
  color: gray;
  font-size: 13px;
  font-weight: 600;
}

.sidebar__statNumber {
  font-weight: bold;
  color: #0a66c2 !important;
}

.sidebar__top > h4 {
  color: gray;
  font-size: 12px;
  margin-top: 5px;
}

.sidebar__top > h2 {
  font-size: 18px;
}

.sidebar__bottom {
  text-align: left;
  padding: 10px;
  border: 1px solid lightgray;
  background-color: white;
  border-radius: 10px;
  margin-top: 10px;
}

.sidebar__recentItem {
  display: flex;
  font-size: 13px;
  color: gray;
  font-weight: bolder;
  cursor: pointer;
  margin-bottom: 5px;
  padding: 5px;
}

.sidebar__recentItem:hover {
  background-color: whitesmoke;
  border-radius: 10px;
  cursor: pointer;
  color: black;
}

.sidebar__hash {
  margin-right: 10px;
  margin-left: 10px;
}

.sidebar__bottom > p {
  font-size: 14px;
  padding-bottom: 10px;
}

/* Feed */
.feed {
  flex: 0.6;
  margin: 0 20px;
}

.feed__inputContainer {
  background-color: white;
  padding: 10px;
  padding-bottom: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.feed__input {
  border: 1px solid lightgray;
  border-radius: 30px;
  display: flex;
  padding: 10px;
  color: gray;
  padding-left: 15px;
}

.feed__input > form {
  display: flex;
  width: 100%;
}

.feed__input > form > input {
  border: none;
  flex: 1;
  margin-left: 10px;
  outline-width: 0;
  font-weight: 600;
}

.feed__input > form > button {
  display: none;
}

.feed__inputOptions {
  display: flex;
  justify-content: space-evenly;
}

.inputOption {
  display: flex;
  align-items: center;
  margin-top: 15px;
  color: gray;
  padding: 10px;
  cursor: pointer;
}

.inputOption:hover {
  background-color: whitesmoke;
  border-radius: 10px;
}

.inputOption > h4 {
  margin-left: 5px;
}

/* Post */
.post {
  background-color: white;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 10px;
}

.post__header {
  display: flex;
  margin-bottom: 10px;
}

.post__info {
  margin-left: 10px;
}

.post__info > p {
  font-size: 12px;
  color: gray;
}

.post__info > h2 {
  font-size: 15px;
}

/* widgets */
.widgets {
  position: sticky;
  top: 80px;
  flex: 0.2;
  background-color: white;
  border-radius: 10px;
  border: 1px solid lightgray;
  height: fit-content;
  padding-bottom: 10px;
}

.widgets__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

.widgets__header > h2 {
  font-size: 16px;
  font-weight: 400;
}

.widgets__article {
  display: flex;
  padding: 10px;
  cursor: pointer;
}

.widgets__article:hover {
  background-color: whitesmoke;
}

.widgets__articleLeft {
  color: #0177b7;
  margin-right: 5px;
}

.widgets__articleLeft .material-icons {
  font-size: 15px;
}

.widgets__articleRight {
  flex: 1;
}

.widgets__articleRight > h4 {
  font-size: 14px;
}

.widgets__articleRight > p {
  font-size: 12px;
  color: gray;
}

Démonstration

See the Pen LinkedIn UI by Coding™ (@Mr-roober) on CodePen.

Post a Comment

N'hésitez pas de mentionner votre nom d'utilisateur Telegram à la fin de votre message pour recevoir des cadeaux de la part des modérateurs. Merci de commenter