veda/www_veda2
12
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity
main
www_veda2/web/templates/about-me.html

547 lines
26 KiB
HTML
Raw Permalink Normal View History

init
2024-10-07 01:21:48 +00:00
<!-- *************************************
*********** Begin body content ***********
************************************** -->
<div id="body-content">
<!-- ========================
///// Begin page header /////
=============================
* Use classes "ph-xs", "ph-sm", "ph-lg" or "ph-xlg" to set page header size.
* Use class "ph-center" or "ph-right" to align page header caption.
-->
<section id="page-header">
<!-- Begin page header image
=============================
* Use class "parallax-bg-1" up to "parallax-bg-6" to enable background image parallax effect.
* Use class "fade-out-scroll-3" to enable fade out effect if page scroll.
* Use class "hide-ph-image" to hide page header image without removing the code.
-->
<div class="page-header-image parallax-bg-3 bg-image" style="background-image: url(assets/img/misc/page-header-bg-4.jpg);">
<!-- Element cover
===================
* You can use prepared background transparent classes depends on brightness of your page header image. More info: file "helper.css".
-->
<div class="cover bg-transparent-5-dark"></div>
</div>
<!-- End page header image -->
<!-- Begin page header inner -->
<div class="page-header-inner tt-wrap">
<!-- Begin page header caption
===============================
* Use classes "ph-caption-xs", "ph-caption-sm", "ph-caption-lg" or "ph-caption-xlg" to set page header size.
* Use class "parallax-1" up to "parallax-6" to enable parallax effect.
* Use class "fade-out-scroll-1" up to "fade-out-scroll-6" to enable fade out effect if page scroll.
-->
<div class="page-header-caption ph-caption-lg parallax-4 fade-out-scroll-3">
<h1 class="page-header-title">Martin Vegas</h1>
<hr class="hr-short">
<!-- Use data attributes to set text maximum characters or words (example: data-max-characters="120" or data-max-words="40") -->
<div class="page-header-description" data-max-words="40">
Artist &amp; Photographer
</div>
</div>
<!-- End page header caption -->
</div>
<!-- End page header inner -->
</section>
<!-- End page header -->
<!-- =============================
///// Begin about me section /////
============================== -->
<section id="about-me-section">
<div class="about-me-inner tt-wrap"> <!-- add/remove class "tt-wrap" to enable/disable element boxed layout (class "tt-boxed" is required in <body> tag! ) -->
<!-- ======================
///// Begin split box /////
based on: http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
======================= -->
<div class="split-box about-me">
<div class="container-fluid">
<div class="row">
<div class="row-lg-height">
<!-- Column -->
<div class="col-lg-6 col-lg-height split-box-image no-padding bg-image" style="background-image: url(assets/img/misc/me-1.jpg); background-position: 50% 50%;">
<!-- Split box image height
============================
* You can use prepared "padding-height-*" helper classes to set split box image height. Example: "padding-height-85" (useful if "split-box-content" contend/text is very short). Also you can use class "full-height-vh" for full height image. Find out "helper.css" file for more info. Note: class "sbi-height" is required.
-->
<div class="sbi-height padding-height-85"></div>
</div> <!-- /.col -->
<!-- Column -->
<div class="col-lg-6 col-lg-height col-lg-middle no-padding">
<!-- Begin split box content
=============================
* Use class "shifted-left" or "shifted-right" to enable shifted content (do not use for long content).
-->
<div class="split-box-content sb-content-right">
<!-- Begin tt-heading
======================
* Use class "padding-on" to enable heading paddings (useful if you use tt-heading as stand alone element).
* Use class "text-center" or "text-right" to align tt-heading.
* Use classes "tt-heading-xs", "tt-heading-sm", "tt-heading-lg", "tt-heading-xlg" or "tt-heading-xxlg" to set tt-heading size.
-->
<div class="tt-heading">
<div class="tt-heading-inner">
<h1 class="tt-heading-title">Who I am?</h1>
<div class="tt-heading-subtitle">A little bit about me</div>
<hr class="hr-short">
</div> <!-- /.tt-heading-inner -->
</div>
<!-- End tt-heading -->
<div class="margin-top-30">
<p>Hi, my name is <strong>Martin Vegas</strong>. I am an artist and photographer. Sollicitudin diam vitae, amet lacus donec eu, donec vulputate duis nullam nulla, suscipit nulla orci, ornare maecenas eget gravida.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Vivamus at nibh tincidunt, bibendum ligula id. Nemo enim ipsam voluptatem quiatotam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas enimoa.</p>
</div>
<!-- Begin signature -->
<div class="signature">
<img class="signature-dark" src="assets/img/signature-dark.png" alt="">
<img class="signature-light" src="assets/img/signature-light.png" alt="">
</div>
<!-- End signature -->
</div>
<!-- End split box content -->
</div> <!-- /.col -->
</div> <!-- /.row-height -->
</div> <!-- /.row -->
</div> <!-- /.container -->
</div>
<!-- End split box -->
<!-- ======================
///// Begin split box /////
based on: http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
======================= -->
<div class="split-box what-i-do">
<div class="container-fluid">
<div class="row">
<div class="row-lg-height">
<!-- Column -->
<div class="col-lg-6 col-lg-push-6 col-lg-height split-box-image no-padding bg-image" style="background-image: url(assets/img/misc/me-2.jpg); background-position: 50% 50%;">
<!-- Split box image height
============================
* You can use prepared "padding-height-*" helper classes to set split box image height. Example: "padding-height-85" (useful if "split-box-content" contend/text is very short). Also you can use class "full-height-vh" for full height image. Find out "helper.css" file for more info. Note: class "sbi-height" is required.
-->
<div class="sbi-height padding-height-85"></div>
</div> <!-- /.col -->
<!-- Column -->
<div class="col-lg-6 col-lg-pull-6 col-lg-height col-lg-middle no-padding">
<!-- Begin split box content
=============================
* Use class "shifted-left" or "shifted-right" to enable shifted content (do not use for long content).
-->
<div class="split-box-content sb-content-left">
<!-- Begin tt-heading
======================
* Use class "padding-on" to enable heading paddings (useful if you use tt-heading as stand alone element).
* Use class "text-center" or "text-right" to align tt-heading.
* Use classes "tt-heading-xs", "tt-heading-sm", "tt-heading-lg", "tt-heading-xlg" or "tt-heading-xxlg" to set tt-heading size.
-->
<div class="tt-heading">
<div class="tt-heading-inner">
<h1 class="tt-heading-title">What I Do?</h1>
<div class="tt-heading-subtitle">A little bit of my work</div>
<hr class="hr-short">
</div> <!-- /.tt-heading-inner -->
</div>
<!-- End tt-heading -->
<div class="margin-top-30">
<p>Pellentesque nec convallis nisi, in mollis nulla. Aliquam eget elit risus. Quisque vitae commodo libero, eu efficitur ligula. Cras vulputate arcu id interdum pretium. Cras eu blandit massa, at semper est. Curabitur id blandit purus. Curabitur egestas, lacus quis facilisis tempor.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<a href="contact.html" class="btn btn-primary margin-top-20">Hire Me!</a>
<a href="categories-grid.html" class="btn btn-dark margin-top-20">View All My Work</a>
</div>
<!-- End split box content -->
</div> <!-- /.col -->
</div> <!-- /.row-height -->
</div> <!-- /.row -->
</div> <!-- /.container -->
</div>
<!-- End split box -->
</div> <!-- /.about-me-inner -->
</section>
<!-- End about me section -->
<!-- ================================
///// Begin latest work cection /////
================================= -->
<section id="latest-work-section" class="margin-top-40"> <!-- margin class is optional ) -->
<!-- Begin tt-heading
======================
* Use class "padding-on" to enable heading paddings (useful if you use tt-heading as stand alone element).
* Use class "text-center" or "text-right" to align tt-heading.
* Use classes "tt-heading-xs", "tt-heading-sm", "tt-heading-lg", "tt-heading-xlg" or "tt-heading-xxlg" to set tt-heading size.
-->
<div class="tt-heading padding-on text-center">
<div class="tt-heading-inner tt-wrap"> <!-- add/remove class "tt-wrap" to enable/disable element boxed layout (class "tt-boxed" is required in <body> tag! ) -->
<h1 class="tt-heading-title">Latest Projects</h1>
<div class="tt-heading-subtitle">My latest photo projects</div>
<hr class="hr-short">
</div> <!-- /.tt-heading-inner -->
</div>
<!-- End tt-heading -->
<div class="latest-work-inner"> <!-- add/remove class "tt-wrap" to enable/disable element boxed layout (class "tt-boxed" is required in <body> tag! ) -->
<!-- Begin project carousel
============================ -->
<div class="project-carousel">
<!-- Begin content carousel (https://owlcarousel2.github.io/OwlCarousel2/)
====================================================================
* Use class "nav-outside" for outside nav (requires boxed layout).
* Use class "nav-outside-top" for outside top nav (requires enough space at the top of the carousel).
* Use class "nav-bottom-right" for bottom right nav.
* Use class "nav-rounded" for rounded nav.
* Use class "nav-light" to enable nav light style.
* Use class "dots-outside" for outside dots (requires enough space at the bottom of the carousel).
* Use class "dots-left", "dots-right" or "dots-center-right" to align dots.
* Use class "dots-rounded" for rounded dots.
* Use class "owl-mousewheel" to enable mousewheel support.
* Use class "cursor-grab" to enable cursor grab icon (no effect on links!).
* Use class "cc-hover-light", "cc-hover-dark" or "cc-hover-zoom" to enable carousel items hover effect.
* Use class "cc-height-1", "cc-height-2", "cc-height-3", "cc-height-4", "cc-height-5", "cc-height-6" or "cc-height-full" to set carousel height (do not use with data-autoheight="true"!!!).
* Use class "cc-height-m" to set full height for small screens (do not use with data-autoheight="true"!!!).
================================================================
* Available carousel data attributes:
data-items="5".......................(items visible on desktop)
data-tablet-landscape="4"............(items visible on mobiles)
data-tablet-portrait="3".............(items visible on mobiles)
data-mobile-landscape="2"............(items visible on tablets)
data-mobile-portrait="1".............(items visible on tablets)
data-loop="true".....................(true/false)
data-margin="10".....................(space between items)
data-center="true"...................(true/false)
data-start-position="0"..............(item start position)
data-animate-in="fadeIn".............(fade-in animation)
data-animate-out="fadeOut"...........(fade-out animation)
data-mouse-drag="false"..............(true/false)
data-touch-drag="false"..............(true/false)
data-autoheight="true"...............(true/false)
data-autoplay="true".................(true/false)
data-autoplay-timeout="5000".........(milliseconds)
data-autoplay-hover-pause="true".....(true/false)
data-autoplay-speed="800"............(milliseconds)
data-drag-end-speed="800"............(milliseconds)
data-nav="true"......................(true/false)
data-nav-speed="800".................(milliseconds)
data-dots="false"....................(true/false)
data-dots-speed="800"................(milliseconds)
-->
<div class="owl-carousel cc-height-1 cc-hover-dark nav-outside-top" data-items="4" data-margin="0" data-dots="false" data-nav="true" data-nav-speed="800" data-mobile-portrait="1" data-tablet-landscape="3" data-tablet-portrait="2" data-mobile-landscape="1" data-mobile-portrait="1">
<!-- Begin carousel item
========================= -->
<a href="gallery-single-grid.html" class="cc-item">
<!-- cc image -->
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-7.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption center max-width-400"> <!-- max width class is optional -->
<h2 class="cc-title">Afternoon Photoshoot</h2>
<div class="cc-category"><span>Outdoor</span></div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-grid.html" class="cc-item">
<!-- cc image -->
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-8.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption center max-width-400"> <!-- max width class is optional -->
<h2 class="cc-title">Black &amp; White</h2>
<div class="cc-category"><span>Models</span></div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-grid.html" class="cc-item">
<!-- cc image -->
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-9.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption center max-width-400">
<h2 class="cc-title">One Day Shoot With Ordinary People</h2>
<div class="cc-category"><span>People</span></div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-grid.html" class="cc-item">
<!-- cc image -->
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-10.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption center max-width-400"> <!-- max width class is optional -->
<h2 class="cc-title">Dancing Is Everything</h2>
<div class="cc-category"><span>People</span></div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-grid.html" class="cc-item">
<!-- cc image -->
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-11.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption center max-width-400"> <!-- max width class is optional -->
<h2 class="cc-title">Redhead Beauty</h2>
<div class="cc-category"><span>Nature</span></div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-grid.html" class="cc-item">
<!-- cc image -->
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-12.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption center max-width-400"> <!-- max width class is optional -->
<h2 class="cc-title">Beautiful People</h2>
<div class="cc-category"><span>Nature</span></div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
</div>
<!-- End content carousel -->
</div>
<!-- End project carousel -->
</div> <!-- /.latest-work-inner -->
</section>
<!-- End latest work cection -->
<!-- ===========================
///// Begin footer section /////
================================
* Use class "footer-dark" to enable dark footer.
* Use class "no-margin-top" if needed.
-->
<section id="footer" class="footer-dark no-margin-top"> <!-- margin class is optional -->
<div class="footer-inner">
<div class="footer-container tt-wrap">
<div class="row">
<div class="col-md-3">
<!-- Begin footer logo -->
<div id="footer-logo">
<a href="index.html" class="logo-dark"><img src="assets/img/logo-dark.png" alt="logo"></a>
<a href="index.html" class="logo-light"><img src="assets/img/logo-light.png" alt="logo"></a>
<!-- for small screens -->
<a href="index.html" class="logo-dark-m"><img src="assets/img/logo-dark-m.png" alt="logo"></a>
<a href="index.html" class="logo-light-m"><img src="assets/img/logo-light-m.png" alt="logo"></a>
</div>
<!-- End footer logo -->
</div> <!-- /.col -->
<div class="col-md-5">
<!-- Begin footer text -->
<div class="footer-text">
<h4>- Creative Photo Studio</h4>
Sed non auctor magna. Nunc eu ultrices orci. Donec commodo ligula in massa ultricies volutpat. Fusce vel cursus lectus. Cras commodo odio mi, eu cursus nibh iaculis ut.
</div>
<!-- End footer text -->
</div> <!-- /.col -->
<div class="col-md-4">
<!-- Begin social buttons -->
<div class="social-buttons">
<ul>
<li><a href="https://www.facebook.com/themetorium" class="btn btn-social-min btn-default btn-rounded-full" title="Follow me on Facebook" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="https://twitter.com/Themetorium" class="btn btn-social-min btn-default btn-rounded-full" title="Follow me on Twitter" target="_blank"><i class="fab fa-twitter"></i></a></li>
<li><a href="https://plus.google.com/+SiiliOnu" class="btn btn-social-min btn-default btn-rounded-full" title="Follow me on Google+" target="_blank"><i class="fab fa-google-plus-g"></i></a></li>
<li><a href="https://www.pinterest.com/themetorium" class="btn btn-social-min btn-default btn-rounded-full" title="Follow me on Pinterest" target="_blank"><i class="fab fa-pinterest-p"></i></a></li>
<li><a href="https://dribbble.com/Themetorium" class="btn btn-social-min btn-default btn-rounded-full" title="Follow me on Dribbble" target="_blank"><i class="fab fa-dribbble"></i></a></li>
<li><a href="contact.html" class="btn btn-social-min btn-default btn-rounded-full" title="Drop me a line" target="_blank"><i class="fas fa-envelope"></i></a></li>
</ul>
</div>
<!-- End social buttons -->
<!-- Begin footer subscribe form -->
<form id="footer-subscribe-form" class="form-btn-inside">
<div class="form-group">
<input type="email" class="form-control no-bg" id="footer-subscribe" name="subscribe" placeholder="Subscribe. Enter your email address..." required="">
<button type="submit"><i class="fas fa-paper-plane"></i></button>
</div>
</form>
<!-- End footer subscribe form -->
</div> <!-- /.col -->
</div> <!-- /.row -->
</div> <!-- /.footer-container -->
<div class="footer-bottom">
<div class="footer-container tt-wrap">
<div class="row">
<div class="col-md-6 col-md-push-6">
<!-- Begin footer menu -->
<ul class="footer-menu">
<li><a href="index.html">Home</a></li>
<li><a href="about-me.html">About</a></li>
<li><a href="albums-grid-fluid-2.html">Portfolio</a></li>
<li><a href="blog-list-grid.html">Blog</a></li>
<li><a href="page-faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!-- End footer menu -->
</div> <!-- /.col -->
<div class="col-md-6 col-md-pull-6">
<!-- Begin footer copyright -->
<div class="footer-copyright">
<p>&copy; Sepia 2017 / All rights reserved</p>
<p>Design by: <a href="https://themeforest.net/item/sepia-photography-portfolio-html-website-template/20195226?ref=Themetorium" target="_blank">Themetorium</a></p>
</div>
<!-- End footer copyright -->
</div> <!-- /.col -->
</div> <!-- /.row -->
</div> <!-- /.footer-container -->
</div> <!-- /.footer-bottom -->
</div> <!-- /.footer-inner -->
<!-- Scroll to top button -->
<a href="#body" class="scrolltotop sm-scroll" title="Scroll to top"><i class="fas fa-chevron-up"></i></a>
</section>
<!-- End footer section -->
</div>
<!-- End body content -->
<!-- ====================
///// Scripts below /////
===================== -->
<!-- Core JS -->
<script src="assets/vendor/jquery/jquery.min.js"></script> <!-- jquery JS (https://jquery.com) -->
<script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script> <!-- bootstrap JS (http://getbootstrap.com) -->
<!-- Libs and Plugins JS -->
<script src="assets/vendor/animsition/js/animsition.min.js"></script> <!-- Animsition JS (http://git.blivesta.com/animsition/) -->
<script src="assets/vendor/jquery.easing.min.js"></script> <!-- Easing JS (http://gsgd.co.uk/sandbox/jquery/easing/) -->
<script src="assets/vendor/isotope.pkgd.min.js"></script> <!-- Isotope JS (http://isotope.metafizzy.co) -->
<script src="assets/vendor/imagesloaded.pkgd.min.js"></script> <!-- ImagesLoaded JS (https://github.com/desandro/imagesloaded) -->
<script src="assets/vendor/owl-carousel/js/owl.carousel.min.js"></script> <!-- Owl Carousel JS (https://owlcarousel2.github.io/OwlCarousel2/) -->
<script src="assets/vendor/jquery.mousewheel.min.js"></script> <!-- A jQuery plugin that adds cross browser mouse wheel support (https://github.com/jquery/jquery-mousewheel) -->
<script src="assets/vendor/ytplayer/js/jquery.mb.YTPlayer.min.js"></script> <!-- YTPlayer JS (more info: https://github.com/pupunzi/jquery.mb.YTPlayer) -->
<script src="assets/vendor/lightgallery/js/lightgallery-all.min.js"></script> <!-- lightGallery Plugins JS (http://sachinchoolur.github.io/lightGallery) -->
<!-- Theme master JS -->
<script src="assets/js/theme.js"></script>
</body>
</html>
Reference in New Issue Copy Permalink