SS Web Design Studio

In this example below you will see how to do a SS Web Design Studio with some HTML / CSS and Javascript

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

Technologies

  • HTML
  • CSS
  • JavaScript
    <!DOCTYPE HTML>
<html>
<head>

<script src="https://use.fontawesome.com/fab417e5fd.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
  <title>SS Studio</title>
<meta charset = "UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >

<script language="javascript">
$(document).ready(function(){
var toggle = document.getElementsByClassName('navbar-toggle')[0],
    collapse = document.getElementsByClassName('navbar-collapse')[0],
    dropdowns = document.getElementsByClassName('dropdown');;

// Toggle if navbar menu is open or closed
function toggleMenu() {
    collapse.classList.toggle('collapse');
    collapse.classList.toggle('in');
}

// Close all dropdown menus
function closeMenus() {
    for (var j = 0; j < dropdowns.length; j++) {
        dropdowns[j].getElementsByClassName('dropdown-toggle')[0].classList.remove('dropdown-open');
        dropdowns[j].classList.remove('open');
    }
}

// Add click handling to dropdowns
for (var i = 0; i < dropdowns.length; i++) {
    dropdowns[i].addEventListener('click', function() {
        if (document.body.clientWidth < 768) {
            var open = this.classList.contains('open');
            closeMenus();
            if (!open) {
                this.getElementsByClassName('dropdown-toggle')[0].classList.toggle('dropdown-open');
                this.classList.toggle('open');
            }
        }
    });
}

// Close dropdowns when screen becomes big enough to switch to open by hover
function closeMenusOnResize() {
    if (document.body.clientWidth >= 768) {
        closeMenus();
        collapse.classList.add('collapse');
        collapse.classList.remove('in');
    }
}

// Event listeners
window.addEventListener('resize', closeMenusOnResize, false);
toggle.addEventListener('click', toggleMenu, false);


}); //end doc ready
</script>
</head>

  <body>  <section id="title"> <a name="home"></a>
    <div="wrapper"> 

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#title"><div class="whiteText">
SS</div></a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class=""><a href="#title">Home</a></li>
<li><a href="#about">About</a></li>
 <li><a href="#portfolio">Portfolio</a></li>
 <li><a href="#footer">Contact</a></li>
 <li class="dropdown">
  <div href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></div>
  <ul class="dropdown-menu" role="menu">
 <li><a href="#">Action</a></li>
     <li><a href="#">Another action</a></li>
     <li><a href="#">Something else here</a></li>
     <li class="divider"></li>
     <li class="dropdown-header">Links</li>
 <li><a href="https://www.google.com">Google</a></li>
 <li><a href="https://www.yahoo.com">Yahoo</a></li>
                </ul>
              </li>
            </ul>
          </div><!--/.nav-collapse -->
        <!--/.container-fluid -->
      </nav>
 <!--==========ENDNAV============== -->
 
<br> <br><br>
<h2> SS Web Design Studio</h2> <br><br>
    <h4 id="logo">SS</h4>
    
   <h1>Scott Schmidt, MBA </h1>
    
