Hugging Face's logo

Spaces:
MidouEmail
/
biosphere-clone-hub
Running

App Files Community
MidouEmail commited on
Commit
4037316
·
verified ·
1 Parent(s): 43a792b

this page that i uploaded is generated 100% for mobile user so even its open in desktop its still have mobile layout.

Browse files

this what i want you to do with this section, and keep the background for full page, but the section i mention for edit it must be mobile only layout, 9 16 ratio or 9 19 ratio, you can choose

Files changed (1) hide show
  1. index.html +20 -20
index.html CHANGED
@@ -30,38 +30,38 @@
30
  <body class="bg-gray-900 text-white min-h-screen">
31
  <!-- Hero Section -->
32
  <div id="vanta-bg" class="min-h-screen flex items-center justify-center px-4">
33
- <div class="glass-card p-4 sm:p-6 md:p-8 max-w-2xl w-full mx-auto text-center min-h-[80vh] flex flex-col justify-center" style="aspect-ratio: 9/16; max-height: 90vh;">
34
- <div class="flex-1 flex flex-col justify-center">
35
- <div class="w-24 h-24 sm:w-32 sm:h-32 mx-auto mb-4 sm:mb-6 rounded-full overflow-hidden border-4 border-indigo-500">
36
  <img src="http://static.photos/technology/320x240/42" alt="Profile" class="w-full h-full object-cover">
37
  </div>
38
- <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-2 gradient-text">John Doe</h1>
39
- <p class="text-lg sm:text-xl text-gray-300 mb-4 sm:mb-6">Full Stack Developer & UI/UX Designer</p>
40
- <p class="text-sm sm:text-base text-gray-400 mb-6 sm:mb-8 px-2">Building digital experiences that matter. Passionate about creating clean, efficient code and beautiful interfaces.</p>
41
 
42
- <div class="flex justify-center space-x-3 sm:space-x-4 mb-6 sm:mb-8">
43
- <a href="#" class="p-2 sm:p-3 rounded-full bg-indigo-600 hover:bg-indigo-700 transition">
44
- <i data-feather="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
45
  </a>
46
- <a href="#" class="p-2 sm:p-3 rounded-full bg-blue-500 hover:bg-blue-600 transition">
47
- <i data-feather="twitter" class="w-4 h-4 sm:w-5 sm:h-5"></i>
48
  </a>
49
- <a href="#" class="p-2 sm:p-3 rounded-full bg-red-500 hover:bg-red-600 transition">
50
- <i data-feather="youtube" class="w-4 h-4 sm:w-5 sm:h-5"></i>
51
  </a>
52
- <a href="#" class="p-2 sm:p-3 rounded-full bg-blue-700 hover:bg-blue-800 transition">
53
- <i data-feather="linkedin" class="w-4 h-4 sm:w-5 sm:h-5"></i>
54
  </a>
55
  </div>
56
 
57
- <div class="flex flex-wrap justify-center gap-2 sm:gap-3">
58
- <a href="#projects" class="px-4 py-2 sm:px-6 sm:py-2 bg-indigo-600 rounded-full hover:bg-indigo-700 transition text-sm sm:text-base">Projects</a>
59
- <a href="#about" class="px-4 py-2 sm:px-6 sm:py-2 border border-indigo-500 rounded-full hover:bg-indigo-900/30 transition text-sm sm:text-base">About Me</a>
60
- <a href="#contact" class="px-4 py-2 sm:px-6 sm:py-2 border border-indigo-500 rounded-full hover:bg-indigo-900/30 transition text-sm sm:text-base">Contact</a>
61
  </div>
62
  </div>
63
  </div>
64
- </div>
65
  <!-- Scripts -->
66
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
67
  <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
 
30
  <body class="bg-gray-900 text-white min-h-screen">
31
  <!-- Hero Section -->
32
  <div id="vanta-bg" class="min-h-screen flex items-center justify-center px-4">
33
+ <div class="glass-card p-6 max-w-md w-full mx-auto text-center" style="aspect-ratio: 9/19; max-height: 95vh;">
34
+ <div class="flex flex-col justify-center h-full">
35
+ <div class="w-28 h-28 mx-auto mb-6 rounded-full overflow-hidden border-4 border-indigo-500">
36
  <img src="http://static.photos/technology/320x240/42" alt="Profile" class="w-full h-full object-cover">
37
  </div>
38
+ <h1 class="text-3xl font-bold mb-3 gradient-text">John Doe</h1>
39
+ <p class="text-xl text-gray-300 mb-4">Full Stack Developer & UI/UX Designer</p>
40
+ <p class="text-base text-gray-400 mb-8 px-2">Building digital experiences that matter. Passionate about creating clean, efficient code and beautiful interfaces.</p>
41
 
42
+ <div class="flex justify-center space-x-4 mb-8">
43
+ <a href="#" class="p-3 rounded-full bg-indigo-600 hover:bg-indigo-700 transition">
44
+ <i data-feather="github" class="w-5 h-5"></i>
45
  </a>
46
+ <a href="#" class="p-3 rounded-full bg-blue-500 hover:bg-blue-600 transition">
47
+ <i data-feather="twitter" class="w-5 h-5"></i>
48
  </a>
49
+ <a href="#" class="p-3 rounded-full bg-red-500 hover:bg-red-600 transition">
50
+ <i data-feather="youtube" class="w-5 h-5"></i>
51
  </a>
52
+ <a href="#" class="p-3 rounded-full bg-blue-700 hover:bg-blue-800 transition">
53
+ <i data-feather="linkedin" class="w-5 h-5"></i>
54
  </a>
55
  </div>
56
 
57
+ <div class="flex flex-col space-y-3">
58
+ <a href="#projects" class="px-6 py-3 bg-indigo-600 rounded-full hover:bg-indigo-700 transition text-base">Projects</a>
59
+ <a href="#about" class="px-6 py-3 border border-indigo-500 rounded-full hover:bg-indigo-900/30 transition text-base">About Me</a>
60
+ <a href="#contact" class="px-6 py-3 border border-indigo-500 rounded-full hover:bg-indigo-900/30 transition text-base">Contact</a>
61
  </div>
62
  </div>
63
  </div>
64
+ </div>
65
  <!-- Scripts -->
66
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
67
  <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>