joshstroud.com/github-ios-test.html at main · superaffectivejosh/joshstroud.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitHub iOS Test</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            color: #fff;
            background-color: #000;
        }
        header {
            background: #ffc107;
            padding: 20px;
            text-align: center;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        header h1 {
            margin: 0;
            color: #000;
        }
        nav a {
            margin: 0 15px;
            color: #000;
            text-decoration: none;
            font-weight: bold;
        }
        section {
            padding: 50px 20px;
            text-align: center;
        }
        #about, #contact {
            background-color: #121212;
        }
        #projects {
            background-color: #1e1e1e;
        }
        #skills {
            background-color: #2c2c2c;
        }
        .section-title {
            font-size: 2em;
            margin-bottom: 20px;
            color: #ffc107;
        }
        .project {
            display: inline-block;
            margin: 20px;
            padding: 20px;
            width: 200px;
            border: 2px solid #ffc107;
        }
        .skill-list {
            list-style: none;
            padding: 0;
        }
        .skill-list li {
            background: #ffc107;
            margin: 10px;
            padding: 10px;
            color: #000;
        }
        form input, form textarea {
            width: 80%;
            padding: 10px;
            margin: 10px 0;
            border: none;
        }
        form button {
            padding: 10px 20px;
            background-color: #ffc107;
            border: none;
            color: #000;
            cursor: pointer;
            font-weight: bold;
        }
    </style>
</head>
<body>

<header>
    <h1>Your Name</h1>
    <nav>
        <a href="#about">About</a>
        <a href="#projects">Projects</a>
        <a href="#skills">Skills</a>
        <a href="#contact">Contact</a>
    </nav>
</header>

<section id="about">
    <h2 class="section-title">About Me</h2>
    <p>Welcome to my personal webpage! I am passionate about [your interests/profession]. This section is where you can provide a brief bio about yourself.</p>
</section>

<section id="projects">
    <h2 class="section-title">Projects</h2>
    <div class="project">
        <h3>Project 1</h3>
        <p>Brief description of the project.</p>
    </div>
    <div class="project">
        <h3>Project 2</h3>
        <p>Brief description of the project.</p>
    </div>
</section>

<section id="skills">
    <h2 class="section-title">Skills</h2>
    <ul class="skill-list">
        <li>Skill 1</li>
        <li>Skill 2</li>
        <li>Skill 3</li>
    </ul>
</section>

<section id="contact">
    <h2 class="section-title">Contact Me</h2>
    <form>
        <input type="text" placeholder="Your Name" required>
        <input type="email" placeholder="Your Email" required>
        <textarea placeholder="Your Message" rows="5" required></textarea>
        <button type="submit">Send</button>
    </form>
</section>

</body>
</html>