forked from ShaifArfan/HTML-CSS-Mini-Project-portfolio
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (126 loc) · 5.75 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
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Cifar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- nav-bar -->
<section id="nav-bar" class="container">
<header class="nav-bar">
<div class="brand"><a href="#hero"><h1>Web Cifar</h1></a></div>
<div class="nav-list">
<div class="hamburger">
<div class="bar"></div>
</div>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#services">services</a></li>
<li><a href="#hire">Hire Me</a></li>
</ul>
</div>
</header>
</section>
<!-- End nav-bar -->
<!-- Hero Section -->
<section id="hero" class="hero container">
<div class="hero-info">
<h1 class="hero-info-heading">I Design <br>Your Dream</h1>
<p class="hero-info-subheading">I am a web designer</p>
<a href="#" type="button" class="hero-info-button">Portfolio</a>
</div>
<div class="hero-img">
<img src="./images/img-1.jpg" alt="">
</div>
</section>
<!-- End Hero Section -->
<!-- About section -->
<section id="about" class="about container">
<div class="about-info">
<h1 class="about-info-heading">About Me</h1>
<p class="about-info-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi suscipit quidem ullam voluptates repellendus explicabo placeat, expedita ratione saepe eaque dolorum sed deleniti, odit numquam, nostrum tempore quos corrupti rem.</p>
<a href="#" type="button" class="about-info-button">Download Resume</a>
</div>
<div class="about-img">
<div class="about-img-wrapper">
<img src="./images/img-2.jpg" alt="">
</div>
</div>
</section>
<!-- End About section -->
<!-- Service Section -->
<section id="services" class="services container">
<div class="services-header">
<h1 class="services-header-heading">services</h1>
<p class="services-header-desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni temporibus, omnis illum ipsa reiciendis illo eos odio possimus voluptatibus architecto.</p>
</div>
<div class="services-info">
<div class="service">
<div class="service-card">
<div class="service-front">
<i class="fa fa-palette"></i>
<h1 class="service-front-heading">Web Design</h1>
</div>
<div class="service-back">
<h1 class="service-back-heading">Web Design</h1>
<p class="service-back-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum aut dolor voluptatem incidunt placeat impedit laboriosam quam consequatur quasi nihil libero ad, quaerat, alias illum excepturi. Iste quo repellendus consequuntur asperiores dignissimos, quaerat obcaecati officiis repudiandae fugit tenetur nulla impedit!</p>
</div>
</div>
</div>
<div class="service">
<div class="service-card">
<div class="service-front">
<i class="fa fa-laptop-code"></i>
<h1 class="service-front-heading">Font End Dev</h1>
</div>
<div class="service-back">
<h1 class="service-back-heading">Front End Dev</h1>
<p class="service-back-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum aut dolor voluptatem incidunt placeat impedit laboriosam quam consequatur quasi nihil libero ad, quaerat, alias illum excepturi. Iste quo repellendus consequuntur asperiores dignissimos, quaerat obcaecati officiis repudiandae fugit tenetur nulla impedit!</p>
</div>
</div>
</div>
<div class="service">
<div class="service-card">
<div class="service-front">
<i class="fa fa-building"></i>
<h1 class="service-front-heading">Branding</h1>
</div>
<div class="service-back">
<h1 class="service-back-heading">Branding</h1>
<p class="service-back-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum aut dolor voluptatem incidunt placeat impedit laboriosam quam consequatur quasi nihil libero ad, quaerat, alias illum excepturi. Iste quo repellendus consequuntur asperiores dignissimos, quaerat obcaecati officiis repudiandae fugit tenetur nulla impedit!</p>
</div>
</div>
</div>
</div>
</section>
<!-- End Service Section -->
<!-- Hire Section -->
<section id="hire" class="hire container">
<h1 class="hire-heading">Hire me to build your dream website</h1>
<a href="#" type="button" class="hire-button">Hire Me !!</a>
</section>
<!-- End Hire Section -->
<!-- Footer section -->
<footer id="footer" class="footer container">
<div class="footer-contact">
<h1 class="footer-contact-heading">Contact With Me</h1>
<p class="footer-contact-info">Email: yourname@gamil.com</p>
<p class="footer-contact-info">Mobile: 234 234 2342</p>
</div>
<div class="footer-social-follow">
<h1 class="footer-social-follow-heading">Follow Me</h1>
<div class="footer-social-icon">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-instagram-square"></i></a>
<a href="#"><i class="fab fa-behance-square"></i></a>
<a href="#"><i class="fab fa-dribbble-square"></i></a>
</div>
</div>
</footer>
<!-- End Footer section -->
<script src="./app.js"></script>
</body>
</html>