Hugging Face's logo

Spaces:
Henoxzf
/
pixelpulse-creative-studio
Running

App Files Community
Henoxzf commited on
Commit
a611752
·
verified ·
1 Parent(s): e27d2b4

https://www.agenciaapice.com.br/?gad_source=1&gad_campaignid=21338464236&gbraid=0AAAAADkHO4Odk9eeFVcEuVRS8THb1CelP&gclid=Cj0KCQiAvtzLBhCPARIsALwhxdqVIjfFgsjUUDMu9uBD7zHaAZTX6U4M3y9PFln2FTmkvTHheedaeE4aAiVZEALw_wcB

Browse files
Files changed (11) hide show
  1. README.md +8 -5
  2. components/cta.js +63 -0
  3. components/footer.js +140 -0
  4. components/hero.js +81 -0
  5. components/navbar.js +105 -0
  6. components/portfolio.js +138 -0
  7. components/services.js +127 -0
  8. components/testimonials.js +129 -0
  9. index.html +34 -19
  10. script.js +52 -0
  11. style.css +56 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Pixelpulse Creative Studio
3
- emoji: 👁
4
- colorFrom: pink
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: PixelPulse Creative Studio ✨
3
+ colorFrom: green
4
+ colorTo: yellow
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/cta.js ADDED
@@ -0,0 +1,63 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomCta extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ padding: 6rem 0;
9
+ background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
10
+ color: white;
11
+ }
12
+ .container {
13
+ max-width: 1200px;
14
+ margin: 0 auto;
15
+ padding: 0 2rem;
16
+ text-align: center;
17
+ }
18
+ .cta-content {
19
+ max-width: 700px;
20
+ margin: 0 auto;
21
+ }
22
+ .cta-title {
23
+ font-size: 2.5rem;
24
+ font-weight: 700;
25
+ margin-bottom: 1.5rem;
26
+ line-height: 1.2;
27
+ }
28
+ .cta-text {
29
+ font-size: 1.125rem;
30
+ margin-bottom: 2rem;
31
+ opacity: 0.9;
32
+ line-height: 1.6;
33
+ }
34
+ .cta-button {
35
+ display: inline-block;
36
+ background-color: white;
37
+ color: var(--primary);
38
+ padding: 1rem 2.5rem;
39
+ border-radius: 0.5rem;
40
+ font-weight: 600;
41
+ transition: transform 0.3s, box-shadow 0.3s;
42
+ }
43
+ .cta-button:hover {
44
+ transform: translateY(-3px);
45
+ box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
46
+ }
47
+ @media (max-width: 768px) {
48
+ .cta-title {
49
+ font-size: 2rem;
50
+ }
51
+ }
52
+ </style>
53
+ <div class="container" id="contact">
54
+ <div class="cta-content observe-me">
55
+ <h2 class="cta-title">Ready to elevate your digital presence?</h2>
56
+ <p class="cta-text">Let's discuss how we can help you achieve your business goals with a custom digital solution tailored to your needs.</p>
57
+ <a href="#contact" class="cta-button">Get in Touch</a>
58
+ </div>
59
+ </div>
60
+ `;
61
+ }
62
+ }
63
+ customElements.define('custom-cta', CustomCta);
components/footer.js ADDED
@@ -0,0 +1,140 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ background-color: #111827;
9
+ color: #9ca3af;
10
+ padding: 4rem 0 2rem;
11
+ }
12
+ .container {
13
+ max-width: 1200px;
14
+ margin: 0 auto;
15
+ padding: 0 2rem;
16
+ }
17
+ .footer-content {
18
+ display: grid;
19
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
20
+ gap: 3rem;
21
+ margin-bottom: 3rem;
22
+ }
23
+ .footer-logo {
24
+ font-size: 1.5rem;
25
+ font-weight: 700;
26
+ color: white;
27
+ margin-bottom: 1rem;
28
+ display: inline-block;
29
+ }
30
+ .footer-about {
31
+ max-width: 300px;
32
+ }
33
+ .footer-about-text {
34
+ margin-bottom: 1.5rem;
35
+ line-height: 1.6;
36
+ }
37
+ .footer-social {
38
+ display: flex;
39
+ gap: 1rem;
40
+ }
41
+ .social-link {
42
+ width: 2.5rem;
43
+ height: 2.5rem;
44
+ border-radius: 50%;
45
+ background-color: #1f2937;
46
+ display: flex;
47
+ align-items: center;
48
+ justify-content: center;
49
+ transition: background-color 0.3s;
50
+ }
51
+ .social-link:hover {
52
+ background-color: var(--primary);
53
+ }
54
+ .footer-title {
55
+ color: white;
56
+ font-weight: 600;
57
+ margin-bottom: 1.5rem;
58
+ font-size: 1.125rem;
59
+ }
60
+ .footer-links {
61
+ display: flex;
62
+ flex-direction: column;
63
+ gap: 0.75rem;
64
+ }
65
+ .footer-link {
66
+ transition: color 0.3s;
67
+ }
68
+ .footer-link:hover {
69
+ color: white;
70
+ }
71
+ .footer-bottom {
72
+ border-top: 1px solid #1f2937;
73
+ padding-top: 2rem;
74
+ text-align: center;
75
+ }
76
+ .copyright {
77
+ font-size: 0.875rem;
78
+ }
79
+ </style>
80
+ <div class="container">
81
+ <div class="footer-content">
82
+ <div class="footer-about">
83
+ <a href="#" class="footer-logo gradient-text">PixelPulse</a>
84
+ <p class="footer-about-text">We're a creative digital studio focused on building beautiful, functional websites and applications that help businesses grow.</p>
85
+ <div class="footer-social">
86
+ <a href="#" class="social-link">
87
+ <i data-feather="facebook"></i>
88
+ </a>
89
+ <a href="#" class="social-link">
90
+ <i data-feather="twitter"></i>
91
+ </a>
92
+ <a href="#" class="social-link">
93
+ <i data-feather="instagram"></i>
94
+ </a>
95
+ <a href="#" class="social-link">
96
+ <i data-feather="linkedin"></i>
97
+ </a>
98
+ </div>
99
+ </div>
100
+
101
+ <div>
102
+ <h3 class="footer-title">Services</h3>
103
+ <div class="footer-links">
104
+ <a href="#" class="footer-link">Web Design</a>
105
+ <a href="#" class="footer-link">Web Development</a>
106
+ <a href="#" class="footer-link">Mobile Apps</a>
107
+ <a href="#" class="footer-link">E-commerce</a>
108
+ <a href="#" class="footer-link">SEO</a>
109
+ </div>
110
+ </div>
111
+
112
+ <div>
113
+ <h3 class="footer-title">Company</h3>
114
+ <div class="footer-links">
115
+ <a href="#" class="footer-link">About Us</a>
116
+ <a href="#" class="footer-link">Portfolio</a>
117
+ <a href="#" class="footer-link">Testimonials</a>
118
+ <a href="#" class="footer-link">Careers</a>
119
+ <a href="#" class="footer-link">Contact</a>
120
+ </div>
121
+ </div>
122
+
123
+ <div>
124
+ <h3 class="footer-title">Contact</h3>
125
+ <div class="footer-links">
126
+ <a href="#" class="footer-link">hello@pixelpulse.studio</a>
127
+ <a href="#" class="footer-link">+1 (555) 123-4567</a>
128
+ <a href="#" class="footer-link">123 Design Street<br>Creative City, CA 90210</a>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <div class="footer-bottom">
134
+ <p class="copyright">© 2023 PixelPulse Creative Studio. All rights reserved.</p>
135
+ </div>
136
+ </div>
137
+ `;
138
+ }
139
+ }
140
+ customElements.define('custom-footer', CustomFooter);
components/hero.js ADDED
@@ -0,0 +1,81 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomHero extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ padding-top: 6rem;
9
+ padding-bottom: 6rem;
10
+ background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
11
+ }
12
+ .container {
13
+ max-width: 1200px;
14
+ margin: 0 auto;
15
+ padding: 0 2rem;
16
+ display: grid;
17
+ grid-template-columns: 1fr 1fr;
18
+ gap: 4rem;
19
+ align-items: center;
20
+ }
21
+ .content {
22
+ display: flex;
23
+ flex-direction: column;
24
+ gap: 1.5rem;
25
+ }
26
+ .title {
27
+ font-size: 3.5rem;
28
+ font-weight: 800;
29
+ line-height: 1.2;
30
+ color: #1f2937;
31
+ }
32
+ .subtitle {
33
+ font-size: 1.25rem;
34
+ color: #4b5563;
35
+ line-height: 1.6;
36
+ }
37
+ .buttons {
38
+ display: flex;
39
+ gap: 1rem;
40
+ }
41
+ .image-container {
42
+ position: relative;
43
+ border-radius: 1rem;
44
+ overflow: hidden;
45
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
46
+ }
47
+ .image-container img {
48
+ width: 100%;
49
+ height: auto;
50
+ display: block;
51
+ }
52
+ @media (max-width: 768px) {
53
+ .container {
54
+ grid-template-columns: 1fr;
55
+ gap: 2rem;
56
+ }
57
+ .title {
58
+ font-size: 2.5rem;
59
+ }
60
+ .buttons {
61
+ flex-direction: column;
62
+ }
63
+ }
64
+ </style>
65
+ <div class="container">
66
+ <div class="content observe-me">
67
+ <h1 class="title">We craft <span class="gradient-text">digital experiences</span> that matter</h1>
68
+ <p class="subtitle">PixelPulse is a creative studio focused on building beautiful, functional websites and applications that help businesses grow.</p>
69
+ <div class="buttons">
70
+ <a href="#contact" class="px-6 py-3 rounded-lg btn-primary text-white font-medium">Get Started</a>
71
+ <a href="#portfolio" class="px-6 py-3 rounded-lg btn-secondary text-white font-medium">View Work</a>
72
+ </div>
73
+ </div>
74
+ <div class="image-container observe-me delay-100">
75
+ <img src="http://static.photos/technology/1024x576/1" alt="Digital creative work">
76
+ </div>
77
+ </div>
78
+ `;
79
+ }
80
+ }
81
+ customElements.define('custom-hero', CustomHero);
components/navbar.js ADDED
@@ -0,0 +1,105 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ position: fixed;
9
+ top: 0;
10
+ left: 0;
11
+ right: 0;
12
+ z-index: 50;
13
+ background-color: rgba(255, 255, 255, 0.95);
14
+ backdrop-filter: blur(10px);
15
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
16
+ }
17
+ .container {
18
+ max-width: 1200px;
19
+ margin: 0 auto;
20
+ padding: 1rem 2rem;
21
+ display: flex;
22
+ justify-content: space-between;
23
+ align-items: center;
24
+ }
25
+ .logo {
26
+ font-weight: 700;
27
+ font-size: 1.5rem;
28
+ color: var(--primary);
29
+ display: flex;
30
+ align-items: center;
31
+ gap: 0.5rem;
32
+ }
33
+ .nav-links {
34
+ display: flex;
35
+ gap: 2rem;
36
+ }
37
+ .nav-link {
38
+ font-weight: 500;
39
+ color: #4b5563;
40
+ transition: color 0.2s;
41
+ }
42
+ .nav-link:hover {
43
+ color: var(--primary);
44
+ }
45
+ .mobile-menu-button {
46
+ display: none;
47
+ }
48
+ .mobile-menu {
49
+ display: none;
50
+ }
51
+ @media (max-width: 768px) {
52
+ .nav-links {
53
+ display: none;
54
+ }
55
+ .mobile-menu-button {
56
+ display: block;
57
+ }
58
+ .mobile-menu {
59
+ position: absolute;
60
+ top: 100%;
61
+ left: 0;
62
+ right: 0;
63
+ background-color: white;
64
+ padding: 1rem;
65
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
66
+ }
67
+ .mobile-menu.active {
68
+ display: block;
69
+ }
70
+ .mobile-links {
71
+ display: flex;
72
+ flex-direction: column;
73
+ gap: 1rem;
74
+ }
75
+ }
76
+ </style>
77
+ <div class="container">
78
+ <a href="#" class="logo">
79
+ <span class="gradient-text">PixelPulse</span>
80
+ </a>
81
+
82
+ <div class="nav-links">
83
+ <a href="#services" class="nav-link">Services</a>
84
+ <a href="#portfolio" class="nav-link">Portfolio</a>
85
+ <a href="#testimonials" class="nav-link">Testimonials</a>
86
+ <a href="#contact" class="nav-link">Contact</a>
87
+ </div>
88
+
89
+ <button class="mobile-menu-button" data-menu-toggle>
90
+ <i data-feather="menu"></i>
91
+ </button>
92
+
93
+ <div class="mobile-menu hidden" data-menu>
94
+ <div class="mobile-links">
95
+ <a href="#services" class="nav-link">Services</a>
96
+ <a href="#portfolio" class="nav-link">Portfolio</a>
97
+ <a href="#testimonials" class="nav-link">Testimonials</a>
98
+ <a href="#contact" class="nav-link">Contact</a>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ `;
103
+ }
104
+ }
105
+ customElements.define('custom-navbar', CustomNavbar);
components/portfolio.js ADDED
@@ -0,0 +1,138 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomPortfolio extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ padding: 6rem 0;
9
+ background-color: #f9fafb;
10
+ }
11
+ .container {
12
+ max-width: 1200px;
13
+ margin: 0 auto;
14
+ padding: 0 2rem;
15
+ }
16
+ .header {
17
+ text-align: center;
18
+ margin-bottom: 4rem;
19
+ }
20
+ .section-title {
21
+ font-size: 2.25rem;
22
+ font-weight: 700;
23
+ color: #1f2937;
24
+ margin-bottom: 1rem;
25
+ }
26
+ .section-subtitle {
27
+ color: #6b7280;
28
+ max-width: 600px;
29
+ margin: 0 auto;
30
+ }
31
+ .portfolio-grid {
32
+ display: grid;
33
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
34
+ gap: 2rem;
35
+ }
36
+ .portfolio-item {
37
+ position: relative;
38
+ border-radius: 0.5rem;
39
+ overflow: hidden;
40
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
41
+ }
42
+ .portfolio-image {
43
+ width: 100%;
44
+ height: 250px;
45
+ object-fit: cover;
46
+ display: block;
47
+ }
48
+ .portfolio-overlay {
49
+ position: absolute;
50
+ bottom: 0;
51
+ left: 0;
52
+ right: 0;
53
+ background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
54
+ padding: 1.5rem;
55
+ color: white;
56
+ transform: translateY(100%);
57
+ transition: transform 0.3s;
58
+ }
59
+ .portfolio-item:hover .portfolio-overlay {
60
+ transform: translateY(0);
61
+ }
62
+ .portfolio-title {
63
+ font-weight: 600;
64
+ margin-bottom: 0.5rem;
65
+ }
66
+ .portfolio-category {
67
+ font-size: 0.875rem;
68
+ opacity: 0.9;
69
+ }
70
+ .view-all {
71
+ text-align: center;
72
+ margin-top: 3rem;
73
+ }
74
+ </style>
75
+ <div class="container" id="portfolio">
76
+ <div class="header observe-me">
77
+ <h2 class="section-title">Our <span class="gradient-text">Portfolio</span></h2>
78
+ <p class="section-subtitle">Explore some of our recent projects and see the quality of our work.</p>
79
+ </div>
80
+
81
+ <div class="portfolio-grid">
82
+ <div class="portfolio-item observe-me delay-100">
83
+ <img src="http://static.photos/technology/640x360/1" alt="E-commerce Website" class="portfolio-image">
84
+ <div class="portfolio-overlay">
85
+ <h3 class="portfolio-title">Modern E-commerce Platform</h3>
86
+ <p class="portfolio-category">Web Development • E-commerce</p>
87
+ </div>
88
+ </div>
89
+
90
+ <div class="portfolio-item observe-me delay-200">
91
+ <img src="http://static.photos/technology/640x360/2" alt="Mobile App" class="portfolio-image">
92
+ <div class="portfolio-overlay">
93
+ <h3 class="portfolio-title">Fitness Tracking App</h3>
94
+ <p class="portfolio-category">Mobile App • Health Tech</p>
95
+ </div>
96
+ </div>
97
+
98
+ <div class="portfolio-item observe-me delay-300">
99
+ <img src="http://static.photos/technology/640x360/3" alt="Corporate Website" class="portfolio-image">
100
+ <div class="portfolio-overlay">
101
+ <h3 class="portfolio-title">Corporate Website Redesign</h3>
102
+ <p class="portfolio-category">Web Design • Branding</p>
103
+ </div>
104
+ </div>
105
+
106
+ <div class="portfolio-item observe-me delay-100">
107
+ <img src="http://static.photos/technology/640x360/4" alt="Dashboard UI" class="portfolio-image">
108
+ <div class="portfolio-overlay">
109
+ <h3 class="portfolio-title">Analytics Dashboard</h3>
110
+ <p class="portfolio-category">UI/UX Design • Web App</p>
111
+ </div>
112
+ </div>
113
+
114
+ <div class="portfolio-item observe-me delay-200">
115
+ <img src="http://static.photos/technology/640x360/5" alt="Restaurant Website" class="portfolio-image">
116
+ <div class="portfolio-overlay">
117
+ <h3 class="portfolio-title">Restaurant Booking System</h3>
118
+ <p class="portfolio-category">Web Development • Hospitality</p>
119
+ </div>
120
+ </div>
121
+
122
+ <div class="portfolio-item observe-me delay-300">
123
+ <img src="http://static.photos/technology/640x360/6" alt="Landing Page" class="portfolio-image">
124
+ <div class="portfolio-overlay">
125
+ <h3 class="portfolio-title">SaaS Product Landing Page</h3>
126
+ <p class="portfolio-category">Web Design • Conversion</p>
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <div class="view-all observe-me">
132
+ <a href="#" class="px-6 py-3 rounded-lg btn-primary text-white font-medium inline-block">View All Projects</a>
133
+ </div>
134
+ </div>
135
+ `;
136
+ }
137
+ }
138
+ customElements.define('custom-portfolio', CustomPortfolio);
components/services.js ADDED
@@ -0,0 +1,127 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomServices extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ padding: 6rem 0;
9
+ background-color: white;
10
+ }
11
+ .container {
12
+ max-width: 1200px;
13
+ margin: 0 auto;
14
+ padding: 0 2rem;
15
+ }
16
+ .header {
17
+ text-align: center;
18
+ margin-bottom: 4rem;
19
+ }
20
+ .section-title {
21
+ font-size: 2.25rem;
22
+ font-weight: 700;
23
+ color: #1f2937;
24
+ margin-bottom: 1rem;
25
+ }
26
+ .section-subtitle {
27
+ color: #6b7280;
28
+ max-width: 600px;
29
+ margin: 0 auto;
30
+ }
31
+ .services-grid {
32
+ display: grid;
33
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
34
+ gap: 2rem;
35
+ }
36
+ .service-card {
37
+ background-color: #f9fafb;
38
+ border-radius: 0.5rem;
39
+ padding: 2rem;
40
+ transition: transform 0.3s, box-shadow 0.3s;
41
+ }
42
+ .service-card:hover {
43
+ transform: translateY(-5px);
44
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
45
+ }
46
+ .service-icon {
47
+ width: 3rem;
48
+ height: 3rem;
49
+ display: flex;
50
+ align-items: center;
51
+ justify-content: center;
52
+ background-color: var(--primary-light);
53
+ color: white;
54
+ border-radius: 0.5rem;
55
+ margin-bottom: 1.5rem;
56
+ }
57
+ .service-title {
58
+ font-size: 1.25rem;
59
+ font-weight: 600;
60
+ margin-bottom: 1rem;
61
+ color: #1f2937;
62
+ }
63
+ .service-description {
64
+ color: #6b7280;
65
+ line-height: 1.6;
66
+ }
67
+ </style>
68
+ <div class="container" id="services">
69
+ <div class="header observe-me">
70
+ <h2 class="section-title">Our <span class="gradient-text">Services</span></h2>
71
+ <p class="section-subtitle">We offer a comprehensive suite of digital services to help your business thrive online.</p>
72
+ </div>
73
+
74
+ <div class="services-grid">
75
+ <div class="service-card observe-me delay-100">
76
+ <div class="service-icon">
77
+ <i data-feather="layout"></i>
78
+ </div>
79
+ <h3 class="service-title">Web Design</h3>
80
+ <p class="service-description">Beautiful, responsive websites tailored to your brand and audience with modern design principles.</p>
81
+ </div>
82
+
83
+ <div class="service-card observe-me delay-200">
84
+ <div class="service-icon">
85
+ <i data-feather="code"></i>
86
+ </div>
87
+ <h3 class="service-title">Web Development</h3>
88
+ <p class="service-description">Custom web applications built with the latest technologies for performance and scalability.</p>
89
+ </div>
90
+
91
+ <div class="service-card observe-me delay-300">
92
+ <div class="service-icon">
93
+ <i data-feather="smartphone"></i>
94
+ </div>
95
+ <h3 class="service-title">Mobile Apps</h3>
96
+ <p class="service-description">Cross-platform mobile applications that deliver seamless user experiences on any device.</p>
97
+ </div>
98
+
99
+ <div class="service-card observe-me delay-100">
100
+ <div class="service-icon">
101
+ <i data-feather="shopping-cart"></i>
102
+ </div>
103
+ <h3 class="service-title">E-commerce</h3>
104
+ <p class="service-description">Complete online store solutions with secure payment processing and inventory management.</p>
105
+ </div>
106
+
107
+ <div class="service-card observe-me delay-200">
108
+ <div class="service-icon">
109
+ <i data-feather="search"></i>
110
+ </div>
111
+ <h3 class="service-title">SEO Optimization</h3>
112
+ <p class="service-description">Improve your search rankings and drive organic traffic with our proven SEO strategies.</p>
113
+ </div>
114
+
115
+ <div class="service-card observe-me delay-300">
116
+ <div class="service-icon">
117
+ <i data-feather="bar-chart-2"></i>
118
+ </div>
119
+ <h3 class="service-title">Digital Marketing</h3>
120
+ <p class="service-description">Targeted campaigns across social media and search platforms to grow your audience.</p>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ `;
125
+ }
126
+ }
127
+ customElements.define('custom-services', CustomServices);
components/testimonials.js ADDED
@@ -0,0 +1,129 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomTestimonials extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ padding: 6rem 0;
9
+ background-color: white;
10
+ }
11
+ .container {
12
+ max-width: 1200px;
13
+ margin: 0 auto;
14
+ padding: 0 2rem;
15
+ }
16
+ .header {
17
+ text-align: center;
18
+ margin-bottom: 4rem;
19
+ }
20
+ .section-title {
21
+ font-size: 2.25rem;
22
+ font-weight: 700;
23
+ color: #1f2937;
24
+ margin-bottom: 1rem;
25
+ }
26
+ .section-subtitle {
27
+ color: #6b7280;
28
+ max-width: 600px;
29
+ margin: 0 auto;
30
+ }
31
+ .testimonials-grid {
32
+ display: grid;
33
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
34
+ gap: 2rem;
35
+ }
36
+ .testimonial-card {
37
+ background-color: #f9fafb;
38
+ border-radius: 0.5rem;
39
+ padding: 2rem;
40
+ position: relative;
41
+ }
42
+ .testimonial-quote {
43
+ position: absolute;
44
+ top: 1.5rem;
45
+ left: 1.5rem;
46
+ opacity: 0.1;
47
+ font-size: 3rem;
48
+ line-height: 1;
49
+ color: var(--primary);
50
+ }
51
+ .testimonial-content {
52
+ margin-top: 2rem;
53
+ margin-bottom: 1.5rem;
54
+ color: #4b5563;
55
+ line-height: 1.6;
56
+ font-style: italic;
57
+ }
58
+ .testimonial-author {
59
+ display: flex;
60
+ align-items: center;
61
+ gap: 1rem;
62
+ }
63
+ .author-avatar {
64
+ width: 3rem;
65
+ height: 3rem;
66
+ border-radius: 50%;
67
+ object-fit: cover;
68
+ }
69
+ .author-info {
70
+ display: flex;
71
+ flex-direction: column;
72
+ }
73
+ .author-name {
74
+ font-weight: 600;
75
+ color: #1f2937;
76
+ }
77
+ .author-title {
78
+ font-size: 0.875rem;
79
+ color: #6b7280;
80
+ }
81
+ </style>
82
+ <div class="container" id="testimonials">
83
+ <div class="header observe-me">
84
+ <h2 class="section-title">Client <span class="gradient-text">Testimonials</span></h2>
85
+ <p class="section-subtitle">Don't just take our word for it. Here's what our clients have to say about working with us.</p>
86
+ </div>
87
+
88
+ <div class="testimonials-grid">
89
+ <div class="testimonial-card observe-me delay-100">
90
+ <div class="testimonial-quote">"</div>
91
+ <p class="testimonial-content">Working with PixelPulse was a game-changer for our business. Their web design expertise helped us triple our online conversions in just three months.</p>
92
+ <div class="testimonial-author">
93
+ <img src="http://static.photos/people/200x200/1" alt="Sarah Johnson" class="author-avatar">
94
+ <div class="author-info">
95
+ <span class="author-name">Sarah Johnson</span>
96
+ <span class="author-title">CEO, TechStart Inc.</span>
97
+ </div>
98
+ </div>
99
+ </div>
100
+
101
+ <div class="testimonial-card observe-me delay-200">
102
+ <div class="testimonial-quote">"</div>
103
+ <p class="testimonial-content">The mobile app they developed for us exceeded all expectations. The user experience is flawless, and our customer engagement has never been higher.</p>
104
+ <div class="testimonial-author">
105
+ <img src="http://static.photos/people/200x200/2" alt="Michael Chen" class="author-avatar">
106
+ <div class="author-info">
107
+ <span class="author-name">Michael Chen</span>
108
+ <span class="author-title">Founder, FitTrack</span>
109
+ </div>
110
+ </div>
111
+ </div>
112
+
113
+ <div class="testimonial-card observe-me delay-300">
114
+ <div class="testimonial-quote">"</div>
115
+ <p class="testimonial-content">Their attention to detail and creative approach transformed our outdated website into a modern, high-performing digital asset that truly represents our brand.</p>
116
+ <div class="testimonial-author">
117
+ <img src="http://static.photos/people/200x200/3" alt="Emily Rodriguez" class="author-avatar">
118
+ <div class="author-info">
119
+ <span class="author-name">Emily Rodriguez</span>
120
+ <span class="author-title">Marketing Director, LuxeLiving</span>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ `;
127
+ }
128
+ }
129
+ customElements.define('custom-testimonials', CustomTestimonials);
index.html CHANGED
@@ -1,19 +1,34 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>PixelPulse | Creative Digital Studio</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="components/navbar.js"></script>
12
+ <script src="components/hero.js"></script>
13
+ <script src="components/services.js"></script>
14
+ <script src="components/portfolio.js"></script>
15
+ <script src="components/testimonials.js"></script>
16
+ <script src="components/cta.js"></script>
17
+ <script src="components/footer.js"></script>
18
+ </head>
19
+ <body class="bg-gray-50 text-gray-800 font-sans">
20
+ <custom-navbar></custom-navbar>
21
+ <custom-hero></custom-hero>
22
+ <custom-services></custom-services>
23
+ <custom-portfolio></custom-portfolio>
24
+ <custom-testimonials></custom-testimonials>
25
+ <custom-cta></custom-cta>
26
+ <custom-footer></custom-footer>
27
+
28
+ <script src="script.js"></script>
29
+ <script>
30
+ feather.replace();
31
+ </script>
32
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
33
+ </body>
34
+ </html>
script.js ADDED
@@ -0,0 +1,52 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', () => {
2
+ // Initialize animations
3
+ const animatedElements = document.querySelectorAll('.animate-fade-in');
4
+ animatedElements.forEach((el, index) => {
5
+ el.style.opacity = '0';
6
+ el.style.animationDelay = `${index * 0.1}s`;
7
+ });
8
+
9
+ // Mobile menu toggle
10
+ const mobileMenuButton = document.querySelector('[data-menu-toggle]');
11
+ const mobileMenu = document.querySelector('[data-menu]');
12
+
13
+ if (mobileMenuButton && mobileMenu) {
14
+ mobileMenuButton.addEventListener('click', () => {
15
+ mobileMenu.classList.toggle('hidden');
16
+ mobileMenuButton.querySelector('svg').setAttribute('data-feather',
17
+ mobileMenu.classList.contains('hidden') ? 'menu' : 'x');
18
+ feather.replace();
19
+ });
20
+ }
21
+
22
+ // Smooth scrolling for anchor links
23
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
24
+ anchor.addEventListener('click', function(e) {
25
+ e.preventDefault();
26
+ const target = document.querySelector(this.getAttribute('href'));
27
+ if (target) {
28
+ target.scrollIntoView({
29
+ behavior: 'smooth'
30
+ });
31
+ }
32
+ });
33
+ });
34
+
35
+ // Intersection Observer for scroll animations
36
+ const observerOptions = {
37
+ threshold: 0.1
38
+ };
39
+
40
+ const observer = new IntersectionObserver((entries) => {
41
+ entries.forEach(entry => {
42
+ if (entry.isIntersecting) {
43
+ entry.target.classList.add('animate-fade-in');
44
+ observer.unobserve(entry.target);
45
+ }
46
+ });
47
+ }, observerOptions);
48
+
49
+ document.querySelectorAll('.observe-me').forEach(el => {
50
+ observer.observe(el);
51
+ });
52
+ });
style.css CHANGED
@@ -1,28 +1,66 @@
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
2
+
3
+ :root {
4
+ --primary: #6366f1;
5
+ --primary-light: #818cf8;
6
+ --primary-dark: #4f46e5;
7
+ --secondary: #f59e0b;
8
+ --secondary-light: #fbbf24;
9
+ --secondary-dark: #d97706;
10
+ }
11
+
12
  body {
13
+ font-family: 'Inter', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ /* Custom animations */
18
+ @keyframes fadeIn {
19
+ from { opacity: 0; transform: translateY(20px); }
20
+ to { opacity: 1; transform: translateY(0); }
21
+ }
22
+
23
+ .animate-fade-in {
24
+ animation: fadeIn 0.8s ease-out forwards;
25
  }
26
 
27
+ .delay-100 {
28
+ animation-delay: 0.1s;
 
29
  }
30
 
31
+ .delay-200 {
32
+ animation-delay: 0.2s;
 
 
 
33
  }
34
 
35
+ .delay-300 {
36
+ animation-delay: 0.3s;
 
 
 
 
37
  }
38
 
39
+ /* Gradient text */
40
+ .gradient-text {
41
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
42
+ -webkit-background-clip: text;
43
+ background-clip: text;
44
+ color: transparent;
45
  }
46
+
47
+ /* Custom button styles */
48
+ .btn-primary {
49
+ background: linear-gradient(90deg, var(--primary), var(--primary-light));
50
+ transition: all 0.3s ease;
51
+ }
52
+
53
+ .btn-primary:hover {
54
+ transform: translateY(-2px);
55
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
56
+ }
57
+
58
+ .btn-secondary {
59
+ background: linear-gradient(90deg, var(--secondary), var(--secondary-light));
60
+ transition: all 0.3s ease;
61
+ }
62
+
63
+ .btn-secondary:hover {
64
+ transform: translateY(-2px);
65
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
66
+ }