Bootstrap easel and old html

Developer

Size

13,385 Kb

Views

36,432

Bootstrap easel and old html Previews
Bootstrap easel and old html HTML Codes
Bootstrap easel and old html CSS Codes

How do I make an bootstrap easel and old html?

I love lego, playing with css stylesheets of frameworks, kit's pen's.. What is a bootstrap easel and old html? How do you make a bootstrap easel and old html? This script and codes were developed by Filipp on 21 August 2022, Sunday.

Bootstrap easel and old html Previews

Bootstrap easel and old html - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>bootstrap easel and old html </title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://bootswatch.com/flatly/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @font-face { font-family: 'icomoon'; src: url("http://deli.dil-ex.ru/ResponsiveRetinaReadyMenu/fonts/icomoon.eot"); src: url("http://deli.dil-ex.ru/ResponsiveRetinaReadyMenu/fonts/icomoon.eot?#iefix") format("embedded-opentype"), url("http://deli.dil-ex.ru/ResponsiveRetinaReadyMenu/fonts/icomoon.woff") format("woff"), url("http://deli.dil-ex.ru/ResponsiveRetinaReadyMenu/fonts/icomoon.ttf") format("truetype"), url("http://deli.dil-ex.ru/ResponsiveRetinaReadyMenu/fonts/icomoon.svg#icomoon") format("svg"); font-weight: normal; font-style: normal;
}
/* Windows Chrome ugly fix http://stackoverflow.com/questions/13674808/chrome-svg-font-rendering-breaks-layout/14345363#14345363 */
@media screen and (-webkit-min-device-pixel-ratio: 0) { @font-face { font-family: 'icomoon'; src: url("http://deli.dil-ex.ru/ResponsiveRetinaReadyMenu/fonts/icomoon.svg#icomoon") format("svg"); }
}
body { background-color: #F67E31; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGNvdW50PScxMDAlJyBoZWlnaHQ9JzEwMCUnPgoJPGNpcmNsZSBjeD0nNTAlJyBjeT0nNTAlJyByPSc1JScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2ZmNjYwMCcgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9JzUwJScgcj0nMTAlJyBmaWxsLW9wYWNpdHk9Jy4yJyBmaWxsPScjZmY2NjAwJyAvPgoJPGNpcmNsZSBjeD0nNTAlJyBjeT0nNTAlJyByPScxNSUnIGZpbGwtb3BhY2l0eT0nLjInIGZpbGw9JyNmZjY2MDAnIC8+Cgk8Y2lyY2xlIGN4PSc1MCUnIGN5PSc1MCUnIHI9JzIwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2ZmNjYwMCcgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9JzUwJScgcj0nMjUlJyBmaWxsLW9wYWNpdHk9Jy4yJyBmaWxsPScjZmY2NjAwJyAvPgoJPGNpcmNsZSBjeD0nNTAlJyBjeT0nNTAlJyByPSczMCUnIGZpbGwtb3BhY2l0eT0nLjInIGZpbGw9JyNmZjY2MDAnIC8+Cgk8Y2lyY2xlIGN4PSc1MCUnIGN5PSc1MCUnIHI9JzM1JScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2ZmNjYwMCcgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9JzUwJScgcj0nNDAlJyBmaWxsLW9wYWNpdHk9Jy4yJyBmaWxsPScjZmY2NjAwJyAvPgoJPGNpcmNsZSBjeD0nNTAlJyBjeT0nNTAlJyByPSc0NSUnIGZpbGwtb3BhY2l0eT0nLjInIGZpbGw9JyNmZjY2MDAnIC8+Cgk8Y2lyY2xlIGN4PSc1MCUnIGN5PSc1MCUnIHI9JzUwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2ZmNjYwMCcgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzIwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2ZmOTkwMCcgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzMwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2ZmOTkwMCcgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzQwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2ZmOTkwMCcgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzUwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2ZmOTkwMCcgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzYwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2ZmOTkwMCcgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzcwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2ZmOTkwMCcgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzgwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2ZmOTkwMCcgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzkwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2ZmOTkwMCcgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzEwMCUnIGZpbGwtb3BhY2l0eT0nLjInIGZpbGw9JyNmZjk5MDAnIC8+Cgk8Y2lyY2xlIGN4PScwJyBjeT0nMCcgcj0nMTAlJyBmaWxsLW9wYWNpdHk9Jy4yJyBmaWxsPScjZGI5YzRiJyAvPgoJPGNpcmNsZSBjeD0nMCcgY3k9JzAnIHI9JzIwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2RiOWM0YicgLz4KCTxjaXJjbGUgY3g9JzAnIGN5PScwJyByPSczMCUnIGZpbGwtb3BhY2l0eT0nLjInIGZpbGw9JyNkYjljNGInIC8+Cgk8Y2lyY2xlIGN4PScwJyBjeT0nMCcgcj0nNDAlJyBmaWxsLW9wYWNpdHk9Jy4yJyBmaWxsPScjZGI5YzRiJyAvPgoJPGNpcmNsZSBjeD0nMCcgY3k9JzAnIHI9JzUwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2RiOWM0YicgLz4KCTxjaXJjbGUgY3g9JzAnIGN5PScwJyByPSc2MCUnIGZpbGwtb3BhY2l0eT0nLjInIGZpbGw9JyNkYjljNGInIC8+Cgk8Y2lyY2xlIGN4PScwJyBjeT0nMCcgcj0nNzAlJyBmaWxsLW9wYWNpdHk9Jy4yJyBmaWxsPScjZGI5YzRiJyAvPgoJPGNpcmNsZSBjeD0nMTAwJScgY3k9JzAnIHI9JzEwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nI2QxN2QwMCcgLz4KCTxjaXJjbGUgY3g9JzEwMCUnIGN5PScwJyByPScyMCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyNkMTdkMDAnIC8+Cgk8Y2lyY2xlIGN4PScxMDAlJyBjeT0nMCcgcj0nMzAlJyBmaWxsLW9wYWNpdHk9Jy4xJyBmaWxsPScjZDE3ZDAwJyAvPgoJPGNpcmNsZSBjeD0nMTAwJScgY3k9JzAnIHI9JzQwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nI2QxN2QwMCcgLz4KCTxjaXJjbGUgY3g9JzEwMCUnIGN5PScwJyByPSc1MCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyNkMTdkMDAnIC8+Cgk8Y2lyY2xlIGN4PScxMDAlJyBjeT0nMCcgcj0nNjAlJyBmaWxsLW9wYWNpdHk9Jy4xJyBmaWxsPScjZDE3ZDAwJyAvPgoJPGNpcmNsZSBjeD0nMTAwJScgY3k9JzAnIHI9JzcwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nI2QxN2QwMCcgLz4KCTxjaXJjbGUgY3g9JzEwMCUnIGN5PScxMDAlJyByPScxMCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyNmYTdkMDgnIC8+Cgk8Y2lyY2xlIGN4PScxMDAlJyBjeT0nMTAwJScgcj0nMjAlJyBmaWxsLW9wYWNpdHk9Jy4xJyBmaWxsPScjZmE3ZDA4JyAvPgoJPGNpcmNsZSBjeD0nMTAwJScgY3k9JzEwMCUnIHI9JzMwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nI2ZhN2QwOCcgLz4KCTxjaXJjbGUgY3g9JzEwMCUnIGN5PScxMDAlJyByPSc0MCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyNmYTdkMDgnIC8+Cgk8Y2lyY2xlIGN4PScxMDAlJyBjeT0nMTAwJScgcj0nNTAlJyBmaWxsLW9wYWNpdHk9Jy4xJyBmaWxsPScjZmE3ZDA4JyAvPgoJPGNpcmNsZSBjeD0nMTAwJScgY3k9JzEwMCUnIHI9JzYwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nI2ZhN2QwOCcgLz4KCTxjaXJjbGUgY3g9JzEwMCUnIGN5PScxMDAlJyByPSc3MCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyNmYTdkMDgnIC8+Cgk8Y2lyY2xlIGN4PScwJScgY3k9JzEwMCUnIHI9JzEwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nI2ZmN2YyYScgLz4KCTxjaXJjbGUgY3g9JzAlJyBjeT0nMTAwJScgcj0nMjAlJyBmaWxsLW9wYWNpdHk9Jy4xJyBmaWxsPScjZmY3ZjJhJyAvPgoJPGNpcmNsZSBjeD0nMCUnIGN5PScxMDAlJyByPSczMCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyNmZjdmMmEnIC8+Cgk8Y2lyY2xlIGN4PScwJScgY3k9JzEwMCUnIHI9JzQwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nI2ZmN2YyYScgLz4KCTxjaXJjbGUgY3g9JzAlJyBjeT0nMTAwJScgcj0nNTAlJyBmaWxsLW9wYWNpdHk9Jy4xJyBmaWxsPScjZmY3ZjJhJyAvPgoJPGNpcmNsZSBjeD0nMCUnIGN5PScxMDAlJyByPSc2MCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyNmZjdmMmEnIC8+Cgk8Y2lyY2xlIGN4PScwJScgY3k9JzEwMCUnIHI9JzcwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nI2ZmN2YyYScgLz4KPC9zdmc+");
}
.icon-team, .icon-blog, .icon-home, .icon-portfolio, .icon-services, .icon-contact, .icon-menu { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1.2em; -webkit-font-smoothing: antialiased;
}
.icon-team:before { content: "\e000";
}
.icon-blog:before { content: "\e001";
}
.icon-home:before { content: "\e002";
}
.icon-portfolio:before { content: "\e003";
}
.icon-services:before { content: "\e004";
}
.icon-contact:before { content: "\e005";
}
.icon-menu:before { content: "\f0c9";
}
a, li { -webkit-tap-highlight-color: transparent;
}
/* Global CSS that are applied for all screen sizes */
.nav ul { margin: 0; padding: 0; list-style: none; font-size: 1.3em; font-weight: normal;
}
.nav li span { display: block;
}
.nav a { display: block; color: rgba(249, 249, 249, 0.8); text-decoration: none; -webkit-transition: color .5s, background .5s, height .5s; -moz-transition: color .5s, background .5s, height .5s; -o-transition: color .5s, background .5s, height .5s; -ms-transition: color .5s, background .5s, height .5s; transition: color .5s, background .5s, height .5s;
}
.nav i { /* Make the font smoother for Chrome */ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}
/* Remove the blue Webkit background when element is tapped */
a, button { -webkit-tap-highlight-color: transparent;
}
/* Hover effect for the whole navigation to make the hovered item stand out */
.no-touch .nav ul:hover a { color: rgba(249, 249, 249, 0.5);
}
.no-touch .nav ul:hover a:hover { color: rgba(249, 249, 249, 0.99);
}
/* Adding some background color to the different menu items */
.nav li:nth-child(6n+1) { background: #d06502;
}
.nav li:nth-child(6n+2) { background: #e9931a;
}
.nav li:nth-child(6n+3) { background: #1691be;
}
.nav li:nth-child(6n+4) { background: #166ba2;
}
.nav li:nth-child(6n+5) { background: #1b3647;
}
.nav li:nth-child(6n+6) { background: #152836;
}
/* For screen bigger than 800px */
@media (min-width: 50em) { /* Transforms the list into a horizontal navigation */ .nav li { float: left; width: 16.66666666666667%; text-align: center; -webkit-transition: border .5s; -moz-transition: border .5s; -o-transition: border .5s; -ms-transition: border .5s; transition: border .5s; } .nav a { display: block; width: auto; } /* hover, focused and active effects that add a little colored border to the different items */ .no-touch .nav li:nth-child(6n+1) a:hover, .no-touch .nav li:nth-child(6n+1) a:active, .no-touch .nav li:nth-child(6n+1) a:focus { border-bottom: 4px solid #ae4e01; } .no-touch .nav li:nth-child(6n+2) a:hover, .no-touch .nav li:nth-child(6n+2) a:active, .no-touch .nav li:nth-child(6n+2) a:focus { border-bottom: 4px solid #bf7514; } .no-touch .nav li:nth-child(6n+3) a:hover, .no-touch .nav li:nth-child(6n+3) a:active, .no-touch .nav li:nth-child(6n+3) a:focus { border-bottom: 4px solid #0c6e95; } .no-touch .nav li:nth-child(6n+4) a:hover, .no-touch .nav li:nth-child(6n+4) a:active, .no-touch .nav li:nth-child(6n+4) a:focus { border-bottom: 4px solid #0a4b75; } .no-touch .nav li:nth-child(6n+5) a:hover, .no-touch .nav li:nth-child(6n+5) a:active, .no-touch .nav li:nth-child(6n+5) a:focus { border-bottom: 4px solid #10222c; } .no-touch .nav li:nth-child(6n+6) a:hover, .no-touch .nav li:nth-child(6n+6) a:active, .no-touch .nav li:nth-child(6n+6) a:focus { border-bottom: 4px solid #091219; } /* Placing the icon */ .icon { padding-top: 1em; } .icon + span { margin-top: 1em; -webkit-transition: margin .5s; -moz-transition: margin .5s; -o-transition: margin .5s; -ms-transition: margin .5s; transition: margin .5s; } /* Animating the height of the element*/ .nav a { height: 8em; } .no-touch .nav a:hover, .nav a:active, .nav a:focus { height: 10em; } /* Making the text follow the height animation */ .no-touch .nav a:hover .icon + span { margin-top: 3.2em; -webkit-transition: margin .5s; -moz-transition: margin .5s; -o-transition: margin .5s; -ms-transition: margin .5s; transition: margin .5s; } /* Positioning the icons and preparing for the animation*/ .nav i { position: relative; display: inline-block; margin: 0 auto; padding: 0.2em; border-radius: 50%; font-size: 1.8em; box-shadow: 0 0 0 30px transparent; background: rgba(255, 255, 255, 0.1); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: box-shadow .6s ease-in-out; -moz-transition: box-shadow .6s ease-in-out; -o-transition: box-shadow .6s ease-in-out; -ms-transition: box-shadow .6s ease-in-out; transition: box-shadow .6s ease-in-out; } /* Animate the box-shadow to create the effect */ .no-touch .nav a:hover i, .no-touch .nav a:active i, .no-touch .nav a:focus i { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2); -webkit-transition: box-shadow .4s ease-in-out; -moz-transition: box-shadow .4s ease-in-out; -o-transition: box-shadow .4s ease-in-out; -ms-transition: box-shadow .4s ease-in-out; transition: box-shadow .4s ease-in-out; }
}
@media (min-width: 40em) and (max-width: 100%) { /* Size and font adjustments to make it fit into the screen*/ .nav ul { font-size: 1em; }
}
/* The "tablet" and "mobile" version */
@media (max-width: 49.938em) { /* Instead of adding a border, we transition the background color */ .no-touch .nav ul li:nth-child(6n+1) a:hover, .no-touch .nav ul li:nth-child(6n+1) a:active, .no-touch .nav ul li:nth-child(6n+1) a:focus { background: #e37714; } .no-touch .nav li:nth-child(6n+2) a:hover, .no-touch .nav li:nth-child(6n+2) a:active, .no-touch .nav li:nth-child(6n+2) a:focus { background: #f5a029; } .no-touch .nav li:nth-child(6n+3) a:hover, .no-touch .nav li:nth-child(6n+3) a:active, .no-touch .nav li:nth-child(6n+3) a:focus { background: #EA8B1D; } .no-touch .nav li:nth-child(6n+4) a:hover, .no-touch .nav li:nth-child(6n+4) a:active, .no-touch .nav li:nth-child(6n+4) a:focus { background: #1f78b0; } .no-touch .nav li:nth-child(6n+5) a:hover, .no-touch .nav li:nth-child(6n+5) a:active, .no-touch .nav li:nth-child(6n+5) a:focus { background: #27465a; } .no-touch .nav li:nth-child(6n+6) a:hover, .no-touch .nav li:nth-child(6n+6) a:active, .no-touch .nav li:nth-child(6n+6) a:focus { background: #203644; } .nav ul li { -webkit-transition: background 0.5s; -moz-transition: background 0.5s; -o-transition: background 0.5s; -ms-transition: background 0.5s; transition: background 0.5s; }
}
/* CSS specific to the 2x3 columns version */
@media (min-width: 32.5em) and (max-width: 49.938em) { /* Creating the 2 column layout using floating elements once again */ .nav li { display: block; float: left; width: 50%; } /* Adding some padding to make the elements look nicer*/ .nav a { padding: 0.8em; } /* Displaying the icons on the left, and the text on the right side using inlin-block*/ .nav li span, .nav li span.icon { display: inline-block; } .nav li span.icon { width: 50%; } .nav li .icon + span { font-size: 0.6em; } .icon + span { position: relative; top: -0.2em; } /* Adaptating to the icons to animate the size and border of the rounded background in a more discreet way */ .nav li i { display: inline-block; padding: 8% 9%; border: 4px solid transparent; border-radius: 50%; font-size: 1.6em; background: rgba(255, 255, 255, 0.1); -webkit-transition: border .5s; -moz-transition: border .5s; -o-transition: border .5s; -ms-transition: border .5s; transition: border .5s; } /* Transition effect on the border color */ .no-touch .nav li:hover i, .no-touch .nav li:active i, .no-touch .nav li:focus i { border: 4px solid rgba(255, 255, 255, 0.1); }
}
/* Adapting the font size and width for smaller screns*/
@media (min-width: 32.5em) and (max-width: 38.688em) { .nav li span.icon { width: 30%; } .nav li .icon + span { font-size: 0.9em; }
}
/* Styling the toggle menu link and hiding it */
.nav .navtoogle { display: none; width: 59%; padding: 0.5em 0.5em 0.8em; font-family: 'Lato',Calibri,Arial,sans-serif; font-weight: normal; text-align: left; color: #07100f; font-size: 1.6em; background: none; border: none; border-bottom: 4px solid #dddddd; cursor: pointer;
}
.navtoogle i { z-index: -1;
}
.icon-menu { position: relative; top: 1px; line-height: 1em; font-size: 1.6em;
}
@media (max-width: 32.438em) { /* Unhiding the styled menu link */ .nav .navtoogle { margin: 0; display: inline-block; } /* Animating the height of the navigation when the button is clicked */ /* When JavaScript is disabled, we hide the menu */ .no-js .nav ul { max-height: 50%; overflow: hidden; } /* When JavaScript is enabled, we hide the menu */ .js .nav ul { max-height: 50%; overflow: hidden; } /* Displaying the menu when the user has clicked on the button*/ .js .nav .active + ul { max-height: 0.4em; overflow: hidden; -webkit-transition: max-height .4s; -moz-transition: max-height .4s; -o-transition: max-height .4s; -ms-transition: max-height .4s; transition: max-height .4s; } /* Adapting the layout of the menu for smaller screens : icon on the left and text on the right*/ .nav li span { display: inline-block; height: auto; } .nav a { padding: 1em; } .icon + span { margin-left: 1em; font-size: 1.8em; } /* Adding a left border of 8 px with a different color for each menu item*/ .nav li:nth-child(6n+1) { border-left: 8px solid #ae4e01; } .nav li:nth-child(6n+2) { border-left: 8px solid #bf7514; } .nav li:nth-child(6n+3) { border-left: 8px solid #0d6f96; } .nav li:nth-child(6n+4) { border-left: 8px solid #0a4b75; } .nav li:nth-child(6n+5) { border-left: 8px solid #10222c; } .nav li:nth-child(6n+6) { border-left: 8px solid #091219; } /* make the nav bigger on touch screens */ .touch .nav a { padding: 5.0em; }
}
/* side menu simple css */
.menu { list-style: none;
}
.menu li { position: relative; height: 100px;
}
.blue { background: lightblue;
}
.red { background: lightcoral;
}
.green { background: lightgreen;
}
.orange { background: lightsalmon;
}
.block { width: 10%; height: 80%; left: 10px; position: absolute; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s;
}
.text { -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; heigh: 100px; position: relative; padding: 30px; font-family: sans-serif; color: #221F1F; text-shadow: 1px 1px 1px lightgray; font-size: 30px; left: 40px; opacity: 0;
}
.menu li:hover .block { left: -10px;
}
.menu li:hover .text { left: 60px; opacity: 1;
}
.container { content: justify; padding-top: 20%;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
<!-- [[navbar]] -->
<div class="row"> <div class="col-md-8">
<nav class="navbar-fixed-top" style="background:#transprent;">	<div id="menu" class="nav">	<ul>	<li>	<a href="#">	<span class="icon">	<i aria-hidden="true" class="icon-home"></i>	</span>	<span>Главная</span>	</a>	</li>	<li>	<a href="#">	<span class="icon">	<i aria-hidden="true" class="icon-services"></i>	</span>	<span>Услуги</span>	</a>	</li>	<li>	<a href="#">	<span class="icon">	<i aria-hidden="true" class="icon-portfolio"></i>	</span>	<span>О компании</span>	</a>	</li>	<li>	<a href="#">	<span class="icon">	<i aria-hidden="true" class="icon-blog"></i>	</span>	<span>Новости</span>	</a>	</li>	<li>	<a href="#">	<span class="icon">	<i aria-hidden="true" class="icon-team"></i>	</span>	<span>Службы</span>	</a>	</li>	<li>	<a href="#">	<span class="icon">	<i aria-hidden="true" class="icon-contact"></i>	</span>	<span>Контакты</span>	</a>	</li>	</ul> </div>	</nav>
<!-- [[navbar]] --> </br>
<body> <div class="container"> <div class="row-fluid"> <div class="col-4-xs"> <ul class='menu'> <li> <div class='block blue'> </div> <div class='text'> Hi there! </div> </li> <li> <div class='block green'> </div> <div class='text'> Here is a styled </div> </li> <li> <div class='block red'> </div> <div class='text'> <h1>bootstrap</h1> </div> </li> <li> <div class='block orange'> </div> <div class='text'> connected aswell </div> </li> <li></li>
</ul> </div> </div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/js/bootstrap.min.js'></script>
<script src='http://s.cdpn.io/42883/jquery.easing.1.3.js'></script>
<script src='http://s.cdpn.io/42883/jquery.mousewheel_2.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
</body>
</html>

Bootstrap easel and old html - Script Codes CSS Codes

@font-face { font-family: 'icomoon'; src: url("http://deli.dil-ex.ru/ResponsiveRetinaReadyMenu/fonts/icomoon.eot"); src: url("http://deli.dil-ex.ru/ResponsiveRetinaReadyMenu/fonts/icomoon.eot?#iefix") format("embedded-opentype"), url("http://deli.dil-ex.ru/ResponsiveRetinaReadyMenu/fonts/icomoon.woff") format("woff"), url("http://deli.dil-ex.ru/ResponsiveRetinaReadyMenu/fonts/icomoon.ttf") format("truetype"), url("http://deli.dil-ex.ru/ResponsiveRetinaReadyMenu/fonts/icomoon.svg#icomoon") format("svg"); font-weight: normal; font-style: normal;
}
/* Windows Chrome ugly fix http://stackoverflow.com/questions/13674808/chrome-svg-font-rendering-breaks-layout/14345363#14345363 */
@media screen and (-webkit-min-device-pixel-ratio: 0) { @font-face { font-family: 'icomoon'; src: url("http://deli.dil-ex.ru/ResponsiveRetinaReadyMenu/fonts/icomoon.svg#icomoon") format("svg"); }
}
body { background-color: #F67E31; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGNvdW50PScxMDAlJyBoZWlnaHQ9JzEwMCUnPgoJPGNpcmNsZSBjeD0nNTAlJyBjeT0nNTAlJyByPSc1JScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2ZmNjYwMCcgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9JzUwJScgcj0nMTAlJyBmaWxsLW9wYWNpdHk9Jy4yJyBmaWxsPScjZmY2NjAwJyAvPgoJPGNpcmNsZSBjeD0nNTAlJyBjeT0nNTAlJyByPScxNSUnIGZpbGwtb3BhY2l0eT0nLjInIGZpbGw9JyNmZjY2MDAnIC8+Cgk8Y2lyY2xlIGN4PSc1MCUnIGN5PSc1MCUnIHI9JzIwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2ZmNjYwMCcgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9JzUwJScgcj0nMjUlJyBmaWxsLW9wYWNpdHk9Jy4yJyBmaWxsPScjZmY2NjAwJyAvPgoJPGNpcmNsZSBjeD0nNTAlJyBjeT0nNTAlJyByPSczMCUnIGZpbGwtb3BhY2l0eT0nLjInIGZpbGw9JyNmZjY2MDAnIC8+Cgk8Y2lyY2xlIGN4PSc1MCUnIGN5PSc1MCUnIHI9JzM1JScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2ZmNjYwMCcgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9JzUwJScgcj0nNDAlJyBmaWxsLW9wYWNpdHk9Jy4yJyBmaWxsPScjZmY2NjAwJyAvPgoJPGNpcmNsZSBjeD0nNTAlJyBjeT0nNTAlJyByPSc0NSUnIGZpbGwtb3BhY2l0eT0nLjInIGZpbGw9JyNmZjY2MDAnIC8+Cgk8Y2lyY2xlIGN4PSc1MCUnIGN5PSc1MCUnIHI9JzUwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2ZmNjYwMCcgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzIwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2ZmOTkwMCcgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzMwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2ZmOTkwMCcgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzQwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2ZmOTkwMCcgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzUwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2ZmOTkwMCcgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzYwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2ZmOTkwMCcgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzcwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2ZmOTkwMCcgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzgwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2ZmOTkwMCcgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzkwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2ZmOTkwMCcgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzEwMCUnIGZpbGwtb3BhY2l0eT0nLjInIGZpbGw9JyNmZjk5MDAnIC8+Cgk8Y2lyY2xlIGN4PScwJyBjeT0nMCcgcj0nMTAlJyBmaWxsLW9wYWNpdHk9Jy4yJyBmaWxsPScjZGI5YzRiJyAvPgoJPGNpcmNsZSBjeD0nMCcgY3k9JzAnIHI9JzIwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2RiOWM0YicgLz4KCTxjaXJjbGUgY3g9JzAnIGN5PScwJyByPSczMCUnIGZpbGwtb3BhY2l0eT0nLjInIGZpbGw9JyNkYjljNGInIC8+Cgk8Y2lyY2xlIGN4PScwJyBjeT0nMCcgcj0nNDAlJyBmaWxsLW9wYWNpdHk9Jy4yJyBmaWxsPScjZGI5YzRiJyAvPgoJPGNpcmNsZSBjeD0nMCcgY3k9JzAnIHI9JzUwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2RiOWM0YicgLz4KCTxjaXJjbGUgY3g9JzAnIGN5PScwJyByPSc2MCUnIGZpbGwtb3BhY2l0eT0nLjInIGZpbGw9JyNkYjljNGInIC8+Cgk8Y2lyY2xlIGN4PScwJyBjeT0nMCcgcj0nNzAlJyBmaWxsLW9wYWNpdHk9Jy4yJyBmaWxsPScjZGI5YzRiJyAvPgoJPGNpcmNsZSBjeD0nMTAwJScgY3k9JzAnIHI9JzEwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nI2QxN2QwMCcgLz4KCTxjaXJjbGUgY3g9JzEwMCUnIGN5PScwJyByPScyMCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyNkMTdkMDAnIC8+Cgk8Y2lyY2xlIGN4PScxMDAlJyBjeT0nMCcgcj0nMzAlJyBmaWxsLW9wYWNpdHk9Jy4xJyBmaWxsPScjZDE3ZDAwJyAvPgoJPGNpcmNsZSBjeD0nMTAwJScgY3k9JzAnIHI9JzQwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nI2QxN2QwMCcgLz4KCTxjaXJjbGUgY3g9JzEwMCUnIGN5PScwJyByPSc1MCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyNkMTdkMDAnIC8+Cgk8Y2lyY2xlIGN4PScxMDAlJyBjeT0nMCcgcj0nNjAlJyBmaWxsLW9wYWNpdHk9Jy4xJyBmaWxsPScjZDE3ZDAwJyAvPgoJPGNpcmNsZSBjeD0nMTAwJScgY3k9JzAnIHI9JzcwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nI2QxN2QwMCcgLz4KCTxjaXJjbGUgY3g9JzEwMCUnIGN5PScxMDAlJyByPScxMCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyNmYTdkMDgnIC8+Cgk8Y2lyY2xlIGN4PScxMDAlJyBjeT0nMTAwJScgcj0nMjAlJyBmaWxsLW9wYWNpdHk9Jy4xJyBmaWxsPScjZmE3ZDA4JyAvPgoJPGNpcmNsZSBjeD0nMTAwJScgY3k9JzEwMCUnIHI9JzMwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nI2ZhN2QwOCcgLz4KCTxjaXJjbGUgY3g9JzEwMCUnIGN5PScxMDAlJyByPSc0MCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyNmYTdkMDgnIC8+Cgk8Y2lyY2xlIGN4PScxMDAlJyBjeT0nMTAwJScgcj0nNTAlJyBmaWxsLW9wYWNpdHk9Jy4xJyBmaWxsPScjZmE3ZDA4JyAvPgoJPGNpcmNsZSBjeD0nMTAwJScgY3k9JzEwMCUnIHI9JzYwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nI2ZhN2QwOCcgLz4KCTxjaXJjbGUgY3g9JzEwMCUnIGN5PScxMDAlJyByPSc3MCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyNmYTdkMDgnIC8+Cgk8Y2lyY2xlIGN4PScwJScgY3k9JzEwMCUnIHI9JzEwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nI2ZmN2YyYScgLz4KCTxjaXJjbGUgY3g9JzAlJyBjeT0nMTAwJScgcj0nMjAlJyBmaWxsLW9wYWNpdHk9Jy4xJyBmaWxsPScjZmY3ZjJhJyAvPgoJPGNpcmNsZSBjeD0nMCUnIGN5PScxMDAlJyByPSczMCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyNmZjdmMmEnIC8+Cgk8Y2lyY2xlIGN4PScwJScgY3k9JzEwMCUnIHI9JzQwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nI2ZmN2YyYScgLz4KCTxjaXJjbGUgY3g9JzAlJyBjeT0nMTAwJScgcj0nNTAlJyBmaWxsLW9wYWNpdHk9Jy4xJyBmaWxsPScjZmY3ZjJhJyAvPgoJPGNpcmNsZSBjeD0nMCUnIGN5PScxMDAlJyByPSc2MCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyNmZjdmMmEnIC8+Cgk8Y2lyY2xlIGN4PScwJScgY3k9JzEwMCUnIHI9JzcwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nI2ZmN2YyYScgLz4KPC9zdmc+");
}
.icon-team, .icon-blog, .icon-home, .icon-portfolio, .icon-services, .icon-contact, .icon-menu { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1.2em; -webkit-font-smoothing: antialiased;
}
.icon-team:before { content: "\e000";
}
.icon-blog:before { content: "\e001";
}
.icon-home:before { content: "\e002";
}
.icon-portfolio:before { content: "\e003";
}
.icon-services:before { content: "\e004";
}
.icon-contact:before { content: "\e005";
}
.icon-menu:before { content: "\f0c9";
}
a, li { -webkit-tap-highlight-color: transparent;
}
/* Global CSS that are applied for all screen sizes */
.nav ul { margin: 0; padding: 0; list-style: none; font-size: 1.3em; font-weight: normal;
}
.nav li span { display: block;
}
.nav a { display: block; color: rgba(249, 249, 249, 0.8); text-decoration: none; -webkit-transition: color .5s, background .5s, height .5s; -moz-transition: color .5s, background .5s, height .5s; -o-transition: color .5s, background .5s, height .5s; -ms-transition: color .5s, background .5s, height .5s; transition: color .5s, background .5s, height .5s;
}
.nav i { /* Make the font smoother for Chrome */ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}
/* Remove the blue Webkit background when element is tapped */
a, button { -webkit-tap-highlight-color: transparent;
}
/* Hover effect for the whole navigation to make the hovered item stand out */
.no-touch .nav ul:hover a { color: rgba(249, 249, 249, 0.5);
}
.no-touch .nav ul:hover a:hover { color: rgba(249, 249, 249, 0.99);
}
/* Adding some background color to the different menu items */
.nav li:nth-child(6n+1) { background: #d06502;
}
.nav li:nth-child(6n+2) { background: #e9931a;
}
.nav li:nth-child(6n+3) { background: #1691be;
}
.nav li:nth-child(6n+4) { background: #166ba2;
}
.nav li:nth-child(6n+5) { background: #1b3647;
}
.nav li:nth-child(6n+6) { background: #152836;
}
/* For screen bigger than 800px */
@media (min-width: 50em) { /* Transforms the list into a horizontal navigation */ .nav li { float: left; width: 16.66666666666667%; text-align: center; -webkit-transition: border .5s; -moz-transition: border .5s; -o-transition: border .5s; -ms-transition: border .5s; transition: border .5s; } .nav a { display: block; width: auto; } /* hover, focused and active effects that add a little colored border to the different items */ .no-touch .nav li:nth-child(6n+1) a:hover, .no-touch .nav li:nth-child(6n+1) a:active, .no-touch .nav li:nth-child(6n+1) a:focus { border-bottom: 4px solid #ae4e01; } .no-touch .nav li:nth-child(6n+2) a:hover, .no-touch .nav li:nth-child(6n+2) a:active, .no-touch .nav li:nth-child(6n+2) a:focus { border-bottom: 4px solid #bf7514; } .no-touch .nav li:nth-child(6n+3) a:hover, .no-touch .nav li:nth-child(6n+3) a:active, .no-touch .nav li:nth-child(6n+3) a:focus { border-bottom: 4px solid #0c6e95; } .no-touch .nav li:nth-child(6n+4) a:hover, .no-touch .nav li:nth-child(6n+4) a:active, .no-touch .nav li:nth-child(6n+4) a:focus { border-bottom: 4px solid #0a4b75; } .no-touch .nav li:nth-child(6n+5) a:hover, .no-touch .nav li:nth-child(6n+5) a:active, .no-touch .nav li:nth-child(6n+5) a:focus { border-bottom: 4px solid #10222c; } .no-touch .nav li:nth-child(6n+6) a:hover, .no-touch .nav li:nth-child(6n+6) a:active, .no-touch .nav li:nth-child(6n+6) a:focus { border-bottom: 4px solid #091219; } /* Placing the icon */ .icon { padding-top: 1em; } .icon + span { margin-top: 1em; -webkit-transition: margin .5s; -moz-transition: margin .5s; -o-transition: margin .5s; -ms-transition: margin .5s; transition: margin .5s; } /* Animating the height of the element*/ .nav a { height: 8em; } .no-touch .nav a:hover, .nav a:active, .nav a:focus { height: 10em; } /* Making the text follow the height animation */ .no-touch .nav a:hover .icon + span { margin-top: 3.2em; -webkit-transition: margin .5s; -moz-transition: margin .5s; -o-transition: margin .5s; -ms-transition: margin .5s; transition: margin .5s; } /* Positioning the icons and preparing for the animation*/ .nav i { position: relative; display: inline-block; margin: 0 auto; padding: 0.2em; border-radius: 50%; font-size: 1.8em; box-shadow: 0 0 0 30px transparent; background: rgba(255, 255, 255, 0.1); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: box-shadow .6s ease-in-out; -moz-transition: box-shadow .6s ease-in-out; -o-transition: box-shadow .6s ease-in-out; -ms-transition: box-shadow .6s ease-in-out; transition: box-shadow .6s ease-in-out; } /* Animate the box-shadow to create the effect */ .no-touch .nav a:hover i, .no-touch .nav a:active i, .no-touch .nav a:focus i { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2); -webkit-transition: box-shadow .4s ease-in-out; -moz-transition: box-shadow .4s ease-in-out; -o-transition: box-shadow .4s ease-in-out; -ms-transition: box-shadow .4s ease-in-out; transition: box-shadow .4s ease-in-out; }
}
@media (min-width: 40em) and (max-width: 100%) { /* Size and font adjustments to make it fit into the screen*/ .nav ul { font-size: 1em; }
}
/* The "tablet" and "mobile" version */
@media (max-width: 49.938em) { /* Instead of adding a border, we transition the background color */ .no-touch .nav ul li:nth-child(6n+1) a:hover, .no-touch .nav ul li:nth-child(6n+1) a:active, .no-touch .nav ul li:nth-child(6n+1) a:focus { background: #e37714; } .no-touch .nav li:nth-child(6n+2) a:hover, .no-touch .nav li:nth-child(6n+2) a:active, .no-touch .nav li:nth-child(6n+2) a:focus { background: #f5a029; } .no-touch .nav li:nth-child(6n+3) a:hover, .no-touch .nav li:nth-child(6n+3) a:active, .no-touch .nav li:nth-child(6n+3) a:focus { background: #EA8B1D; } .no-touch .nav li:nth-child(6n+4) a:hover, .no-touch .nav li:nth-child(6n+4) a:active, .no-touch .nav li:nth-child(6n+4) a:focus { background: #1f78b0; } .no-touch .nav li:nth-child(6n+5) a:hover, .no-touch .nav li:nth-child(6n+5) a:active, .no-touch .nav li:nth-child(6n+5) a:focus { background: #27465a; } .no-touch .nav li:nth-child(6n+6) a:hover, .no-touch .nav li:nth-child(6n+6) a:active, .no-touch .nav li:nth-child(6n+6) a:focus { background: #203644; } .nav ul li { -webkit-transition: background 0.5s; -moz-transition: background 0.5s; -o-transition: background 0.5s; -ms-transition: background 0.5s; transition: background 0.5s; }
}
/* CSS specific to the 2x3 columns version */
@media (min-width: 32.5em) and (max-width: 49.938em) { /* Creating the 2 column layout using floating elements once again */ .nav li { display: block; float: left; width: 50%; } /* Adding some padding to make the elements look nicer*/ .nav a { padding: 0.8em; } /* Displaying the icons on the left, and the text on the right side using inlin-block*/ .nav li span, .nav li span.icon { display: inline-block; } .nav li span.icon { width: 50%; } .nav li .icon + span { font-size: 0.6em; } .icon + span { position: relative; top: -0.2em; } /* Adaptating to the icons to animate the size and border of the rounded background in a more discreet way */ .nav li i { display: inline-block; padding: 8% 9%; border: 4px solid transparent; border-radius: 50%; font-size: 1.6em; background: rgba(255, 255, 255, 0.1); -webkit-transition: border .5s; -moz-transition: border .5s; -o-transition: border .5s; -ms-transition: border .5s; transition: border .5s; } /* Transition effect on the border color */ .no-touch .nav li:hover i, .no-touch .nav li:active i, .no-touch .nav li:focus i { border: 4px solid rgba(255, 255, 255, 0.1); }
}
/* Adapting the font size and width for smaller screns*/
@media (min-width: 32.5em) and (max-width: 38.688em) { .nav li span.icon { width: 30%; } .nav li .icon + span { font-size: 0.9em; }
}
/* Styling the toggle menu link and hiding it */
.nav .navtoogle { display: none; width: 59%; padding: 0.5em 0.5em 0.8em; font-family: 'Lato',Calibri,Arial,sans-serif; font-weight: normal; text-align: left; color: #07100f; font-size: 1.6em; background: none; border: none; border-bottom: 4px solid #dddddd; cursor: pointer;
}
.navtoogle i { z-index: -1;
}
.icon-menu { position: relative; top: 1px; line-height: 1em; font-size: 1.6em;
}
@media (max-width: 32.438em) { /* Unhiding the styled menu link */ .nav .navtoogle { margin: 0; display: inline-block; } /* Animating the height of the navigation when the button is clicked */ /* When JavaScript is disabled, we hide the menu */ .no-js .nav ul { max-height: 50%; overflow: hidden; } /* When JavaScript is enabled, we hide the menu */ .js .nav ul { max-height: 50%; overflow: hidden; } /* Displaying the menu when the user has clicked on the button*/ .js .nav .active + ul { max-height: 0.4em; overflow: hidden; -webkit-transition: max-height .4s; -moz-transition: max-height .4s; -o-transition: max-height .4s; -ms-transition: max-height .4s; transition: max-height .4s; } /* Adapting the layout of the menu for smaller screens : icon on the left and text on the right*/ .nav li span { display: inline-block; height: auto; } .nav a { padding: 1em; } .icon + span { margin-left: 1em; font-size: 1.8em; } /* Adding a left border of 8 px with a different color for each menu item*/ .nav li:nth-child(6n+1) { border-left: 8px solid #ae4e01; } .nav li:nth-child(6n+2) { border-left: 8px solid #bf7514; } .nav li:nth-child(6n+3) { border-left: 8px solid #0d6f96; } .nav li:nth-child(6n+4) { border-left: 8px solid #0a4b75; } .nav li:nth-child(6n+5) { border-left: 8px solid #10222c; } .nav li:nth-child(6n+6) { border-left: 8px solid #091219; } /* make the nav bigger on touch screens */ .touch .nav a { padding: 5.0em; }
}
/* side menu simple css */
.menu { list-style: none;
}
.menu li { position: relative; height: 100px;
}
.blue { background: lightblue;
}
.red { background: lightcoral;
}
.green { background: lightgreen;
}
.orange { background: lightsalmon;
}
.block { width: 10%; height: 80%; left: 10px; position: absolute; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s;
}
.text { -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; heigh: 100px; position: relative; padding: 30px; font-family: sans-serif; color: #221F1F; text-shadow: 1px 1px 1px lightgray; font-size: 30px; left: 40px; opacity: 0;
}
.menu li:hover .block { left: -10px;
}
.menu li:hover .text { left: 60px; opacity: 1;
}
.container { content: justify; padding-top: 20%;
}

Home Page	Home
Developer	Filipp
Username	blossk
Uploaded	August 21, 2022
Rating	3
Size	13,385 Kb
Views	36,432

Do you need developer help for Bootstrap easel and old html?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Filipp (blossk) Script Codes

Name	Size
Corners,corners,corners...	2,934 Kb
Transitions	4,335 Kb
Tuk-tuk foundation based	9,129 Kb
Test	6,668 Kb
Interactive shedule	11,101 Kb
Touchtouchtouch	2,997 Kb
Glitch link	2,936 Kb
Easy css-responsive slider	8,395 Kb
Foundation547css	69,185 Kb
Milligram css framework	13,017 Kb

Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Button Option Group	Honchoman	1,859 Kb
Responsive Advert	James_zedd	2,354 Kb
Svg sky	Omodev	7,070 Kb
Price Comparison Table	Orrinward	3,459 Kb
HTML5 Breakout	Jaysalvat	4,873 Kb
Cloudy Spiral CSS animation	Hakimel	6,587 Kb
Using Flickr API	MoyArt	6,761 Kb
Simple Weather App	Cmwebby	0 Kb
Flat UI Button	Honchoman	2,289 Kb
IbrahimJabbari-Effect14	Ibrahimjabbari	1,919 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!