<br><br>
</section>

 <section id="portfolio">
    <a name ="portfolio"></a>
    <div class="container-fluid">
    <br>  <h2 style="font-size:150%;"class="wrapText">Portfolio</h2></div>  <br><br>

    <div class="container-fluid">
        <div class="row">
   <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
     <a href="https://solenoidal-slate.000webhostapp.com/" target="_blank"><img src="https://us.123rf.com/450wm/mamanamsai/mamanamsai1509/mamanamsai150900659/46229159-quality-coding-concept-design-on-dark-background-clean-vector.jpg" class="img-responsive img" id="imgPort" alt=""></a>
     <h4 class="black">CRUD Project: SQL</h4>
    </div>
    
        <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
     <a href="https://fringe-bean.000webhostapp.com/" target="_blank"><img src="https://www.district87.org/cms/lib/IL02212106/Centricity/ModuleInstance/472/large/BHS%20Black%20and%20White.jpg" class="img-responsive img" id="imgPort"  alt=""></a>
      <h4 class="black">Bloomington High School Athletics</h4>
    </div>
          
          <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
     <a href="https://solenoidal-slate.000webhostapp.com/index1.php" target="_blank"><img src="http://jquery-plugins.net/image/plugin/jquery-datatables-sort-page-filter-millions-of-records.png" class="img-responsive img" id="imgPort"  alt=""></a>
      <h4 class="black">Datatable.net Table</h4>
    </div>
    
      <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
      <a href="https://bhs-staff.000webhostapp.com/" target="_blank"><img src="http://cofchristmi.org/wp-content/uploads/2017/01/directory-icon.png" class="img-responsive img" id="imgPort" alt=""></a>
      <h4 class="black">BHS Directory</h4>
    </div>
    
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
     <a href="https://s.codepen.io/ScottFSchmidt/debug/POJPzb/PNrvYLRwpvEM" target="_blank"><img src="http://www.downsautomotiveservice.repcoservice.net/images/StandardImage/Car%20Service%20Toowoomba1.JPG" class="img-responsive img" id="imgPort"  alt=""></a>
      <h4 class="black">Downs Automotive Shop</h4>
    </div>
    
       <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
     <a href="https://scott-schmidt-chess.000webhostapp.com/" target="_blank"><img src="https://athome.readinghorizons.com/Media/Default/Images/Solutions/Reading%20Tutor.png" class="img-responsive img" id="imgPort"  alt=""></a>
      <h4 class="black">SS Tutoring</h4>
    </div>
          
   <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
      <a href="https://normal-third-party.000webhostapp.com/" target="_blank"><img src="http://www.acmecase.com.au/images/products/crates-6b.jpg" class="img-responsive img" id="imgPort" alt=""></a>
      <h4 class="black">Normal Third Co.</h4>
    </div>
    
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
     <a href="https://eastview-sports-volleyball.000webhostapp.com/" target="_blank"><img src="https://bsbproduction.s3.amazonaws.com/portals/7194/contentrotator/contentrotator635920219893128484.png" class="img-responsive img" id="imgPort"  alt=""></a>
      <h4 class="black">Eastview Sports</h4>
          </div>
 
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
     <a href="https://codepen.io/ScottFSchmidt/full/dWvqpO/" target="_blank"><img src="https://lh3.googleusercontent.com/FpQXb3fjRebih0ZMiuXK4NuWARD4zyG-5un8UYDoM0ha7IBOE9iqBtZYbxpV2kKB6w=w300" class="img-responsive img" id="imgPort"  alt=""></a>
      <h4 class="black">Calculator</h4>
          </div>
      
 
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
     <a href="https://codepen.io/ScottFSchmidt/full/gRvBbW/" target="_blank"><img src="http://www.memozor.com/templates/memoire/images/the_simon_game_zoom.jpg" id="imgPort" alt=""></a>
     <h4 class="black">Simple Simon</h4>
    </div>
               
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
     <a href="https://codepen.io/ScottFSchmidt/pen/NgevBY" target="_blank"><img src="https://pbs.twimg.com/profile_images/801332522001043456/tf-YNWWV.jpg" class="img-responsive img" id="imgPort"  alt=""></a>
      <h4 class="black">CodeCamp Leaderboard</h4>
    </div>
   
 <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
     <a href="https://codepen.io/ScottFSchmidt/full/xraJbm/" target="_blank"><img src="https://images.alphacoders.com/188/188121.jpg" class="img-responsive img" id="imgPort" alt=""></a>
     <h4 class="black">Local Weather</h4>
    </div>

<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
     <a href="https://codepen.io/ScottFSchmidt/full/zzJxqr" target="_blank"><img src="https:////c1.staticflickr.com/5/4430/36231201552_944b7d4316_m.jpg" class="img-responsive img" id="imgPort"  alt=""></a>
     <h4 class="black">Wiki Search</h4>
                 </div>
       
 <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
     <a href="https://codepen.io/ScottFSchmidt/full/KqxPyW" target="_blank"><img src="http://www.history.com/s3static/video-thumbnails/AETN-History_VMS/21/205/tdih_may31_rebroadband_HD_still_624x352.jpg" id="imgPort"  class="img-responsive img" alt=""></a>
      <h4 class="black">Timer Clock</h4>
    </div>
       
   <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
     <a href="https://codepen.io/ScottFSchmidt/pen/YQWprL" target="_blank"><img src="https://camo.githubusercontent.com/ff3e56c2891d0bbce8eac58451685b52dae53e48/687474703a2f2f692e696d6775722e636f6d2f574c624c4f53622e706e67" id="imgPort" class="img-responsive img" alt=""></a>
     <h4 class="black">Tic Tac Toe</h4>
    </div>
   
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
     <a href="https://codepen.io/ScottFSchmidt/pen/eemrBG" class="img-responsive" target="_blank"><img src="http://sibeeshpassion.com/wp-content/uploads/2016/02/jQuery-Datatable-With-Server-Side-Data.png" id="imgPort" class="img-responsive img" alt=""></a>
      <h4 class="black">Datatable Plug-in Template</h4>
    </div>
              
  <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
     <a href="https://codepen.io/ScottFSchmidt/pen/pwoXQJ" target="_blank"><img src="http://ni5su28o0no66fic453tnb73.wpengine.netdna-cdn.com/wp-content/uploads/2015/08/twitch.jpg" class="img-responsive img" id="imgPort"  alt=""></a>
     <h4 class="black">Twitch TV</h4>
    </div>
     
