Maison > Article > interface Web > cloner Partnsta en utilisant HTML CSS JS

cloner Partnsta en utilisant HTML CSS JS

Linda Hamiltonoriginal: 2024-10-15 22:36:021046parcourir

partnsta clone using html css js

code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Instagram Frontend</title>
  <!-- Link to Font Awesome for icons -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: black;
      color: white;
      font-family: Arial, sans-serif;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
      border-bottom: 1px solid white;
    }
    .header .settings-icon, 
    .header .at-symbol {
      font-size: 24px;
    }

    .header .page-title {
      font-size: 18px;
      font-weight: bold;
      display: flex;
      align-items: center;
    }
    .header .page-title i {
      margin-left: 5px;
    }

    .imgdiv {
      display: flex;
      margin-top: 40px;
      padding: 0 20px;
    }

    .img {
        margin-top: 100px;
      height: 100px;
      width: 100px;
      border: 2px solid white;
      border-radius: 50%;
    }

    .profile-info {
      margin-left: 20px;
    }

    .profile-info h2 {
  display: flex;
  align-items: center;
  font-size: 20px;
  gap: 15px; /* This will give a 5px space between elements */
}


    .buttons {
      margin-top: 10px;
    }

    .twobuttons {
      display: flex;
      gap: 10px;
    }

    button {
      border-radius: 10px;
      width: 100%;
      background-color: #3a3939;
      color: white;
      font-size: small;
      padding: 10px;
      border: none;
      cursor: pointer;
      margin:5px;
    }

    h4 {
      margin: 10px 0;
    }

    .bio {
      padding: 0 20px;
      line-height: 1;
    }

    .bio .tags {
      margin-top: 5px;
      font-size: 14px;
    }

    .bio .more {
      color: #999;
      cursor: pointer;
    }

    .typ{
        color: #444444;
    }

  </style>
</head>
<body>
  <div class="container">

    <!-- Header Section -->
    <div class="header">
      <div class="settings-icon"><i class="fas fa-cog"></i></div>
      <div class="page-title">web_streetcode
         <i class="fas fa-chevron-down"></i></div>
      <div class="at-symbol">@</div>
    </div>

    <!-- Profile Image and Info Section -->
    <div class="imgdiv">
      <img src="./pic.jpg" alt="Profile Image" class="img">

      <div class="profile-info">
        <h2>web_streetcode <i class="fas fa-cog"></i></h2>

        <!-- Buttons -->
        <div class="buttons">
          <div class="twobuttons">
            <button>Edit Profile</button>
            <button>View Archive</button>
          </div>
          <button>Ad Tools</button>
        </div>

        <h5>3.2K accounts reached in the last 30 days.
             View Insights</h5>
      </div>
    </div>

    <!-- Bio Section -->
    <div class="bio">
      <h4>Street Coder</h4>
      <h4 class="typ">Education</h4>
      <div class="tags">
        Follow for learning of coding with fun
        <span style="color:rgb(38, 64, 120)">

            #coding #freshers #learning #codinglife #india #students #education #skills #job... <span class="more">more</span>

        </span>
      </div>
    </div>

  </div>
</body>
</html>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css html using JS

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Engagement client Microsoft Dynamics pour la transformation de l'entrepriseArticle suivant：Engagement client Microsoft Dynamics pour la transformation de l'entreprise

Articles Liés

Voir plus