Heim > Artikel > Web-Frontend > Partnsta-Klon mit HTML, CSS, JS

Partnsta-Klon mit HTML, CSS, JS

Linda HamiltonOriginal: 2024-10-15 22:36:02943Durchsuche

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>

Das obige ist der detaillierte Inhalt vonPartnsta-Klon mit HTML, CSS, JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html using JS

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Microsoft Dynamics Customer Engagement für die GeschäftstransformationNächster Artikel：Microsoft Dynamics Customer Engagement für die Geschäftstransformation

In Verbindung stehende Artikel

Mehr sehen