├── HTML
├── img
│ ├── top.png
│ ├── about.jpg
│ ├── logo.png
│ ├── WebSite.jpg
│ ├── banner.jpg
│ ├── banner2.jpg
│ ├── controls.png
│ ├── favicon.png
│ ├── bx_loader.gif
│ ├── contact_image.jpg
│ └── footer_logo.png
├── webfonts
│ ├── fa-brands-400.eot
│ ├── fa-brands-400.ttf
│ ├── fa-solid-900.eot
│ ├── fa-solid-900.ttf
│ ├── fa-solid-900.woff
│ ├── fa-brands-400.woff
│ ├── fa-brands-400.woff2
│ ├── fa-regular-400.eot
│ ├── fa-regular-400.ttf
│ ├── fa-regular-400.woff
│ ├── fa-solid-900.woff2
│ └── fa-regular-400.woff2
├── js
│ ├── main.js
│ └── plugins.js
├── css
│ ├── responsive.css
│ ├── plugins.css
│ ├── fontawesome.min.css
│ └── all.min.css
├── style.css
└── index.html
└── README.md
/HTML/img/top.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/psd-html/HEAD/HTML/img/top.png
--------------------------------------------------------------------------------
/HTML/img/about.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/psd-html/HEAD/HTML/img/about.jpg
--------------------------------------------------------------------------------
/HTML/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/psd-html/HEAD/HTML/img/logo.png
--------------------------------------------------------------------------------
/HTML/img/WebSite.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/psd-html/HEAD/HTML/img/WebSite.jpg
--------------------------------------------------------------------------------
/HTML/img/banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/psd-html/HEAD/HTML/img/banner.jpg
--------------------------------------------------------------------------------
/HTML/img/banner2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/psd-html/HEAD/HTML/img/banner2.jpg
--------------------------------------------------------------------------------
/HTML/img/controls.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/psd-html/HEAD/HTML/img/controls.png
--------------------------------------------------------------------------------
/HTML/img/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/psd-html/HEAD/HTML/img/favicon.png
--------------------------------------------------------------------------------
/HTML/img/bx_loader.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/psd-html/HEAD/HTML/img/bx_loader.gif
--------------------------------------------------------------------------------
/HTML/img/contact_image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/psd-html/HEAD/HTML/img/contact_image.jpg
--------------------------------------------------------------------------------
/HTML/img/footer_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/psd-html/HEAD/HTML/img/footer_logo.png
--------------------------------------------------------------------------------
/HTML/webfonts/fa-brands-400.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/psd-html/HEAD/HTML/webfonts/fa-brands-400.eot
--------------------------------------------------------------------------------
/HTML/webfonts/fa-brands-400.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/psd-html/HEAD/HTML/webfonts/fa-brands-400.ttf
--------------------------------------------------------------------------------
/HTML/webfonts/fa-solid-900.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/psd-html/HEAD/HTML/webfonts/fa-solid-900.eot
--------------------------------------------------------------------------------
/HTML/webfonts/fa-solid-900.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/psd-html/HEAD/HTML/webfonts/fa-solid-900.ttf
--------------------------------------------------------------------------------
/HTML/webfonts/fa-solid-900.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/psd-html/HEAD/HTML/webfonts/fa-solid-900.woff
--------------------------------------------------------------------------------
/HTML/webfonts/fa-brands-400.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/psd-html/HEAD/HTML/webfonts/fa-brands-400.woff
--------------------------------------------------------------------------------
/HTML/webfonts/fa-brands-400.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/psd-html/HEAD/HTML/webfonts/fa-brands-400.woff2
--------------------------------------------------------------------------------
/HTML/webfonts/fa-regular-400.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/psd-html/HEAD/HTML/webfonts/fa-regular-400.eot
--------------------------------------------------------------------------------
/HTML/webfonts/fa-regular-400.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/psd-html/HEAD/HTML/webfonts/fa-regular-400.ttf
--------------------------------------------------------------------------------
/HTML/webfonts/fa-regular-400.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/psd-html/HEAD/HTML/webfonts/fa-regular-400.woff
--------------------------------------------------------------------------------
/HTML/webfonts/fa-solid-900.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/psd-html/HEAD/HTML/webfonts/fa-solid-900.woff2
--------------------------------------------------------------------------------
/HTML/webfonts/fa-regular-400.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/psd-html/HEAD/HTML/webfonts/fa-regular-400.woff2
--------------------------------------------------------------------------------
/HTML/js/main.js:
--------------------------------------------------------------------------------
1 | $(document).ready(function(){
2 | $('.slider').bxSlider();
3 | $.scrollUp();
4 | $('#menu').slicknav();
5 | });
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Convert PSD to HTML5 Responsive
2 |
3 | ## 📝 Description
4 | In this video, you will know how to convert PSD to HTML5 responsive. This website will be fully mobile-friendly and it’s a perfect web development tutorial.
5 | Learning PSD to HTML is a basic job if you want to become a web developer. To create a website first you need a design. Nowadays many designers like to design using Adobe Photoshop and the final design will PSD file. As a developer, you need to know how to convert it into HTML then you can go for WordPress, PHP, or another. So if you are interested to learn PSD to HTML code development check out this video.
6 |
7 |
8 |
9 | ## 🥰 PSD screenshot (PSD not Available, I am Sorry)
10 | 
11 |
12 |
13 | ## 🥰 Follow me
14 | - [@Github](https://github.com/shovoalways/)
15 | - [@Facebook](https://facebook.com/shovoalways/)
16 | - [@Twitter](https://twitter.com/shovoalways/)
17 | - [@Instagram](https://instagram.com/shovoalways/)
18 |
--------------------------------------------------------------------------------
/HTML/css/responsive.css:
--------------------------------------------------------------------------------
1 | /*
2 | Tablet layout
3 | */
4 | @media only screen and (min-width: 200px) and (max-width: 991px){
5 | .content{width: 98%;}
6 | .slider_area .bx-wrapper .bx-pager.bx-default-pager a {border: 3px solid #6a3144;width: 20px;height: 20px;margin: 0 5px;}
7 | .welcome_area .left_welcome {width: 96%;}
8 | .welcome_area .right_welcome {width: 100%;margin-top: 20px;}
9 | .welcome_area .right_welcome img{width: 100%;height: auto}
10 | .welcome_area, .service_area {padding: 20px 0;}
11 | .service_area .inner_service h2.title {font-size: 25px;}
12 | .service_area .inner_service p.sub_title {font-size: 15px;}
13 | .service_area .child_service {padding: 130px 60px 80px 84px;}
14 | }
15 |
16 | /*
17 | Mobile layout
18 | */
19 | @media only screen and (min-width: 200px) and (max-width: 767px){
20 | .top_header_area .social_area {width: 100%;}
21 | .top_header_area .social_area ul {text-align: center;}
22 | .top_header_area .search_area {display: none;}
23 | .slicknav_menu{display: block; background: #97455f;}
24 | .main_menu{display: none}
25 | .service_area .child_service {padding: 50px 50px 40px 70px;}
26 | .contact_area .main_contact_form input[type="submit"] {width: 200px;font-size: 15px;}
27 | .footer_area .footer_logo {width: 200px;}
28 | .footer_area .footer_logo img{max-width: 100%;}
29 | .slider_area .bx-pager {bottom: 15px;}
30 | }
--------------------------------------------------------------------------------
/HTML/css/plugins.css:
--------------------------------------------------------------------------------
1 | /**
2 | * bxSlider v4.2.12
3 | * Copyright 2013-2015 Steven Wanderski
4 | * Written while drinking Belgian ales and listening to jazz
5 | * Licensed under MIT (http://opensource.org/licenses/MIT)
6 | */
7 | .bx-wrapper{position:relative;margin-bottom:60px;padding:0;-ms-touch-action:pan-y;touch-action:pan-y}.bx-wrapper img{max-width:100%;display:block}.bxslider{margin:0;padding:0}ul.bxslider{list-style:none}.bx-viewport{-webkit-transform:translatez(0)}.bx-wrapper{-moz-box-shadow:0 0 5px #ccc;-webkit-box-shadow:0 0 5px #ccc;box-shadow:0 0 5px #ccc;border:5px solid #fff;background:#fff}.bx-wrapper .bx-controls-auto,.bx-wrapper .bx-pager{position:absolute;bottom:-30px;width:100%}.bx-wrapper .bx-loading{min-height:50px;background:url(img/bx_loader.gif) center center no-repeat #fff;height:100%;width:100%;position:absolute;top:0;left:0;z-index:2000}.bx-wrapper .bx-pager{text-align:center;font-size:.85em;font-family:Arial;font-weight:700;color:#666;padding-top:20px}.bx-wrapper .bx-pager.bx-default-pager a{background:#666;text-indent:-9999px;display:block;width:10px;height:10px;margin:0 5px;outline:0;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}.bx-wrapper .bx-pager.bx-default-pager a.active,.bx-wrapper .bx-pager.bx-default-pager a:focus,.bx-wrapper .bx-pager.bx-default-pager a:hover{background:#000}.bx-wrapper .bx-controls-auto .bx-controls-auto-item,.bx-wrapper .bx-pager-item{display:inline-block;vertical-align:bottom}.bx-wrapper .bx-pager-item{font-size:0;line-height:0}.bx-wrapper .bx-prev{left:10px;background:url(img/controls.png) no-repeat 0 -32px}.bx-wrapper .bx-prev:focus,.bx-wrapper .bx-prev:hover{background-position:0 0}.bx-wrapper .bx-next{right:10px;background:url(img/controls.png) no-repeat -43px -32px}.bx-wrapper .bx-next:focus,.bx-wrapper .bx-next:hover{background-position:-43px 0}.bx-wrapper .bx-controls-direction a{position:absolute;top:50%;margin-top:-16px;outline:0;width:32px;height:32px;text-indent:-9999px;z-index:9999}.bx-wrapper .bx-controls-direction a.disabled{display:none}.bx-wrapper .bx-controls-auto{text-align:center}.bx-wrapper .bx-controls-auto .bx-start{display:block;text-indent:-9999px;width:10px;height:11px;outline:0;background:url(img/controls.png) -86px -11px no-repeat;margin:0 3px}.bx-wrapper .bx-controls-auto .bx-start.active,.bx-wrapper .bx-controls-auto .bx-start:focus,.bx-wrapper .bx-controls-auto .bx-start:hover{background-position:-86px 0}.bx-wrapper .bx-controls-auto .bx-stop{display:block;text-indent:-9999px;width:9px;height:11px;outline:0;background:url(img/controls.png) -86px -44px no-repeat;margin:0 3px}.bx-wrapper .bx-controls-auto .bx-stop.active,.bx-wrapper .bx-controls-auto .bx-stop:focus,.bx-wrapper .bx-controls-auto .bx-stop:hover{background-position:-86px -33px}.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager{text-align:left;width:80%}.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto{right:0;width:35px}.bx-wrapper .bx-caption{position:absolute;bottom:0;left:0;background:#666;background:rgba(80,80,80,.75);width:100%}.bx-wrapper .bx-caption span{color:#fff;font-family:Arial;display:block;font-size:.85em;padding:10px}
8 |
9 |
10 |
11 |
12 |
13 | /*!
14 | * SlickNav Responsive Mobile Menu v1.0.10
15 | * (c) 2016 Josh Cope
16 | * licensed under MIT
17 | */.slicknav_btn,.slicknav_nav .slicknav_item{cursor:pointer}.slicknav_menu,.slicknav_menu *{box-sizing:border-box}.slicknav_btn{position:relative;display:block;vertical-align:middle;float:right;padding:.438em .625em;line-height:1.125em}.slicknav_btn .slicknav_icon-bar+.slicknav_icon-bar{margin-top:.188em}.slicknav_menu .slicknav_menutxt{display:block;line-height:1.188em;float:left;color:#fff;font-weight:700;text-shadow:0 1px 3px #000}.slicknav_menu .slicknav_icon{float:left;width:1.125em;height:.875em;margin:.188em 0 0 .438em}.slicknav_menu .slicknav_icon:before{background:0 0;width:1.125em;height:.875em;display:block;content:"";position:absolute}.slicknav_menu .slicknav_no-text{margin:0}.slicknav_menu .slicknav_icon-bar{display:block;width:1.125em;height:.125em;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.25);-moz-box-shadow:0 1px 0 rgba(0,0,0,.25);box-shadow:0 1px 0 rgba(0,0,0,.25)}.slicknav_menu:after,.slicknav_menu:before{content:" ";display:table}.slicknav_menu:after{clear:both}.slicknav_nav li,.slicknav_nav ul{display:block}.slicknav_nav .slicknav_arrow{font-size:.8em;margin:0 0 0 .4em}.slicknav_nav .slicknav_item a{display:inline}.slicknav_nav .slicknav_row,.slicknav_nav a{display:block}.slicknav_nav .slicknav_parent-link a{display:inline}.slicknav_menu{*zoom:1;font-size:16px;background:#4c4c4c;padding:5px}.slicknav_nav,.slicknav_nav ul{list-style:none;overflow:hidden;padding:0}.slicknav_menu .slicknav_icon-bar{background-color:#fff}.slicknav_btn{margin:5px 5px 6px;text-decoration:none;text-shadow:0 1px 1px rgba(255,255,255,.75);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;background-color:#222}.slicknav_nav{clear:both;color:#fff;margin:0;font-size:.875em}.slicknav_nav ul{margin:0 0 0 20px}.slicknav_nav .slicknav_row,.slicknav_nav a{padding:5px 10px;margin:2px 5px}.slicknav_nav .slicknav_row:hover{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;background:#ccc;color:#fff}.slicknav_nav a{text-decoration:none;color:#fff}.slicknav_nav a:hover{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;background:#ccc;color:#222}.slicknav_nav .slicknav_txtnode{margin-left:15px}.slicknav_nav .slicknav_item a,.slicknav_nav .slicknav_parent-link a{padding:0;margin:0}.slicknav_brand{float:left;color:#fff;font-size:18px;line-height:30px;padding:7px 12px;height:44px}
--------------------------------------------------------------------------------
/HTML/style.css:
--------------------------------------------------------------------------------
1 | /*
2 | Common CSS
3 | */
4 | body{font-family: 'Open Sans', sans-serif;color: #333333; font-size: 15px;line-height: 1.5em; margin: 0; padding: 0}
5 | p{font-weight: 400; margin: 0 0 15px}
6 | h1, h2, h3, h4, h5, h6{font-weight: 700; line-height: 1.5em; margin: 0 0 15px}
7 | a{transition: 0.5s; text-decoration: none}
8 | .content{width: 1170px; margin: 0 auto}
9 | #scrollUp{background: url(img/top.png) no-repeat; height: 38px; width: 38px; bottom: 5px; right: 5px; display: block; text-indent: -99999px}
10 | .slicknav_menu{display: none}
11 |
12 | /*
13 | Top Header Area
14 | */
15 | .top_header_area{background: #a88c95; padding: 18px 0; overflow: hidden;}
16 | .top_header_area .inner_header{overflow: hidden}
17 | .top_header_area .social_area{float: left; width: 50%;}
18 | .top_header_area .social_area ul{margin: 0; padding: 0; list-style: none; text-align: left}
19 | .top_header_area .social_area ul li{display: inline-block; margin-right: 5px;}
20 | .top_header_area .social_area ul li a{background: #d2d2d2; color: #6a3144; width: 35px; height: 30px;display: block; text-align: center; padding-top: 5px; border-radius: 50%}
21 | .top_header_area .social_area ul li a:hover{background: #6a3144; color: #fff;}
22 | .top_header_area .search_area{float: right; width: 50%}
23 | .top_header_area .search_area form{width: 300px;float: right}
24 | .top_header_area .search_area input[type="text"]{background: #fff; border: 0; border-radius: 5px 0px 0px 5px; padding: 10px;font-weight: 600;font-size: 14px;width: 200px; float: left}
25 | .top_header_area .search_area input[type="submit"]{background: #97455f; color: #fff; padding: 10px; border: 0; border-radius: 0 5px 5px 0;font-weight: 600;font-size: 14px;width: 80px; float: left; cursor: pointer; transition: 0.5s}
26 | .top_header_area .search_area input[type="submit"]:hover{background: #6a3144; color: #fff;}
27 |
28 |
29 |
30 | /*
31 | Logo Area
32 | */
33 | .logo_area{width: 220px; max-width: 100%; margin: 25px auto; text-align: center}
34 |
35 |
36 |
37 | /*
38 | Main menu
39 | */
40 | .main_menu{background: #97455f;height: 53px;}
41 | .main_menu ul{margin: 0 auto; padding: 0; list-style: none; text-align: center}
42 | .main_menu ul li{display: inline-block; margin: 0 5px}
43 | .main_menu ul li a{color: #fff; font-size: 14px; font-weight: 600; text-transform: uppercase; display: block; padding: 15px 20px;}
44 | .main_menu ul li a:hover{background: #6a3144}
45 |
46 |
47 | /*
48 | Slider Area
49 | */
50 | .slider_area{margin: 0; width: 100%; overflow: hidden;position: relative}
51 | .slider_area .bx-wrapper{border: 0; margin: 0}
52 | .slider_area .bx-controls {position: absolute;bottom: 10px;left: 0;width: 100%;z-index: 999999;height: 10px;}
53 | .slider_area .bx-pager{position: absolute;bottom: 40px;left: 0;width: 100%;z-index: 999999;height: 10px;}
54 | .slider_area .bx-wrapper .bx-pager.bx-default-pager a {border: 5px solid #6a3144;width: 30px;height: 30px;border-radius: 50%;background: none;display: block;margin: 0 10px;}
55 | .slider_area .bx-wrapper .bx-pager.bx-default-pager a.active{background: #6a3144}
56 | .slider_area .slider_images{}
57 | .slider_area .slider_images img{display: block; margin: 0; width: 100%; height: auto}
58 |
59 |
60 | /*
61 | Welcome Area
62 | */
63 | .welcome_area{background: #fff; width: 100%;overflow: hidden;padding: 50px 0 }
64 | .welcome_area .inner_welcome{overflow: hidden;}
65 | .welcome_area .left_welcome{width: 46%; float: left; padding:0 2%}
66 | .welcome_area .left_welcome h3{font-weight: 400; font-size: 30px;text-transform: uppercase}
67 | .welcome_area .left_welcome p{font-size: 18px;}
68 | .welcome_area .left_welcome a{background: #6a3144; display: inline-block; color: #fff; padding: 10px 20px; text-transform: uppercase}
69 | .welcome_area .left_welcome a:hover{background: #97455f}
70 | .welcome_area .right_welcome{width: 50%; float: right}
71 | .welcome_area .right_welcome img{}
72 |
73 |
74 | /*
75 | Service Area
76 | */
77 | .service_area{background: #f5f5f5; padding: 50px 0; width: 100%; overflow: hidden}
78 | .service_area .inner_service{overflow: hidden;}
79 | .service_area .inner_service h2.title{text-align: center;color: #6a3144; font-size: 48px; font-weight: 600; margin-bottom: 0}
80 | .service_area .inner_service p.sub_title{text-align: center; font-size: 18px;}
81 | .service_area .main_service{width: 100%; overflow: hidden; margin-top: 20px;}
82 | .service_area .child_service {width: 225px;padding: 130px 60px 80px 105px;float: left;position: relative;transition: 0.5s; cursor: pointer;}
83 | .service_area .child_service:hover{background: #fff; box-shadow: 10px 10px 10px #ddd}
84 | .service_area .child_service h3{color: #523827; font-size: 100px; font-weight: 700; font-family: 'Oswald', sans-serif;opacity: 0.1; position: absolute; left: 60px; top: 60px}
85 | .service_area .child_service h4{font-size: 20px; font-weight: 700; text-transform: uppercase;margin-top: 28px; }
86 | .service_area .child_service h4 a{color: #523827}
87 | .service_area .child_service h4:hover a{}
88 | .service_area .child_service p{color: #000000; font-size: 14px; opacity: 0.5;}
89 |
90 |
91 |
92 |
93 | /*
94 | Contact Area
95 | */
96 | .contact_area{background: url(img/contact_image.jpg); background-size: cover; background-color: #101f38; padding: 50px 0; width: 100%; overflow: hidden;}
97 | .contact_area .inner_contact{width: 900px;max-width: 100%; overflow: hidden;margin: 0 auto}
98 | .contact_area .inner_contact h2.title{text-align: center;font-weight: 400; font-family: 'Oswald', sans-serif;color: #fff; font-size: 36px}
99 | .contact_area .main_contact_form{width: 100%; overflow: hidden; margin-top: 20px;text-align: center;}
100 | .contact_area .main_contact_form input {background: #fff;border: 0;width: 42%;padding: 15px 3%;float: left;margin: 0 1% 2%;border-radius: 5px;}
101 | .contact_area .main_contact_form textarea {background: #fff;border: 0;width: 92%;margin: 0 1% 2%;padding: 15px 3%;border-radius: 5px;min-height: 100px;}
102 | .contact_area .main_contact_form input[type="submit"] {background: #97455f;width: 250px;margin: 0 auto;float: none;color: #fff;font-size: 21px;font-weight: 600;text-transform: uppercase;border-radius: 25px;cursor: pointer;transition: 0.5s;}
103 | .contact_area .main_contact_form input[type="submit"]:hover {background: #6a3144;}
104 |
105 |
106 |
107 |
108 | /*
109 | Footer Area
110 | */
111 | .footer_area{background: #fff; padding: 30px 0; width: 100%; overflow: hidden;}
112 | .footer_area .inner_footer{overflow: hidden}
113 | .footer_area .footer_logo{width: 420px; max-width: 80%; margin: 0 auto 20px;text-align: center}
114 | .footer_area .copyright_area{width: 100%; overflow: hidden; text-align: center}
115 | .footer_area .copyright_area p{color: #6a3144; font-size: 14px; text-transform: uppercase; margin-bottom: 0}
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 |
--------------------------------------------------------------------------------
/HTML/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | ALI HOSSAIN
10 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
Who We Are
86 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla quam ante, eu placerat enim
87 | consequat at. Vivamus dui orci, posuere et nisl eu, maximus lacinia quam. Nullam justo libero,
88 | volutpat quis feugiat congue, euismod utmagna.
89 |
Sed mollis blandit sollicitudin. Suspendisse mi justo, efficitur eget hendrerit ac, auctor a enim.
90 | Aenean aliquet erat non dui tincidunt tincidunt. Donec ligula lacus, tincidunt quis bibendum sit
91 | amet, egestas at neque.
92 |
Read More ›
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
Our Service
103 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
104 |
105 |
106 |
01
107 |
108 |
Ad hoc Research Associates has one of the most innovative solutions for visualizing network
109 | situational...
110 |
111 |
112 |
02
113 |
114 |
Ad hoc Research Associates has one of the most innovative solutions for visualizing network
115 | situational...
116 |
117 |
118 |
03
119 |
120 |
Ad hoc Research Associates has one of the most innovative solutions for visualizing network
121 | situational...
122 |
123 |
124 |
04
125 |
126 |
Ad hoc Research Associates has one of the most innovative solutions for visualizing network
127 | situational...
128 |
129 |
130 |
05
131 |
132 |
Ad hoc Research Associates has one of the most innovative solutions for visualizing network
133 | situational...
134 |
135 |
136 |
06
137 |
138 |
Ad hoc Research Associates has one of the most innovative solutions for visualizing network
139 | situational...
140 |
141 |
142 |
143 |
144 |
145 |
160 |
161 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
--------------------------------------------------------------------------------
/HTML/js/plugins.js:
--------------------------------------------------------------------------------
1 | /**
2 | * bxSlider v4.2.12
3 | * Copyright 2013-2015 Steven Wanderski
4 | * Written while drinking Belgian ales and listening to jazz
5 | * Licensed under MIT (http://opensource.org/licenses/MIT)
6 | */
7 | !function(t){var e={mode:"horizontal",slideSelector:"",infiniteLoop:!0,hideControlOnEnd:!1,speed:500,easing:null,slideMargin:0,startSlide:0,randomStart:!1,captions:!1,ticker:!1,tickerHover:!1,adaptiveHeight:!1,adaptiveHeightSpeed:500,video:!1,useCSS:!0,preloadImages:"visible",responsive:!0,slideZIndex:50,wrapperClass:"bx-wrapper",touchEnabled:!0,swipeThreshold:50,oneToOneTouch:!0,preventDefaultSwipeX:!0,preventDefaultSwipeY:!1,ariaLive:!0,ariaHidden:!0,keyboardEnabled:!1,pager:!0,pagerType:"full",pagerShortSeparator:" / ",pagerSelector:null,buildPager:null,pagerCustom:null,controls:!0,nextText:"Next",prevText:"Prev",nextSelector:null,prevSelector:null,autoControls:!1,startText:"Start",stopText:"Stop",autoControlsCombine:!1,autoControlsSelector:null,auto:!1,pause:4e3,autoStart:!0,autoDirection:"next",stopAutoOnClick:!1,autoHover:!1,autoDelay:0,autoSlideForOnePage:!1,minSlides:1,maxSlides:1,moveSlides:0,slideWidth:0,shrinkItems:!1,onSliderLoad:function(){return!0},onSlideBefore:function(){return!0},onSlideAfter:function(){return!0},onSlideNext:function(){return!0},onSlidePrev:function(){return!0},onSliderResize:function(){return!0}};t.fn.bxSlider=function(n){if(0===this.length)return this;if(this.length>1)return this.each(function(){t(this).bxSlider(n)}),this;var s={},o=this,r=t(window).width(),a=t(window).height();if(!t(o).data("bxSlider")){var l=function(){t(o).data("bxSlider")||(s.settings=t.extend({},e,n),s.settings.slideWidth=parseInt(s.settings.slideWidth),s.children=o.children(s.settings.slideSelector),s.children.length1||s.settings.maxSlides>1,s.carousel&&(s.settings.preloadImages="all"),s.minThreshold=s.settings.minSlides*s.settings.slideWidth+(s.settings.minSlides-1)*s.settings.slideMargin,s.maxThreshold=s.settings.maxSlides*s.settings.slideWidth+(s.settings.maxSlides-1)*s.settings.slideMargin,s.working=!1,s.controls={},s.interval=null,s.animProp="vertical"===s.settings.mode?"top":"left",s.usingCSS=s.settings.useCSS&&"fade"!==s.settings.mode&&function(){for(var t=document.createElement("div"),e=["WebkitPerspective","MozPerspective","OPerspective","msPerspective"],i=0;i
'),s.viewport=o.parent(),s.settings.ariaLive&&!s.settings.ticker&&s.viewport.attr("aria-live","polite"),s.loader=t('
'),s.viewport.prepend(s.loader),o.css({width:"horizontal"===s.settings.mode?1e3*s.children.length+215+"%":"auto",position:"relative"}),s.usingCSS&&s.settings.easing?o.css("-"+s.cssPrefix+"-transition-timing-function",s.settings.easing):s.settings.easing||(s.settings.easing="swing"),s.viewport.css({width:"100%",overflow:"hidden",position:"relative"}),s.viewport.parent().css({maxWidth:u()}),s.children.css({float:"horizontal"===s.settings.mode?"left":"none",listStyle:"none",position:"relative"}),s.children.css("width",h()),"horizontal"===s.settings.mode&&s.settings.slideMargin>0&&s.children.css("marginRight",s.settings.slideMargin),"vertical"===s.settings.mode&&s.settings.slideMargin>0&&s.children.css("marginBottom",s.settings.slideMargin),"fade"===s.settings.mode&&(s.children.css({position:"absolute",zIndex:0,display:"none"}),s.children.eq(s.settings.startSlide).css({zIndex:s.settings.slideZIndex,display:"block"})),s.controls.el=t('
'),s.settings.captions&&P(),s.active.last=s.settings.startSlide===f()-1,s.settings.video&&o.fitVids(),("all"===s.settings.preloadImages||s.settings.ticker)&&(e=s.children),s.settings.ticker?s.settings.pager=!1:(s.settings.controls&&C(),s.settings.auto&&s.settings.autoControls&&T(),s.settings.pager&&w(),(s.settings.controls||s.settings.autoControls||s.settings.pager)&&s.viewport.after(s.controls.el)),c(e,g)},c=function(e,i){var n=e.find('img:not([src=""]), iframe').length,s=0;return 0===n?void i():void e.find('img:not([src=""]), iframe').each(function(){t(this).one("load error",function(){++s===n&&i()}).each(function(){this.complete&&t(this).trigger("load")})})},g=function(){if(s.settings.infiniteLoop&&"fade"!==s.settings.mode&&!s.settings.ticker){var e="vertical"===s.settings.mode?s.settings.minSlides:s.settings.maxSlides,i=s.children.slice(0,e).clone(!0).addClass("bx-clone"),n=s.children.slice(-e).clone(!0).addClass("bx-clone");s.settings.ariaHidden&&(i.attr("aria-hidden",!0),n.attr("aria-hidden",!0)),o.append(i).prepend(n)}s.loader.remove(),m(),"vertical"===s.settings.mode&&(s.settings.adaptiveHeight=!0),s.viewport.height(p()),o.redrawSlider(),s.settings.onSliderLoad.call(o,s.active.index),s.initialized=!0,s.settings.responsive&&t(window).bind("resize",Z),s.settings.auto&&s.settings.autoStart&&(f()>1||s.settings.autoSlideForOnePage)&&H(),s.settings.ticker&&W(),s.settings.pager&&I(s.settings.startSlide),s.settings.controls&&D(),s.settings.touchEnabled&&!s.settings.ticker&&N(),s.settings.keyboardEnabled&&!s.settings.ticker&&t(document).keydown(F)},p=function(){var e=0,n=t();if("vertical"===s.settings.mode||s.settings.adaptiveHeight)if(s.carousel){var o=1===s.settings.moveSlides?s.active.index:s.active.index*x();for(n=s.children.eq(o),i=1;i<=s.settings.maxSlides-1;i++)n=o+i>=s.children.length?n.add(s.children.eq(i-1)):n.add(s.children.eq(o+i))}else n=s.children.eq(s.active.index);else n=s.children;return"vertical"===s.settings.mode?(n.each(function(i){e+=t(this).outerHeight()}),s.settings.slideMargin>0&&(e+=s.settings.slideMargin*(s.settings.minSlides-1))):e=Math.max.apply(Math,n.map(function(){return t(this).outerHeight(!1)}).get()),"border-box"===s.viewport.css("box-sizing")?e+=parseFloat(s.viewport.css("padding-top"))+parseFloat(s.viewport.css("padding-bottom"))+parseFloat(s.viewport.css("border-top-width"))+parseFloat(s.viewport.css("border-bottom-width")):"padding-box"===s.viewport.css("box-sizing")&&(e+=parseFloat(s.viewport.css("padding-top"))+parseFloat(s.viewport.css("padding-bottom"))),e},u=function(){var t="100%";return s.settings.slideWidth>0&&(t="horizontal"===s.settings.mode?s.settings.maxSlides*s.settings.slideWidth+(s.settings.maxSlides-1)*s.settings.slideMargin:s.settings.slideWidth),t},h=function(){var t=s.settings.slideWidth,e=s.viewport.width();if(0===s.settings.slideWidth||s.settings.slideWidth>e&&!s.carousel||"vertical"===s.settings.mode)t=e;else if(s.settings.maxSlides>1&&"horizontal"===s.settings.mode){if(e>s.maxThreshold)return t;e0?s.viewport.width()s.maxThreshold?t=s.settings.maxSlides:(e=s.children.first().width()+s.settings.slideMargin,t=Math.floor((s.viewport.width()+s.settings.slideMargin)/e)):"vertical"===s.settings.mode&&(t=s.settings.minSlides),t},f=function(){var t=0,e=0,i=0;if(s.settings.moveSlides>0)if(s.settings.infiniteLoop)t=Math.ceil(s.children.length/x());else for(;e0&&s.settings.moveSlides<=v()?s.settings.moveSlides:v()},m=function(){var t,e,i;s.children.length>s.settings.maxSlides&&s.active.last&&!s.settings.infiniteLoop?"horizontal"===s.settings.mode?(e=s.children.last(),t=e.position(),S(-(t.left-(s.viewport.width()-e.outerWidth())),"reset",0)):"vertical"===s.settings.mode&&(i=s.children.length-s.settings.minSlides,t=s.children.eq(i).position(),S(-t.top,"reset",0)):(t=s.children.eq(s.active.index*x()).position(),s.active.index===f()-1&&(s.active.last=!0),void 0!==t&&("horizontal"===s.settings.mode?S(-t.left,"reset",0):"vertical"===s.settings.mode&&S(-t.top,"reset",0)))},S=function(e,i,n,r){var a,l;s.usingCSS?(l="vertical"===s.settings.mode?"translate3d(0, "+e+"px, 0)":"translate3d("+e+"px, 0, 0)",o.css("-"+s.cssPrefix+"-transition-duration",n/1e3+"s"),"slide"===i?(o.css(s.animProp,l),0!==n?o.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(e){t(e.target).is(o)&&(o.unbind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd"),q())}):q()):"reset"===i?o.css(s.animProp,l):"ticker"===i&&(o.css("-"+s.cssPrefix+"-transition-timing-function","linear"),o.css(s.animProp,l),0!==n?o.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(e){t(e.target).is(o)&&(o.unbind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd"),S(r.resetValue,"reset",0),L())}):(S(r.resetValue,"reset",0),L()))):(a={},a[s.animProp]=e,"slide"===i?o.animate(a,n,s.settings.easing,function(){q()}):"reset"===i?o.css(s.animProp,e):"ticker"===i&&o.animate(a,n,"linear",function(){S(r.resetValue,"reset",0),L()}))},b=function(){for(var e="",i="",n=f(),o=0;o