forked from mdsami/portfolio
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathproject.php
155 lines (137 loc) · 11.5 KB
/
project.php
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
<?php
/**
* Template Name: Projects
*
* If the user has selected a static page for their homepage, this is what will
* appear.
* Learn more: https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage Mdsami_Portfolio
* @since 1.0
* @version 1.0
*/
get_header(); ?>
<div class="main-wrapper">
<section class="cta-section theme-bg-light py-5">
<div class="container single-col-max-width">
<h2 class="heading text-center">Case Study: Project Name</h2>
<div class="project-intro text-center">
<p class="mb-0 lead">Project intro goes here. In the intro it's a good idea to answer a potential client's need/problem so it's more likely to land your next project or job.</p>
</div>
</div><!--//container-->
</section>
<section class="project px-3 py-5 p-md-5">
<div class="container">
<div class="project-meta media flex-column flex-md-row p-4 theme-bg-light">
<img class="project-thumb mb-3 mb-md-0 mr-md-5 rounded d-none d-md-inline-block" src="assets/images/project/project-3.jpg" alt="">
<div class="media-body">
<div class="client-info">
<h3 class="client-name font-weight-bold mb-4">Client Name</h3>
<ul class="client-meta list-unstyled">
<li class="mb-2"><i class="fas fa-industry fa-fw mr-2"></i><strong>Industry:</strong> Tech</li>
<li class="mb-2"><i class="fas fa-users fa-fw mr-2"></i><strong>Size:</strong> 100+</li>
<li class="mb-2"><strong><i class="fas fa-link fa-fw mr-2"></i>Website:</strong> <a class="theme-link" href="#">clientsite.com</a></li>
</ul>
<div class="client-bio mb-4">Short description of the client and project requirements. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
<h4 class="subheading mb-3">Project Requirements</h4>
<ul class="mb-0">
<li class="mb-2">Requirement lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li class="mb-2">Requirement donec pede justo, fringilla vel, aliquet nec.</li>
<li class="mb-2">Requirement phasellus ullamcorper ipsum rutrum nunc. </li>
</ul>
</div>
</div><!--//media-body-->
</div><!--//project-meta-->
<div class="project-sections py-5">
<div class="project-section mb-5">
<h3 class="project-section-title mb-3">Project Overview</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. </p>
</div><!--//project-section-->
<div class="project-section mb-5">
<h3 class="project-section-title">The Challenge</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. </p>
</div><!--//project-section-->
<div class="project-section mb-5">
<h3 class="project-section-title">The Approach & Solution</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. </p>
<div class="row mt-5">
<div class="col-12 col-lg-6 mb-5">
<img class="img-fluid rounded" src="assets/images/project/project-figure-1.jpg" alt="image">
</div>
<div class="col-12 col-lg-6 mb-5">
<img class="img-fluid rounded" src="assets/images/project/project-figure-2.jpg" alt="image">
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. </p>
</div><!--//project-section-->
<div class="project-section mb-5">
<h3 class="project-section-title mb-3">The Results</h3>
<div class="metrics mb-4">
<div class="row">
<div class="metric col-6 col-xl-3 mb-3">
<div class="inner p-3 theme-bg-light">
<div class="metric-name">Efficiency</div>
<div class="metric-data mb-2">20% <span class="unit">up</span></div>
<div class="metric-desc">Metric description lorem ipsum dolor sit amet.</div>
</div>
</div><!--//metric-->
<div class="metric col-6 col-xl-3 mb-3">
<div class="inner p-3 theme-bg-light">
<div class="metric-name">Customer Satisfaction</div>
<div class="metric-data mb-2">14% <span class="unit">up</span></div>
<div class="metric-desc">Metric description lorem ipsum dolor sit amet.</div>
</div>
</div><!--//metric-->
<div class="metric col-6 col-xl-3 mb-3">
<div class="inner p-3 theme-bg-light">
<div class="metric-name">Sales Generated</div>
<div class="metric-data mb-2">$130K</div>
<div class="metric-desc">Metric description lorem ipsum dolor sit amet.</div>
</div>
</div><!--//metric-->
<div class="metric col-6 col-xl-3 mb-3">
<div class="inner p-3 theme-bg-light">
<div class="metric-name">Overall Cost</div>
<div class="metric-data mb-2">20% <span class="unit">down</span></div>
<div class="metric-desc">Metric description lorem ipsum dolor sit amet.</div>
</div>
</div><!--//metric-->
</div><!--//row-->
</div><!--//metrics-->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. </p>
</div><!--//project-section-->
<div class="project-section mb-5">
<h3 class="project-section-title mb-3">Client Testimonial</h3>
</div><!--//project-section-->
<div class="client-quote">
<div class="quote-holder">
<blockquote class="quote-content">
Simon is a brilliant software engineer! Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis.
</blockquote>
<i class="fas fa-quote-left"></i>
</div><!--//quote-holder-->
<div class="source-holder">
<div class="source-profile">
<img src="assets/images/clients/profile-4.png" alt="image"/>
</div>
<div class="meta">
<div class="name">James Lee</div>
<div class="info">Product Manager, Amazon</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="promo-section theme-bg-light py-5 text-center">
<div class="container single-col-max-width">
<h2 class="title">Want me to help with your project?</h2>
<p>If you take on freelance work, you can use this section to prompt any potential clients to get in touch with you with their project requirements.</p>
<div class="text-center"><a class="btn btn-primary" href="contact.html" target="_blank"><i class="fas fa-paper-plane mr-2"></i>Hire Me</a></div>
</div><!--//container-->
</section><!--//promo-section-->
<footer class="footer text-center py-4">
<small class="copyright"> Copyright © 2020 <a href="http://mdsami.me/" target="_blank"> mdsami</a></small>
</footer>
</div><!--//main-wrapper-->