capstone-project/index.html at main · nikithcodes/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Digital Art Portfolio</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <!-- Header Section -->
    <header>
        <div class="nature-tag">Glitch Art</div>
        <nav id="links">
            <a href="#home">Home</a>
            <a href="#about">About</a>
            <a href="#projects">Projects</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <!-- Home Section -->
    <section class="hero" id="home">
        <h1>Welcome to My Digital Art Portfolio</h1>
        <img src="img1.png" alt="Nature's Beauty" class="hero-image">
    </section>

    <!-- About Section -->


    <!-- Projects Section -->
    <section class="projects" id="projects">
        <h2>My Projects</h2>
        <div class="project-gallery">
            <div class="project-card">
                <img src="img21.png" alt="Project 1">
                <h3>Project Iota</h3>
                <p>Digital Art</p>
            </div>
            <div class="project-card">
                <img src="img22.png" alt="Project 2">
                <h3>Project 2</h3>
                <p>Glitch Aesthetics</p>
            </div>
            <div class="project-card">
                <img src="img23.png" alt="Project 3">
                <h3>Project 3</h3>
                <p>Data Corruption</p>
            </div>
            <div class="project-card">
                <img src="img31.png" alt="Project 4">
                <h3>Project 4</h3>
                <p>Abstract Art</p>
            </div>
            <div class="project-card">
                <img src="img32.png" alt="Project 5">
                <h3>Project 5</h3>
                <p>Experimental Design</p>
            </div>
            <div class="project-card">
                <img src="img33.png" alt="Project 6">
                <h3>Project 6</h3>
                <p>Visual Distortion</p>
            </div>
            <div class="project-card">
                <img src="imgc11.png" alt="Project 7">
                <h3>Project 7</h3>
                <p>Pixel Manipulation</p>
            </div>
            <div class="project-card">
                <img src="imgc12.png" alt="Project 8">
                <h3>Project 8</h3>
                <p>Color Glitches</p>
            </div>
            <div class="project-card">
                <img src="imgc13.png" alt="Project 9">
                <h3>Project 9</h3>
                <p>Creative Chaos</p>
            </div>
        </div>
    </section>
    <div class="about" id="about">
        <p class="para">I am a digital artist specializing in glitch art. My work explores the beauty of digital imperfections and the aesthetics of data corruption.</p>
    </div>

    <!-- Bottom Section -->
    <div class="bottom">
        <span class="ready">Discover My Work</span>
        <p class="description">Explore my latest projects and discover the art of digital distortion.</p>
        <button class="explore-btn">Explore</button>
    </div>

    <!-- Last Image Section -->
    <div class="lastimg">
        <img src="imglast.png" class="lasti" alt="Explore More">
    </div>

    <!-- Contact Section -->
    <div class="numb" id="contact">
        <div class="numbC">
            <div class="textT">
                <div class="TextU">Contact Me</div>
                <div class="eight-input">
                    <div class="inputNum">
                        <input placeholder="0" type="number" min="0" max="9" maxlength="1" />
                    </div>
                    <div class="inputNum">
                        <input placeholder="0" type="number" min="0" max="9" maxlength="1" />
                    </div>
                    <div class="inputNum">
                        <input placeholder="0" type="number" min="0" max="9" maxlength="1" />
                    </div>
                    <div class="inputNum">
                        <input placeholder="0" type="number" min="0" max="9" maxlength="1" />
                    </div>
                    <div class="inputNum">
                        <input placeholder="0" type="number" min="0" max="9" maxlength="1" />
                    </div>
                </div>
                <button class="submit-btn">Submit</button>
                <div class="skip-link">Skip</div>
            </div>
        </div>
    </div>

    <footer>
        <div class="footer-container">
            <div class="footer-left">
                <h2>2023 GlitchArt</h2>
            </div>
            <div class="footer-right">
                <button class="follow-btn">Follow Me</button>
            </div>
        </div>
    </footer>