-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
91 lines (91 loc) · 3.62 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<header class="header" id="navbar">
<div class="title-name">
<p class="first-letter-of-title">P</p>
<p>ortfolio</p>
</div>
<ul>
<li id="one"><a href="#welcome-section">About</a></li>
<li><a href="#projects">Work</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#content">Content</a></li>
</ul>
</header>
<div class="info" id="welcome-section">
<p>I am a web developer</p>
<h1>Latifa Wakili</h1>
<button>Learn More</button>
</div>
<div class="content" id="projects">
<h2>SOME OF MY PROJECTS</h2>
<div class="column-one-project">
<div class=" project-tile">
<a href="#">
<img src="images/landing.png" alt="">
<p> Tribute page</p>
</a>
</div>
<div class=" project-tile">
<a href="#">
<img src="images/survey (1).png" alt="">
<p> Survey Form </p></a>
</div>
<div class=" project-tile">
<a href="#">
<img src="images/tribut.png" alt="">
<p> Landing page</p></a>
</div>
</div>
<div class="click-show">
<a href="#">
<button>Show all ></button></a>
</div>
</div>
</div>
<div class="service" id="services">
<h3 class="title">My <span> Services</span></h3>
<div class="info-service">
<div>
<i class="fa fa-laptop" aria-hidden="true"></i>
<h3>Website Design</h3>
<p>Offer to design and create custom websites for individuals or small businesses. You can emphasize your skills in HTML and CSS, ensuring that the websites you create are visually appealing and functional across different devices.</p>
</div>
<div>
<i class="fa fa-mobile-phone" aria-hidden="true"></i>
<h3>Responsive Design</h3>
<p>Highlight your ability to create responsive websites that adapt to various screen sizes, ensuring an optimal viewing experience for users on desktops, laptops, tablets, and smartphones.</p>
</div>
<div>
<i class="fa fa-refresh" aria-hidden="true"></i>
<h3>Website Maintenance</h3>
<p>Offer ongoing maintenance services to keep clients' websites up-to-date with content changes, security updates, and bug fixes. This could include updating text, images, or adding new features as needed.</p>
</div>
</div>
</div>
<div class="footer" id="content">
<h2>Work With Me </h2>
<div class="social-media">
<a href="#"><i class="fa fa-facebook"></i> Facebook</a>
<a href="#"><i class="fa fa-github"></i> GitHub</a>
<a href="#"><i class="fa fa-twitter"></i> Twitter</a>
<a href="#"><i class="fa fa-at"></i> Send a mail</a>
<a href="#"><i class="fa fa-phone"></i> Call me</a>
</div>
<div class="portfolio">
<p>© [Latifa] 2024 | This website is a practice/portfolio project and all projects and contact details are for demonstration purposes only.
</p>
</div>
</div>
</div>
</body>
</html>