<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Portfolio template for class wip - Bootsnipp.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<style type="text/css">
</style>
<link rel="stylesheet" href="css.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
window.alert = function(){};
var defaultCSS = document.getElementById('bootstrap-css');
function changeCSS(css){
if(css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="'+ css +'" type="text/css" />');
else $('head > link').filter(':first').replaceWith(defaultCSS);
}
$( document ).ready(function() {
var iframe_height = parseInt($('html').height());
window.parent.postMessage( iframe_height, 'https://bootsnipp.com');
});
</script>
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand" href="index.html">
<h3 class="my-heading ">Dragon<span class="bg-main">Hatchling</span>Studios</h3>
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars mfa-white"></span>
</button>
<ul class="navbar-nav ml-auto">
<li class="nav-link">
<a class="btn btn-primary btn-block btn-login" href="#contactinfo">Contact Me</a>
</li>
</ul>
<div id="main">
<a href="javascript:void(0)" class="openNav"><span class="fa fa-bars" onclick="openNav()"></span></a>
</div>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<ul class="mob-ul">
<li class="nav-item"><a class="nav-link" href="#">Top</a></li>
<li class="nav-item"><a class="nav-link" href="#contactinfo">Contact</a></li>
</ul>
</div>
</div>
</nav>
<header class="masthead text-white ">
<div class="overlay"></div>
<div class="container slider-top-text">
<div class="row">
<div class="col-md-12 text-center">
<h3 class="my-heading">Welcome To <br>Dragon<span class="bg-main">Hatchling</span>Studios</h3>
<p class="myp-slider text-center">The Portfolio of Kylee Monteith a place of wild imagination and adventures.</p>
<p class="myp text-center"> <a href="#3D-creations" class="link-color-top"> 3D / VIDEO CREATIONS </a> | <a href="#graphic-design" class="link-color-top"> GRAPHIC DESIGNS </a> | <a href="#photography" class="link-color-top"> PHOTOGRAPHY </a> | <a href="#https://github.com/WerecatWarrior/portfolio" class="link-color-top"> AND A LITTLE CODE </a></p>
</div>
<div class="col-md-12 text-center mt-5">
<div class="scroll-down">
<a class="btn btn-default btn-scroll floating-arrow" href="#gobottom" id="bottom"><i class="fa fa-angle-down"></i></a>
</div>
</div>
</div>
</div>
</header>
<section class="testimonials" id="gobottom">
<div class="container">
<div class="row">
<div class="col-md-4 mb-3 wow bounceInUp" data-wow-duration="1.4s">
<div class="big-img">
<img src="http://dragonhatchling.com/portfolio_content/proflie%20pic.jpg" class="img-fluid">
</div>
</div>
<div class="col-md-8">
<div class="inner-section wow fadeInUp">
<h3>A little bit <span class="bg-main">About Me</span></h3>
<br>
<p class="text-justify">I'm currently a student at Confederation College in my 4th semester of Interactive Media Development. I greatly enjoy Graphic Design and 3D Design, I'm pretty handy with a camera and can navigate my way through coding html, javascript, css, and php. When not at school I'm usually out in the woods with my dog having our own little mini adventures wondering which trail we'll discover today.</p>
<div class="linear-grid">
<div class="row">
<div class="col-sm-6 col-md-3 mb-2 wow bounceInUp" data-wow-duration="1.4s" >
<a href="http://dragonhatchling.com/portfolio_content/dice.jpg" class="fancybox" rel="ligthbox">
<img src="http://dragonhatchling.com/portfolio_content/dice.jpg" class="img-thumbnail">
</a>
</div>
<div class=" col-sm-6 col-md-3 mb-2 wow bounceInUp" data-wow-duration="1.4s">
<a href="http://dragonhatchling.com/portfolio_content/Bubble%20or%20ball_monteith.jpg" class="fancybox" rel="ligthbox">
<img src="http://dragonhatchling.com/portfolio_content/Bubble%20or%20ball_monteith.jpg" class="img-thumbnail">
</a>
</div>
<div class="col-sm-6 col-md-3 mb-2 wow bounceInUp" data-wow-duration="1.4s">
<a href="http://dragonhatchling.com/portfolio_content/Monteith_texture_1.2.jpg" class="fancybox" rel="ligthbox">
<img src="http://dragonhatchling.com/portfolio_content/Monteith_texture_1.2.jpg" class="img-thumbnail">
</a>
</div>
<div class="col-sm-6 col-md-3 mb-2 wow bounceInUp" data-wow-duration="1.4s">
<a href="http://dragonhatchling.com/portfolio_content/Monteith%20a6%20lathed%20objects.jpg" class="fancybox" rel="ligthbox">
<img src="http://dragonhatchling.com/portfolio_content/Monteith%20a6%20lathed%20objects.jpg" class="img-thumbnail">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="graphic-design" class="testimonials mybg-events">
<div class="container">
<div class="row">
<div class="col-md-12 wow fadeInUp">
<div class="text-block-title">
<h3 class="title-heading text-center"><u>Graphic Designs<br><br></u></h3>
</div>
</div>
</div>
<div class="row wow slideInLeft" data-wow-duration="3s">
<div class="col-md-4 mb-3">
<div class="big-img2">
<img src="http://dragonhatchling.com/portfolio_content/self%20portrait.png" class="img-fluid">
</div>
</div>
<div class="col-md-8">
<div class="inner-section">
<div class="my-grid">
<div class="row">
<div class="col-sm-6 col-md-4 mb-3">
<a href="http://dragonhatchling.com/portfolio_content/virus.png" class="fancybox" rel="ligthbox">
<img src="http://dragonhatchling.com/portfolio_content/virus.png" class="img-fluid">
</a>
</div>
<div class="col-sm-6 col-md-8 mb-3 ">
<a href="http://dragonhatchling.com/portfolio_content/parallax.png" class="fancybox" rel="ligthbox">
<img src="http://dragonhatchling.com/portfolio_content/parallax.png" class="img-fluid">
</a>
</div>
<div class="col-md-8 mb-3">
<a href="http://dragonhatchling.com/portfolio_content/cactus%20shirt.jpg" class="fancybox" rel="ligthbox">
<img src="http://dragonhatchling.com/portfolio_content/cactus%20shirt.jpg" class="img-fluid">
</a>
</div>
<div class=" col-md-4 ">
<a href="http://dragonhatchling.com/portfolio_content/underwater'.png" class="fancybox" rel="ligthbox">
<img src="http://dragonhatchling.com/portfolio_content/underwater'.png" class="img-fluid">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id= "3D-creations" class="testimonials text-center">
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto wow fadeInUp">
<h3 class="text-center font-weight-bold"><span class="bg-main">3D / Video</span> Creations</h3>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3 mt-4 wow bounceInUp" data-wow-duration="1.4s">
<div class="card">
<img class="card-img-top" src="http://dragonhatchling.com/portfolio_content/sabra_vid.png">
<div class="card-block">
<h4 class="card-title text-center">Sabra First Apperance</h4>
<div class="card-text text-center">
<div class="social-icons">
<a href="https://www.youtube.com/watch?v=qFmTtJhl20U" class="btn btn-circle my-social-btn youtube"><i class="fa fa-youtube"></i></a>
</div>
</div>
</div>
<div class="card-footer text-center">
<small>The first iteration of a 3D character.</small>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4 wow bounceInUp" data-wow-duration="1.4s">
<div class="card">
<img class="card-img-top" src="http://dragonhatchling.com/portfolio_content/sabra_walk.png">
<div class="card-block">
<h4 class="card-title text-center">Sabra Walking</h4>
<div class="card-text text-center">
<div class="social-icons">
<a href="https://www.youtube.com/watch?v=tdql2ZsVMwA" class="btn btn-circle my-social-btn youtube"><i class="fa fa-youtube"></i></a>
</div>
</div>
</div>
<div class="card-footer text-center">
<small>A simple walking animation with a custom made character.</small>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4 wow bounceInUp" data-wow-duration="1.4s">
<div class="card">
<img class="card-img-top" src="http://dragonhatchling.com/portfolio_content/coming_soon.png">
<div class="card-block">
<h4 class="card-title text-center">Code of: Coming Soon</h4>
<div class="card-text text-center">
<div class="social-icons">
<a href="https://www.youtube.com/watch?v=WqU2oxyAx5g" class="btn btn-circle my-social-btn youtube"><i class="fa fa-youtube"></i></a>
</div>
</div>
</div>
<div class="card-footer text-center">
<small>The coding of my coming soon landing page.</small>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4 wow bounceInUp" data-wow-duration="1.4s">
<div class="card">
<img class="card-img-top" src="http://dragonhatchling.com/portfolio_content/pearls%20for%20girls.png">
<div class="card-block">
<h4 class="card-title text-center">Pearls for Girls Graphics Logo</h4>
<div class="card-text text-center">
<div class="social-icons">
<a href="https://www.youtube.com/watch?v=ChH6BNCSuGE" class="btn btn-circle my-social-btn youtube"><i class="fa fa-youtube"></i></a>
</div>
</div>
</div>
<div class="card-footer text-center">
<small>A logo made for a start up company.</small>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4 wow bounceInUp" data-wow-duration="1.4s">
<div class="sketchfab-embed-wrapper"><iframe width="640" height="480" src="https://sketchfab.com/models/6c00555349ae47c2ac53294ede225dab/embed" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
<p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;">
<a href="https://sketchfab.com/3d-models/sabra-6c00555349ae47c2ac53294ede225dab?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sabra</a>
by <a href="https://sketchfab.com/werecatwarrior3?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">werecatwarrior3</a>
on <a href="https://sketchfab.com?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a>
</p>
</div>
</div>
</div>
</div>
</section>
<section id= "photography" class="testimonials text-center mybg-music">
<div class="container">
<div class="row">
<div class="text-block-title" class="col-md-12">
<h3 class="title-heading text-center font-weight-bold">Photography</h3>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-2 mt-4">
<div class="music-gal item box">
<a href="http://dragonhatchling.com/portfolio_content/Oh%20hey%20look%20a%20lamp.jpg" class="fancybox" rel="ligthbox">
<img class="img-fluid" src="http://dragonhatchling.com/portfolio_content/Oh%20hey%20look%20a%20lamp.jpg">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-2 mt-4">
<div class="music-gal item box">
<a href="http://dragonhatchling.com/portfolio_content/berry%20balls.jpg" class="fancybox" rel="ligthbox">
<img class="img-fluid" src="http://dragonhatchling.com/portfolio_content/berry%20balls.jpg">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-2 mt-4">
<div class="music-gal item box">
<a href="http://dragonhatchling.com/portfolio_content/bridge.jpg" class="fancybox" rel="ligthbox">
<img class="img-fluid" src="http://dragonhatchling.com/portfolio_content/bridge.jpg">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-2 mt-4">
<div class="music-gal item box">
<a href="http://dragonhatchling.com/portfolio_content/its%20a%20rock.jpg" class="fancybox" rel="ligthbox">
<img class="img-fluid" src="http://dragonhatchling.com/portfolio_content/its%20a%20rock.jpg">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-2 mt-4">
<div class="music-gal item box">
<a href="http://dragonhatchling.com/portfolio_content/orange%20rock.jpg" class="fancybox" rel="ligthbox">
<img class="img-fluid" src="http://dragonhatchling.com/portfolio_content/orange%20rock.jpg">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-2 mt-4">
<div class="music-gal item box">
<a href="http://dragonhatchling.com/portfolio_content/real%20roots%20on%20water.jpg" class="fancybox" rel="ligthbox">
<img class="img-fluid" src="http://dragonhatchling.com/portfolio_content/real%20roots%20on%20water.jpg">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-2 mt-4">
<div class="music-gal item box">
<a href="http://dragonhatchling.com/portfolio_content/singing%20in%20the%20dark.jpg" class="fancybox" rel="ligthbox">
<img class="img-fluid" src="http://dragonhatchling.com/portfolio_content/singing%20in%20the%20dark.jpg">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-2 mt-4">
<div class="music-gal item box">
<a href="http://dragonhatchling.com/portfolio_content/streaming%20away.jpg" class="fancybox" rel="ligthbox">
<img class="img-fluid" src="http://dragonhatchling.com/portfolio_content/streaming%20away.jpg">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-2 mt-4">
<div class="music-gal item box">
<a href="http://dragonhatchling.com/portfolio_content/food.jpg" class="fancybox" rel="ligthbox">
<img class="img-fluid" src="http://dragonhatchling.com/portfolio_content/food.jpg">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-2 mt-4">
<div class="music-gal item box">
<a href="http://dragonhatchling.com/portfolio_content/monteith_oil2.jpg" class="fancybox" rel="ligthbox">
<img class="img-fluid" src="http://dragonhatchling.com/portfolio_content/monteith_oil2.jpg">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-2 mt-4">
<div class="music-gal item box">
<a href="http://dragonhatchling.com/portfolio_content/monteith_oil3.jpg" class="fancybox" rel="ligthbox">
<img class="img-fluid" src="http://dragonhatchling.com/portfolio_content/monteith_oil3.jpg">
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-2 mt-4">
<div class="music-gal item box">
<a href="http://dragonhatchling.com/portfolio_content/Monteith_5.jpg" class="fancybox" rel="ligthbox">
<img class="img-fluid" src="http://dragonhatchling.com/portfolio_content/Monteith_5.jpg">
</a>
</div>
</div>
</div>
</div>
</section>
<section id= "contactinfo" class="testimonials text-center ">
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto">
<h3 class="text-center font-weight-bold"><span class="bg-main">Contact Me</span></h3>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-6 mt-4">
<div class="big-img-3">
<img src="http://dragonhatchling.com/portfolio_content/Monteith_6.jpg" class="img-fluid">
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-6 mt-4">
<div class="my-right-text">
<p class="text-justify font-italic">Email: dragonhatchlingstudio@gmail.com<br> Located: 1450 Nakina Drive,Thunder Bay, Ontario<br></p>
<a class="link-color">Kylee M</a></a>
<p class="text-muted">I look forward to hearing from you!</p>
</div>
</div>
</div>
</div>
</section>
<footer class="footer bg-dark">
<div class="container">
<div class="row">
<div class="col-lg-6 text-center text-lg-left my-auto wow zoomIn">
<p class="text-muted small mb-4 mb-lg-0">© Mojoave 2018. All Rights Reserved.</p>
<p class="text-muted small mb-4 mb-lg-0"> Hosted with <span style="color: #e25555;">♥</span> on Github</p>
</div>
<div class="col-lg-6 text-center text-lg-right my-auto wow zoomIn">
<ul class="list-inline mb-0">
<li class="list-inline-item mr-3">
<a href="https://www.youtube.com/channel/UC0lugjjjf4a6HHhaYwkrXTw">
<i class="fa fa-youtube fa-2x fa-fw"></i>
</a>
</li>
<li class="list-inline-item mr-3">
<a href="https://www.linkedin.com/in/kylee-monteith">
<i class="fa fa-linkedin fa-2x fa-fw"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
new WOW().init();
</script>
<script>
$(window).scroll( function(){
var topWindow = $(window).scrollTop();
var topWindow = topWindow * 1.5;
var windowHeight = $(window).height();
var position = topWindow / windowHeight;
position = 1 - position;
$('#bottom').css('opacity', position);
});
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.display = "0";
document.body.style.backgroundColor = "white";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginRight= "0";
document.body.style.backgroundColor = "white";
}
$(window).on("scroll", function() {
if ($(this).scrollTop() > 10) {
$("nav.navbar").addClass("mybg-dark");
$("nav.navbar").addClass("navbar-shrink");
} else {
$("nav.navbar").removeClass("mybg-dark");
$("nav.navbar").removeClass("navbar-shrink");
}
});
$(function() {
$('#bottom').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 500);
return false;
}
}
});
});
</script>
<script>
$(document).ready(function(){
$(".fancybox").fancybox({
openEffect: "none",
closeEffect: "none"
});
});
</script>
</body> <script type="text/javascript">
</script>
</body>
</html>
body {
font-family: 'Open Sans', sans-serif !important;
background: #fff;
color: #222;
}
.link-color-top{
color: #fff;
}
.navbar-shrink{
padding-top: 0;
padding-bottom: 0;
}
.mybg-dark {
background: #000001 !important;
}
/*3d-creations.sketchfab-sabra{
align-content: middle;
}*/
header.masthead {
position: relative;
height: 80vh;
background-color: #343a40;
background: url('http://dragonhatchling.com/portfolio_content/River%20Glow%20wood%20card.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 8rem;
padding-bottom: 8rem;
opacity: 1;
}
header.masthead .overlay{position:absolute;background-color:#212529;height:100%;width:100%;top:0;left:0;opacity:.3}
@media (min-width:768px) {
header.masthead {
padding-top: 12rem;
padding-bottom: 12rem;
}
header.masthead h3 {
font-size: 4rem;
}
}
.testimonials{
padding-top:5rem;
padding-bottom:5rem;
}
.myform-control {
display: block;
width: 100%;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
button.btn.btn-light {
position: absolute;
background: transparent;
border: none;
height: 38px;
right: 23px;
}
a.btn.btn-default.btn-scroll {
border: 2px solid #fff;
color: #fff;
border-radius: 100%;
}
.big-img img {
height: 325px;
width:100%;
object-fit: cover;
}
.inner-section{
position:relative;
}
.container.slider-top-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn-login {
width: 138px;
background: #1fc6d8 !important;
border: 1px solid #1fc6d8 !important;
}
.btn-login:hover{
background: #3683a1 !important;
border: 1px solid #1fc6d8 !important;
}
.mfa-white {
color: #fff !important;
}
h3.my-heading {
font-family: 'Kaushan Script', cursive;
color: #fff;
font-weight: bold;
font-size: 30px;
margin:0;
}
p.myp-slider.text-center {
color: #fff;
font-size: 30px;
margin-top: 2rem;
}
.btn-register {
width: 138px;
background: #1fc6d8 !important;
border: 1px solid #1fc6d8 !important;
}
.btn-register:hover{
background: #3683a1 !important;
border: 1px solid #1fc6d8 !important;
}
.btn-join {
background: #1fc6d8 !important;
border: 1px solid #1fc6d8 !important;
}
section#about {
width: 100%;
padding-top: 2.1rem;
padding-bottom: 2.1rem;
}
.btn-circle {
border-radius: 50%;
}
.my-social-btn {
background: lightgrey;
}
.card:hover .my-social-btn.youtube {
background: #ff3921;
}
.card:hover .my-social-btn.sketchfab {
background: #15ABF0;
}
/*
a.btn.btn-circle.my-social-btn.fb:hover {
background: #205b9f;
}
a.btn.btn-circle.my-social-btn.twitter:hover {
background: #00ace3;
}
a.btn.btn-circle.my-social-btn.google:hover {
background: #ff3921;
}
*/
a.btn.btn-circle.my-social-btn {
color: #fff;
height: 40px;
width: 40px;
}
.inner-section h3 {
text-transform: uppercase;
font-weight:bold;
}
.inner-section h3:after {
content: '';
position: absolute;
border-bottom: 4px solid #008ba3;
width: 100%;
max-width: 10%;
top: 37px;
left: 0;
}
span.bg-main {
color: #b64dc9;
}
hr.my-border {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 2px solid #008ba3;
width: 117px;
}
.linear-grid img {
width: 100%;
height: 124px;
object-fit: cover;
}
.mybg-events {
background: url('http://dragonhatchling.com/portfolio_content/mask%202.jpg') no-repeat center center fixed;
background-size: cover;
}
.h-262 {
height: 262px !important;
}
h3.title-heading.text-center {
color: #000;
font-size: 40px;
font-weight: bold;
}
p.myp.text-center {
color: #fff;
font-size: 20px;
margin-top: 2rem;
margin-bottom: 3rem;
}
.big-img2 img {
height: 472px;
width: 100%;
object-fit: cover;
}
.my-grid img {
height: 228px;
width: 100%;
object-fit: cover;
}
.text-block {
min-height: 228px;
height: auto;
background: #fff;
padding: 15px;
}
.text-block-title {
text-align: center;
max-height: 80px;
max-width: 400px;
background: rgba(255, 255, 255, 0.5);
padding-bottom: 25px;
padding-top: 10px;
}
h5.events-heading {
font-weight: bold;
font-size: 17px;
}
p.myp-font {
font-size: 15px;
}
section#group {
background: #fff;
height: 100%;
width: 100%;
padding-top: 2rem;
padding-bottom: 2rem;
}
.card {
font-size: 1em;
overflow: hidden;
padding: 0;
border: none !important;
border-radius: .28571429rem;
}
.card:hover {
color: #222 !important;
box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
}
.card-block {
font-size: 1em;
position: relative;
margin: 0;
padding: 1em;
border: none !important;
border-top: 1px solid rgba(34, 36, 38, .1);
box-shadow: none;
}
.card-img-top {
display: block;
width: 100%;
height: 50%;
}
.card-title {
font-size: 1.28571429em;
font-weight: 700;
line-height: 1.2857em;
}
.card-text {
clear: both;
margin-top: .5em;
color: rgba(0, 0, 0, .68);
}
.card-footer {
font-size: 1em;
position: static;
top: 0;
left: 0;
max-width: 100%;
padding: .75em 1em;
color: rgba(0, 0, 0, .4);
border-top: 1px solid rgba(0, 0, 0, .05) !important;
background: #fff;
}
.card-inverse .btn {
border: 1px solid rgba(0, 0, 0, .05);
}
.mybg-music {
background: url('http://dragonhatchling.com/portfolio_content/Monteith_self_portrait_3.jpg') no-repeat center center fixed;
background-size: cover;
}
section#marketplace {
background: #f7f7f7;
height: 100%;
width: 100%;
padding-top: 5rem;
padding-bottom: 5rem;
}
section#marketplace .card {
font-size: 1em;
overflow: hidden;
padding: 0;
border: none;
border-radius: .28571429rem;
box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
}
section#artist {
background: #fff;
height: 100%;
width: 100%;
padding-top: 2rem;
padding-bottom: 2rem;
}
a.link-color {
color: #008ba3;
font-weight: bold;
}
.my-right-text {
padding-top: 3rem;
}
/***music gallery***/
.gal-item {
overflow: hidden;
}
.gal-item .box {
overflow: hidden;
}
.box img {
height: 160px;
width: 100%;
object-fit: cover;
-o-object-fit: cover;
}
/****/
.item {
position: relative;
}
.item img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.item:hover img {
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
}
/*sidebar navigation*/
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 0px;
font-size: 36px;
margin-right: 15px;
}
#main {display: none;}
#main {
float: right;
transition: margin-right .5s;
}
a.openNav {
font-size: 26px;
color: #ffffff;
text-decoration: none;
}
.sidenav .nav-link {
font-size: 13px;
font-weight: bold;
}
.mob-ul {
list-style-type: none;
padding-left: 0;
}
.sidenav li{
padding: 0 3px !important;
position: relative;
}
.sidenav li a {
padding: 10px 15px;
text-transform: uppercase;
}
.sidenav ul li:hover .nav-link {
color: #008ba3;
}
li.nav-item a:hover {
background: #008ba3;
color: #ffffff !important;
}
.floating-arrow {
-webkit-animation: floating-arrow 1.6s infinite ease-in-out 0s;
-o-animation: floating-arrow 1.6s infinite ease-in-out 0s;
animation: floating-arrow 1.6s infinite ease-in-out 0s;
}
@keyframes floating-arrow {
from {
-webkit-transform: translateY(0);
transform: translateY(0);
}
65% {
-webkit-transform: translateY(11px);
transform: translateY(11px);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
footer.footer{padding-top:4rem;padding-bottom:4rem}
li.list-inline-item a {
color: #fff;
text-decoration: none;
}
/*-------------------responsive-----------------*/
@media screen and (max-width: 520px) {
::placeholder {
font-size: 10px;
}
.scroll-down {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 45px;
}
.text-block {
padding: 15px;
}
.linear-grid img {
width: 100%;
height: 181px;
}
.my-grid img {
width: 100%;
}
}
@media screen and (max-width: 767px) {
.btn-login{
width:100%;
}
.btn-register {
width:100%;
}
}
@media only screen and (min-width:2560px){}
@media only screen and (min-width:1600px) and (max-width:1920px){
.navbar-toggler {display: none !important;}
}
@media only screen and (min-width:1440px){
.navbar-toggler {display: none !important;}
}
@media only screen and (max-width: 1280px){
.navbar-toggler {display: none !important;}
}
@media only screen and (max-width: 1024px){
.navbar-toggler {display: none !important;}
.mob-ul{list-style-type: none; padding-left: 0;}
h5.events-heading{font-size:15px;}
p.myp-font{font-size:13px;}
}
@media only screen and (min-width: 960px) and (max-width: 1023px) {
.navbar-toggler {display: none !important;}
.mob-ul{list-style-type: none; padding-left: 0;}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
.navbar-toggler {display: none !important;}
#main {display: block;}
.header-wrap .navbar .nav-link {color: #fff;}
.mob-ul{list-style-type: none; padding-left: 0;}
.header-wrap .sub-menu {width: 250px;}
}
@media only screen and (max-width:736px) and (orientation:landscape){
.navbar-toggler {display: none !important;}
#main {display: block;}
.header-wrap .navbar .nav-link {color: #fff;}
.mob-ul{list-style-type: none; padding-left: 0;}
.header-wrap .sub-menu {width: 250px;}
}
@media only screen and (max-width:667px) and (orientation:landscape){
.navbar-toggler {display: none !important;}
#main {display: block;}
.header-wrap .navbar .nav-link {color: #fff;}
.mob-ul{list-style-type: none; padding-left: 0;}
.header-wrap .sub-menu {width: 250px;}
}
@media only screen and (max-width:568px) and (orientation:landscape){
.navbar-toggler {display: none !important;}
#main {display: block;}
.header-wrap .navbar .nav-link {color: #fff;}
.mob-ul{list-style-type: none; padding-left: 0;}
.header-wrap .sub-menu {width: 250px;}
}
@media only screen and (min-width: 600px) and (max-width: 767px) {
h5.events-heading {
font-size: 20px;
}
p.myp-font {
font-size: 15px;
}
.navbar-toggler {display: none !important;}
#main {display: block;}
.header-wrap .navbar .nav-link {color: #fff;}
.mob-ul{list-style-type: none; padding-left: 0;}
.header-wrap .sub-menu {width: 250px;}
.box img {height: 100%;}
}
@media only screen and (min-width: 480px) and (max-width: 599px) {
.inner-section h3 {
font-size: 18px;
}
h5.events-heading{font-size:15px;}
.inner-section p {
font-size: 13px;
text-align: justify;
}
section#marketplace img {
object-fit: cover;
}
.navbar-toggler {display: none !important;}
#main {display: block;}
.header-wrap .navbar .nav-link {color: #fff;}
.mob-ul{list-style-type: none; padding-left: 0;}
.header-wrap .sub-menu {width: 250px;}
.box img {height: 100%;}
}
@media only screen and (min-width: 321px) and (max-width: 479px) {
.inner-section h3 {
font-size: 18px;
}
h5.events-heading{font-size:15px;}
.inner-section p {
font-size: 13px;
text-align: justify;
}
section#marketplace img {
object-fit: cover;
}
.navbar-toggler {display: none !important;}
#main {display: block;}
.header-wrap .navbar .nav-link {color: #fff;}
.mob-ul{list-style-type: none; padding-left: 0;}
.header-wrap .sub-menu {width: 250px;}
.box img {height: 100%;}
}
@media only screen and (max-width:568px) and (orientation:landscape){
.navbar-toggler {display: none !important;}
#main {display: block;}
.header-wrap .navbar .nav-link {color: #fff;}
.mob-ul{list-style-type: none; padding-left: 0;}
.header-wrap .sub-menu {width: 250px;}
.box img {height: 100%;}
}
@media only screen and (max-width: 320px) {
.inner-section h3 {
font-size: 18px;
}
h5.events-heading{font-size:15px;}
.inner-section p {
font-size: 13px;
text-align: justify;
}
section#marketplace img {
object-fit: cover;
}
.navbar-toggler {display: none !important;}
#main {display: block;}
.header-wrap .navbar .nav-link {color: #fff;}
.mob-ul{list-style-type: none; padding-left: 0;}
.header-wrap .sub-menu {width: 250px;}
.box img {height: 100%;}
}
