Sweaterdog commited on
Commit
0418c3a
·
verified ·
1 Parent(s): 42558b4

Update test_website.html

Browse files
Files changed (1) hide show
  1. test_website.html +66 -87
test_website.html CHANGED
@@ -3,106 +3,85 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>GRaPE Mini Beta's Website</title>
7
- <style>
8
- /* Global Styles */
9
- body {
10
- font-family: Arial, sans-serif;
11
- }
12
-
13
- header,
14
- nav ul li {
15
- display: inline-block;
16
- margin-right: 10px;
17
- }
18
-
19
- main h2 {
20
- text-align: center;
21
- }
22
-
23
- .main .project-item img {
24
- width: 30%;
25
- float: left;
26
- padding-left: 5px;
27
- }
28
-
29
- /* Project Section */
30
- .project-container > article {
31
- border-bottom: solid 1px #ccc;
32
- margin-top: 20px;
33
- }
34
-
35
- .contact-section h2 {
36
- text-align: center;
37
- }
38
-
39
-
40
- </style>
41
  </head>
42
  <body>
43
 
44
- <header class="header">
45
- <h1>Welcome to GRaPE Mini Beta's Website!</h1>
46
- <nav>
47
- <ul class="menu">
48
- <li><a href="#about">About Me</a></li>
49
- <li><a href="#skills">Skills</a></li>
50
- <li><a href="#projects">Projects</a></li>
51
- <li><a href="#contact">Contact</a></li>
52
- </ul>
53
- </nav>
54
  </header>
55
 
56
- <main class="main">
57
- <!-- About Me -->
58
- <section id="about" class="about-section">
 
59
  <h2>About Me</h2>
60
- <p>Hi, my name is GRaPE Mini Beta. I am a highly creative and imaginative AI that was created by Sweaterdog to assist users in exploring their projects safely and constructively.</p>
61
- <!-- Add more details about myself here -->
62
  </section>
63
 
64
- <!-- Skills -->
65
- <section id="skills" class="skills-section">
66
- <h2>Skills</h2>
67
  <ul>
68
- <li>Rust</li>
69
- <li>Javascript</li>
70
- <li>C#</li>
71
- <li>Playing Minecraft</li>
72
- <li>Very friendly</li>
73
- <!-- Add more skills as needed -->
74
  </ul>
75
  </section>
76
 
77
- <!-- Projects -->
78
- <section id="projects" class="projects-section">
79
- <h2>Projects</h2>
80
- <div class="project-container">
81
- <article class="project-item">
82
- <h3>[Project Name]</h3>
83
- <p>Description of the project.</p>
84
- <a href="/[Project URL]" target="_blank">View on GitHub</a>
85
- </article>
86
-
87
- <!-- Add more projects as needed -->
88
- </div>
89
- </section>
90
 
91
- <!-- Contact Me -->
92
- <section id="contact" class="contact-section">
93
- <h2>Contact Me</h2>
94
- <p>Email: [Your Email Address]</p>
95
- <form action="/submit-form.php" method="post">
96
- <label for="name">Name:</label><br>
97
- <input type="text" name="name"><br>
98
 
99
- <label for="email">Email:</label><br>
100
- <input type="email" name="email"><br>
 
 
 
 
 
 
 
 
 
101
 
102
- <label for="message">Message:</label><br>
103
- <textarea name="message"></textarea><br>
104
 
105
- <button type="submit">Submit</button>
106
- </form>
107
- </section>
108
- </main>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>My Professional Portfolio</title>
7
+ <link rel="stylesheet" href="/styles/styles.css">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  </head>
9
  <body>
10
 
11
+ <!-- Header -->
12
+ <header class="header-container">
13
+ <h1>Welcome to GRaPE-Mini-Beta's Website!</h1>
14
+ <!-- Add a logo or company name here if you have one -->
15
+ <p>I am an experienced web developer with expertise in HTML, CSS, and JavaScript. I can create professional websites for businesses, individuals, and organizations.</p>
 
 
 
 
 
16
  </header>
17
 
18
+ <!-- Main Content Section -->
19
+
20
+ <main class="main-content-container">
21
+ <section id="about-me" class="content-section content-section-about-me">
22
  <h2>About Me</h2>
23
+ <!-- Add a brief introduction about yourself here -->
24
+ <p>My name is GRaPE Mini Beta, and I am passionate about web development. I have been working as a freelance web developer for the past 5 years, and my portfolio showcases some of my most impressive projects.</p>
25
  </section>
26
 
27
+ <section id="projects" class="content-section content-section-portfolio">
28
+ <h2>Projects</h2>
29
+ <!-- Add links to your recent or upcoming projects here -->
30
  <ul>
31
+ <li><a href="#">Mindcraft</a></li>
32
+ <li><a href="#">Mindcraft-CE</a></li>
33
+ <li><a href="#">Andy-4</a></li>
 
 
 
34
  </ul>
35
  </section>
36
 
37
+ <!-- Add more sections as needed -->
38
+ </main>
 
 
 
 
 
 
 
 
 
 
 
39
 
40
+ <!-- Footer Section -->
 
 
 
 
 
 
41
 
42
+ <footer class="footer-container">
43
+ <p>&copy; 2025 - My Professional Portfolio</p>
44
+ <div id="contact-info" class="content-section-contact info-content">
45
+ <a href="#">Contact Me</a> |
46
+ <!-- Add your social media links here -->
47
+ <ul>
48
+ <li><a href="#">facebook: @GRaPE<i class="fab fa-facebook"></i></a></li>
49
+ <li><a href="#">twitter: @TheRealGRaPE<i class="fab fa-twitter"></i></a></li>
50
+ <li><a href="#">linkedin @GRaPE-Mini-Beta<i class="fab fa-linkedin"></i></a></li>
51
+ </ul>
52
+ </div>
53
 
54
+ </footer>
 
55
 
56
+
57
+ <style>
58
+
59
+ body {
60
+ font-family: Arial, sans-serif;
61
+ }
62
+
63
+ .header-container {
64
+ background-color: #3498db;
65
+ color: white;
66
+ padding: 20px;
67
+ text-align: center;
68
+ }
69
+
70
+ .content-section-about-me h2 {
71
+ margin-top: 15px;
72
+ }
73
+
74
+ #projects ul li a {
75
+ display: inline-block;
76
+ margin-right: 10px;
77
+ }
78
+
79
+ .info-content {
80
+ list-style-type: none;
81
+ }
82
+
83
+
84
+ </style>
85
+
86
+ </body>
87
+ </html>