├── Sugadev.jpeg
├── prepros-6.config
└── index.html


/Sugadev.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sugadev792/Portfolio/HEAD/Sugadev.jpeg


--------------------------------------------------------------------------------
/prepros-6.config:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "html",
  3 |   "firstRun": false,
  4 |   "exportConfig": true,
  5 |   "fileConfigs": [],
  6 |   "fileTree": {
  7 |     "expandedDirs": [],
  8 |     "hideSystemFiles": true,
  9 |     "systemFiles": [
 10 |       ".*",
 11 |       "desktop.ini",
 12 |       "prepros.config",
 13 |       "$RECYCLE.BIN",
 14 |       "prepros.cfg",
 15 |       "prepros-6.config",
 16 |       "Prepros Export"
 17 |     ],
 18 |     "hideUnwatchedFiles": false
 19 |   },
 20 |   "imports": [],
 21 |   "projectView": {
 22 |     "selectedView": "file-tree"
 23 |   },
 24 |   "fileWatcher": {
 25 |     "enabled": true,
 26 |     "watchedExtensions": [
 27 |       "less",
 28 |       "sass",
 29 |       "scss",
 30 |       "styl",
 31 |       "md",
 32 |       "markdown",
 33 |       "coffee",
 34 |       "js",
 35 |       "jade",
 36 |       "haml",
 37 |       "slim",
 38 |       "ls",
 39 |       "kit",
 40 |       "png",
 41 |       "jpg",
 42 |       "jpeg",
 43 |       "ts",
 44 |       "pug",
 45 |       "css",
 46 |       "html",
 47 |       "htm",
 48 |       "php"
 49 |     ]
 50 |   },
 51 |   "pathFilters": [
 52 |     "node_modules",
 53 |     ".*",
 54 |     "bower_components",
 55 |     "prepros.config",
 56 |     "Prepros Export",
 57 |     "prepros-6.config",
 58 |     "prepros.cfg",
 59 |     "wp-admin",
 60 |     "wp-includes"
 61 |   ],
 62 |   "server": {
 63 |     "port": 7879,
 64 |     "assignNewPortAutomatically": true,
 65 |     "enable": true,
 66 |     "proxy": {
 67 |       "enable": false,
 68 |       "url": ""
 69 |     }
 70 |   },
 71 |   "browser-sync": {
 72 |     "enable": false,
 73 |     "clicks": true,
 74 |     "forms": true,
 75 |     "scroll": true
 76 |   },
 77 |   "live-reload": {
 78 |     "enable": true,
 79 |     "animate": true,
 80 |     "delay": 0
 81 |   },
 82 |   "ftp-deploy": {
 83 |     "connectionType": "ftp",
 84 |     "remotePath": "",
 85 |     "uploadTimeout": 20000,
 86 |     "uploadOnChange": false,
 87 |     "ftp": {
 88 |       "secure": false,
 89 |       "keepAlive": true,
 90 |       "host": "",
 91 |       "port": 21,
 92 |       "user": "",
 93 |       "password": ""
 94 |     },
 95 |     "sftp": {
 96 |       "host": "",
 97 |       "port": 22,
 98 |       "usePrivateKey": false,
 99 |       "username": "",
100 |       "password": "",
101 |       "privateKey": "",
102 |       "passphrase": ""
103 |     },
104 |     "pathFilters": [
105 |       "config.rb",
106 |       "prepros.config",
107 |       "prepros-6.config",
108 |       "node_modules",
109 |       "Prepros Export",
110 |       ".git",
111 |       ".idea",
112 |       ".sass-cache",
113 |       ".hg",
114 |       ".svn",
115 |       ".cache",
116 |       ".DS_Store",
117 |       "*.sass",
118 |       "*.scss",
119 |       "*.less",
120 |       "*.pug",
121 |       "*.jade",
122 |       "*.styl",
123 |       "*.haml",
124 |       "*.slim",
125 |       "*.coffee",
126 |       "*.ls",
127 |       "*.kit",
128 |       "*.ts"
129 |     ],
130 |     "history": []
131 |   },
132 |   "file-type-sass": "{\"compilers\":[\"node-sass\",\"autoprefixer\",\"minify-css\"]}",
133 |   "file-type-less": "{\"compilers\":[\"less\",\"autoprefixer\",\"minify-css\"]}",
134 |   "autoprefixer": {
135 |     "browsers": "last 5 versions"
136 |   },
137 |   "file-type-pug": "{\"compilers\":[\"pug\"]}",
138 |   "file-type-css": "{\"compilers\":[\"autoprefixer\",\"cssnext\",\"minify-css\"]}",
139 |   "file-type-javascript": "{\"compilers\":[\"concat-js\",\"babel\",\"uglify-js\"]}",
140 |   "file-type-stylus": "{\"compilers\":[\"stylus\",\"autoprefixer\",\"minify-css\"]}",
141 |   "file-type-markdown": "{\"compilers\":[\"markdown\"]}",
142 |   "file-type-haml": "{\"compilers\":[\"haml\"]}",
143 |   "file-type-slim": "{\"compilers\":[\"slim\"]}",
144 |   "file-type-coffee-script": "{\"compilers\":[\"coffee-script\",\"uglify-js\"]}",
145 |   "file-type-livescript": "{\"compilers\":[\"livescript\",\"uglify-js\"]}",
146 |   "file-type-kit": "{\"compilers\":[\"kit\"]}",
147 |   "uglify-js": {
148 |     "ie8": false,
149 |     "compress": {
150 |       "sequences": true,
151 |       "properties": true,
152 |       "dead_code": true,
153 |       "drop_debugger": true,
154 |       "unsafe": false,
155 |       "unsafe_comps": false,
156 |       "unsafe_math": false,
157 |       "unsafe_proto": false,
158 |       "unsafe_regexp": false,
159 |       "conditionals": true,
160 |       "comparisons": true,
161 |       "evaluate": true,
162 |       "booleans": true,
163 |       "loops": true,
164 |       "unused": true,
165 |       "toplevel": false,
166 |       "top_retain": "",
167 |       "hoist_funs": true,
168 |       "hoist_vars": false,
169 |       "if_return": true,
170 |       "join_vars": true,
171 |       "collapse_vars": true,
172 |       "reduce_vars": true,
173 |       "warnings": true,
174 |       "negate_iife": true,
175 |       "pure_getters": false,
176 |       "pure_funcs": [],
177 |       "drop_console": false,
178 |       "expression": false,
179 |       "keep_fargs": true,
180 |       "keep_fnames": false,
181 |       "passes": 1,
182 |       "keep_infinity": false,
183 |       "side_effects": true,
184 |       "global_defs": []
185 |     },
186 |     "output": {
187 |       "ascii_only": false,
188 |       "beautify": false,
189 |       "comments": "",
190 |       "indent_level": 4,
191 |       "indent_start": 0,
192 |       "inline_script": false,
193 |       "keep_quoted_props": false,
194 |       "max_line_len": false,
195 |       "preamble": "",
196 |       "preserve_line": false,
197 |       "quote_keys": false,
198 |       "quote_style": 0,
199 |       "semicolons": true,
200 |       "shebang": true,
201 |       "width": 80
202 |     }
203 |   },
204 |   "cssnext": {
205 |     "customProperties": true,
206 |     "applyRule": true,
207 |     "calc": false,
208 |     "nesting": true,
209 |     "customMedia": true,
210 |     "mediaQueriesRange": true,
211 |     "customSelectors": true,
212 |     "attributeCaseInsensitive": true,
213 |     "colorRebeccapurple": true,
214 |     "colorHwb": true,
215 |     "colorGray": true,
216 |     "colorHexAlpha": true,
217 |     "colorFunction": true,
218 |     "fontVariant": true,
219 |     "filter": true,
220 |     "initial": true,
221 |     "rem": true,
222 |     "pseudoElements": true,
223 |     "pseudoClassMatches": true,
224 |     "pseudoClassNot": true,
225 |     "pseudoClassAnyLink": true,
226 |     "colorRgba": true,
227 |     "overflowWrap": true
228 |   },
229 |   "file-type-typescript": "{\"compilers\":[\"typescript\",\"uglify-js\"]}",
230 |   "babel": {
231 |     "useBabelRc": true,
232 |     "presets": {
233 |       "babel-preset-es2015": true
234 |     },
235 |     "plugins": {
236 |       "babel-plugin-syntax-jsx": true,
237 |       "babel-plugin-transform-react-jsx": true,
238 |       "babel-plugin-transform-async-to-generator": true,
239 |       "babel-plugin-transform-class-properties": true,
240 |       "babel-plugin-transform-object-rest-spread": true
241 |     }
242 |   },
243 |   "file-type-png": "{\"compilers\":[\"png\"]}",
244 |   "file-type-jpg": "{\"compilers\":[\"jpg\"]}"
245 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <meta
  6 |       name="viewport"
  7 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
  8 |     />
  9 |     <meta name="description" content="" />
 10 |     <meta name="author" content="" />
 11 |     <link
 12 |       href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900"
 13 |       rel="stylesheet"
 14 |     />
 15 | 
 16 |     <title>Reflux HTML CSS Template</title>
 17 | <!--
 18 | Reflux Template
 19 | https://templatemo.com/tm-531-reflux
 20 | -->
 21 |     <!-- Bootstrap core CSS -->
 22 |     <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
 23 | 
 24 |     <!-- Additional CSS Files -->
 25 |     <link rel="stylesheet" href="assets/css/fontawesome.css" />
 26 |     <link rel="stylesheet" href="assets/css/templatemo-style.css" />
 27 |     <link rel="stylesheet" href="assets/css/owl.css" />
 28 |     <link rel="stylesheet" href="assets/css/lightbox.css" />
 29 |   </head>
 30 | 
 31 |   <body>
 32 |     <div id="page-wraper">
 33 |       <!-- Sidebar Menu -->
 34 |       <div class="responsive-nav">
 35 |         <i class="fa fa-bars" id="menu-toggle"></i>
 36 |         <div id="menu" class="menu">
 37 |           <i class="fa fa-times" id="menu-close"></i>
 38 |           <div class="container">
 39 |             <div class="image">
 40 |               <a href="#"><img src="Sugadev.jpeg" alt="" /></a>
 41 |             </div>
 42 |             <div class="author-content">
 43 |               <h4>Sugadev</h4>
 44 |               <span>VIDEO EDITOR</span>
 45 |             </div>
 46 |             <nav class="main-nav" role="navigation">
 47 |               <ul class="main-menu">
 48 |                 <li><a href="#section1">About Me</a></li>
 49 |                 <li><a href="#section2">What I’m good at</a></li>
 50 |                 <li><a href="#section3">My Work</a></li>
 51 |                 <li><a href="#section4">Contact Me</a></li>
 52 |               </ul>
 53 |             </nav>
 54 |             <div class="social-network">
 55 |               <ul class="soial-icons">
 56 |                 <li>
 57 |                   <a href="https://fb.com/templatemo"
 58 |                     ><i class="fa fa-facebook"></i
 59 |                   ></a>
 60 |                 </li>
 61 |                 <li>
 62 |                   <a href="#"><i class="fa fa-twitter"></i></a>
 63 |                 </li>
 64 |                 <li>
 65 |                   <a href="#"><i class="fa fa-linkedin"></i></a>
 66 |                 </li>
 67 |                 <li>
 68 |                   <a href="#"><i class="fa fa-dribbble"></i></a>
 69 |                 </li>
 70 |                 <li>
 71 |                   <a href="#"><i class="fa fa-rss"></i></a>
 72 |                 </li>
 73 |               </ul>
 74 |             </div>
 75 |             <div class="copyright-text">
 76 |               <p>Copyright 2019 Sugadev
 77 | 
 78 | Design</p>
 79 |             </div>
 80 |           </div>
 81 |         </div>
 82 |       </div>
 83 | 
 84 |       <section class="section about-me" data-section="section1">
 85 |         <div class="container">
 86 |           <div class="section-heading">
 87 |             <h2>About Me</h2>
 88 |             <div class="line-dec"></div>
 89 |             <span
 90 |               >This is a Bootstrap v4.2.1 CSS Template for you. Edit and use
 91 |               this layout for your site. Updated on 21 May 2019 for repeated main menu HTML code.</span
 92 |             >
 93 |           </div>
 94 |           <div class="left-image-post">
 95 |             <div class="row">
 96 |               <div class="col-md-6">
 97 |                 <div class="left-image">
 98 |                   <img src="assets/images/left-image.jpg" alt="" />
 99 |                 </div>
