Hugging Face's logo

Spaces:
mlmPenguin
/
portfolio
Running

App Files Community
mlmPenguin commited on
Commit
d0296f7
·
verified ·
1 Parent(s): 2a7172b

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +5 -58
index.html CHANGED
@@ -7,7 +7,7 @@
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
- <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Climate+Crisis&display=swap" rel="stylesheet>
11
  <style>
12
  .climate-crisis {
13
  font-family: 'Climate Crisis', sans-serif;
@@ -18,6 +18,7 @@
18
  background-color: #FFFFFF;
19
  }
20
  .hero-image {
 
21
  background-size: cover;
22
  background-position: center;
23
  }
@@ -50,15 +51,6 @@
50
  .portfolio-item {
51
  background-color: #F8DFDB;
52
  }
53
- #imageUpload {
54
- display: none;
55
- }
56
- .upload-btn {
57
- transition: all 0.3s ease;
58
- }
59
- .upload-btn:hover {
60
- background-color: #40140F;
61
- }
62
  </style>
63
  </head>
64
  <body class="min-h-screen flex flex-col">
@@ -70,7 +62,6 @@
70
  <a href="#" class="nav-link active text-[#40140F] font-medium">Home</a>
71
  <a href="#portfolio" class="nav-link text-[#40140F] font-medium">Portfolio</a>
72
  <a href="#contact" class="nav-link text-[#40140F] font-medium">Contact</a>
73
- <a href="#upload" class="nav-link text-[#40140F] font-medium">Upload Image</a>
74
  </div>
75
  <button class="md:hidden text-[#40140F]">
76
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -86,12 +77,11 @@
86
  <a href="#" class="block px-3 py-2 text-[#40140F] font-medium">Home</a>
87
  <a href="#portfolio" class="block px-3 py-2 text-[#40140F] font-medium">Portfolio</a>
88
  <a href="#contact" class="block px-3 py-2 text-[#40140F] font-medium">Contact</a>
89
- <a href="#upload" class="block px-3 py-2 text-[#40140F] font-medium">Upload Image</a>
90
  </div>
91
  </div>
92
 
93
  <!-- Hero Section -->
94
- <section id="hero" class="hero-image flex-grow flex items-center justify-center relative" style="background-image: url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1587&q=80')">
95
  <div class="absolute inset-0 bg-black bg-opacity-30"></div>
96
  <div class="container mx-auto text-center relative z-10 px-4">
97
  <h1 class="climate-crisis text-5xl md:text-7xl lg:text-8xl text-white mb-6">MADELEINE MULLER</h1>
@@ -99,28 +89,6 @@
99
  </div>
100
  </section>
101
 
102
- <!-- Image Upload Section -->
103
- <section id="upload" class="py-12 bg-white">
104
- <div class="container mx-auto px-4">
105
- <h2 class="climate-crisis text-4xl text-center mb-8">UPLOAD HERO IMAGE</h2>
106
- <div class="max-w-md mx-auto bg-[#F8DFDB] rounded-lg shadow-lg p-8">
107
- <div class="text-center mb-6">
108
- <p class="text-[#40140F] mb-4">Upload a custom image for your hero section</p>
109
- <input type="file" id="imageUpload" accept="image/*">
110
- <label for="imageUpload" class="upload-btn cursor-pointer bg-[#FC221C] text-white px-6 py-3 rounded-md font-medium inline-flex items-center">
111
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
112
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
113
- </svg>
114
- Choose Image
115
- </label>
116
- </div>
117
- <div class="text-center">
118
- <button id="resetImage" class="text-[#40140F] underline">Reset to default image</button>
119
- </div>
120
- </div>
121
- </div>
122
- </section>
123
-
124
  <!-- Portfolio Section -->
125
  <section id="portfolio" class="py-20 bg-white">
126
  <div class="container mx-auto px-4">
@@ -237,27 +205,6 @@
237
  });
238
  });
239
  });
240
-
241
- // Image upload functionality
242
- const imageUpload = document.getElementById('imageUpload');
243
- const heroSection = document.getElementById('hero');
244
- const resetImageBtn = document.getElementById('resetImage');
245
- const defaultImage = 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1587&q=80';
246
-
247
- imageUpload.addEventListener('change', function(e) {
248
- const file = e.target.files[0];
249
- if (file) {
250
- const reader = new FileReader();
251
- reader.onload = function(event) {
252
- heroSection.style.backgroundImage = `url(${event.target.result})`;
253
- // Store the image in localStorage
254
- localStorage.setItem('customHeroImage', event.target.result);
255
- }
256
- reader.readAsDataURL(file);
257
- }
258
- });
259
-
260
- resetImageBtn.addEventListener('click', function() {
261
- heroSection.style.backgroundImage = `url(${defaultImage})`;
262
- // Remove the stored image
263
  </html>
 
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Climate+Crisis&display=swap" rel="stylesheet">
11
  <style>
12
  .climate-crisis {
13
  font-family: 'Climate Crisis', sans-serif;
 
18
  background-color: #FFFFFF;
19
  }
20
  .hero-image {
21
+ background-image: url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1587&q=80');
22
  background-size: cover;
23
  background-position: center;
24
  }
 
51
  .portfolio-item {
52
  background-color: #F8DFDB;
53
  }
 
 
 
 
 
 
 
 
 
54
  </style>
55
  </head>
56
  <body class="min-h-screen flex flex-col">
 
62
  <a href="#" class="nav-link active text-[#40140F] font-medium">Home</a>
63
  <a href="#portfolio" class="nav-link text-[#40140F] font-medium">Portfolio</a>
64
  <a href="#contact" class="nav-link text-[#40140F] font-medium">Contact</a>
 
65
  </div>
66
  <button class="md:hidden text-[#40140F]">
67
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
77
  <a href="#" class="block px-3 py-2 text-[#40140F] font-medium">Home</a>
78
  <a href="#portfolio" class="block px-3 py-2 text-[#40140F] font-medium">Portfolio</a>
79
  <a href="#contact" class="block px-3 py-2 text-[#40140F] font-medium">Contact</a>
 
80
  </div>
81
  </div>
82
 
83
  <!-- Hero Section -->
84
+ <section class="hero-image flex-grow flex items-center justify-center relative">
85
  <div class="absolute inset-0 bg-black bg-opacity-30"></div>
86
  <div class="container mx-auto text-center relative z-10 px-4">
87
  <h1 class="climate-crisis text-5xl md:text-7xl lg:text-8xl text-white mb-6">MADELEINE MULLER</h1>
 
89
  </div>
90
  </section>
91
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
92
  <!-- Portfolio Section -->
93
  <section id="portfolio" class="py-20 bg-white">
94
  <div class="container mx-auto px-4">
 
205
  });
206
  });
207
  });
208
+ </script>
209
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=mlmPenguin/portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
210
  </html>