Hugging Face's logo

Spaces:
sa2647029
/
teecraft-3d-studio
Running

App Files Community
sa2647029 commited on
Commit
55de6db
·
verified ·
1 Parent(s): b4650d3

Build my website free domain and hosting

Browse files
Files changed (3) hide show
  1. components/footer.js +2 -1
  2. components/navbar.js +4 -2
  3. hosting.html +140 -0
components/footer.js CHANGED
@@ -49,7 +49,8 @@ class CustomFooter extends HTMLElement {
49
  <li><a href="/" class="footer-link text-gray-400 hover:text-blue-400">Home</a></li>
50
  <li><a href="#services" class="footer-link text-gray-400 hover:text-blue-400">Services</a></li>
51
  <li><a href="#contact" class="footer-link text-gray-400 hover:text-blue-400">Contact</a></li>
52
- <li><a href="/payment.html" class="footer-link text-gray-400 hover:text-blue-400">Order Now</a></li>
 
53
  </ul>
54
  </div>
55
 
 
49
  <li><a href="/" class="footer-link text-gray-400 hover:text-blue-400">Home</a></li>
50
  <li><a href="#services" class="footer-link text-gray-400 hover:text-blue-400">Services</a></li>
51
  <li><a href="#contact" class="footer-link text-gray-400 hover:text-blue-400">Contact</a></li>
52
+ <li><a href="/hosting.html" class="footer-link text-gray-400 hover:text-blue-400">Free Hosting</a></li>
53
+ <li><a href="/payment.html" class="footer-link text-gray-400 hover:text-blue-400">Order Now</a></li>
54
  </ul>
55
  </div>
56
 
components/navbar.js CHANGED
@@ -42,7 +42,8 @@ class CustomNavbar extends HTMLElement {
42
  <a href="/" class="nav-link text-gray-700 hover:text-blue-600">Home</a>
43
  <a href="#services" class="nav-link text-gray-700 hover:text-blue-600">Services</a>
44
  <a href="#contact" class="nav-link text-gray-700 hover:text-blue-600">Contact</a>
45
- <a href="/payment.html" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition duration-300">Get Started</a>
 
46
  </div>
47
 
48
  <!-- Mobile menu button -->
@@ -57,7 +58,8 @@ class CustomNavbar extends HTMLElement {
57
  <a href="/" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50">Home</a>
58
  <a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50">Services</a>
59
  <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50">Contact</a>
60
- <a href="/payment.html" class="block w-full text-center bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition duration-300 mt-2">Get Started</a>
 
61
  </div>
62
  </div>
63
  </div>
 
42
  <a href="/" class="nav-link text-gray-700 hover:text-blue-600">Home</a>
43
  <a href="#services" class="nav-link text-gray-700 hover:text-blue-600">Services</a>
44
  <a href="#contact" class="nav-link text-gray-700 hover:text-blue-600">Contact</a>
45
+ <a href="/hosting.html" class="nav-link text-gray-700 hover:text-blue-600">Free Hosting</a>
46
+ <a href="/payment.html" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition duration-300">Get Started</a>
47
  </div>
48
 
49
  <!-- Mobile menu button -->
 
58
  <a href="/" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50">Home</a>
59
  <a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50">Services</a>
60
  <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50">Contact</a>
61
+ <a href="/hosting.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50">Free Hosting</a>
62
+ <a href="/payment.html" class="block w-full text-center bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition duration-300 mt-2">Get Started</a>
63
  </div>
64
  </div>
65
  </div>
hosting.html ADDED
@@ -0,0 +1,140 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Free Hosting | TeeCraft 3D 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="components/navbar.js"></script>
11
+ <script src="components/footer.js"></script>
12
+ </head>
13
+ <body class="bg-gray-50">
14
+ <custom-navbar></custom-navbar>
15
+
16
+ <main class="container mx-auto px-4 py-20">
17
+ <div class="max-w-4xl mx-auto">
18
+ <h1 class="text-3xl font-bold text-gray-800 mb-8 text-center">Free Hosting & Domain Options</h1>
19
+
20
+ <div class="bg-white rounded-xl shadow-md p-8 mb-12">
21
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6">Get Your Website Online for Free</h2>
22
+ <p class="text-gray-600 mb-6">
23
+ Launch your TeeCraft 3D Studio website with these free hosting and domain options. These services
24
+ are perfect for getting started without upfront costs.
25
+ </p>
26
+
27
+ <div class="grid md:grid-cols-2 gap-8">
28
+ <!-- Option 1 -->
29
+ <div class="bg-blue-50 p-6 rounded-lg">
30
+ <div class="flex items-center mb-4">
31
+ <img src="https://github.githubassets.com/favicons/favicon.png" alt="GitHub" class="h-8 w-8 mr-3">
32
+ <h3 class="text-xl font-semibold">GitHub Pages</h3>
33
+ </div>
34
+ <p class="text-gray-700 mb-4">
35
+ Host your static website for free with GitHub Pages. You'll get a free subdomain (username.github.io).
36
+ </p>
37
+ <ul class="space-y-2 mb-6">
38
+ <li class="flex items-start">
39
+ <i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
40
+ <span>Free hosting with no limits</span>
41
+ </li>
42
+ <li class="flex items-start">
43
+ <i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
44
+ <span>Automatic deployment from GitHub</span>
45
+ </li>
46
+ <li class="flex items-start">
47
+ <i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
48
+ <span>Supports custom domains</span>
49
+ </li>
50
+ </ul>
51
+ <a href="https://pages.github.com/" target="_blank" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition duration-300">
52
+ Learn More
53
+ </a>
54
+ </div>
55
+
56
+ <!-- Option 2 -->
57
+ <div class="bg-green-50 p-6 rounded-lg">
58
+ <div class="flex items-center mb-4">
59
+ <img src="https://www.freenom.com/favicon.ico" alt="Freenom" class="h-8 w-8 mr-3">
60
+ <h3 class="text-xl font-semibold">Freenom Domains</h3>
61
+ </div>
62
+ <p class="text-gray-700 mb-4">
63
+ Get a free domain name (.tk, .ml, .ga, .cf, .gq) to use with your free hosting.
64
+ </p>
65
+ <ul class="space-y-2 mb-6">
66
+ <li class="flex items-start">
67
+ <i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
68
+ <span>Free domain registration</span>
69
+ </li>
70
+ <li class="flex items-start">
71
+ <i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
72
+ <span>Renewable every 12 months</span>
73
+ </li>
74
+ <li class="flex items-start">
75
+ <i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
76
+ <span>DNS management included</span>
77
+ </li>
78
+ </ul>
79
+ <a href="https://www.freenom.com/" target="_blank" class="inline-block bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg font-medium transition duration-300">
80
+ Get Free Domain
81
+ </a>
82
+ </div>
83
+ </div>
84
+ </div>
85
+
86
+ <div class="bg-white rounded-xl shadow-md p-8">
87
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6">Setup Guide</h2>
88
+ <div class="space-y-6">
89
+ <div class="flex items-start">
90
+ <div class="bg-blue-100 text-blue-600 rounded-full h-8 w-8 flex items-center justify-center mr-4 flex-shrink-0 font-bold">1</div>
91
+ <div>
92
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Create GitHub Account</h3>
93
+ <p class="text-gray-600">
94
+ Sign up for a free GitHub account at github.com if you don't have one already.
95
+ </p>
96
+ </div>
97
+ </div>
98
+
99
+ <div class="flex items-start">
100
+ <div class="bg-blue-100 text-blue-600 rounded-full h-8 w-8 flex items-center justify-center mr-4 flex-shrink-0 font-bold">2</div>
101
+ <div>
102
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Upload Your Website</h3>
103
+ <p class="text-gray-600">
104
+ Create a new repository named "username.github.io" (replace username with your GitHub username) and upload all your website files.
105
+ </p>
106
+ </div>
107
+ </div>
108
+
109
+ <div class="flex items-start">
110
+ <div class="bg-blue-100 text-blue-600 rounded-full h-8 w-8 flex items-center justify-center mr-4 flex-shrink-0 font-bold">3</div>
111
+ <div>
112
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Get Free Domain</h3>
113
+ <p class="text-gray-600">
114
+ Register a free domain at Freenom.com and configure its DNS to point to your GitHub Pages.
115
+ </p>
116
+ </div>
117
+ </div>
118
+
119
+ <div class="flex items-start">
120
+ <div class="bg-blue-100 text-blue-600 rounded-full h-8 w-8 flex items-center justify-center mr-4 flex-shrink-0 font-bold">4</div>
121
+ <div>
122
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Configure GitHub Pages</h3>
123
+ <p class="text-gray-600">
124
+ In your GitHub repository settings, under "GitHub Pages", add your custom domain.
125
+ </p>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </main>
132
+
133
+ <custom-footer></custom-footer>
134
+
135
+ <script>
136
+ feather.replace();
137
+ </script>
138
+ <script src="script.js"></script>
139
+ </body>
140
+ </html>