-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
153 lines (153 loc) · 6.5 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
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Portfolio website using flexbox layout technique.">
<meta name="keywords" content="Portfolio, Flexbox, HTML, CSS, JavaScript, Single page">
<meta name='author' content="Jon Doe">
<title>Flexbox Portfolio Template</title>
<!-- Bootstrap icons link -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- Normalize link -->
<link rel="stylesheet" href="css/normalize.css">
<!-- CSS link -->
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<!-- Back to top button -->
<button onclick="backToTop()" id="back-to-top" title="Top">Top</button>
<!-- Start header tag -->
<header class="container txt-center">
<nav class="navbar float" id="myTopnav">
<a class="item" href="index.html">Home</a>
<a class="item" href="#portfolio">Portfolio</a>
<a class="item" href="#services">Services</a>
<a class="item" href="#review">Review</a>
<a class="item" href="#contact-me">Contact Me</a>
<a class="icon">
<i class="bi bi-list"></i>
</a>
</nav>
<div class="clear-fix"></div>
<h1 class="title-1">Portfolio Website</h1>
</header>
<!-- End header tag -->
<!-- Start main tag -->
<main>
<!-- Start portfolio section -->
<section class="portfolio container txt-center" id="portfolio">
<h2 class="title-2">Skills</h2>
<div class="skills">
<img src="images/html.svg" class="html" alt="HTML photo">
<img src="images/css.svg" class="css" alt="CSS photo">
<img src="images/js.svg" class="js" alt="JavaScript photo">
</div>
</section>
<!-- End portfolio section -->
<!-- Start services section -->
<section class="services container txt-center" id="services">
<h2 class="title-2">Services</h2>
<div class="allServices">
<div class="service1">
<div class="servTitle">
<h3>Lorem Ipsum</h3>
</div>
<div class="servDescription">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, delectus? Aspernatur aut porro tempora laudantium nemo ducimus nisi culpa aliquid repellat doloribus eos repudiandae quasi illo totam nulla, distinctio saepe.
</p>
</div>
</div>
<div class="service2">
<div class="servTitle">
<h3>Lorem Ipsum</h3>
</div>
<div class="servDescription">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, delectus? Aspernatur aut porro tempora laudantium nemo ducimus nisi culpa aliquid repellat doloribus eos repudiandae quasi illo totam nulla, distinctio saepe.
</p>
</div>
<div class="recommended">Recomended</div>
</div>
<div class="service3">
<div class="servTitle">
<h3>Lorem Ipsum</h3>
</div>
<div class="servDescription">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, delectus? Aspernatur aut porro tempora laudantium nemo ducimus nisi culpa aliquid repellat doloribus eos repudiandae quasi illo totam nulla, distinctio saepe.
</p>
</div>
</div>
</div>
</section>
<!-- End services section -->
<!-- Start review section -->
<section class="review container txt-center" id="review">
<h2 class="title-2">Review</h2>
<div class="cards">
<div class="card1">
<div class="cardTitle">Lorem Ipsum</div>
<div class="cardPhoto">
<img src="images/person-1.svg" alt="Person photo">
</div>
<div class="cardDescription">
<q>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, ipsam. Tempora, qui laborum doloremque aut natus aliquam inventore id. Inventore cum praesentium dolore temporibus quas numquam dolorum iste itaque sit?</q>
</div>
</div>
<div class="card2">
<div class="cardTitle">Lorem Ipsum</div>
<div class="cardPhoto">
<img src="images/person-1.svg" alt="Person photo">
</div>
<div class="cardDescription">
<q>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, ipsam. Tempora, qui laborum doloremque aut natus aliquam inventore id. Inventore cum praesentium dolore temporibus quas numquam dolorum iste itaque sit?</q>
</div>
</div>
<div class="card3">
<div class="cardTitle">Lorem Ipsum</div>
<div class="cardPhoto">
<img src="images/person-1.svg" alt="Person photo">
</div>
<div class="cardDescription">
<q>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, ipsam. Tempora, qui laborum doloremque aut natus aliquam inventore id. Inventore cum praesentium dolore temporibus quas numquam dolorum iste itaque sit?</q>
</div>
</div>
</div>
</section>
<!-- End review section -->
<!-- Start contact-me section -->
<section class="contact-me container txt-center" id="contact-me">
<h2 class="title-2">Contact Me</h2>
<div class="contactInfo">
<p>Please, contact me via the following info:</p>
<address>
<span><strong>E-mail: </strong><a href="mailto: [email protected]">Jon Doe</a></span>
<span><strong>Tel: </strong>(NPA) NXX-XXXX</span>
<span>Box 564, Disneyland, USA</span>
</address>
</div>
</section>
<!-- End contact-me section -->
</main>
<!-- End main tag -->
<!-- Start footer tag -->
<footer class="container txt-center">
<div class="copyright">
<p>© Flexbox Portfolio Template 2021</p>
</div>
<div class="social">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter"></i>
<i class="bi bi-instagram"></i>
<i class="bi bi-linkedin"></i>
</div>
</footer>
<!-- End footer tag -->
<!-- JQuery link -->
<script src="js/jquery-3.7.1.min.js"></script>
<!-- JS link -->
<script src="js/app.js" defer></script>
</body>
</html>