-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
129 lines (122 loc) · 6.03 KB
/
index.html
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
<!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="styles.css">
<title>Tonny Tei</title>
</head>
<body>
<!-- first page -->
<header id="header">
<h1 class="logo"><a href="">Tonny Tei</a></h1>
<nav class="nav_icon">
<ul class="nav_icon-two">
<li><a href="#mid" class="nav-link">Portfolio</a></li>
<li><a href="#about-block-section"class="nav-link">About</a></li>
<li><a href="#contact-block-section" class="nav-link">Contact</a></li>
</ul>
<div class="mobile-menu">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</nav>
</header>
<section class="cover">
<div class="header_margin">
<section class="page-one" id="first_page">
<h1 class="for-small-size">I'm Tonny Tei,<br>Glad to see<br>you!</h1>
<h1 class="for-big-size">I'm Tonny Tei,<br>Glad to see you!</h1>
<p>I’m a software developer! I can help you build a product , feature or website. Look through some of my
work and experience. If you like what you see and have a project you need coded, don’t hestiate to
contact me.</p>
<div class="connect"><a href="#">Let's connect.</a>
</div>
<div class="links">
<ul>
<li><a href="#"><img src="./images/twitter.svg" alt="twiter_icon"></a></li>
<li><a href="#"><img src="./images/linkedin.svg" alt="linkedin_icon"></a></li>
<li><a href="#"><img src ="./images/medium.svg" alt="medium_icon"></a></li>
<li><a href="#"><img src="./images/github.svg" alt="github_icon"></a></li>
<li><a href="#"><img src="./images/angellist.svg" alt="angellist_icon"></a></li>
</ul>
</div>
</section>
</div>
</section>
<section id="mid">
</section>
<section class="solution">
<!-- About page: sixth page -->
<section class="about-block" id="about-block-section">
<div class="upper-part">
<div class="about-myself">
<h1> About<br> Myself</h1>
</div>
<p class="about-text">
Hello I’m a software developer! I can help you build a product ,
feature or website Look through some of my work and experience!
If you like what you see and have a project you need coded,
don’t hestiate to contact me.
</p>
<div class="about-connect"> <a href="#">Let's connect </a> </div>
<div class="about-tags">
<ul>
<li><a href="#"><img src="./images/github.svg" alt="github_icon"></a></li>
<li><a href="#"><img src="./images/linkedin.svg" alt="linkedin_icon"></a></li>
<li><a href="#"><img src="./images/twitter.svg" alt="twiter_icon"></a></li>
<li><a href="#"><img src="./images/angellist.svg" alt="angellist_icon"></a></li>
<li><a href="#"><img src ="./images/medium.svg" alt="medium_icon"></a></li>
</ul>
</div>
<div class="resume"> <a href="#">Get my resume </a></div>
</div>
<div class="lower-part">
<div class="languages">
<div class="lang">Languages</div>
<a href="#" class="arrow"><img src="images/down-arrow.png" alt=""></a>
</div>
<div class="language-list">
<ul>
<li> <div class="icon-image"><img src="images/js.png" alt="Jvascript-icon"> </div> <div class="icon-name">Javascript</div> </li>
<li> <div class="icon-image"><img src="images/html.png" alt="html-icon"></div> <div class="icon-name">HTML</div></li>
<li> <div class="icon-image"><img src="images/css.png" alt="css-image"></div> <div class="icon-name">CSS</div></li>
</ul>
</div>
<div class="frame-works"><div class="frame-work-name">Frameworks</div> <a href="#" class="frame-work-image"><img src="images/right-arrow.png" alt=""></a> </div>
<hr class="after-frame-works">
<div class="skills"> <div class="skill-name">Skill</div> <a href="#" class="skill-arrow"><img src="images/right-arrow.png" alt=""></a> </div>
<hr class="after-skills">
</div>
</section>
<section class="contact-section" id="contact-block-section">
<div class="contact">
<h2>Contact me</h2>
<p>If you have an application you are interested in developing, a feature that you need built or a project that needs coding. I’d love to help with it</p>
<form action="https://formspree.io/f/xvoyrvqp" method="POST" class="contact-me" >
<ul>
<li>
<input type="text" name="Full-Name" id="full-name" placeholder="Full-Name" required minlength="1" maxlength="30">
</li>
<li>
<input type="email" name="E-mail" id="e-mail" placeholder="E-mail" required>
</li>
<li>
<textarea name="message" id="Message" cols="30" rows="10" placeholder="Write your message here" required minlength="1" maxlength="500"></textarea>
</li>
<div class="email-validation"></div>
<li>
<button type="submit" id="btn">Get in touch</button>
</li>
</ul>
</form>
</div>
</section>
</section>
<div class="pop-up-window">
</div>
<script src="./main.js"></script>
</body>
</html>