-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathproject.html
138 lines (125 loc) · 7.7 KB
/
project.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
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<title>Project</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="prjt.css">
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="60">
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item mx-auto ">
<a class="nav-link" href="#section0">Home</a>
</li>
<li class="nav-item mx-auto">
<a class="nav-link" href="#section1">About</a>
</li>
<li class="nav-item mx-auto">
<a class="nav-link" href="#section2">Services</a>
</li>
<li class="nav-item mx-auto">
<a class="nav-link" href="#section3">My Works</a>
</li>
</ul>
</div>
</nav>
<body style="background-color: black;">
<div id="section0" class="text-white" style="padding: 80px 20px 150px 20px;">
<div class="row">
<div class="col-md-8">
<div id="headingContainer" style="width: 80%;">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti aut maxime hic, consectetur praesentium aperiam distinctio incidunt minus nesciunt veritatis, obcaecati doloremque repellat ad quasi sed quam odit. Placeat, impedit! Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, minima! Saepe dolor cum officia atque corrupti expedita commodi tenetur mollitia, asperiores culpa qui quos tempora autem, vel cupiditate veniam in.</p>
<div class="container mt-3">
<button type="button" class="btn btn-dark float-end">Download CV</button>
</div>
<div class="social-icons">
<a id="insta" href="https://www.instagram.com/" target="_blank">
<img src="assests\instaicon.png" alt="Instagram">
</a>
<a id="linkedin" href="https://www.linkedin.com/" target="_blank">
<img src="assests\linkedinicon.png" alt="LinkedIn">
</a>
</div>
</div>
<div class="achievements-container">
<div class="achievement-card">
<img src="assests\wepik-export-20240102072712d19M.png" alt="Achievements">
<h5>Achievements</h5>
</div>
<div class="achievement-card" id="ac2">
<img src="assests\wepik-export-20240102072712d19M.png" alt="Achievements">
<h5>Achievements</h5>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" id="cardg" style="width: 70%; margin-top: 220px; height: 60%;">
<img src="your-image.jpg" class="card-img-top" alt="Card Image">
<div class="card-body">
<h5 class="card-title text-white">Picture</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="section1" class="container-fluid text-white" style="padding:100px 20px; text-align: center;">
<h1 class="gradient-text">About</h1>
<p>Lorem ipsum dolor sit Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur aperiam voluptatum sapiente quod tempore veritatis odio recusandae quis adipisci explicabo, totam modi placeat laborum nihil maiores dolores? Voluptatem, dolorem Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aut debitis sed ipsum natus quasi excepturi vero obcaecati accusamus inventore, deleniti veritatis, corrupti fuga. Dolorem eligendi aut vel incidunt consequatur labore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt provident ullam nihil sed, quaerat optio, unde quisquam impedit ex beatae saepe fugit odit aperiam? Ipsum necessitatibus quod neque iste quae. amet consectetur adipisicing elit. Consectetur aperiam voluptatum sapiente quod tempore veritatis odio recusandae quis adipisci explicabo, totam modi placeat laborum nihil maiores dolores? Voluptatem, dolorem Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aut debitis sed ipsum natus quasi excepturi vero obcaecati accusamus inventore, deleniti veritatis, corrupti fuga. Dolorem eligendi aut vel incidunt consequatur labore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt provident ullam nihil sed, quaerat optio, unde quisquam impedit ex beatae saepe fugit odit aperiam? Ipsum necessitatibus quod neque iste quae. </p>
</div>
<div id="section2" class="container-fluid text-white" style="padding:100px 20px; text-align: center; ">
<h1 class="gradient-text">Services</h1>
<div class="card-group mx-auto" id="backg">
<div class="col-md-4 mb-4">
<div class="card text-white" id="cardg" style="width: 80%;">
<img src="assests\more.png" class="card-img-top mx-auto" alt="Service 1" style="width: 30%; padding: 10px;">
<div class="card-body">
<h5 class="card-title">Service 1</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum quod molestias tenetur, dolorum alias fugit cumque, labore dolore dolorem libero quidem veritatis ab optio voluptatem recusandae nulla veniam maiores sint!</p>
<a href="#" class="btn btn-dark">Read More</a>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card text-white" id="cardg" style="width: 80%;">
<img src="assests\user.png" class="card-img-top mx-auto" alt="Service 2" style="width: 30%; padding: 10px;">
<div class="card-body">
<h5 class="card-title">Service 2</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem possimus earum cupiditate saepe quos esse porro quasi quia ducimus. Voluptates quis aspernatur veniam, unde repellat ratione maxime explicabo animi vel.</p>
<a href="#" class="btn btn-dark">Read More</a>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card text-white" id="cardg" style="width: 80%;">
<img src="assests\notification.png" class="card-img-top mx-auto" style="width: 30%; padding: 10px; " alt="Service 3">
<div class="card-body">
<h5 class="card-title">Service 3</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum eos ipsum corrupti quasi distinctio labore deserunt quo vel possimus minima sit commodi fugiat, dolorum quaerat quas, quia, tenetur nesciunt quibusdam!</p>
<a href="#" class="btn btn-dark">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div id="section3" class="container-fluid text-white" style="padding:100px 20px; text-align: center;">
<h1 class="gradient-text">My Works</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora pariatur, libero excepturi laudantium nostrum dolorem dolorum aliquid sit cum reprehenderit velit illo voluptatibus autem minus voluptatum mollitia quae neque fugiat? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore, veritatis non eos aperiam, totam quia rerum debitis at natus et soluta! Quas adipisci debitis at quia ipsam aliquid nihil repudiandae.</p>
</div>
<div id="section4" class="container-fluid text-white" style="padding:250px 20px; text-align: center;">
<p>FOR MORE INFORMATION</p>
<a id="mail" href="https://www.instagram.com/" target="_blank">
<img src="" alt="Instagram">
</a>
<a id="contact" href="https://www.linkedin.com/" target="_blank">
<img src="" alt="LinkedIn">
</a>
</div>
</body>
</body>
</html>