CodemySite_Web development

This is the demo of CSS3 animation effects when hovering the inages with Bootstraps and FontAwesome. Github here Step1: link bootstrap and fontawesome stylesheet Step2: Html According to Bootstrap grid layout,such as col-md-x, it's easy to bulid a responsive site. I got four images and description content here within the box. <i> icons are from fontawesome library. Step3: css When hovering the box,there is a black shadow outside of box. More syntax about box-shadow: /* offset-x | offset-y | color */ box-shadow : 60 px - 16 px teal ; /* offset-x | offset-y | blur-radius | color */ box-shadow : 10 px 5 px 5 px black ; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow : 2 px 2 px 2 px 1 px rgba ( 0 , 0 , 0 , 0.2 ) ; /* inset | offset-x | offset-y | color */ box-shadow : inset 5 em 1 em gold ; /* Any number of shadows, separated by commas */ box-shadow : 3 px 3 px red, - 1 em 0 0.4 em olive ; /* Global keywo

The plugin of Javascript is a notification box which has four kinds of mode,such as success,error,warn and normal.  Official Github here Step1: link style and script files Step2: JS I applied four modes in one notification.  The description of options below: naranja().log({    title: 'Notification Title' , // <- required    text: 'Here goes a description for notifiaction' , // <- required    icon: true or false , // <- unrequired, default true,    timeout: 2000 or 'keep' , // <- unrequired, default 3000 miliseconds    buttons: [      {        text: 'OK' ,        click: function (e) {          // click event close notifiaction          // unless you use preventClose method          e.preventClose()          // if you want close notifiaction          // manually, use closeNotification          e.closeNotification()        }      },      {        text: 'Cancel' ,        click

Scrollreveal.js is a javascript library which is fully responsive and animated elements when scrolling the page which is depends on viewport. Scrollreveal library Github     API  Step1: link scrollreveal.js at the bottom of body Step2: HTML There is an image and a scroll gif in the header. And 29 div in the container. Step3: CSS The gif scrolling arrrow css LAYOUT is based on flex. And every gun picture has a background with animation. When hovering, the black filter will be added. The information show up when the image is been hovering. There is an underline animation of title when hovered. For responsive site such as some phone ,  it would be a different style  Step4: JS initialize the library  window.sr = ScrollReveal(); sr. reveal('.reveal'); There are 5 options/animations for reveal method: options.delay  is the time before reveal animations begin. By default,