100 |               </div>
101 |               <div class="col-md-6">
102 |                 <div class="right-text">
103 |                   <h4>Sugadev HTML CSS Template</h4>
104 |                   <p>
105 |                     Donec tristique feugiat lacus, at sollicitudin nunc euismod
106 |                     sed. Mauris viverra, erat non sagittis gravida, elit dui
107 |                     mollis ante, sit amet eleifend purus ligula eget eros. Sed
108 |                     tincidunt quam vitae neque pharetra dignissim eget ut
109 |                     libero.
110 |                   </p>
111 |                   <div class="white-button">
112 |                     <a href="#">Read More</a>
113 |                   </div>
114 |                 </div>
115 |               </div>
116 |             </div>
117 |           </div>
118 |           <div class="right-image-post">
119 |             <div class="row">
120 |               <div class="col-md-6">
121 |                 <div class="left-text">
122 |                   <h4>Sed sagittis rhoncus velit</h4>
123 |                   <p>
124 |                     Pellentesque habitant morbi tristique senectus et netus et
125 |                     malesuada fames ac turpis egestas. Vestibulum fermentum
126 |                     eleifend nibh, vitae sodales elit finibus pretium.
127 |                     Suspendisse potenti. Ut sollicitudin risus a sollicitudin
128 |                     semper.
129 |                   </p>
130 |                   <div class="white-button">
131 |                     <a href="#">Read More</a>
132 |                   </div>
133 |                 </div>
134 |               </div>
135 |               <div class="col-md-6">
136 |                 <div class="right-image">
137 |                   <img src="assets/images/right-image.jpg" alt="" />
138 |                 </div>
139 |               </div>
140 |             </div>
141 |           </div>
142 |         </div>
143 |       </section>
144 | 
145 |       <section class="section my-services" data-section="section2">
146 |         <div class="container">
147 |           <div class="section-heading">
148 |             <h2>What I’m good at?</h2>
149 |             <div class="line-dec"></div>
150 |             <span
151 |               >Curabitur leo felis, rutrum vitae varius eu, malesuada a tortor.
152 |               Vestibulum congue leo et tellus aliquam, eu viverra nulla semper.
153 |               Nullam eu faucibus diam. Donec eget massa ante.</span
154 |             >
155 |           </div>
156 |           <div class="row">
157 |             <div class="col-md-6">
158 |               <div class="service-item">
159 |                 <div class="first-service-icon service-icon"></div>
160 |                 <h4>HTML5 &amp; CSS3</h4>
161 |                 <p>
162 |                   Phasellus non convallis dolor. Integer tempor hendrerit arcu
163 |                   at bibendum. Sed ac ante non metus vehicula congue quis eget
164 |                   eros.
165 |                 </p>
166 |               </div>
167 |             </div>
168 |             <div class="col-md-6">
169 |               <div class="service-item">
170 |                 <div class="second-service-icon service-icon"></div>
171 |                 <h4>Creative Ideas</h4>
172 |                 <p>
173 |                   Proin lacus massa, eleifend sed fermentum in, dignissim vel
174 |                   metus. Nunc accumsan leo nec felis porttitor, ultricies
175 |                   faucibus purus mollis.
176 |                 </p>
177 |               </div>
178 |             </div>
179 |             <div class="col-md-6">
180 |               <div class="service-item">
181 |                 <div class="third-service-icon service-icon"></div>
182 |                 <h4>Easy Customize</h4>
183 |                 <p>
184 |                   Integer suscipit condimentum aliquet. Nam quis risus metus.
185 |                   Nullam faucibus quam eget arcu pretium tincidunt. Nam libero
186 |                   dui.
187 |                 </p>
188 |               </div>
189 |             </div>
190 |             <div class="col-md-6">
191 |               <div class="service-item">
192 |                 <div class="fourth-service-icon service-icon"></div>
193 |                 <h4>Admin Dashboard</h4>
194 |                 <p>
195 |                   Vivamus et dui a massa venenatis fringilla. Proin lacus massa,
196 |                   eleifend sed fermentum in, dignissim vel metus. Nunc accumsan
197 |                   leo nec felis porttitor.
198 |                 </p>
199 |               </div>
200 |             </div>
201 |           </div>
202 |         </div>
203 |       </section>
204 | 
205 |       <section class="section my-work" data-section="section3">
206 |         <div class="container">
207 |           <div class="section-heading">
208 |             <h2>My Work</h2>
209 |             <div class="line-dec"></div>
210 |             <span
211 |               >Aenean sollicitudin ex mauris, lobortis lobortis diam euismod sit
212 |               amet. Duis ac elit vulputate, lobortis arcu quis, vehicula
213 |               mauris.</span
214 |             >
215 |           </div>
216 |           <div class="row">
217 |             <div class="isotope-wrapper">
218 |               <form class="isotope-toolbar">
219 |                 <label
220 |                   ><input
221 |                     type="radio"
222 |                     data-type="*"
223 |                     checked=""
224 |                     name="isotope-filter"
225 |                   />
226 |                   <span>all</span></label
227 |                 >
228 |                 <label
229 |                   ><input
230 |                     type="radio"
231 |                     data-type="people"
232 |                     name="isotope-filter"
233 |                   />
234 |                   <span>people</span></label
235 |                 >
236 |                 <label
237 |                   ><input
238 |                     type="radio"
239 |                     data-type="nature"
240 |                     name="isotope-filter"
241 |                   />
242 |                   <span>nature</span></label
243 |                 >
244 |                 <label
245 |                   ><input
246 |                     type="radio"
247 |                     data-type="animals"
248 |                     name="isotope-filter"
249 |                   />
250 |                   <span>animals</span></label
251 |                 >
252 |               </form>
253 |               <div class="isotope-box">
254 |                 <div class="isotope-item" data-type="nature">
255 |                   <figure class="snip1321">
256 |                     <img
257 |                       src="assets/images/portfolio-01.jpg"
258 |                       alt="sq-sample26"
259 |                     />
260 |                     <figcaption>
261 |                       <a
262 |                         href="assets/images/portfolio-01.jpg"
263 |                         data-lightbox="image-1"
264 |                         data-title="Caption"
265 |                         ><i class="fa fa-search"></i
266 |                       ></a>
267 |                       <h4>First Title</h4>
268 |                       <span>free to use our template</span>
269 |                     </figcaption>
270 |                   </figure>
271 |                 </div>
272 | 
273 |                 <div class="isotope-item" data-type="people">
274 |                   <figure class="snip1321">
275 |                     <img
276 |                       src="assets/images/portfolio-02.jpg"
277 |                       alt="sq-sample26"
278 |                     />
279 |                     <figcaption>
280 |                       <a
281 |                         href="assets/images/portfolio-02.jpg"
282 |                         data-lightbox="image-1"
283 |                         data-title="Caption"
284 |                         ><i class="fa fa-search"></i
285 |                       ></a>
286 |                       <h4>Second Title</h4>
287 |                       <span>please tell your friends</span>
288 |                     </figcaption>
289 |                   </figure>
290 |                 </div>
291 | 
292 |                 <div class="isotope-item" data-type="animals">
293 |                   <figure class="snip1321">
294 |                     <img
295 |                       src="assets/images/portfolio-03.jpg"
296 |                       alt="sq-sample26"
297 |                     />
298 |                     <figcaption>
299 |                       <a
300 |                         href="assets/images/portfolio-03.jpg"
301 |                         data-lightbox="image-1"
302 |                         data-title="Caption"
303 |                         ><i class="fa fa-search"></i
304 |                       ></a>
305 |                       <h4>Item Third</h4>
306 |                       <span>customize anything</span>
307 |                     </figcaption>
308 |                   </figure>
309 |                 </div>
310 | 
311 |                 <div class="isotope-item" data-type="people">
312 |                   <figure class="snip1321">
313 |                     <img
314 |                       src="assets/images/portfolio-04.jpg"
315 |                       alt="sq-sample26"
316 |                     />
317 |                     <figcaption>
318 |                       <a
319 |                         href="assets/images/portfolio-04.jpg"
320 |                         data-lightbox="image-1"
321 |                         data-title="Caption"
322 |                         ><i class="fa fa-search"></i
323 |                       ></a>
324 |                       <h4>Item Fourth</h4>
325 |                       <span>Re-distribution not allowed</span>
326 |                     </figcaption>
327 |                   </figure>
328 |                 </div>
329 | 
330 |                 <div class="isotope-item" data-type="nature">
331 |                   <figure class="snip1321">
332 |                     <img
333 |                       src="assets/images/portfolio-05.jpg"
334 |                       alt="sq-sample26"
335 |                     />
336 |                     <figcaption>
337 |                       <a
338 |                         href="assets/images/portfolio-05.jpg"
339 |                         data-lightbox="image-1"
340 |                         data-title="Caption"
341 |                         ><i class="fa fa-search"></i
342 |                       ></a>
343 |                       <h4>Fifth Awesome</h4>
344 |                       <span>Ut sollicitudin risus</span>
345 |                     </figcaption>
346 |                   </figure>
347 |                 </div>
348 | 
349 |                 <div class="isotope-item" data-type="animals">
350 |                   <figure class="snip1321">
351 |                     <img
352 |                       src="assets/images/portfolio-06.jpg"
353 |                       alt="sq-sample26"
354 |                     />
355 |                     <figcaption>
356 |                       <a
357 |                         href="assets/images/portfolio-06.jpg"
358 |                         data-lightbox="image-1"
359 |                         data-title="Caption"
360 |                         ><i class="fa fa-search"></i
361 |                       ></a>
362 |                       <h4>Awesome Sixth</h4>
363 |                       <span>Donec eget massa ante</span>
364 |                     </figcaption>
365 |                   </figure>
366 |                 </div>
367 |               </div>
368 |             </div>
369 |           </div>
370 |         </div>
371 |       </section>
372 | 
373 |       <section class="section contact-me" data-section="section4">
374 |         <div class="container">
375 |           <div class="section-heading">
376 |             <h2>Contact Me</h2>
377 |             <div class="line-dec"></div>
378 |             <span
379 |               >Fusce eget nibh nec justo interdum condimentum. Morbi justo ex,
380 |               efficitur at ante ac, tincidunt maximus ligula. Lorem ipsum dolor
381 |               sit amet, consectetur adipiscing elit.</span
382 |             >
383 |           </div>
384 |           <div class="row">
385 |             <div class="right-content">
386 |               <div class="container">
387 |                 <form id="contact" action="" method="post">
388 |                   <div class="row">
389 |                     <div class="col-md-6">
390 |                       <fieldset>
391 |                         <input
392 |                           name="name"
393 |                           type="text"
394 |                           class="form-control"
395 |                           id="name"
396 |                           placeholder="Your name..."
397 |                           required=""
398 |                         />
399 |                       </fieldset>
400 |                     </div>
401 |                     <div class="col-md-6">
402 |                       <fieldset>
403 |                         <input
404 |                           name="email"
405 |                           type="text"
406 |                           class="form-control"
407 |                           id="email"
408 |                           placeholder="Your email..."
409 |                           required=""
410 |                         />
411 |                       </fieldset>
412 |                     </div>
413 |                     <div class="col-md-12">
414 |                       <fieldset>
415 |                         <input
416 |                           name="subject"
417 |                           type="text"
418 |                           class="form-control"
419 |                           id="subject"
420 |                           placeholder="Subject..."
421 |                           required=""
422 |                         />
423 |                       </fieldset>
424 |                     </div>
425 |                     <div class="col-md-12">
426 |                       <fieldset>
427 |                         <textarea
428 |                           name="message"
429 |                           rows="6"
430 |                           class="form-control"
431 |                           id="message"
432 |                           placeholder="Your message..."
433 |                           required=""
434 |                         ></textarea>
435 |                       </fieldset>
436 |                     </div>
437 |                     <div class="col-md-12">
438 |                       <fieldset>
439 |                         <button type="submit" id="form-submit" class="button">
440 |                           Send Message
441 |                         </button>
442 |                       </fieldset>
443 |                     </div>
444 |                   </div>
445 |                 </form>
446 |               </div>
447 |             </div>
448 |           </div>
449 |         </div>
450 |       </section>
451 |     </div>
452 | 
453 |     <!-- Scripts -->
454 |     <!-- Bootstrap core JavaScript -->
455 |     <script src="vendor/jquery/jquery.min.js"></script>
456 |     <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
457 | 
458 |     <script src="assets/js/isotope.min.js"></script>
459 |     <script src="assets/js/owl-carousel.js"></script>
460 |     <script src="assets/js/lightbox.js"></script>
461 |     <script src="assets/js/custom.js"></script>
462 |     <script>
463 |       //according to loftblog tut
464 |       $(".main-menu li:first").addClass("active");
465 | 
466 |       var showSection = function showSection(section, isAnimate) {
467 |         var direction = section.replace(/#/, ""),
468 |           reqSection = $(".section").filter(
469 |             '[data-section="' + direction + '"]'
470 |           ),
471 |           reqSectionPos = reqSection.offset().top - 0;
472 | 
473 |         if (isAnimate) {
474 |           $("body, html").animate(
475 |             {
476 |               scrollTop: reqSectionPos
477 |             },
478 |             800
479 |           );
480 |         } else {
481 |           $("body, html").scrollTop(reqSectionPos);
482 |         }
483 |       };
484 | 
485 |       var checkSection = function checkSection() {
486 |         $(".section").each(function() {
487 |           var $this = $(this),
488 |             topEdge = $this.offset().top - 80,
489 |             bottomEdge = topEdge + $this.height(),
490 |             wScroll = $(window).scrollTop();
491 |           if (topEdge < wScroll && bottomEdge > wScroll) {
492 |             var currentId = $this.data("section"),
493 |               reqLink = $("a").filter("[href*=\\#" + currentId + "]");
494 |             reqLink
495 |               .closest("li")
496 |               .addClass("active")
497 |               .siblings()
498 |               .removeClass("active");
499 |           }
500 |         });
501 |       };
502 | 
503 |       $(".main-menu").on("click", "a", function(e) {
504 |         e.preventDefault();
505 |         showSection($(this).attr("href"), true);
506 |       });
507 | 
508 |       $(window).scroll(function() {
509 |         checkSection();
510 |       });
511 |     </script>
512 |   </body>
513 | </html>
514 | 


--------------------------------------------------------------------------------