-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportfolio.html
159 lines (145 loc) · 7.18 KB
/
portfolio.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
154
155
156
157
158
159
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="stylesheet.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?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">
<title> GSD - About</title>
</head>
<body class="dark-bg">
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<!-- Navigation bar -->
<header class="navbar sticky-top navbar-dark navbar-expand-md">
<a class="navbar-brand" href="#top"><img class="logo" src="logo-gold.svg" alt="company logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html"> HOME </a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html"> ABOUT </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"> PORTFOLIO <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="calculator.html"> CALCULATOR </a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html"> CONTACT</a>
</li>
</ul>
</div>
</header>
<main>
<!--portfolio section-->
<section id="portfolio-images">
<div class="container-fluid grey-bg">
<div class="row justify-content-center">
<h5 class="h5-page">PORTFOLIO</h5>
</div>
<div class="row justify-content-center">
<h3 class="h3-page">OUR LATEST PROJECTS</h3>
</div>
<div class="row justify-content-center">
<div class="col-lg-5">
<div class="portfolio-card">
<img class="card-img-top img-fluid portfolio-card-image" src="images/card_image_ws.jpg" alt="an image of a room">
<div class="card-body">
<h5 class="h5-gold">HOME CINEMA</h5>
</div>
</div>
</div>
<div class="col-lg-5">
<div class="portfolio-card">
<img class="card-img-top img-fluid portfolio-card-image" src="images/about_image_ws.jpg" alt="an image of a room">
<div class="card-body">
<h5 class="h5-gold">LUXURY BEDROOM</h5>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-5">
<div class="portfolio-card">
<img class="card-img-top img-fluid portfolio-card-image" src="images/image_1_ws.jpg" alt="an image of a room">
<div class="card-body">
<h5 class="h5-gold">RECEPTION WAITING AREA</h5>
</div>
</div>
</div>
<div class="col-lg-5">
<div class="portfolio-card">
<img class="card-img-top img-fluid portfolio-card-image" src="images/image_2_ws.jpg" alt="an image of a room">
<div class="card-body">
<h5 class="h5-gold">HIGH-END APARTMENT</h5>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-5">
<div class="portfolio-card">
<img class="card-img-top img-fluid portfolio-card-image" src="images/image_6_ws.jpg" alt="an image of a room">
<div class="card-body">
<h5 class="h5-gold">WOOD FINISH LOUNGE</h5>
</div>
</div>
</div>
<div class="col-lg-5">
<div class="portfolio-card">
<img class="card-img-top img-fluid portfolio-card-image" src="images/image_3_ws.jpg" alt="an image of a room">
<div class="card-body">
<h5 class="h5-gold">MINIMALIST BEDROOM</h5>
</div>
</div>
</div>
</div>
<div class="row justify-content-center pb-5">
<div class="col-lg-5">
<div class="portfolio-card">
<img class="card-img-top img-fluid portfolio-card-image" src="images/image_4_ws.jpg" alt="an image of a room">
<div class="card-body">
<h5 class="h5-gold">LIGHT BEDROOM</h5>
</div>
</div>
</div>
<div class="col-lg-5">
<div class="portfolio-card">
<img class="card-img-top img-fluid portfolio-card-image" src="images/image_5_ws.jpg" alt="an image of a room">
<div class="card-body">
<h5 class="h5-gold">LIGHT FRONT ROOM</h5>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container-fluid">
<div class="row justify-content-center">
<p class="p-10m">© Copyright - GSD Painting & Decorating</p>
</div>
</div>
</footer>
</body>
</html>