<div class="img col-lg-3 col-md-3 col-sm-4 col-xs-12">
     <a href="https://codepen.io/ScottFSchmidt/pen/RjbNmg" target="_blank"><img src="https://planetargon-blog.s3.amazonaws.com/images/flexbox.png" id="imgPort" class="img-responsive img" alt=""></a>
     <h4 class="black">Flexbox</h4>
    </div>
 
<div class="img col-lg-3 col-md-3 col-sm-4 col-xs-12"><a href="https://codepen.io/ScottFSchmidt/pen/jwJXeL" target="_blank"><img src="https://www-tc.pbs.org/food/wp-content/blogs.dir/2/files/2012/12/Year-in-Food-2012-Recipes-Feat-602x338.jpg" class="img-responsive img" id="imgPort"  alt=""></a>
      <h4 class="black">Recipe Box</h4>
     </div>
     
     <div class="img col-lg-3 col-md-3 col-sm-4 col-xs-12"><a href="https://codepen.io/ScottFSchmidt/full/RjbPKx/" target="_blank"><img src="https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/Vmew03y/technology-grid-data-background_4aujujcke__F0010.png" class="img-responsive img" id="imgPort"  alt=""></a>
      <h4 class="black">CSS Gridbox</h4>
     </div>
     
        <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12"><a href="https://codepen.io/ScottFSchmidt/pen/GMzgKz" target="_blank"><img src="https://www.abeautifulsite.net/uploads/2014/09/menu-icon.png" id="imgPort"  class="img-responsive img" alt=""></a>
      <h4 class="black">Navbar Template </h4>
     </div>
     
       <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12"><a href="https://codepen.io/ScottFSchmidt/pen/YEerqQ" target="_blank"><img src="http://stopdesign.com/templates/photos/img/title_img.gif" id="imgPort"  class="img-responsive img" alt=""></a>
      <h4 class="black">Photo Wall Gallery </h4>
     </div>
     
 </div><!--END CONTAINER-->  

 </section>    

<!--====ABOUT ME======-->
<section id="about">
  <a name ="about"></a>
  
 <div class="container-fluid">
  <br> <h3 class="wrapText"> About Us</h3> <br><br><br>
  </div>
  
   <div class="container">
   <div class="flex">
<div class="main-content">
  <div class="portfolio">
    <div class="portfolio-item medium">Scott is currently a freelance web developer.</div>
    <div class="portfolio-item large two"> <img id="scottPic" class="img-responsive"  src="https://scontent.ford1-1.fna.fbcdn.net/v/t1.0-1/p160x160/13680577_10157038015420004_4532829360943883133_n.jpg?oh=7b491d1988dd4797efce8517fbb78c90&oe=5A069EE3"></img></div>
    <div class="portfolio-item medium"> Front-end certificate <br>Will soon have a full-stack development certicate. </div>
    <div class="portfolio-item small">Scott Schmidt, MBA</div>
    <div class="portfolio-item tall">Go to the next section to see the portfolio!</div>
    <div class="portfolio-item wide" display="block">FCC is ranked as top web development website: <br>
  <a href="https://www.forbes.com/sites /laurencebradford/2016/12/08/11-websites-to-learn-to-code-for-free-in-2017/#2ccb363b69c4" target="_blank"> #2 on Forbes;</a> <br>
   <a href="https://www.slant.co/options/3040/~freecodecamp-review" target="_blank"> #1 on Slant;</a>
    </div></div>
  </div>  </div>
    </section>
        <!--====FOOTER ======-->
    <section id="footer">
    <a name ="contact"> </a>   
   <center><a href="tel:13098383727" id="phone" i class="fa fa-phone" color="silver" aria-hidden="true"></i>
    (309)838-3727</a>  </center>  

<a class="btn btn-default" href="https://www.freecodecamp.com"> <i class="fa fa-free-code-camp" id="fccicon" aria-hidden="true"></i></a>

