{Do not view} Crazyne Studios 2.0

In this example below you will see how to do a {Do not view} Crazyne Studios 2.0 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Squashalob, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Squashalob ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
      <div class="container-fluid">
            <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
                  <a class="navbar-brand" href="#">Crazyne Studios</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                  <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">Games</a></li>
                        <li><a href="#">Crazyne HQ</a></li>
                        <li><a href="#">Our Channel</a></li>
                  </ul>
                  <ul class="nav navbar-nav navbar-right">
                        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                  </ul>
            </div>
      </div>
</nav>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
      </ol>
      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
            <div class="item active">
                  <img src="https://placehold.it/1200x400?text=IMAGE" alt="Image">
                  <div class="carousel-caption">

                        <h3>Watch Our Videos</h3>
                        <p>We're Crazy!</p>
                  </div>
            </div>

            <div class="item">
                  <img src="https://placehold.it/1200x400?text=Another Image Maybe" alt="Image">
                  <div class="carousel-caption">
                        <h3>SUBSCRIBE</h3>
                        <p>And LIKE</p>
                  </div>
            </div>
      </div>
      <!-- Left and right controls -->
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
      </a>
</div>

<div class="container text-center">
      <h3>Our Channel</h3><br>
      <div class="row">
            <div class="col-sm-4">
                  <img src="https://www.youtube.com/yt/brand/media/image/YouTube-logo-full_color.png" class="img-responsive" style="width:100%" alt="Image">
                  <p>Desktop You Tube</p>
            </div>
            <div class="col-sm-4">
                  <img src="http://logok.org/wp-content/uploads/2014/08/YouTube-logo-play-icon.png" class="img-responsive" style="width:100%" alt="Image">
                  <p>Mobile You Tube</p>
            </div>
            <div class="col-sm-4">
                  <div class="well">
                        <img class="img-responsive" src="http://printmyatm.com/wp-content/uploads/2013/11/YouTube-New-Subscribe-Button-980x280.png">
                  </div>
                  <div class="well">
                        <img class="img-responsive" src="http://florentfarges.com/wp-content/uploads/2015/10/YouTube-03-300x300.png">
                  </div>
            </div>
      </div>
</div><br>


<div class="container-fluid text-center">
      <div class="row content">
            <div class="col-sm-2 sidenav">
                  <p><a href="#">Link</a></p>
                  <p><a href="#">Link</a></p>
                  <p><a href="#">Link</a></p>
            </div>
            <div class="col-sm-8 text-left">
                  <h1>Welcome</h1>
                  <p>Hi guys! Our names are Jedi Sniper and BlastioesDaBoss. We're starting a new channel, which we are aiming to get at least over 200 SUBSCRIBERS. When we hit 200 SUBSCRBERS, we will give anyone who SUBSCRIBES, a Fidget Spinner.</p>
                  <hr>

                  <p>Type in 'Crazyne Studios', and it's the channel on the top of the page.</p>
            </div>
            <div class="col-sm-2 sidenav">
                  <div class="well">
                        <p>ADS</p>
                  </div>
                  <div class="well">
                        <p>ADS</p>
                  </div>
            </div>
      </div>
</div>
<footer class="container-fluid text-center">
      <p>Crazyne Studios</p>
</footer>

/*Downloaded from https://www.codeseek.co/Squashalob/do-not-view-crazyne-studios-20-NjYXJK */
    T    /* Remove the navbar's default margin-bottom and rounded borders */ 
    .navbar {
      margin-bottom: 0;
      border-radius: 0;
    }
    
    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {height: 450px}
    
    /* Set gray background color and 100% height */
    .sidenav {
      padding-top: 20px;
      background-color: #f1f1f1;
      height: 100%;
    }
    
    /* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }
    
    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height:auto;} 
    }
   /* Remove the navbar's default margin-bottom and rounded borders */ 
    .navbar {
      margin-bottom: 0;
      border-radius: 0;
    }
    
    /* Add a gray background color and some padding to the footer */
    footer {
      background-color: #f2f2f2;
      padding: 25px;
    }
    
  .carousel-inner img {
      width: 100%; /* Set width to 100% */
      margin: auto;
      min-height:200px;
  }

  /* Hide the carousel text when the screen is less than 600 pixels wide */
  @media (max-width: 600px) {
    .carousel-caption {
      display: none; 
    }
  }


/*Downloaded from https://www.codeseek.co/Squashalob/do-not-view-crazyne-studios-20-NjYXJK */
    

Comments