Capstone_project/index.html at main · hypnoastic/Capstone_project · 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NeonPortfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navigation">
        <div class="nav-links">
            <a href="#home">Home</a>
            <a href="#portfolio">Portfolio</a>
            <a href="#about">About</a>
        </div>
            <div class="logo">NeonPortfolio</div>
        <div class="nav-links">
            <a href="#contact">Contact</a>
        </div>
    </nav>
    <header class="main">
        <h1>Welcome to the future</h1>
        <img src="images/A dark city skyline at night with illuminated skyscrapers and colorful neon signs casting reflections on wet pavement..png" alt="main Image" class="main-image">
    </header>

    <section class="portfolio-grid">
        <div class="grid-item">
            <img src="images/A vibrant cityscape at night illuminated by bright neon signs, glowing skyscrapers, and holographic advertisements under a dark sky..png" alt="Project 1">
            <h4>Neon Citycape</h4>
            <p>Photography</p>
        </div>
        <div class="grid-item">
            <img src="images/A character wearing a sleek, futuristic jacket with glowing accents stands in a dark alley illuminated by neon lights, with a futuristic cityscape in the background..png" alt="Project 2">
            <h4>Cyberpunk Portrait</h4>
            <p>Illustration</p>
        </div>
        <div class="grid-item">
            <img src="images/An abstract digital artwork with vibrant neon colors and distorted patterns resembling a glitch in a high-tech display..png" alt="Project 3">
            <h4>Glitch Art</h4>
            <p>Digital Art</p>
        </div>
        <div class="grid-item">
            <img src="images/A crowded urban street filled with glowing holographic advertisements and neon-lit billboards against a dark cityscape. (1).png" alt="Project 4">
            <h4>Holographic Ads</h4>
            <p>Graphic Design</p>
        </div>
        <div class="grid-item">
            <img src="images/A dark, decaying urban landscape with crumbling buildings illuminated by neon lights in contrasting shades of pink and green..png" alt="Project 5">
            <h4>Dystopian Future</h4>
            <p>Concept Art</p>
        </div>
        <div class="grid-item">
            <img src="images/A vibrant, neon-lit cityscape at night with glowing skyscrapers and ethereal light trails from moving vehicles..png" alt="Project 6">
            <h4>Neon Dreams</h4>
            <p>Photography</p>
        </div>
        <div class="grid-item">
            <img src="images/A shadowy figure standing beneath neon lights in a futuristic city, surrounded by dark skyscrapers and glowing advertisements..png" alt="Project 7">
            <h4>Tech Noir</h4>
            <p>Illustration</p>
        </div>
        <div class="grid-item">
            <img src="images/A digitally fragmented urban landscape with neon lights casting vibrant glows on crumbling structures and disintegrating digital screens..png" alt="Project 8">
            <h4>Digital Decay</h4>
            <p>Digital Art</p>
        </div>
        <div class="grid-item">
            <img src="images/A vibrant urban landscape illuminated by neon lights featuring towering skyscrapers and a bustling street..png" alt="Project 9">
            <h4>Urban Glow</h4>
            <p>Photography</p>
        </div>
    </section>

    <section class="info-bar">
        <h2>NeonPortfolio</h2>
        <p>Explore my latest projects inspired by the neon-lit streets of a cyberpunk future.</p>
    </section>

    <section class="about">
        <div class="about-content">
            <h2>Cyberpunk Art</h2>
            <p>Immerse yourself in the vibrant world of cyberpunk art, where technology and urban decay collide.</p>
            <button>Explore my work</button>
        </div>
        <div class="about-image">
            <img src="images/A cyberpunk character wearing a glowing, neon-infused outfit is standing against a solid dark background, surrounded by abstract futuristic elements that highlight the cyberpunk aesthetic., viewed from the side.png" alt="Portrait">
        </div>
    </section>

    <section class="contact-form">
        <h2>Get in Touch</h2>
        <p>Feel free to reach out for collaborations or just a friendly hello!</p>
        <form>
            <div class="form-row">
                <input type="text" placeholder="First Name" required>
                <input type="text" placeholder="Last Name" required>
            </div>
            <input type="email" placeholder="Email" required>
            <textarea placeholder="Description" required></textarea>
            <button type="submit">Submit</button>
        </div>
        </form>
    </section>

    <section class="services">
        <h2>Services</h2>
        <div class="services-content">
            <ul>
                <li>Digital Art</li>
                <li>Graphic Design</li>
                <li>Illustration</li>
            </ul>
        </div>
        <div class="services-content">
            <ul>
                <li>Photography</li>
                <li>Concept Art</li>
            </ul>
        </div>
    </section>

    <section class="comments">
        <h2>What My Clients Say</h2>
        <div class="comment-slider">
            <div class="comment-card">
                <div class="client-info">
                    <img src="images/profile pics/A professional woman with dark hair and a confident expression is posing against a backdrop of a neon-lit city at night..png" alt="Client 1">
                    <div>
                        <h3>Liora Kavanagh</h3>
                        <p>Art Director</p>
                    </div>
                </div>
                <p>A true visionary in the world of digital art.</p>
            </div>
            <div class="comment-card">
                <div class="client-info">
                    <img src="images/profile pics/A dramatic portrait of a young woman with brightly colored hair standing against a backdrop of a dark city illuminated by glowing advertisements and skyscrapers..png" alt="Client 2">
                    <div>
                        <h3>Quentin Driscoll</h3>
                        <p>Photographer</p>
                    </div>
                </div>
                <p>Transforms the ordinary into the extraordinary.</p>
            </div>
            <div class="comment-card">
                <div class="client-info">
                    <img src="images/profile pics/A vibrant cyberpunk cityscape illuminated by neon lights depicting towering skyscrapers and bustling streets filled with futuristic vehicles..png" alt="Client 3">
                    <div>
                        <h3>Zara Huxley</h3>
                        <p>Graphic Designer</p>
                    </div>
                </div>
                <p>Innovative, creative, and always pushing boundaries.</p>
            </div>
            <div class="comment-card">
                <div class="client-info">
                    <img src="images/profile pics/A digital artist working in a neon-lit studio surrounded by vivid cyberpunk artwork and glowing screens..png" alt="Client 4">
                    <div>
                        <h3>Jace Morrow</h3>
                        <p>Concept Artist</p>
                    </div>
                </div>
                <p>Brings a unique perspective to every project.</p>
            </div>
            <div class="comment-card">
                <div class="client-info">
                    <img src="images/profile pics/394-3947083_round-profile-picture-png-transparent-png.png" alt="Client 5">
                    <div>
                        <h3>Trump</h3>
                        <p>Creative Lead</p>
                    </div>
                </div>
                <p>Outstanding work and great communication!</p>
            </div>
            <div class="comment-card">
                <div class="client-info">
                    <img src="images/profile pics/627-6275754_chad-profile-pic-profile-photo-circle-png-transparent.png" alt="Client 6">
                    <div>
                        <h3>Dev</h3>
                        <p>Design Manager</p>
                    </div>
                </div>
                <p>Exceeded expectations in every aspect of the project!</p>
            </div>
        </div>
    </section>

    <footer>
        <p>2023 NeonPortfolio</p>
        <button>Contact Me</button>
    </footer>
</body>
</html>