<a class="btn btn-default" href="https://codepen.io/ScottFSchmidt/"> <i class="fa fa-codepen" aria-hidden="true" id="codepenicon"></i>
</i></a> 

<a class="btn btn-default" href="https://www.codecademy.com/ScottSchmidt"> <i class="fa fa-code" aria-hidden="true" id="codeaicon"></i>
</i></a>                                      

<a class="btn btn-default" href="https://www.linkedin.com/in/scottfschmidt/"> <i class="fa fa-linkedin-square" id="linkedinicon" aria-hidden="true"></i> </a>
<p>Copyright © SS Studio 2017</p>
</section>  

/*Downloaded from https://www.codeseek.co/ScottFSchmidt/ss-web-design-studio-bRjryN */
    body, html, #wrapper {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  font-size:1em;
  text-align: center;
  display: block;
  font-weight: 700;
  moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


/* NAVBAR && COLORS  */
.whiteText{
  color:white !important;
  background-color:black;
   font-size:100%;
  padding:0%;
}
.blackText{
  color:black;
}

/* NAVBAR  */
@media (min-width: 768px) {
  .dropdown:hover > .dropdown-menu {
    display: block;
  }
}

.nav > li > div {
  position: relative;
  display: block;
   cursor: default;
       }
.navbar-nav > li > div {
  padding-top: 15px;
  padding-bottom: 15px;
  line-height: 20px;  
}
.navbar-default .navbar-nav > li > div {
  color: gray; /* dropdownColor  */
  
}
.navbar-collapse.collapse {
  display: none;
     color: gray;
    background-color: black;
 }
.dropdown-open {

}

/*NAV END  */

h4{
    color:black;
}
p, #menu, h3, h5{
    color:white;
}

h2,
h6 {
   font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
  display:block;
  z-index:4;
}


#logo{
  color: gray;
 display: inline-block;
width: 200px;
  padding-right:55px;
  background-color:none;
    opacity:1;
border: 2px solid dimgray;
text-align: center;
  font-stretched:semi-condensed;
  letter-spacing:-60px;
  font-size:950%;
  text-shadow: 6px 6px black;
   font-style: bold;
  font-variant: normal;
    z-index:9999;
}

h5{
  font-weight:bold;
  text-align:center;
  font-size:120%;
  color:black;
  }
#scottPic{
  width: 90%;
  max-width:180px !important;
  height:auto;
  display: block;
  
}

#imgPort{
  overflow:hidden;
  min-width:240px;
  min-height:200px;
  max-width: 240px;
  max-height: 110px;
 padding:1px;
   border:1px solid #021a40;
  position: relative;
  display: block;
  margin:auto;
    margin-left: auto;
  margin-right: auto;
}
#phone{
  color:silver;
    font-weight:bold;
  font-size:130%;
  text-align:center;
}

/*  BOOTSTRAP------ */
.wrapText {   
    color:silver;
      border: 1px solid black;
      display:inline;
    box-sizing: border-content;
padding:15px;
}

h2{
  color:darkgray;
 font-weight: 700;
  font-size:450%;
  text-shadow: 2px 2px black;
  family-font: Jazz LET, fantasy;
  font-style: bold;
  font-variant: normal;
  padding: 0;
    z-index:999;
}

#fccicon{
  color:green;
}
#githubicon{
  color:purple;
}
#linkedinicon{
  color:blue;
}
#codepenicon{
  color:gray;
}

.btn-default{
    background: #C0C0C0;
  text-shadow: 1px 1px 1px rgba(0,0,0, 20);
  box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
  letter-spacing: -1px;
  transition: .2s;
  font-size:1em;
  border-style:solid;
  border-color:black;
 color:black;
    font-family:Ubuntu;
  border-width:2px;
  font-weight:bold;
    z-index:9999;
}
.btn:hover {
	color: #fff;
  border: 2px outset rgba(0, 0, 0, 0.9);
  background: rgba(0,0,0, 0.9);
  transform:scale(1.1);
  transition: .2s;
  text-shadow: 1px 1px 1px rgba(0,0,0, 20);
  box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
  letter-spacing: 0px;
}

.intro-divider {
    width: 100%;
border-top: 1px solid dimgrey;
    border-bottom: 1px;
      z-index:9999;
}

#title{background-image:url(
https://40.media.tumblr.com/1b916597d3e174399cb7adadddb66ede/tumblr_nt5uk4psl31ud7rr3o1_1280.jpg);
  background-attachment: center;
   background-size:cover;
     padding-top: 0%;
  padding-bottom:0%;
}

