generated from rebecalasconi/goit-markup-hw-01
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportofolio.html
141 lines (125 loc) · 6.29 KB
/
portofolio.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portofoliu</title>
<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=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/style.css" />
</head>
<body class="body">
<!--Header section-->
<header class="header">
<nav class="navigation">
<div>
<a href="#"><p><b><span class="header__logo__web">Web</span>Studio</b></p></a>
</div>
</nav>
<div class="list">
<ul>
<li>
<a href="index.html"><span class="Studio">Studio</span></a>
</li>
<li>
<a href="portofolio.html"><span class="second__list">Portofolio</span></a>
</li>
<li>
<a href="#">Contacts</a>
</li>
<li>
<a href="mailto:[email protected]" class="list__address">@devstudio.com</a>
</li>
<li>
<a href="tel:+12127724150" class="list__tel">+1 212-772-4150</a>
</li>
</ul>
</div>
</header>
<!--Portiunea principala a paginii web-->
<main>
<div class="selection">
<button type="button">All</button>
<button type="button">Web-sites</button>
<button type="button">Apps</button>
<button type="button">Design</button>
<button type="button">Marketing</button>
</div>
<!--Container cu carduri despre proiectele 1-3 realizate-->
<div style="display: flex; gap: 30px;" class="cards">
<!--Container 1-->
<div class="container__portofolio">
<img src="./images/technoduck.jpg" alt="Images with Sara Grant, Luke Jacobs, Claire Olson " width="294"/>
<p class="cards__title"><b>Technoduch</b></p>
<p class="cards__subtitle">Web-site</p>
</div>
<!--Container 2-->
<div class="container__portofolio">
<img src="./images/poster-new-orlean-vs-golden-star.jpg" alt="Basketball poster New Orlean vs Golden Star" width="294"/>
<p class="cards__title"><b>Poster New Orlean vs Golden Star</b></p>
<p class="cards__subtitle">Design</p>
</div>
<!--Container 3-->
<div class="container__portofolio">
<img src="./images/seafood-restaurant.jpg" alt="Seafood restaurant logo" width="294"/>
<p class="cards__title"><b>Seafood Restaurant</b></p>
<p class="cards__subtitle">Apps</p>
</div>
</div>
<!--Container cu carduri despre proiectele 4-6 realizate-->
<div style="display: flex; gap: 30px;" class="cards">
<!--Container 4-->
<div class="container__portofolio">
<img src="./images/project-prime.jpg" alt="Headphones image" width="294"/>
<p class="cards__title"><b>Project Prime</b></p>
<p class="cards__subtitle">Marketing</p>
</div>
<!--Container 5-->
<div class="container__portofolio">
<img src="./images/project-boxes.jpg" alt="Project Boxes image" width="294"/>
<p class="cards__title"><b>Project Boxes</b></p>
<p class="cards__subtitle">Apps</p>
</div>
<!--Container 6-->
<div class="container__portofolio">
<img src="./images/inspiration-has-no-borders.jpg" alt="Web-site with worldmap image" width="294"/>
<p class="cards__title"><b>Inspiration has no Borders</b></p>
<p class="cards__subtitle">Web-site</p>
</div>
</div>
<!--Container cu carduri despre proiectele 7-9 realizate-->
<div style="display: flex; gap: 30px;" class="cards">
<!--Container 7-->
<div class="container__portofolio">
<img src="./images/technoduck.jpg" alt="Magazine I'am Limited Edition image" width="294"/>
<p class="cards__title"><b>Limited Edition</b></p>
<p class="cards__subtitle">Design</p>
</div>
<!--Container 8-->
<div class="container__portofolio">
<img src="./images/project-lab.jpg" alt="Lab el tag image" width="294"/>
<p class="cards__title"><b>Project LAB</b></p>
<p class="cards__subtitle">Marketing</p>
</div>
<!--Container 9-->
<div class="container__portofolio">
<img src="./images/growing-business.jpg" alt="Laptop with Growing Business window open image" width="294"/>
<p class="cards__title"><b>Growing Business</b></p>
<p class="cards__subtitle">Apps</p>
</div>
</div>
</main>
<!--Footer section-->
<footer class="footer">
<div><a id="footer__logo" href="#"><p><b><span class="footer__logo__web">Web</span>Studio</b></p></a></div>
<div id="Contact">
<address class="footer__address">
<a class="footer__address__map" href="https://www.mapquest.com/us/ny/new-york/10065-5024/695-park-ave-40.76874,-73.96518">695 Park Ave, NY 10065, USA</a><br>
<a href="mailto:[email protected]">[email protected]</a><br>
<a href="tel:+12127724150">+1 212-772-4150</a>
</address>
</div>
</footer>
</body>
</html>