-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
117 lines (117 loc) · 4.35 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
<!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" />
<title>Web Developer</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600&family=Ubuntu:wght@300;400;500;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="Resources/css/style.css" />
</head>
<body>
<header id="home">
<!-- Navigation -->
<nav>
<ul class="main-nav">
<li><a href="#home">Home</a></li>
<li><a href="#services">Service</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<!-- Main Container Containing Main Heading, CTA-btn,and social-links -->
<div class="hero-text-container">
<h1><span style="color: #ff5151">Web</span> Developer</h1>
<p class="hero-para">Develop awesome beautiful websites</p>
<a href="#about" class="main-cta-btn">Explore</a>
<div class="social-icon">
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
</div>
</div>
</header>
<!-- About Section -->
<section class="about-section" id="about">
<h2>About Me</h2>
<div class="about">
<p class="about-para">
Dummy text is also used to demonstrate the appearance of different
typefaces and layouts, and in general the content of dummy text is
nonsensical. Due to its widespread use as filler text for layouts,
non-readability is of great importance: human perception is tuned to
recognize certain patterns and repetitions in texts.If the
distribution of letters and 'words' is random, the reader will not be
distracted from making a neutral judgement on the visual impact and
readability of the typefaces (typography), or the distribution of text
on the page (layout or type area).
</p>
<img
src="Resources/Images/undraw_profile_pic_ic-5-t.svg"
alt="About section image"
srcset=""
class="about-image"
/>
</div>
</section>
<!-- Service Section -->
<section class="skill-section" id="services">
<h2>Services</h2>
<div class="skill-cards">
<div class="card card1">
<ion-icon name="color-palette-outline"></ion-icon>
<h3>Web Design</h3>
<p class="skill-para">
The most well-known dummy text is the 'Lorem Ipsum', which is said
to have originated in the 16th century.
</p>
</div>
<div class="card card2">
<ion-icon name="code-slash-outline"></ion-icon>
<h3>Web Development</h3>
<p class="skill-para">
The most well-known dummy text is the 'Lorem Ipsum', which is said
to have originated in the 16th century.
</p>
</div>
<div class="card card3">
<ion-icon name="search-outline"></ion-icon>
<h3>SEO</h3>
<p class="skill-para">
The most well-known dummy text is the 'Lorem Ipsum', which is said
to have originated in the 16th century.
</p>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="contact-section" id="contact">
<h2>Contact</h2>
<form>
<label for="name">Name</label>
<input type="text" placeholder="Name"/>
<label for="email">E-mail</label>
<input type="e-mail" placeholder="email"/>
<label for="Message">Message</label>
<textarea name="text-area" id="" cols="30" rows="10"></textarea>
<button>Send</button>
</form>
</section>
<footer>
<p class="footer-para">Made with ❤️ by Abhinav P Kumar.</p>
</footer>
<!-- Ion-icon icon library link -->
<script
type="module"
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"
></script>
</body>
</html>