#blueScreen
{
    background-attachment: center;
   background-size:fixed cover;
  z-index:0;
  opacity:.1;
    background-color: darkblue;
       padding-top: 1%;
  padding-bottom:1%;
}

#about{
  background:gray;
  background-attachment: fixed center;
   background-size:cover;
  background-repeat:no-repeat;
  padding-top: 3%;
  padding-bottom:3%;
  }

#footer{
  background-image: url(http://www.misucell.com/data/out/9/IMG_322298.jpg);
  background-attachment: fixed center;
  background-size:cover;
    padding-top: 1%;
  padding-bottom:1%;
  color:silver;
  }
#portfolio{
  background-color:white;
   padding-top:5%;
  padding-bottom:5%;
   background-size:cover;
    background-repeat:no-repeat;
  }
p, #scott {
  color:white;
}

/* Flex Pic Template
https://codepen.io/ScottFSchmidt/pen/RjbPKx
*/ 
.flex {
  	box-sizing: border-box;
	background:gray;
	color: silver;
	font-family: "Raleway", sans-serif;
	font-size: .8rem;
	line-height: 1.45;
	display: flex;
	flex-wrap: wrap;
}

.main-content {
	padding: 5%;
	flex: 1 1 90%;
	min-height: 110vh;
 }

.portfolio {
	display: grid;
	height: 100%;
	grid-template-rows: repeat(8, 1fr);
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 10px;
}

.portfolio-item {
	background: black;
	color: white;
	font-weight: 700;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1em;
	background-size: cover;
	background-position: top left;
	transition: all ease-in-out 300ms;
	position: relative;
	z-index: 10;
}

.portfolio-item.small {
	grid-row: span 1;
	grid-column: span 1;
}

.portfolio-item.medium {
	grid-row: span 2;
	grid-column: span 2;
}

.portfolio-item.large {
	grid-row: span 3;
	grid-column: span 3;
}

.portfolio-item.tall {
	grid-row: span 3;
	grid-column: span 2;
}

.portfolio-item.wide {
	grid-row: span 2;
	grid-column: span 3;
}

.portfolio-item:hover {
	color: white;
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.85);
}

.two {
	background-image: url(//unsplash.it/800/600);

}

.two::before {
	content: '';
	display: block;
	background: #353535;
	opacity: 0.8;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transition: all ease-in-out 300ms;
	z-index: -1;
}

.two:hover::before {
	opacity: 0.2;
}


/* TYPING FUNC */ 
.brand {
  font-family: "Serif", serif;
  font-weight: normal;
  color: orange;
    font-size: 200%;
  text-align: center;
}
.brand-phrase {
  font-size: 200%;
  text-align: center;
}








/*Downloaded from https://www.codeseek.co/ScottFSchmidt/ss-web-design-studio-bRjryN */
    var toggle = document.getElementsByClassName('navbar-toggle')[0],
    collapse = document.getElementsByClassName('navbar-collapse')[0],
    dropdowns = document.getElementsByClassName('dropdown');;

// Toggle if navbar menu is open or closed
function toggleMenu() {
    collapse.classList.toggle('collapse');
    collapse.classList.toggle('in');
}

// Close all dropdown menus
function closeMenus() {
    for (var j = 0; j < dropdowns.length; j++) {
        dropdowns[j].getElementsByClassName('dropdown-toggle')[0].classList.remove('dropdown-open');
        dropdowns[j].classList.remove('open');
    }
}

// Add click handling to dropdowns
for (var i = 0; i < dropdowns.length; i++) {
    dropdowns[i].addEventListener('click', function() {
        if (document.body.clientWidth < 768) {
            var open = this.classList.contains('open');
            closeMenus();
            if (!open) {
                this.getElementsByClassName('dropdown-toggle')[0].classList.toggle('dropdown-open');
                this.classList.toggle('open');
            }
        }
    });
}

// Close dropdowns when screen becomes big enough to switch to open by hover
function closeMenusOnResize() {
    if (document.body.clientWidth >= 768) {
        closeMenus();
        collapse.classList.add('collapse');
        collapse.classList.remove('in');
    }
}

// Event listeners
window.addEventListener('resize', closeMenusOnResize, false);
toggle.addEventListener('click', toggleMenu, false);

//view-source:https://getbootstrap.com/docs/3.3/examples/navbar-fixed-top/
//https://codepen.io/j_holtslander/pen/doQggE



Comments