-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
145 lines (121 loc) · 6.61 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!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>PritamLovesPhotography</title>
<link rel="stylesheet" href="./styles/style.css">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,900|Source+Sans+Pro:300,900&display=swap"
rel="stylesheet">
<link rel="shortcut icon" href="images/favicon 7.ico" type="image/x-icon">
<script src="https://kit.fontawesome.com/52e12744a2.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="logo">
<img src="./images/logo.png" alt="Pritam signature logo">
</div>
<button class="nav-toggle" aria-label="toggle-navigation">
<span class="hamburger"></span>
</button>
<div class="nav">
<ul class="nav_list">
<li class="nav_item"><a href="#home" class="nav_link">Home</a></li>
<li class="nav_item"><a href="#services" class="nav_link">My Services</a></li>
<li class="nav_item"><a href="#about" class="nav_link">About Me</a></li>
<li class="nav_item"><a href="#projects" class="nav_link">My Projects</a></li>
</ul>
</div>
</header>
<!-- Introduction -->
<section class="introduction" id="home">
<h1 class="section_title" id="section_title--introduction">Hi! i am <strong>Pritam Bera</strong></h1>
<p class="section_subtitle" id="section_subtitle--introduction">Front-end Developer</p>
<img src="./images/main photo 1.jpg" alt="Pritam Bera Picture" class="intro__img">
</section>
<!-- My Services -->
<section class="my-services" id="services">
<h2 class="section_title" id="section_title--services">What I Do</h2>
<div class="services">
<div class="service">
<h3>Design + Development</h3>
<p>To be honest i don't know anything about programing and development .. but as i crated this from the help of fcc i think myself as a developer but playing with CSS is fun ..</p>
</div> <!-- /service -->
<div class="service">
<h3>Ocean & MarineLife Enthuasist</h3>
<p>THE OCEANS ARE HOME FOR UP TO 80%
OF ALL LIFE ON EARTH. THE VAST MAJORITY OF OUR SEAS
ARE STILL UNEXPLORED .THE OCEANS ABSORB 4x THE AMOUNT OF CO2
THAN THE AMAZON RAINFOREST. THE SEA AND MARINELIFE MUST BE SAVED FOR FUTURE MANKIND</p>
</div> <!-- /service -->
<div class="service">
<h3>Photography</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, quibusdam, qui aperiam
officia totam illum explicabo dicta harum natus amet unde sunt rem?</p>
</div> <!-- /service -->
</div> <!-- /services -->
<a href="#projects" class="btn">My Projects</a>
</section>
<!-- About Me -->
<section class="about-me" id="about">
<h2 class="section_title " id="section_title--about-me">Who I Am</h2>
<p class="section_subtitle" id="section_subtitle--about-me">Learner, SomeTime I Try to Code!!</p>
<div class="section_about-me_body">
<p>I don't know anything about myself so i add lorem23 hope u like it :)
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis error ipsa consectetur autem itaque
voluptatem sequi similique!</p>
</div>
<img src="./images/who i am 7.jpg" alt="Pritam Bera picture 2" class="about-me_img">
</section> <!-- / About Me -->
<!-- My Projects -->
<section class="my-projects" id="projects">
<h2 class="section_title" id="section_title--my-projects">My Projects</h2>
<p class="section_subtitle" id="section_subtitle--my-projects">Here are some of my work you can check out :)</p>
<!-- Project-showcase -->
<div class="projects">
<!-- Project-item 01 -->
<a href="https://pritambera2000.github.io/MyFirstWeb-devProject/" target="_blank" class="project_item">
<img src="./images/to.PNG" alt="project-image_01" class="project_image">
</a>
<!-- Project-item 02 -->
<a href="my-projects.html" class="project_item">
<img src="./images/my projects 6.jpg" alt="project-image_02" class="project_image">
</a>
<!-- Project-item 03 -->
<a href="#" class="project_item">
<img src="./images/my projects 5.jpg" alt="project-image_03" class="project_image">
</a>
<!-- Project-item 04 -->
<!--<a href="#" class="project_item">
<img src="./images/my projects 1.png" alt="project-image_04" class="project_image">
</a>-->
</div> <!-- / Project Showcase-->
</section> <!-- / My Projects -->
<!-- Footer -->
<footer class="footer"><div class="footer_link">
<h3
>Say Hi!! :)</h3>
<a href="mailto:photography.pritambera@outlook.com"
class="footer_link">photography.pritambera@outlook.com</a>
</div>
<ul class="social_list">
<li class="social_item"><a href="https://github.com/pritambera2000" class="social_link"><i
class="fab fa-github"></i></a></li>
<li class="social_item"><a href="https://codepen.io/pritam___" class="social_link"><i
class="fab fa-codepen"></i></a></li>
<li class="social_item"><a href="https://www.linkedin.com/in/pritam-bera-53b44418b/" class="social_link"><i
class="fab fa-linkedin"></i></a></li>
<li class="social_item"><a href="https://twitter.com/Pritam___" class="social_link"><i
class="fab fa-twitter"></i></a></li>
<li class="social_item"><a href="https://www.instagram.com/pritamlovesphotography/" class="social_link"><i
class="fab fa-instagram"></i></a></li>
<li class="social_item"><a href="https://www.facebook.com/pritamlovesphotography/" class="social_link"><i
class="fab fa-facebook"></i></a></li>
</ul>
<a href="#" class="footer_link">Made with ❤ by Pritam </a>
</footer>
<script src="./JavaScript/index.js"></script>
</body>
</html>