Usefuldevtools.com
ā˜•
Ad Space - Top Banner (728x90)

Neon Cyber Profile

0 viewsadvanced
Background:
Neon Cyber Profile
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<div class="neon-cyber-profile">
  <!-- Neon Border Animation -->
  <div class="neon-border-outer"></div>
  <div class="neon-border-spinning"></div>
  
  <!-- Main Card -->
  <div class="card-container">
    <!-- Cyber Grid Background -->
    <div class="cyber-grid"></div>
    
    <!-- Scanning Line -->
    <div class="scanning-line"></div>
    
    <!-- Content -->
    <div class="card-content">
      <!-- Status -->
      <div class="status-header">
        <div class="status-indicator">
          <div class="status-dot"></div>
          <span class="status-text">ONLINE</span>
        </div>
        <div class="cyber-id">#CYB3R</div>
      </div>
      
      <!-- Profile -->
      <div class="profile-section">
        <div class="avatar-container">
          <div class="avatar">AX</div>
          <div class="avatar-ring"></div>
        </div>
        <div class="profile-info">
          <h3 class="profile-name">Alex Cypher</h3>
          <p class="profile-role">Neural Engineer</p>
          <div class="profile-location">
            <div class="location-dot"></div>
            <span class="location-text">Neo Tokyo</span>
          </div>
        </div>
      </div>
      
      <!-- Stats -->
      <div class="cyber-stats">
        <div class="stat-item">
          <div class="stat-value uploads">2.4K</div>
          <div class="stat-label">Uploads</div>
        </div>
        <div class="stat-item">
          <div class="stat-value sync">89%</div>
          <div class="stat-label">Sync Rate</div>
        </div>
        <div class="stat-item">
          <div class="stat-value access">LVL9</div>
          <div class="stat-label">Access</div>
        </div>
      </div>
      
      <!-- Skills -->
      <div class="skills-section">
        <div class="skills-title">Neural Links</div>
        <div class="skills-tags">
          <span class="skill-tag matrix">Matrix</span>
          <span class="skill-tag ai">AI Core</span>
          <span class="skill-tag quantum">Quantum</span>
        </div>
      </div>
      
      <!-- Actions -->
      <div class="action-buttons">
        <button class="btn-connect">Connect</button>
        <button class="btn-action">āš”</button>
      </div>
    </div>

    <!-- Particles -->
    <div class="floating-particles">
      <div class="particle particle-1"></div>
      <div class="particle particle-2"></div>
      <div class="particle particle-3"></div>
    </div>
  </div>
</div>
Was this helpful?