portfolio/index.html at master · SarangT123/portfolio · 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
<!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">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/svg" href="images/favicon.svg" sizes="16x16">
    <link rel="icon" type="image/svg" href="images/favicon.svg" sizes="32x32">
    <link rel="icon" type="image/svg" href="images/favicon.svg" sizes="96x96">
    <meta name="google-site-verification" content="YMj3m1z-TuDIPNe1jF3bHCT7Gvc6sjEYlQV7to6oP8Q" />
    <title>Sarang</title>
</head>
<body>
    <header>
        <div class="navbar">
            <a href="#home" class="hider">Home</a>
            <a href="#aboutme">About me</a>
            <a href="#skills">Skills</a>
            <a href="#contact-me">Contact me</a>
          </div>
    </header>
    <section id="home">
        <div class="main">
            <h1 class="heading">I am Sarang</h1>
            <div id="container-anim">
                <div id="text"></div><div id="cursor"></div>
            </div>
            <br>
            <button class="btn" onclick="contact()">Contact me</button>
        </div>
    </section>
    <section class="aboutme" id="aboutme">
        <div class="me">
            <h2 class="heading me-head">About me</h2>
            <style>
                .lifeline{
                    font-color: tomato;
                }
            </style>
            <p>Hi, I am sarang. I am a programmer from india. I mostly code on Python. Creator of the Startup <a href="https://www.lifeline.ga" class="lifeline" style="font-color: tomato;">Lifeline</a>. A fullstack developer (mainly works on backend). You can contact me on discord <b>sarang#4142</b> Thanks for coming :)</p>
        </div>
    </section>
    <section class="skills" id="skills">
        <h1 class="heading">My skills</h1>
        <div class="skill-container">
            <div class="skillbox">
                <div class="skill-title">
                    <div class="img">
                        <img src="images/python.svg" alt="Python" class="skill-icon">
                    </div>
                    <h3 class="skills3">Python 3</h3>
                </div>
                <p>Python is an interpreted, object-oriented, high-level programming language with dynamic semantics. Its high-level built in data structures, combined with dynamic typing and dynamic binding, make it very attractive for Rapid Application Development, as well as for use as a scripting or glue language to connect existing components together.</p>
            </div>
            <div class="skillbox">
                <div class="skill-title">
                    <div class="img">
                        <img src="images/flask.svg" alt="Flask" class="skill-icon">
                    </div>
                    <h3 class="skills3">Flask</h3>
                </div>
                <p>Flask is a web development framework developed in Python. Flask is used for backend development and server-side rendering mainly</p>
            </div>
            <div class="skillbox">
                <div class="skill-title">
                    <div class="img">
                        <img src="images/django.svg" alt="Django" class="skill-icon">
                    </div>
                    <h3 class="skills3">Django</h3>
                </div>
                <p>Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source.</p>
            </div>
            <div class="skillbox">
                <div class="skill-title">
                    <div class="img">
                        <img src="images/html.svg" alt="HTML 5" class="skill-icon">
                    </div>
                    <h3 class="skills3">HTML 5</h3>
                </div>
                <p>HTML 'also known as Hyper Text Markup Language' is used to develop the structures of a website</p>
            </div>
            <div class="skillbox">
                <div class="skill-title">
                    <div class="img">
                        <img src="images/css.svg" alt="CSS" class="skill-icon">
                    </div>
                    <h3 class="skills3">CSS 3</h3>
                </div>
                <p>CSS stands for Cascading Style Sheets. It is the language for describing the presentation of Web pages, including colours, layout, and fonts, thus making our web pages presentable to the users.</p>
            </div>
            <div class="skillbox">
                <div class="skill-title">
                    <div class="img">
                        <img src="images/js.svg" alt="Java script" class="skill-icon">
                    </div>
                    <h3 class="skills3">Javascript 6</h3>
                </div>
                <p>JavaScript is a scripting or programming language that allows you to implement complex features on web pages</p>
            </div>
        </div>
    </section>
    <!-- Contact form  -->
    <section class="contact-me" id="contact-me">
    <div class="container">
        <h2 class="heading2">
            Contact me
        </h2>
        <form action="/action_page.php">
          <div class="row">
            <div class="col-25">
              <label for="fname">First Name</label>
            </div>
            <div class="col-75">
              <input type="text" id="fname" name="firstname" placeholder="Your name..">
            </div>
          </div>
          <div class="row">
            <div class="col-25">
              <label for="lname">Email id</label>
            </div>
            <div class="col-75">
              <input type="email" id="email" name="email" placeholder="Email id">
            </div>
          </div>
          <div class="row">
            <div class="col-25">
              <label for="subject">Message</label>
            </div>
            <div class="col-75">
              <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
            </div>
          </div>
          <div class="row">
            <input type="submit" value="Submit">
          </div>
        </form>
      </div>
    </section>
      <!-- End -->
    <script src="script.js"></script>
</body>
</html>