<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Include the above in your HEAD tag -->
<div class="container-fluid themedcontainer p-0 m-0 m-auto">
<div id="home" class="card bg-dark text-white m-0 p-0 card-custom">
<img src="http://cgcmagnum.epizy.com/demo/bs_kmoda/images/model-600238_1920.jpg" class="card-img position-fixed" alt="...">
<div class="card-img-overlay">
<nav class="navbar navbar-expand-lg bg-transparent srnav w-100">
<ul class="customnav">
<li>
<a href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#whyus">Why Us</a>
</li>
<li>
<a href="#gallery">Gallery</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</nav>
<div class="row p-0 m-0 m-auto">
<div id="sidemenu" class="col-sm-3 col-md-3 cgcside mt-0 ml-0">
<div class="goleft"><a href="#sidemenu"><span>+</span></a></div>
<div class="cgcmenuside">
<div class="menudivider mt-5"></div>
<h4 class="lead text-center menutitle">Menu</h4>
<div class="menudivider"></div>
<ul class="list-group noli m-4">
<li><a href="#about">About</a></li>
<li><a href="#whyus">Why Us</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="goup"><a href="#home"><span>↑</span></a></div>
</div>
<div class="col-md-9 col-sm-12 col-xs-12 colosus pt-3 mb-5 colosus-sronly mt-5 mb-5">
<div class="col-md-12 sm-12 text-center img-fluid logobranded"><a href="#"><img src="http://cgcmagnum.epizy.com/demo/bs_kmoda/images/brand_logo.png" alt="logo"/></a></div>
<p class="card-text lead">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div id="about" class="col-md-12 boxed mb-5 mt-5">
<h5 class="display-3 text-left">About our Studio</h5>
<p class="card-text lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut <a href="#" target="_blank">aliquip</a> ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="whyus" class="col-md-12 boxed mb-5 mt-5">
<h5 class="display-3 text-left">Why Us</h5>
<p class="card-text lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="gallery" class="col-md-12 boxed mb-5 mt-5">
<h5 class="display-3 text-center">Gallery</h5>
<p class="card-text lead text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="container gallery mt-5 mb-5">
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-6"><img class="img-fluid" src="http://cgcmagnum.epizy.com/demo/bs_kmoda/images/portrait-450.jpg"/></div>
<div class="col-md-3 col-sm-4 col-xs-6"><img class="img-fluid" src="http://cgcmagnum.epizy.com/demo/bs_kmoda/images/portrait-450.jpg"/></div>
<div class="col-md-3 col-sm-4 col-xs-6"><img class="img-fluid" src="http://cgcmagnum.epizy.com/demo/bs_kmoda/images/portrait-450.jpg"/></div>
<div class="col-md-3 col-sm-4 col-xs-6"><img class="img-fluid" src="http://cgcmagnum.epizy.com/demo/bs_kmoda/images/portrait-450.jpg"/></div>
<div class="col-md-3 col-sm-4 col-xs-6"><img class="img-fluid" src="http://cgcmagnum.epizy.com/demo/bs_kmoda/images/portrait-450.jpg"/></div>
<div class="col-md-3 col-sm-4 col-xs-6"><img class="img-fluid" src="http://cgcmagnum.epizy.com/demo/bs_kmoda/images/portrait-450.jpg"/></div>
<div class="col-md-3 col-sm-4 col-xs-6"><img class="img-fluid" src="http://cgcmagnum.epizy.com/demo/bs_kmoda/images/portrait-450.jpg"/></div>
<div class="col-md-3 col-sm-4 col-xs-6"><img class="img-fluid" src="http://cgcmagnum.epizy.com/demo/bs_kmoda/images/portrait-450.jpg"/></div>
</div>
</div>
</div>
<div id="contact" class="col-md-12 boxed mb-5 mt-5">
<h5 class="display-3 text-left">Contact</h5>
<p class="card-text lead text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="container mt-5 mb-5 boxedcontact pt-3 pb-3">
<div class="row">
<div class="col-md-4 img-fluid text-left logobranded"><a href="#"><img src="http://cgcmagnum.epizy.com/demo/bs_kmoda/images/brand_logo.png" alt="logo"/></a></div>
<div class="col-md-4">
<p><strong>Email:</strong> my@email.com</p>
<p><strong>Tel:</strong> 123 123 1234</p>
</div>
<div class="col-md-4">
<p><strong>Twitter:</strong> @cssmfc</p>
<p><strong>Facebook:</strong> fb.me/username</p>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 text-right"><p class="small cgccopyright"> 2019 © SiteName</p></div>
</div>
</div>
</div>
</div>
</div>
html {
scroll-behavior: smooth;
}
body{background-color:#0E1721; overflow-x:hidden;}
body{font-family:
"Segoe UI",
"Roboto",
"Helvetica Neue", Arial, sans-serif,
}
.container-fluid,.themedcontainer{border:0;border-radius:0;background-color:#000;}
.card, img{border:0;}
.card-custom{padding:0;margin:0;}
.cgcside{background-color:rgba(0,0,0,.40);position:fixed;top:0;left:0;height:100%;transition:all .5s;-webkit-box-shadow:1px 0 4px #000;}
.colosus{background-color:rgba(0,0,0,.20);position:absolute;top:0px;right:0;margin-bottom:140px!important;}
h4.menutitle{font-size:2rem;}
ul.noli li{list-style:none;}
.noli a,.noli a:visited{font-size:1.2rem;text-transform:uppercase;letter-spacing: 0.1em;color:#ACB5BF;text-decoration:none;transition:all .3s;}
.noli a:hover{color:#fff;text-decoration:none;margin-left:5px;}
.boxed{background-color:rgba(0,0,0,.70);padding-bottom:10px;}
.menudivider{background-color:#627284;height:1px;margin:0 auto;width:0px;transition:all 1.3s;}
.cgcside:hover .menudivider{background-color:#627284;height:1px;margin:0 auto;width:50%;}
.goup{display:block;width:54px;height:auto;padding:1px 16px 1px;text-align:center;overflow:hidden;position:fixed;bottom:20px;left:10%;border-radius:100%;border:2px solid rgba(255,255,255,.0);z-index:90000;}
.goup:hover{border:2px solid rgba(255,255,255,.10);z-index:90000;}
.goup a,.goup a:visited{color:rgba(255,255,255,.60);font-size:2rem;text-decoration:none;z-index:90000;}
.goup a:hover{color:rgba(255,255,255,1);font-size:2rem;text-decoration:none;z-index:90000;}
#sidemenu:target{background-color:rgba(0,0,0,.40);position:fixed;top:0;left:-50%;height:100%;}
#sidemenu:target ~ .colosus{display:block;width:95%!important;background-color:rgba(0,0,0,.20);position:absolute;top:0;left:10%;transition:all .3s;}
.themedcontainer a, .themedcontainer a:visited{color:rgba(172,181,191,.8);text-decoration:none;text-shadow:0 1px 1px #000;}
.themedcontainer a:hover{color:rgba(172,181,191,1);text-decoration:none;}
.gallery img {filter: gray;-webkit-filter: grayscale(1); -webkit-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);-moz-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);margin-bottom:20px;transition:all 1s;}
.gallery img:hover {filter: none;-webkit-filter: grayscale(0);-webkit-transform: scale(2.2,2.2);transform: scale(2.2,2.2);position:absolute;top:0px;left:3px;z-index:9999;}
.srnav{visibility:hidden;display:none;}
.logobranded img{opacity:.7;}
.logobranded:hover img{opacity:1;}
.boxedcontact{background-color:#324756;}
.boxedcontact p{color:rgba(255,255,255,.5);}
.boxedcontact:hover p{color:rgba(255,255,255,.8);}
.goleft{position:relative;top:1px;background-color:#000;text-align:right;z-index:9999!important;}.goleft a,.goleft a:visited{display:block;width:35px;height:35px;padding:5px 5px 5px;line-height:normal;text-align:center;float:right;-webkit-border-radius:100%;border-radius:100%;text-decoration:none;color:rgba(255,255,255,.5);overflow:hidden;font-size:30px;}
.goleft a:hover{display:block;width:35px;height:35px;padding:5px 5px 5px;line-height:normal;text-align:center;float:right;-webkit-border-radius:100%;border-radius:100%;color:rgba(255,255,255,.8);}.goleft span{display:block;transform:rotate(45deg);}.cgccopyright{color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing: 0.1em;}
@media only screen and (max-width: 786px) {
body{background-color:#0E1721;}
.container-fluid,.themedcontainer{border:0;border-radius:0;background-color:#000;}
.card, img{border:0;}
.card-custom{padding:0;margin:0;}
.colosus ,.colosus-sronly{display:block;height:auto;margin:140px auto 22px auto;background-color:rgba(0,0,0,.20);position:absolute!important;top:140px!important;left:0!important;}
h4.menutitle{font-size:1rem;}
.boxed{background-color:rgba(0,0,0,.70);}
#sidemenu, #sidemenu:target,.cgcside{display:none;}
.gallery img {filter: gray;-webkit-filter: grayscale(1); -webkit-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);-moz-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);margin-bottom:20px;transition:all 1s;}
.gallery img:hover {filter: none;-webkit-filter: grayscale(0);transform: none;position:relative;top:0px;left:0px;}
img.position-fixed,.position-fixed{position:fixed;background-color:#000;}
.themedcontainer > h4, h2, h1, .display-4,.display-3, .display-2{font-size:1.6rem;}
.srnav{visibility: visible;display:block;background-color:rgba(0,0,0,.80);}
.srnav{display:block;width:100%!important;height:auto;margin:0 auto 20px auto;position:fixed;top:0;left:0;z-index:999;}nav li, ul.customnav li,ul.customnav li.nav-item,ul.customnav li a,ul.customnav li a:hover{display:inline-block;}
ul.customnav{background-color:rgba(0,0,0,.80);}
ul.customnav li a, ul.customnav li a:visited{display:inline-block;padding:8px 12px;text-align:center;margin:0 auto;color:#ACB5BF;text-decoration:none;text-transform:uppercase;letter-spacing: 0.1em;font-size:12px;}
ul.customnav li a:hover{display:inline-block;padding:8px 12px;text-align:center;margin:0 auto;color:#FFF;text-decoration:none;}
}
