-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
116 lines (103 loc) · 5.21 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
<!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="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<title>Usman Shahid | Portfolio</title>
</head>
<body>
<!-- Contact me -->
<main class="contact-me hidden" id="contact-form" onclick="myFunction()">
<nav class="contact-me-top-bar">
<img src="images/Logo.png" alt="" class="logo" alt="Usman Shahid Portfolio Logo">
<div class="cross-icon">x</div>
</nav>
<h1 class="contact-me-heading">Thank you taking the time to reach out. How can I help you today?</h1>
<form action="#">
<label for="name">Name</label>
<input type="text" name="name" id="name">
<label for="email">Email</label>
<input type="email" name="email" id="email">
<label for="message">Message</label>
<textarea name="message" id="" cols="30" rows="10"></textarea>
<input type="button" value="Submit" class="form-button">
</form>
</main>
<nav>
<img src="images/Logo.png" alt="" class="logo" alt="Usman Shahid Portfolio Logo">
<button type="button" class="form-button" id="contact" onclick="myFunction()">Say Hello</button>
</nav>
<header id="banner">
<h1>WordPress Designer & Front-End Developer</h1>
<p class="banner-text">I love designing and building beautiful websites.</p>
<img src="images/Usman Shahid.png" alt="Usman Shahid Front-end Developer" class="banner-img">
<img src="images/Top Front end developer.png" alt="Vector graphic showing life of a website designer" class="banner-vector-graphics">
</header>
<main>
<section class="my-description">
<h2>Hi, I'm Usman. Nice to meet you.</h2>
<p class="my-description-text">Since beginning my journey as a freelance designer nearly 10 years ago, I've done remote work for agencies, consulted for startups, and collaborated with talented people to create digital products for both business and consumer use. I'm quietly
confident, naturally curious, and perpetually working on improving my chops one design problem at a time.</p>
</section>
<section class="my-skills">
<div class="front-end">
<img src="images/Fron-end Developer.png" alt="front-end developer icon" class="skills-icon">
<h2>Front-end Developer</h2>
<p>I like to code things from scratch, and enjoy building beautiful stuff.</p>
<h3>Languages</h3>
<p>HTML, CSS, JavaScript, React</p>
</div>
<div class="divider"></div>
<div class="wordpress-designer">
<img src="images/WordPress Designer.png" alt="wordpress designer icon" class="skills-icon">
<h2>WordPress Designer</h2>
<p>I create stunning WordPress websites. I have over 3 years of experience in WP.</p>
<h3>Expertise</h3>
<p>Landing Pages, Business Websites, E-commerce Stores & Restaurant Websites</p>
</div>
</section>
<section class="recent-work">
<h2>Recent Work</h2>
<p>I create stunning WordPress websites. I have over 3 years of experience in WP.</p>
<div class="work-imgs">
<div class="image">
<img src="images/Project 1.png" alt="project 1">
<h3 class="img-text project-1 ">Drive For Change</h3>
<button class="img-button" type="button">
<a href="https://driveforchange.info" class="live-website">Live Website</a>
</button>
</div>
<div class="image">
<img src="images/Project 2.png" alt="project 2">
<h3 class="img-text project-2">Buy Right</h3>
<button class="img-button" type="button">
<a href="https://buyright.pk" class="live-website">Live Website</a>
</button>
</div>
<div class="image">
<img src="images/Project 3.png" alt="project 3">
<h3 class="img-text">USFS</h3>
<button class="img-button project-3" type="button">
<a href="https://team-usfs.com" class="live-website">Live Website</a>
</button>
</div>
</div>
</section>
</main>
<footer>
<img src="images/Logo white.png" alt="logo white" class="logo-white">
<img src="images/Github icon.png" alt="github icon for all projects" class="github-icon">
<p class="footer-text">Handcrafted by me 2020 </p>
</footer>
<script>
const myFunction = () => {
let contact = document.getElementById('contact-form');
contact.classList.toggle('hidden');
}
</script>
</body>
</html>