-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
148 lines (147 loc) · 6.06 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="discription" content="it ia portofolio of Patricia Pereira frontend developer">
<title>styling</title>
<link href="css/style.css" rel="stylesheet" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous"
/>
<script src="https://kit.fontawesome.com/db72504999.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400;500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@500&family=Markazi+Text:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:wght@500;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<!-- Menu -->
<div class="container" id="menu">
<nav class="d-flex justify-content-between">
<img src="/img/logo.png" class="d-none d-md-block" alt="logo" />
<img
src="https://uploads.codesandbox.io/uploads/user/536b9ee2-9d41-444a-a85a-62ae77e381ac/L9xk-logo-small.jpg"
class="d-block d-md-none"
alt="small-logo"
/>
<ul>
<li class="active">
<a href="/" title="Home">Home</a>
</li>
<li>
<a href="/about.html" title="about Patricia Pereira">About</a>
</li>
<li>
<a href="/work.html" title="portifolio Patricia Pereira">Work</a>
</li>
<li>
<a href="/contact.html" title="contact to Patricia Pereira">Contact</a>
</li>
</ul>
</nav>
</div>
<!-- End menu -->
<section id="hero">
<div class="hero">
<p>👋 Hi I'm</p>
<h1>Patricia Pereira</h1>
<h2>Front-end developer based in Portugal</h2>
<a href="#" class="btn btn-branding">Get Started</a>
</div>
</section>
<section id="product">
<p class="text-center m-5">
Featured Project which my best projects be choice to show
</p>
<div class="container">
<!-- Item1 -->
<div class="row mb-5">
<div class="col d-none d-lg-block">
<img src="/img/product1.png" alt="productimage" class="img-fluid" />
</div>
<div class="col textalign">
<h2 class="mb-5">Yogurt Project</h2>
<p class="mb-5">
Far far away, behind the word mountains, far from the countries
Vokalia and Consonantia, there live the blind texts. Separated
they live in Bookmarksgrove right at the coast of the Semantics, a
large language ocean. A small river named Duden flows by
</p>
<a href="work.html" title="portofolio" class="btn btn-costum">View detail project</a>
</div>
</div>
<!-- Item2 -->
<div class="row mb-5">
<div class="col textalign">
<h2 class="mb-5">Weather App</h2>
<p class="mb-5">
Far far away, behind the word mountains, far from the countries
Vokalia and Consonantia, there live the blind texts. Separated
they live in Bookmarksgrove right at the coast of the Semantics, a
large language ocean. A small river named Duden flows by
</p>
<a href="work.html" title="portifolio" class="btn btn-costum">View detail project</a>
</div>
<div class="col d-none d-lg-block">
<img src="/img/product2.png" alt="productimage" class="img-fluid" />
</div>
</div>
<!-- Item3 -->
<div class="row mb-5">
<div class="col d-none d-lg-block">
<img src="/img/product3.png" alt="productimage" class="img-fluid" />
</div>
<div class="col textalign">
<h2 class="mb-5">Dictionary App</h2>
<p class="mb-5">
Far far away, behind the word mountains, far from the countries
Vokalia and Consonantia, there live the blind texts. Separated
they live in Bookmarksgrove right at the coast of the Semantics, a
large language ocean. A small river named Duden flows by
</p>
<a href="work.html" title="portifolio" class="btn btn-costum">View detail project</a>
</div>
</div>
</section>
<!-- ======== Footer ========= -->
<footer>
<div class="contact-box">
<div class="row">
<div class="col-md-6 col-sm">
<h4>Work Inquiry</h4>
<p class="mb-0">Let's work together</p>
</div>
<div class="col-md-6 col-sm">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 mt-4 mt-md-0">
<a href="contact.html" title="contact" class="btn btn-branding">Contact us</a>
</div>
<div class="col-md-4"></div>
</div>
</div>
</div>
</div>
<a href="emailto:[email protected]" class="email-link d-flex justify-content-center">[email protected]</a>
<div class="socialmedia-link d-flex justify-content-center">
<a href="www.instagram.com" title="instagramprofile" target="_blank">
<i class="fab fa-instagram"></i>
</a>
<a href="www.github.com" title="githubprofiles" target="_blank">
<i class="fab fa-github"></i>
</a>
<a href="www.twitter.com" title="twitterprofile" target="_blank">
<i class="fab fa-twitter"></i>
</a>
</div>
<p class="text-center mt-4"> This is opensource available in <a href="https://github.com/fatemehkhoramdel/styling" title="source of project"> Fatemehkhoramdel github </a></p>
</footer>
</div>
</body>
</html>