Capstone/index.html at main · shagunvishnoi/Capstone · 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
<!DOCTYPE html><head>
    <title></title>
    <link rel="stylesheet" href="./style.css"/>
</head>
<body>
<div class="outerpage">

    <div class="header">
        <div class="logo">
            Portfolio

            <div class="nav-bar">
                <nav>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Projects</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </div>
        </div>
   </div>

    <div class="webpage-container">

        <div class="hero">
            <h2 class="welcome-message"> Welcome to my Futuristic Portfolio</h2>
            <div class="image-container">
              <img src="https://s3-alpha-sig.figma.com/img/c461/877f/e4705a592e252d819928c0896518f160?Expires=1734912000&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Rdx~E00NmOEXcfWRUv5N5nzWN6Am7zGg7sMiOrLnOBuhOiN077mB~~62kDM4RgzU1jDA4KG5AyTL5NHZzSgfgjd6JxYwFdxNob90CgkAsmAoW6tycfimwtdoewtX0B~Ikzw-mZ-Sr4ppBD9TT0FW~1ngbYaZNzz24K~RuWm4IvSZsr8smYlFPirHQIDk8pFXV2nTHMRJBhCgvwVYUkMUdc~xdhTliHT6cl1A3CO6ac-YgpzdcXjk5pItuxl9qVMocpU6qnh2g6sq~RQjKeteKVOCZZq5RsyU2-4wNDdK29NoB9oSqTwQqqnekU5OjWhMigHJXFot7fhaps5HXuXo3Q__" alt="Futuristic Circuit Design">
            </div>
        </div>
        <div class="projects">
          <div class="row1">
                <div class="project">
                  <img src="https://s3-alpha-sig.figma.com/img/093f/a51d/2d0c534973868bb1cce810e3094ba8bc?Expires=1734912000&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Hdz1wedHvIKoXbfXGssfsgQII7BBmpPVrIoeip0VkpOCwW3Cs-7-5S6lA18B4wzFALRbCjfd~ogopxPUUJq4GxdNiX9x2wB6M0l53iy8OFf-Tpsf5Yl9LixbCYzYQq19LPBDMwmuWDtQmmyLBR52~2sVbNiQOlRB-eWFSBchUiD5W9ApXKIxbSuDbVb4bSeNIyed0UrbLr-QXE-IIZeoqAIQx1kHgUZ8uX8ZjXOqHZ5RKLxB4bFujBLPykjOIwozmR6ZuVr9k9CWC~j27tEDifnLXEesXNkJ9mefDxx2qb-x-5kI9nRj3qmCXxxhr7SUPBEbCGybvYGP0zSqvKxdoA__" alt="Project Alpha">
                  <p>Project Alpha<br>
                      <span>UI/UX design</span>
                  </p>
                </div>
                <div class="project">
                  <img src="https://s3-alpha-sig.figma.com/img/893d/aaec/573b3e009fb87541b9a49439506672ea?Expires=1734912000&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=J7kgNVXYwDKxIUiVKUQiDyh-X091aSnEaARKimAwwksRoyZW33MvUa-QzFxdU4Z2OqHhqbG6-479t62UwdFDdyqH1F0xRSkLk9weJrBUeOSzFQTLxSdS07Ggbn3HLskZDDeLYUrNQ9Lop8Ia-fpTMHWInFOcO6XLKiCzfsXHcu73h9LK6WWdFVTFnz7kC~A~Bzuh9c6i67Ys23HC1RTukSI9~22BUGHWQTnk~x2rnP3vMyMjQcA99d5jSEnBGiQiTTfhg~rEBCYJhT8OpsQ6it49KvVjhha7SIlED2dH2EtyDxNRA7KkevEfPsaSXgtFFz6oO7paudbChXWAcAxyJw__" alt="Project Beta">
                  <p>Project Beta<br>
                      <span>Web Development</span>
                  </p>
                </div>
                <div class="project">
                  <img src="https://s3-alpha-sig.figma.com/img/0f27/bbcd/165eae15e726201414ecf8090542a8aa?Expires=1734912000&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=UVaW~DSmIpnqBvfz5otITfPs6z6VNRtm8uSMDtWaXbm5HzydY~AP2~vvE7SdE3anP4m-Dkn45xG2DpSx8wGE3dY62bi0romJA4wn-5O65~INF5vBTUNyh-iCc1VrujsqqPxULVJM4ChVMbE~-bk-q02ATb~NiPm9JjeYN~6PuKhfHG3iQvAnLK8RPkcPFEmfs9oxAre4JoW1DVcFoJPsHVSD8Gq8tVzQ9cBMnHC06o5y~Z1AS20My7RHFtFWU-v0uaPkVuBuWLvXz6iIUPHVY-Ob0QuEv3HdtfionxNua~UXNTiz~humep6-9tPdvrINBWJzM3MVYhKViUeA-32HKQ__" alt="Project Gamma">
                  <p>Project Gamma<br>
                      <span>Mobile App</span>
                  </p>
                </div>
          </div>
          <div class="row2">
                <div class="project">
                  <img src="https://s3-alpha-sig.figma.com/img/d149/a952/b39742b9fc72c9000e52100c9bb79c9a?Expires=1734912000&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=JgbPmz87eATm~DPLesNfvQLhfMyEwcM~aLTGi5yWLwUVggA-7LglzbRejDLJEbLj4bWPk8wfMFDqxw6vK69NZUWKigjSgjwoyqGbcGEguLHEsGAYSxCfGYeAtWMZkR6EHXXnYB3sn6byjfej-IpN1XayUFPsiT7sr5JX~JPPt2f4e-17jEA9u9wDxzmZlGI0VjatAz4KF4liuKtnzq4iStODhsfTB~ImpkVMeueZEyTqgS2a7-fPV~6jZxq2lbiIa6CJtAZnNeKmswpOMQSBoE6l6f9844vB4ZPvIUaNCLXAr2Mtxz-pVZBohzog1dtlKN~ehh5z7kxlecqbLwSNzA__" alt="Project Delta">
                  <p>Project Delta<br>
                      <span>Graphic Design</span>
                  </p>
                </div>
                <div class="project">
                  <img src="https://s3-alpha-sig.figma.com/img/a12a/20d6/1ebd529b34e5f2ce2007cd64fa0c4f7a?Expires=1734912000&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=O6cCazEckq-Z9~R16m~aJfzM7p6PavHRF6vY-8eClCecpLYuNHZsxAbr0yR9b8eDnQzYJgAOoAqsUfWSfY9Kgc~oUjamkTLMlJ1tuI9ZdvjZ31~Saen28ds-XUvhkM~ik1~f4ywTDpuUw~6UvgNdYnJ1teyIQPNnbjxGCTExNaoWG7CR8OEKVUBZ3XmbXLXHzS2hQapc9spcq-Ie0QA-O6YcH71XsrREjzUxIlTpNqkE07iMd1rkD~FLAq8AmnpcXYUit4G6FpeO0XLLuheQcSURtg2f9nz0hqeRGXMQ17vnHzepofYJnsOUzNc~PIq7sWy0zFrlxCxAjB9ryEyOBQ__" alt="Project Epsilon">
                  <p>Project Epsilon<br>
                      <span>Branding</span>
                  </p>
                </div>
                <div class="project">
                  <img src="https://s3-alpha-sig.figma.com/img/7149/2648/f3c05d98b1e3cd8764c3e827276d069e?Expires=1734912000&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=cjc9kYJnmiX3BRKo5Gz0vbdcF1oTdlXBMV66esT69mRwMysvkNxN9nZBqlaiAVr~FCcK4jdLOOSH1SpwLKTlUE9ocu1DIWz0psLkhq5L5xEh1OwMXXCrBQnT8j3w3Poe~yif9yKKtgSxKwnFI-GcyRl5tNjaL1JhNq-YJSxre2wCbgey2VM55rFblUq27z3O5c4belSMyG6BTvWdghgy2-3hEAGDJkLDXImTQwee7eSZ89fsh1DyeGIof-jqJo7E1NcliMpPn4jHHgWNo7qxUhXB~togU2ew-f59clTOgumNm9eH-uGf38zMuUmV1L25UIVueUCRkQMHNpuXjBMmCQ__" alt="Project Zeta">
                  <p>Project Zeta<br>
                      <span>Illustration</span>
                  </p>
                </div></div>
                <div class="row3">
                <div class="project">
                  <img src="https://s3-alpha-sig.figma.com/img/c2c1/a734/e9f338db5f5dca538ecc450a8024abd8?Expires=1734912000&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=lseLXS-FCJwkrXaDhaC-AEX0bDDh2jzV-8zYCKhzI2B3AtThqwmbUu63g-zqqifpdvIA7qpU4w5f6F3Texwchq80zqzVOUUXWORMp-OH~-Qdpn-bDmICuUvID6xaSH0r2TgljGPGjoByzQP0J~Nji9utevksijh-l80LTGcQHw7C5AfiQ4VJvb1seaMhlOpywiidGziP8VBi~tiIXYKceNMvHnqFaxXQcswwotOaJnCKNQDQIvTuvUR1KpURvq5tOD52VQQ4uKw3P~K67EfkB35wZMVuZtRrg0WO-D-ZIeXx38-U8YjQu1-o~Y-7GJibd4~HjG5pxDcK1jRF6Q2FRw__" alt="Project Era">
                  <p>Project Era<br>
                      <span>Animation</span>
                  </p>
                </div>
                <div class="project">
                  <img src="https://s3-alpha-sig.figma.com/img/c4a9/0951/dd59e05992b145d3cb105e71dcb8deb9?Expires=1734912000&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=OP0PP2eHPxFcjcSnRqWiDxgn4AS-mNaaEhP5K4zjGWNdG7uQPGgbSx-pFtjZD6KClqujf4Dg~XkHRpISFwTNqw7iOnlM1U4lOZTf5gUVKbVQh6aIxcCLJcSE-RY8f7wbSvFB5I~VStnp5XypKmShl5EQRNz2N1vAIpfGqwXG7so7fP0gcfAGYJmq2JiAQDfteq45J2TevIF2PIyoofrWNwVs23Wt5E7afHm9pzolOgKZtO5c25ga8xdBk720cxSXVcSatw8Nqb-Ue0eCSLRP1v8jKvtUgayQDST~7mmVggtxDRnWP7QoHmABKm9ay1ZP7Kv9k5CBCr9T2YnJjZDLiw__" alt="Project Theta">
                  <p>Project Theta<br>
                      <span>Photography</span>
                  </p>
                </div>
                <div class="project">
                  <img src="https://s3-alpha-sig.figma.com/img/5917/2217/0b163b0e32a6e13c5d7fcac7d8384b09?Expires=1734912000&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=m8jaiDQNQ3vzZ8DwplZEDSd2O8HvkutlHS0nE7jr0YqKtMcDuNXJil1V~7In6k8zHL2QFMAnxib0-BoTkcEPYxXIUmDTZNOybjUXVesmVj~-KV2AB1ZvO1d0VL1pn-OHimncfjpH3ydKRl7EH0eAP-dDEbXAXYenoSisH4t-bTarCaRriHPc2WgG6LJtdjjDmZMRgoAhghggOUebyHujL~dmAfp8qwaHABxrmE7ODXmr0zD~8qPsBBDioHqFAb2XbdX5EM~Xe2AGVWwbbS3heaK6SyJ8Rj6jH~B7JXBKDymmIx3SdJrBoKuTWkqbWFoY-ufuPo5US0fa19RUmzXrxQ__" alt="Project lota">
                  <p>Project lota<br>
                      <span>Videography</span>
                  </p>
                </div>
            </div></div>
    <div class="border"></div>
    <div class="description">
      <div class="description-box">I am a multidisciplinary designer with a passion for creating futuristic and minimalist designs. My work spans across various fields including UI/UX, web development, and graphic design.</div>
    </div>
    <div class="list-section">
      <div class="services">
              Services
      </div>
      <div class="rightside">
        <div class="part1" >
        <ul>
          <li>UI/UX Development</li>
          <li>Mobile App Development</li>
          <li>Branding</li>
          <li>Animation</li>
          <li>Videography</li>

        </ul>
      </div>
      <div class="part2">
        <ul>
          <li>WebDevelopment</li>
          <li>Graphic Design</li>
          <li>Illustartion</li>
          <li>Animation</li>
        </ul>
      </div>
      </div>
    </div>
    <div class="contact-info">
      <div class="contact">Contact Me</div>
      <div class="message">Feel free to reach out for collaborations or just a friendly chat.</div>

    </div>
    <div class="get-in-touch">
      <h3>Get in Touch</h3>
      <p>Please fill out the form below to contact me</p>
      <form>
          <div class="input-boxes">
              <input placeholder="0" type="text" maxlength="1" />
              <input placeholder="0" type="text" maxlength="1" />
              <input placeholder="0" type="text" maxlength="1" />
              <input placeholder="0" type="text" maxlength="1" />
              <input placeholder="0" type="text" maxlength="1" />
          </div>
          <button type="submit">Submit</button>
          <div></div>
          <a href="#" class="skip">Skip</a>
      </form>
    </div>
    <div class="footer">
        <div class="left">
          2023 Portfolio
        </div>
        <div class="right">
          <button>Follow Me</button>
        </div>
    </div>
    </div>
    </div>
</body>
</html>