swati16

css hover zoom scale

A Pen by Wifeo on CodePen.

License.

swati16

.has-slider
  .slider#slider
    .slider-panel{ style: 'background-color: #faaf34; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/40288/65d721_4dfa47a05152487fb3bc45ca2ec8fd1e.png)' }
    .slider-panel{ style: 'background-color: #aca680; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/40288/65d721_761db9a0c113407f924a824ed173ed26.png)' }
    .slider-panel{ style: 'background-color: #d8daa6; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/40288/tumblr_njkn6kp0kE1qgsw73o1_500.png)' }

.colophon
  Artwork ©
  %a{ href: 'https://sachinteng.tumblr.com/' } Sachin Teng

swati16

ecoomerce product zoom with thumbnail and slider

A Pen by Ranjan Prajapati on CodePen.

License.

swati16

.mouseOver_text
  h1
    a.screenshot(href='#', rel='https://dvdz.design/random/imgs/img1.jpg') Reddish
  h1
    a.screenshot(href='#', rel='https://dvdz.design/random/imgs/img2.jpg') Revive
  h1
    a.screenshot(href='#', rel='https://dvdz.design/random/imgs/img3.jpg') True Colors
  h1
    a.screenshot(href='#', rel='https://dvdz.design/random/imgs/img4.jpg') Fade to Stay
  h1

swati16

2-column CSS Flexbox layout

A Pen by Swati Kothari on CodePen.

License.

swati16

<div class="u-wideWrapper u-paddingHm u-paddingTl" ng-app="myApp" ng-controller="MainController">

  <header class="u-marginBl u-textCenter">
    <div>
      <svg class="u-inlineBlock" width="58px" height="58px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54"><g><path fill="#4CAF50" d="M3.1,27.9c0,0,10.2-24.1,11.6-27.2c0.2-0.5,0.6-0.8,1.2-0.6c0.5,0.1,0.8,0.7,1.5,2.2c1.3,2.9,18,37.2,18.7,38.6c0.8,1.6,1,2.6,0.7,3.4c-0.3,0.6-1,1.1-1.8,1.4c-2.3,0.9-20.3,7.8-21.5,8.3c-0.7,0.3-0.8-0.4-1.4-1.7C11.6,51,3.7,32.1,3.1,30.7C2.5,29.3,3.1,27.9,3.1,27.9z"/><path fill="#2196F3" d="M50.9,17.3c-0.3-0.3-0.4-0.4-0.7-0.2c-0.3,0.1-11.5,8.6-16.8,12.5c2.7,5.5,4.7,9.7,5,10.2c0.4,0.8,0.8,1.7,1,2.6c0.1-0.2,0.2-0.3,0.3-0.5c0.9-1.8,11.3-23.4,11.5-23.8C51.3,17.7,51.2,17.7,50.9,17.3z"/></g></svg>
      <h2 class="u-marginTs">vAccordion</h2>
    </div>

    <h5 class="u-marginBl">AngularJS multi-level accordion component.</h5>

swati16

/**
 * The first commented line is your dabblet’s title
 */
 
* {
	margin: 0; padding: 0;
}

body {
	background: #ededed;

swati16

/**
 * Design Shack Respnsive Menu
 */


* {
	padding: 0;
	margin: 0;
	
	-webkit-box-sizing: border-box;

swati16

<div class="con">
  <div class="con__slide  con__slide--1">
    <div class="con__slide-top con__slide--1-top active-slide-left-top">
      <div class='con__slide-top-inner con__slide--1-top-inner'>
        <div class='con__slide-top-inner-text con__slide--1-top-inner-text active-slide1-top-text'>
          <h1 class='con__slide-h con__slide--1-top-h'>some nice slider<br> here wow</h1>
        </div>
      </div>
    </div>
    <!--     slide--1 top end -->

swati16

Cities Slider (React)

Based on this amazing Dribbble shot by Nicholas - https://dribbble.com/shots/3774469-T-R-A-V-E-L-E-R

A Pen by Nikolay Talanov on CodePen.

License.