tag:blogger.com,1999:blog-76815889224313740482023-03-09T17:51:01.175+05:30Pawan MallDynamic, Hard Working, Sincere, Confident, Optimist & Good Learner full Of innovative ideas. - #PawanMallPawan Mallhttp://www.blogger.com/profile/13987592121022726798noreply@blogger.comBlogger21125tag:blogger.com,1999:blog-7681588922431374048.post-45719016239467834582021-08-09T22:36:00.000+05:302021-08-09T22:36:03.726+05:30Animated custom social media share bar<center><img alt="Animated custom social media share bar" class="post-img-responsive" border="0" data-original-height="357" data-original-width="587" src="https://1.bp.blogspot.com/-m6-qiHvCKEo/YRFePiYcqYI/AAAAAAADjUg/OqvZQtqTLrcCPGzEBPet4np4YSWCZbZzQCLcBGAsYHQ/s0/Animated%2Bcustom%2Bsocial%2Bmedia%2Bshare%2Bbar.png"/></center> <div class="myTabs"><ul class="myTabs"> <li class="active" rel="tab1"><i class="fa fa-globe"></i> Demo</li> <li rel="tab2"><i class="fa fa-html5"></i> HTML</li> <li rel="tab3"><i class="fa fa-css3"></i> CSS</li> <li rel="tab4"><i class="fa fa-code"></i> JS</li> <li><a href="https://codepen.io/iPawan/pen/XWRoddL" target="_blank"><i class="fa fa-edit"></i> Edit Online</a></li> <li><a href="#" onclick="return alert('Download not available!!!')" target="_blank"><i class="fa fa-download"></i> Download</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <iframe height="300" style="width: 100%;" scrolling="no" title="" src="https://codepen.io/iPawan/embed/XWRoddL?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/iPawan/pen/XWRoddL"> </a> by Pawan Mall (<a href="https://codepen.io/iPawan">@iPawan</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> </div><!-- #tab1 --> <div id="tab2" class="tab_content"> <div class="window-body code"><pre class="prettyprint" style="border:none;margin-top:-20px;"><code><br /><div class="share-container"><br /> <div class="share-flip-div"><br /> <div class="share-front"><br /> <i class="fas fa-share-alt"></i> Share This Page<br /> </div><br /> <div class="share-back"><br /> <a href="https://www.facebook.com/Mr.PawanMall/"><br /> <i class="fab fa-facebook"></i><br /> </a><br /> <a href="https://twitter.com/pawan_mall"><br /> <i class="fab fa-twitter"></i><br /> </a><br /> <a href="https://in.pinterest.com/pawanmall"><br /> <i class="fab fa-pinterest"></i><br /> </a><br /> </div><br /> </div><br /></div><br /></code></pre></div> </div><!-- #tab2 --> <div id="tab3" class="tab_content"> <div class="window-body code"><pre class="prettyprint" style="border:none;margin-top:-20px;"><code><br />.share-container {<br /> margin: 20% auto;<br /> perspective: 1000;<br /> transform-style: preserve-3d;<br />}<br />.share-container, .share-front, .share-back {<br /> width: 300px;<br /> height: 60px;<br />}<br />.share-container:hover .share-back {<br /> transform: rotateY(0deg);<br />}<br />.share-container:hover .share-front {<br /> transform: rotateY(180deg);<br />}<br /><br />.share-front, .share-back {<br /> border:2px solid #CCC;<br /> border-radius:10px;<br /> line-height:60px;<br /> text-align:center;<br /> background:#EEE;<br /> box-shadow:0 0 2px #aaa;<br /> backface-visibility: hidden;<br /> transition: 0.6s;<br /> transform-style: preserve-3d;<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br />}<br />.share-flip-div {<br /> transition: 0.6s;<br /> transform-style: preserve-3d;<br /> position: relative;<br />}<br />.share-front {<br /> z-index: 2;<br /> color:#666;<br /> text-shadow:0 0 3px #fff;<br /> font-size:1.3em;<br /> font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;<br /> transform: rotateY(0deg);<br />}<br />.share-back {<br /> transform: rotateY(-180deg);<br />}<br /><br />.share-back a{<br /> text-decoration: none;<br /> font-size:30px;<br />}<br /><br />.share-back a{<br /> padding: 50px 10px;<br />}<br /><br />.share-back img {<br /> vertical-align:middle;<br />}<br /></code></pre></div> </div><!-- #tab3 --> <div id="tab4" class="tab_content"> <div class="window-body code"><pre class="prettyprint" style="border:none;margin-top:-20px;"><code><br />No need for any JS script...<br /></code></pre></div> </div><!-- #tab4 --> </div> <!-- .tab_container --> </div> Pawan Mallhttp://www.blogger.com/profile/13987592121022726798noreply@blogger.com0tag:blogger.com,1999:blog-7681588922431374048.post-32361298833157979522020-04-21T14:50:00.002+05:302020-04-21T14:50:36.852+05:30Search Article on Wikipedia via Wikipedia Search API<div dir="ltr" style="text-align: left;" trbidi="on"><center><a href="https://3.bp.blogspot.com/-rfHgzLQUrCM/Xp62Vw3rAJI/AAAAAAADD20/1F-hk7sfJponl94fyTRH6CFosLB_pq9RQCLcBGAsYHQ/s1600/Search%2BArticle%2Bon%2BWikipedia%2Bvia%2BWikipedia%2BSearch%2BAPI.png" imageanchor="1"><img border="0" class="post-img-responsive" data-original-height="755" data-original-width="1297" src="https://3.bp.blogspot.com/-rfHgzLQUrCM/Xp62Vw3rAJI/AAAAAAADD20/1F-hk7sfJponl94fyTRH6CFosLB_pq9RQCLcBGAsYHQ/s1600/Search%2BArticle%2Bon%2BWikipedia%2Bvia%2BWikipedia%2BSearch%2BAPI.png" /></a> </center><p>I used a API from Wikipedia API and created a simple wikipedia article scrapper by using html & jQuery(Ajax). Hope you like "Search Article on Wikipedia via Wikipedia Search API"</p><br /><div class="myTabs"><ul class="myTabs"><li class="active" rel="tab1"><i class="fa fa-globe"></i> Demo</li><li rel="tab2"><i class="fa fa-html5"></i> HTML</li><li rel="tab3"><i class="fa fa-css3"></i> CSS</li><li rel="tab4"><i class="fa fa-code"></i> JS</li><li><a href="https://codepen.io/iPawan/pen/JjYRqrY" target="_blank"><i class="fa fa-edit"></i> Edit Online</a></li><li><a href="https://gist.github.com/MrPawanMall/f7029ee2ca058612e2b67425584aad90" target="_blank"><i class="fa fa-download"></i> Download</a></li></ul><div class="tab_container"><div class="tab_content" id="tab1"><iframe height="265" style="width: 100%;" scrolling="no" title="Search Article on Wikipedia via Wikipedia Search API" src="https://codepen.io/iPawan/embed/JjYRqrY?height=265&theme-id=dark&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy"> See the Pen <a href='https://codepen.io/iPawan/pen/JjYRqrY'>Search Article on Wikipedia via Wikipedia Search API</a> by Pawan Mall (<a href='https://codepen.io/iPawan'>@iPawan</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div><!-- #tab1 --> <br /><div class="tab_content" id="tab2"><div class="window-body code"><pre class="prettyprint" style="border: none; margin-top: -20px;"><code><br /><h1 class="p-5 alert alert-dark text-center"><br /> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Wikipedia-logo-v2.svg/225px-Wikipedia-logo-v2.svg.png" style="width:100px" /><br /> <p>Search Article on Wikipedia via Wikipedia Search API</p><br /></h1> <br /><div class="mt-2 p-5"><br /> <div class="row pb-4"><br /> <div class="col-md-10"><br /> <input type="text" id="sTerm" class="form-control" placeholder="Type here to search an article on wikipedia... By Pawan Mall | www.pawanmall.net"><br /> </div><br /> <div class="col-md-2"><br /> <button type="button" id="searchArticle" class="btn btn-primary btn-block">Search</button><br /> </div><br /> </div><br /> <div id="resultArea" class="form-control border-0" contenteditable="false"></div><br /> </div><br /></code></pre></div></div><!-- #tab2 --> <br /><div class="tab_content" id="tab3"><div class="window-body code"><pre class="prettyprint" style="border: none; margin-top: -20px;"><code><br />You need to include bootstrap 4 css file...<br /><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><br /></code></pre></div></div><!-- #tab3 --> <br /><div class="tab_content" id="tab4"><div class="window-body code"><pre class="prettyprint" style="border: none; margin-top: -20px;"><code><br />You need for jQuery file to perform the search task...<br /><script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script><br /></code></pre></div></div><!-- #tab4 --> </div><!-- .tab_container --> </div></div>Pawan Mallhttp://www.blogger.com/profile/13987592121022726798noreply@blogger.com0tag:blogger.com,1999:blog-7681588922431374048.post-31629410408438241742019-10-31T01:27:00.000+05:302019-10-31T01:29:26.190+05:30Navigation Bar With Animated Dropdown || Pawan Mall<div dir="ltr" style="text-align: left;" trbidi="on"><center><a href="https://2.bp.blogspot.com/-tsKDpZKxn-w/Xbno-s4XW_I/AAAAAAACwP4/MmS291_g20scRLebqlfcxOQ2VCkhn9gRwCLcBGAsYHQ/s1600/Navigation%2BBar%2Bwith%2BAnimated%2BDropdown.png" imageanchor="1"><img border="0" class="post-img-responsive" data-original-height="463" data-original-width="1313" src="https://2.bp.blogspot.com/-tsKDpZKxn-w/Xbno-s4XW_I/AAAAAAACwP4/MmS291_g20scRLebqlfcxOQ2VCkhn9gRwCLcBGAsYHQ/s1600/Navigation%2BBar%2Bwith%2BAnimated%2BDropdown.png" /></a></center><br /><div class="myTabs"><ul class="myTabs"><li class="active" rel="tab1"><i class="fa fa-globe"></i> Demo</li><li rel="tab2"><i class="fa fa-html5"></i> HTML</li><li rel="tab3"><i class="fa fa-css3"></i> CSS</li><li rel="tab4"><i class="fa fa-code"></i> JS</li><li><a href="https://codepen.io/iPawan/pen/rNNGEzw" target="_blank"><i class="fa fa-edit"></i> Edit Online</a></li><li><a href="https://github.com/MrPawanMall/Navigation-Bar-with-Animated-Dropdown" target="_blank"><i class="fa fa-download"></i> Download</a></li></ul><div class="tab_container"><div class="tab_content" id="tab1"><div class="codepen" data-default-tab="result" data-height="265" data-pen-title="Navigation Bar With Animated Dropdown" data-slug-hash="rNNGEzw" data-theme-id="dark" data-user="iPawan" style="border: 2px solid; box-sizing: border-box; display: flex; height: 265px; margin: 1em 0; padding: 1em;">See the Pen <a href="https://codepen.io/iPawan/pen/rNNGEzw/"> Navigation Bar With Animated Dropdown</a> by Pawan Mall (<a href="https://codepen.io/iPawan">@iPawan</a>) on <a href="https://codepen.io/">CodePen</a>. </div><script async="" src="https://static.codepen.io/assets/embed/ei.js"></script></div><!-- #tab1 --> <br /><div class="tab_content" id="tab2"><div class="window-body code"><pre class="prettyprint" style="border: none; margin-top: -20px;"><code><br /><br /> <!-- Important Resources --><br /><br /> <!-- Material Icons --><br /> <link<br /> rel="stylesheet"<br /> href="https://fonts.googleapis.com/icon?family=Material+Icons"<br /> /><br /><br /> <!-- google fonts --><br /> <link<br /> href="https://fonts.googleapis.com/css?family=Great+Vibes&display=swap"<br /> rel="stylesheet"<br /> /><br /><br /> <link<br /> href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900&display=swap"<br /> rel="stylesheet"<br /> /> <br /><br /> <!-- Important Resources --><br /><br /> <nav class="navbar"><br /> <a href="#" class="navbar-logo"<br /> ><i class="material-icons">fastfood</i> foodRoad</a<br /> ><br /> <ul class="navbar-links"><br /> <li class="navbar-dropdown"><br /> <a href="#">Soups</a><br /> <div class="dropdown"><br /> <a href="#">Tomato Soup</a><br /> <a href="#">Veg Manchow Soup</a><br /> <a href="#">Veg Hot Soup</a><br /> </div><br /> </li><br /> <li class="navbar-dropdown"><br /> <a href="#">Sweets</a><br /> <div class="dropdown"><br /> <a href="#">Ladoo</a><br /> <a href="#">Besan Ladoo</a><br /> <a href="#">Ghee Besan Ladoo</a><br /> <a href="#">Nariyal Ladoo</a><br /> <a href="#">Kaju Katli</a><br /> <a href="#">Rasgulla</a><br /> </div><br /> </li><br /> <li class="navbar-dropdown"><br /> <a href="#">Breads</a><br /> <div class="dropdown"><br /> <a href="#">Lachha Paratha</a><br /> <a href="#">Rumali Roti</a><br /> <a href="#">Tandoori Roti</a><br /> <a href="#">Butter Roti</a><br /> <a href="#">Plain Naan</a><br /> <a href="#">Butter Naan</a><br /> </div><br /> </li><br /> <li class="navbar-dropdown"><br /> <a href="#">Rice</a><br /> <div class="dropdown"><br /> <a href="#">Plain Rice</a><br /> <a href="#">Veg Pulao</a><br /> <a href="#">Veg Biryani</a><br /> <a href="#">Paneer Biryani</a><br /> <a href="#">Lemon Rice</a><br /> <a href="#">Veg Kashmiri Pulao</a><br /> </div><br /> </li><br /> <li class="navbar-dropdown"><br /> <a href="#">Chinese</a><br /> <div class="dropdown"><br /> <a href="#">Paneer Chill Dry</a><br /> <a href="#">Paneer Garlic</a><br /> <a href="#">Veg Garlic</a><br /> <a href="#">Veg Chilli</a><br /> </div><br /> </li><br /> </ul><br /> </nav><br /> <header class="header"><br /> <div class="header-inner"><br /> <h1>Food House</h1><br /> <form><br /> <input type="search" placeholder="Enter Your Location" /><br /> <div class="overlay"></div><br /> </form><br /> </div><br /> </header><br /><br /></code></pre></div></div><!-- #tab2 --> <br /><div class="tab_content" id="tab3"><div class="window-body code"><pre class="prettyprint" style="border: none; margin-top: -20px;"><code><br /><br />* {<br /> padding: 0;<br /> margin: 0;<br /> box-sizing: border-box;<br />}<br /><br />body {<br /> font-family: "Lato", sans-serif;<br />}<br /><br />.overlay {<br /> position: fixed;<br /> top: 0;<br /> left: 0;<br /> width: 100vw;<br /> height: 100vh;<br /> background-color: rgba(0, 0, 0, 0.9);<br /> z-index: -1;<br /> opacity: 0;<br /> transition: 1s all;<br />}<br /><br />.navbar {<br /> display: flex;<br /> align-items: center;<br /> width: 100vw;<br /> background-color: #fff;<br /> box-shadow: 0px 10px 10px 3px rgba(0, 0, 0, 0.3);<br /> position: relative;<br /> padding: 0px 70px;<br /> background-color: #fff;<br />}<br />.navbar-logo {<br /> color: #ff3f34;<br /> text-decoration: none;<br /> font-size: 25px;<br /> padding: 0px 20px;<br />}<br /><br />.navbar-links {<br /> list-style-type: none;<br /> display: flex;<br />}<br />.navbar-links li a {<br /> display: block;<br /> text-decoration: none;<br /> color: #444;<br /> padding: 20px 20px;<br /> font-weight: 700;<br /> transition: 0.4s all;<br />}<br /><br />.navbar-links li.navbar-dropdown {<br /> position: relative;<br />}<br /><br />.navbar-links li.navbar-dropdown:hover .dropdown {<br /> visibility: visible;<br /> opacity: 1;<br /> transform: translateY(0px);<br />}<br /><br />.navbar-links li.navbar-dropdown .dropdown {<br /> visibility: hidden;<br /> opacity: 0;<br /> position: absolute;<br /> padding: 20px 0;<br /> top: 100%;<br /> transform: translateY(50px);<br /> left: 0;<br /> width: 250px;<br /> background-color: #fff;<br /> box-shadow: 0px 10px 10px 3px rgba(0, 0, 0, 0.3);<br /> border-bottom-left-radius: 3px;<br /> border-bottom-right-radius: 3px;<br /> z-index: 111;<br /> transition: 0.4s all;<br />}<br />.navbar-links li.navbar-dropdown .dropdown a {<br /> padding-top: 10px;<br /> padding-bottom: 10px;<br /> font-weight: 400;<br />}<br />.navbar-dropdown .dropdown a:hover {<br /> padding-left: 30px;<br />}<br />.navbar-links li a:hover {<br /> color: #ff3f34;<br />}<br /><br />.header {<br /> display: flex;<br /> justify-content: center;<br /> align-items: center;<br /> width: 100vw;<br /> height: 90vh;<br /> /* background-color: #f00; */<br /> background-image: url("http://lorempixel.com/1366/698/food/");<br /> background-size: cover;<br />}<br /><br />.header-inner {<br /> text-align: center;<br /> color: #ff3f34;<br /> text-shadow: 0px 10px 10px rgba(0, 0, 0, .8);<br />}<br /><br />.header-inner h1 {<br /> font-family: "Great Vibes", cursive;<br /> font-size: 130px;<br />}<br /><br />.header-inner form input[type="search"] {<br /> position: relative;<br /> width: 500px;<br /> border: none;<br /> padding: 15px;<br /> border-radius: 27px;<br /> box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.3);<br /> z-index: 11;<br />}<br />.header-inner form input[type="search"]:focus {<br /> outline: none;<br />}<br /><br />.header-inner form input[type="search"]:focus + div {<br /> z-index: 1;<br /> opacity: 1;<br />}<br /><br />::placeholder {<br /> color: #666;<br /> font-weight: 400;<br />}<br /><br /><br /></code></pre></div></div><!-- #tab3 --> <br /><div class="tab_content" id="tab4"><div class="window-body code"><pre class="prettyprint" style="border: none; margin-top: -20px;"><code><br /><br />// No JavaScript Required <br />// Created By Pawan Mall / www.pawanmall.net<br /><br /></code></pre></div></div><!-- #tab4 --> </div><!-- .tab_container --> </div></div>Pawan Mallhttp://www.blogger.com/profile/13987592121022726798noreply@blogger.com0tag:blogger.com,1999:blog-7681588922431374048.post-72979500866967690712019-10-04T11:53:00.000+05:302019-10-05T04:10:25.061+05:30Animated Border Effect by Using HTML, CSS and JavaScript<div dir="ltr" style="text-align: left;" trbidi="on"><center><a href="https://1.bp.blogspot.com/-oPqA4Vc4tag/XZbjGCPNubI/AAAAAAACs0k/-tcK2X3YJCUiQx5qKEoOBiEgei2Kkk8-ACLcBGAsYHQ/s1600/Animated%2BBorder%2Bin%2BCSS.png" imageanchor="1"><img border="0" class="post-img-responsive" data-original-height="463" data-original-width="1313" src="https://1.bp.blogspot.com/-oPqA4Vc4tag/XZbjGCPNubI/AAAAAAACs0k/-tcK2X3YJCUiQx5qKEoOBiEgei2Kkk8-ACLcBGAsYHQ/s1600/Animated%2BBorder%2Bin%2BCSS.png" /></a></center><br /><div class="myTabs"><ul class="myTabs"><li class="active" rel="tab1"><i class="fa fa-globe"></i> Demo</li><li rel="tab2"><i class="fa fa-html5"></i> HTML</li><li rel="tab3"><i class="fa fa-css3"></i> CSS</li><li rel="tab4"><i class="fa fa-code"></i> JS</li><li><a href="https://codepen.io/iPawan/pen/KKKPByL" target="_blank"><i class="fa fa-edit"></i> Edit Online</a></li><li><a href="https://gist.github.com/MrPawanMall/6a6ba1d3a2d1b01c5ce0d9264506fa2e" target="_blank"><i class="fa fa-download"></i> Download</a></li></ul><div class="tab_container"><div class="tab_content" id="tab1"><div class="codepen" data-default-tab="result" data-height="265" data-pen-title="Day / Night Mode Switch Toggle Using Html CSS and Javascript - How To Create a Toggle Switch" data-slug-hash="KKKPByL" data-theme-id="dark" data-user="iPawan" style="border: 2px solid; box-sizing: border-box; display: flex; height: 265px; margin: 1em 0; padding: 1em;">See the Pen <a href="https://codepen.io/iPawan/pen/KKKPByL/"> Day / Night Mode Switch Toggle Using Html CSS and Javascript - How To Create a Toggle Switch</a> by Pawan Mall (<a href="https://codepen.io/iPawan">@iPawan</a>) on <a href="https://codepen.io/">CodePen</a>. </div><script async="" src="https://static.codepen.io/assets/embed/ei.js"></script></div><!-- #tab1 --> <br /><div class="tab_content" id="tab2"><div class="window-body code"><pre class="prettyprint" style="border: none; margin-top: -20px;"><code><br /><br /> <div class="banner"><br /> <div class="inner"><br /> <h1>Pawan Mall</h1><br /> </div><br /></div><br /><br /></code></pre></div></div><!-- #tab2 --> <br /><div class="tab_content" id="tab3"><div class="window-body code"><pre class="prettyprint" style="border: none; margin-top: -20px;"><code><br /><br />:root {<br /> --img: linear-gradient(120deg, rgba(43, 62, 1, 0.82) 0%, rgba(12, 93, 23, 0.69) 100%), url(https://lh3.ggpht.com/p/AF1QipPMMGScLxelev5oVEp34fh8AJerF40vWMaMFuk=s512);<br /> --br: linear-gradient(to top, #96fbc4 0%, #f9f586 100%);<br /> --bb: linear-gradient(to top, #37ecba 0%, #72afd3 100%);<br /> --bl: linear-gradient(to top, #c471f5 0%, #fa71cd 100%);<br /> --bt: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);<br /> --p: 20px;<br /> --bw: 2px;<br /> --t: 1s;<br /> --td: 200ms;<br /> --te: ease-out;<br />}<br /><br />body {<br /> height: 100vh;<br /> display: flex;<br /> background-color: darkslategray;<br />}<br /><br />.banner {<br /> --w: 720px;<br /> --h: 200px;<br /> max-width: var(--w);<br /> width: 100%;<br /> margin: auto;<br /> height: var(--h);<br /> background-image: var(--img);<br /> background-size: var(--w);<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> transition: background-size var(--t);<br /> position: relative;<br /> box-shadow: 0px 30px 30px -20px rgba(0, 0, 0, 0.45);<br />}<br />.banner .inner {<br /> display: flex;<br /> justify-content: center;<br /> align-items: center;<br /> height: 100%;<br />}<br />.banner .inner > h1 {<br /> position: relative;<br /> font-family: serif;<br /> color: white;<br /> letter-spacing: .4em;<br /> text-transform: uppercase;<br /> font-size: 1em;<br /> transition: var(--td);<br />}<br />@media (min-width: 480px) {<br /> .banner .inner > h1 {<br /> font-size: 2em;<br /> }<br />}<br />@media (min-width: 768px) {<br /> .banner .inner > h1 {<br /> font-size: 3em;<br /> }<br />}<br />.banner .inner::before,<br />.banner .inner::after, .banner::after, .banner::before {<br /> content: '';<br /> position: absolute;<br />}<br />.banner::before {<br /> top: var(--p);<br /> right: var(--p);<br /> height: 0;<br /> width: var(--bw);<br /> background-image: var(--br);<br /> transition: height var(--td) var(--te) 0.75s;<br />}<br />.banner::after {<br /> bottom: var(--p);<br /> right: var(--p);<br /> width: 0;<br /> height: var(--bw);<br /> background-image: var(--bb);<br /> transition: width var(--td) var(--te) 0.5s;<br />}<br />.banner .inner::before {<br /> bottom: var(--p);<br /> left: var(--p);<br /> height: 0;<br /> width: var(--bw);<br /> background-image: var(--bl);<br /> transition: height var(--td) var(--te) 0.25s;<br />}<br />.banner .inner::after {<br /> top: var(--p);<br /> left: var(--p);<br /> height: var(--bw);<br /> width: 0;<br /> background-image: var(--bt);<br /> transition: width var(--td) var(--te) 0s;<br />}<br />.banner:hover::before {<br /> height: calc(var(--h) - var(--p) * 2);<br /> transition: height var(--td) var(--te) 0s;<br />}<br />.banner:hover::after {<br /> width: calc(100% - var(--p) * 2);<br /> transition: width var(--td) var(--te) 0.25s;<br />}<br />.banner:hover .inner::before {<br /> height: calc(var(--h) - var(--p) * 2);<br /> transition: height var(--td) var(--te) 0.5s;<br />}<br />.banner:hover .inner::after {<br /> width: calc(100% - var(--p) * 2);<br /> transition: width var(--td) var(--te) 0.75s;<br />}<br />@media (min-width: 768px) {<br /> .banner:hover {<br /> background-size: 760px;<br /> }<br />}<br /><br /><br /></code></pre></div></div><!-- #tab3 --> <br /><div class="tab_content" id="tab4"><div class="window-body code"><pre class="prettyprint" style="border: none; margin-top: -20px;"><code><br /><br />// NO JavaScript Required.... www.pawanmall.net<br /><br /></code></pre></div></div><!-- #tab4 --> </div><!-- .tab_container --> </div></div>Pawan Mallhttp://www.blogger.com/profile/13987592121022726798noreply@blogger.com2tag:blogger.com,1999:blog-7681588922431374048.post-50909889416605691342019-08-23T05:29:00.000+05:302019-08-23T05:29:38.444+05:30Day / Night Mode Switch Toggle Using Html CSS and Javascript<div dir="ltr" style="text-align: left;" trbidi="on"><center><a href="https://2.bp.blogspot.com/-9wDGNczRTW8/XV8pcgSYM1I/AAAAAAACpq0/XX5KwBsnmwIaNRvIrLO6Z45x1D19qj9MACLcBGAs/s1600/Day%2B%2526%2BNight%2BMode%2BSwitch%2BToggle%2BUsing%2BHtml%2BCSS%2Band%2BJavascript.jpg" imageanchor="1"><img border="0" class="post-img-responsive" data-original-height="463" data-original-width="1313" src="https://2.bp.blogspot.com/-9wDGNczRTW8/XV8pcgSYM1I/AAAAAAACpq0/XX5KwBsnmwIaNRvIrLO6Z45x1D19qj9MACLcBGAs/s1600/Day%2B%2526%2BNight%2BMode%2BSwitch%2BToggle%2BUsing%2BHtml%2BCSS%2Band%2BJavascript.jpg" /></a></center><br /><div class="myTabs"><ul class="myTabs"><li class="active" rel="tab1"><i class="fa fa-globe"></i> Demo</li><li rel="tab2"><i class="fa fa-html5"></i> HTML</li><li rel="tab3"><i class="fa fa-css3"></i> CSS</li><li rel="tab4"><i class="fa fa-code"></i> JS</li><li><a href="https://codepen.io/iPawan/pen/VwZPpxb" target="_blank"><i class="fa fa-edit"></i> Edit Online</a></li><li><a href="https://github.com/MrPawanMall/day-night-mode-switch-toggle" target="_blank"><i class="fa fa-download"></i> Download</a></li></ul><div class="tab_container"><div class="tab_content" id="tab1"><div class="codepen" data-default-tab="result" data-height="265" data-pen-title="Day / Night Mode Switch Toggle Using Html CSS and Javascript - How To Create a Toggle Switch" data-slug-hash="VwZPpxb" data-theme-id="dark" data-user="iPawan" style="border: 2px solid; box-sizing: border-box; display: flex; height: 265px; margin: 1em 0; padding: 1em;">See the Pen <a href="https://codepen.io/iPawan/pen/VwZPpxb/"> Day / Night Mode Switch Toggle Using Html CSS and Javascript - How To Create a Toggle Switch</a> by Pawan Mall (<a href="https://codepen.io/iPawan">@iPawan</a>) on <a href="https://codepen.io/">CodePen</a>. </div><script async="" src="https://static.codepen.io/assets/embed/ei.js"></script></div><!-- #tab1 --> <br /><div class="tab_content" id="tab2"><div class="window-body code"><pre class="prettyprint" style="border: none; margin-top: -20px;"><code><br /><br /> <section> <br /><br /> <h1> Day / Night Mode Switch Toggle Using Html CSS and Javascript </h1> <br /><br /> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui accusamus quibusdam a, nesciunt inventore, suscipit praesentium rem ut, dolores impedit dolorum ipsum. Quo odio delectus, cumque pariatur aliquid quis aliquam officia, quos optio eaque amet tenetur possimus minima ratione vel!</p> <br /><br /> <p>Ullam obcaecati eius illum ducimus illo temporibus excepturi numquam, necessitatibus fuga quaerat doloribus consequuntur dolorem suscipit est aliquam! Deserunt amet cum non animi expedita iusto minus iste quaerat exercitationem dignissimos! Similique, blanditiis adipisci quisquam assumenda nam suscipit veniam debitis provident? Ullam obcaecati eius illum ducimus illo temporibus excepturi numquam, necessitatibus fuga quaerat doloribus consequuntur dolorem suscipit est aliquam! Deserunt amet cum non animi expedita iusto minus iste quaerat exercitationem dignissimos! Similique, blanditiis adipisci quisquam assumenda nam suscipit veniam debitis provident?</p> <br /><br /> <p>Porro ea voluptatibus commodi hic voluptas quae nesciunt ullam! Officia in, facilis tenetur incidunt omnis obcaecati. Sequi, fugiat? Est, architecto nesciunt obcaecati fugiat impedit odit non nobis. Perferendis sed, veritatis labore voluptatibus, possimus, assumenda obcaecati eaque distinctio a libero maxime.</p> <br /><br /> <p>Ipsum recusandae tempore adipisci cum, illum placeat eligendi eveniet accusamus in delectus nam, consequatur rem, sapiente dolor incidunt velit voluptas quibusdam laudantium nostrum nemo nobis libero deleniti. Quos ipsa tempore saepe. Praesentium aliquid perferendis maxime deserunt aspernatur fugiat nihil alias. Ullam obcaecati eius illum ducimus illo temporibus excepturi numquam, necessitatibus fuga quaerat doloribus consequuntur dolorem suscipit est aliquam! Deserunt amet cum non animi expedita iusto minus iste quaerat exercitationem dignissimos! Similique, blanditiis adipisci quisquam assumenda nam suscipit veniam debitis provident?</p> <br /><br /> </section> <br /><br /> <ul> <br /> <li> <br /> <span>Dark</span> <br /> <span>Light</span> <br /> </li> <br /> </ul><br /><br /></code></pre></div></div><!-- #tab2 --> <br /><div class="tab_content" id="tab3"><div class="window-body code"><pre class="prettyprint" style="border: none; margin-top: -20px;"><code><br /><br />@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Raleway&display=swap');<br />body{<br /> font-family: 'Raleway', sans-serif;<br /> margin:0;<br /> padding:0;<br />}<br /><br />section<br />{<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> width: 100%;<br /> height: auto;<br /> box-sizing: border-box;<br /> padding: 100px;<br /> transition: all 0.8s;<br />}<br />section.dark<br />{<br /> background-color: #444857;<br /> color: #fff;<br /> background: -webkit-linear-gradient(to bottom, #434343, #444857);<br /> background: linear-gradient(to bottom, #434343, #444857);<br /> transition: all 0.8s;<br />}<br />section p{<br /> font-family: 'Open Sans Condensed', sans-serif;<br /> line-height: 32px;<br /> text-align: justify;<br />}<br />ul{<br /> position: absolute;<br /> top: 20px;<br /> right: 20px;<br /> margin: 0;<br /> padding: 0;<br /> width: 100px;<br /> height: 30px;<br /> z-index: 1;<br /> border: 1px solid #000;<br /> cursor: pointer;<br /> overflow: hidden;<br /> transition: all 0.8s;<br />}<br />ul.active{<br /> border-color: #fff;<br /> transition: all 0.8s;<br />}<br />ul li{<br /> list-style: none;<br /> width: 100%;<br /> height: 60px;<br /> text-align: center;<br /> text-transform: uppercase;<br /> transition: 0.5s;<br />}<br />ul.active li{<br /> transform: translateY(-30px);<br />}<br />ul li span<br />{<br /> color: #fff;<br /> display: block;<br /> width: 100%;<br /> height: 30px;<br /> line-height: 30px;<br />}<br />ul li span:nth-child(1)<br />{<br /> background-color: #2d303a;<br /> color: #fff;<br />}<br /><br /></code></pre></div></div><!-- #tab3 --> <br /><div class="tab_content" id="tab4"><div class="window-body code"><pre class="prettyprint" style="border: none; margin-top: -20px;"><code><br /><br />$(document).ready(function(){<br /> $('ul').click(function(){<br /> $('ul').toggleClass('active');<br /> $('section').toggleClass('dark');<br /> });<br />})<br /><br /></code></pre></div></div><!-- #tab4 --> </div><!-- .tab_container --> </div></div>Pawan Mallhttp://www.blogger.com/profile/13987592121022726798noreply@blogger.com1tag:blogger.com,1999:blog-7681588922431374048.post-19565698343748074602017-06-28T14:50:00.000+05:302017-06-28T14:50:20.709+05:30What is HTML Attributes | HTML Attributes क्या होता हैं (Hindi & Urdu) | Lesson - 4<center><a class="post-img-responsive" href="https://1.bp.blogspot.com/-2B2S0hJVQBo/WVNw1vQPU6I/AAAAAAABbUo/dWbMSIygxigV_ILyOBVTDjueicpeCrvxQCLcBGAs/s1600/HTML%2BTutorial%2B-%2BWhat%2Bis%2BHTML%2BAttributes%2B%2BHTML%2BAttributes%2B%25E0%25A4%2595%25E0%25A5%258D%25E0%25A4%25AF%25E0%25A4%25BE%2B%25E0%25A4%25B9%25E0%25A5%258B%25E0%25A4%25A4%25E0%25A4%25BE%2B%25E0%25A4%25B9%25E0%25A5%2588%25E0%25A4%2582%2B%2528Hindi%2B%2526%2BUrdu%2529%2B%2BLesson%2B-%2B4.png" imageanchor="1"><img border="0" height="360" src="https://1.bp.blogspot.com/-2B2S0hJVQBo/WVNw1vQPU6I/AAAAAAABbUo/dWbMSIygxigV_ILyOBVTDjueicpeCrvxQCLcBGAs/s1600/HTML%2BTutorial%2B-%2BWhat%2Bis%2BHTML%2BAttributes%2B%2BHTML%2BAttributes%2B%25E0%25A4%2595%25E0%25A5%258D%25E0%25A4%25AF%25E0%25A4%25BE%2B%25E0%25A4%25B9%25E0%25A5%258B%25E0%25A4%25A4%25E0%25A4%25BE%2B%25E0%25A4%25B9%25E0%25A5%2588%25E0%25A4%2582%2B%2528Hindi%2B%2526%2BUrdu%2529%2B%2BLesson%2B-%2B4.png" width="640" class="post-img-responsive" alt="What is HTML Elements?" /></a></center><blockquote><p>Hello Friends, Today I'm going to teach you about what is mean by HTML Attributes?</p> <p>HTML Attributes : HTML Attributes provide additional information about HTML elements. See code demo below:</p> <p><b><tagname attribute_name = "attribute_value" ></b>content<b></tagname></b></p> <p>Please hit like & share this video tutorial with your friends and don't forget to subscribe.</p></blockquote><div class="myTabs"><ul class="myTabs"><li class="active" rel="tab1"><i class="fa fa-play"></i> Video</li><li><a href="https://drive.google.com/drive/folders/0B3vCrMJnZM32QlUwY2Z6V211LXc?usp=sharing" target="_blank"><i class="fa fa-download"></i> Download</a></li></ul><div class="tab_container"> <div class="tab_content" id="tab1"><iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/tbamxRomy2o" style="width: 100%;height:600px;"></iframe></div> <blockquote><p>नमस्कार दोस्तों, आज मैं आपको HTML Attributes के बारे में बताने जा रहा हूँ. HTML Attributes हमें किसी टैग की और अधिक जानकारी मुहैया कराते हैं। जैसा की मैंने आपको वीडियो में बताया हैं।</p> <p>अगर आपको ये वीडियो अच्छी एवं काम की लगी हो तो अपने दोस्तों के साथ शेयर और इस वीडियो को लाईक जरूर करे और आप सब्स्क्राइब करे ताकि आपको नयी वीडियो की जानकारी मिल सके। </p> <p>अगर आपको इस वीडियो में कोई भी परेशानी हो रही हैं तो आप अपने प्रश्न कमेंट बॉक्स में पोस्ट करे और मैं जल्द से जल्द उसका हल या उसका निवारण दूंगा।</p> </blockquote> </div><!-- .tab_container --> </div>Pawan Mallhttp://www.blogger.com/profile/13987592121022726798noreply@blogger.com10New Delhi, Delhi, India28.6139391 77.20902120000005228.3907261 76.886297700000057 28.8371521 77.531744700000047tag:blogger.com,1999:blog-7681588922431374048.post-3428276967852210132017-06-12T03:23:00.001+05:302017-06-28T14:34:56.869+05:30What is HTML Elements | HTML Elements क्या होता हैं? (हिंदी | उर्दू) Lesson - 3<center> <a class="post-img-responsive" href="https://2.bp.blogspot.com/-Tn6pPlUtcoM/WT29DjCuvGI/AAAAAAABa4Y/fsdBlZwkuV8LbtGedpI2gHCPy5q3M0eIQCLcB/s1600/Slide2.PNG" imageanchor="1"><img border="0" height="360" src="https://2.bp.blogspot.com/-Tn6pPlUtcoM/WT29DjCuvGI/AAAAAAABa4Y/fsdBlZwkuV8LbtGedpI2gHCPy5q3M0eIQCLcB/s1600/Slide2.PNG" width="640" class="post-img-responsive" alt="What is HTML Elements?" /></a></center><blockquote><p>Hello Friends, Today I'm going to tell you about what is mean by HTML Elements?</p> <p>HTML Elements : HTML documents are made up by HTML elements. HTML elements are written with a start tag, with an end tag, with the content in between:</p> <p><b><tagname></b>content<b></tagname></b></p> <p>Please hit like & share this video tutorial with your friends and don't forget to subscribe.</p> </blockquote><div class="myTabs"><ul class="myTabs"><li class="active" rel="tab1"><i class="fa fa-play"></i> Video</li><li><a href="https://drive.google.com/drive/folders/0B3vCrMJnZM32S2dPN1BvdVNrNzQ?usp=sharing" target="_blank"><i class="fa fa-download"></i> Download</a></li></ul><div class="tab_container"> <div class="tab_content" id="tab1"><iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/F3I8C78MOSM" style="width: 100%;height:600px;"></iframe></div> <blockquote><p>नमस्कार दोस्तों, आज मैं आपको HTML Elements के बारे में बताने जा रहा हूँ. HTML Elements, HTML टैग्स के ग्रुप को मतलब की <b><शुरवाती टैग></b> कंटेंट <b></आखिरी टैग></b> को कहते हैं। जैसा की मैंने आपको वीडियो में बताया हैं। </p> <p>अगर आपको ये वीडियो अच्छी एवं काम की लगी हो तो अपने दोस्तों के साथ शेयर और इस वीडियो को लाईक जरूर करे और आप सब्स्क्राइब करे ताकि आपको नयी वीडियो की जानकारी मिल सके। </p> <p>अगर आपको इस वीडियो में कोई भी परेशानी हो रही हैं तो आप अपने प्रश्न कमेंट बॉक्स में पोस्ट करे और मैं जल्द से जल्द उसका हल या उसका निवारण दूंगा।</p> </blockquote> </div><!-- .tab_container --> </div>Pawan Mallhttp://www.blogger.com/profile/13987592121022726798noreply@blogger.com0tag:blogger.com,1999:blog-7681588922431374048.post-45758741927673823442017-06-03T16:40:00.000+05:302017-06-03T16:40:01.087+05:30HTML Tutorial - Create HTML File and See Preview (Hindi & Urdu) | Lesson - 2 <center> <a class="post-img-responsive" href="https://1.bp.blogspot.com/-egxlyxwzbZc/WTKVZPyVzFI/AAAAAAABatA/Chb0VcvBVe8Tvv1y3U2-8qaIF3CBCm4ogCLcB/s1600/Slide2.PNG" imageanchor="1"><img border="0" height="360" src="https://1.bp.blogspot.com/-egxlyxwzbZc/WTKVZPyVzFI/AAAAAAABatA/Chb0VcvBVe8Tvv1y3U2-8qaIF3CBCm4ogCLcB/s1600/Slide2.PNG" width="640" class="post-img-responsive" /></a></center><blockquote><p>In this video you'll learn that how we can create a HTML file and see preview in any browser.</p> <p>For any issue or problem please leave your question in comments section. I'll try to resolve it ASAP.</p> <p>Also please don't forget to like and share this video tutorial with your friends.</p> </blockquote><div class="myTabs"><ul class="myTabs"><li class="active" rel="tab1"><i class="fa fa-play"></i> Video</li><li><a href="https://drive.google.com/drive/folders/0B3vCrMJnZM32VjB3RnFGcURTaU0?usp=sharing" target="_blank"><i class="fa fa-download"></i> Download</a></li></ul><div class="tab_container"> <div class="tab_content" id="tab1"><iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/GP1dce6uqlA" style="width: 100%;height:600px;"></iframe></div> </div><!-- .tab_container --> </div>Pawan Mallhttp://www.blogger.com/profile/13987592121022726798noreply@blogger.com24tag:blogger.com,1999:blog-7681588922431374048.post-76041682291736912402017-05-29T19:38:00.002+05:302017-06-03T16:39:06.228+05:30HTML Tutorial - Introduction (Hindi & Urdu) | Lesson - 1 <center><a class="post-img-responsive" href="https://4.bp.blogspot.com/-_-HFlWdaAzE/WSwnB5Tuw1I/AAAAAAABaBg/Onweo35v6YcJgatXcjG4j4DYgoiaRZBJgCLcB/s1600/HTML%2BIntroduction%2B-%2BLesson%2B-%2B1%2B-%2BMain%2B.png" imageanchor="1"><img border="0" height="360" src="https://4.bp.blogspot.com/-_-HFlWdaAzE/WSwnB5Tuw1I/AAAAAAABaBg/Onweo35v6YcJgatXcjG4j4DYgoiaRZBJgCLcB/s1600/HTML%2BIntroduction%2B-%2BLesson%2B-%2B1%2B-%2BMain%2B.png" width="640" class="post-img-responsive" /></a></center><blockquote><p>With HTML you can create your own Web site.</p> <p>HTML is easy to learn - You will enjoy it.</p> <p>This tutorial series teaches you everything about HTML.</p> </blockquote><div class="myTabs"><ul class="myTabs"><li class="active" rel="tab1"><i class="fa fa-play"></i> Video</li><li rel="tab3"><i class="fa fa-file-powerpoint-o"></i> PPT</li><li rel="tab4"><i class="fa fa-file-pdf-o"></i> PDF</li><li><a href="https://drive.google.com/drive/folders/0B3vCrMJnZM32Z050bnhFWklsVlE?usp=sharing" target="_blank"><i class="fa fa-download"></i> Download</a></li></ul><div class="tab_container"> <div class="tab_content" id="tab1"><iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/j7GQyadyEZE" style="width: 100%;height:600px;"></iframe></div> <div class="tab_content" id="tab3"><iframe src="https://docs.google.com/presentation/d/1kglAwsItBEjNlOpl5GP67_tA-X07uCgVjeNQuJOQ2nY/embed?start=false&loop=false&delayms=3000" frameborder="0" style="width: 100%;height:400px;" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe></div> <div class="tab_content" id="tab4"><iframe src="https://drive.google.com/file/d/0B3vCrMJnZM32S0NQS1FXNU01dVk/preview" style="width: 100%;height:400px;"></iframe></div> </div><!-- .tab_container --> </div>Pawan Mallhttp://www.blogger.com/profile/13987592121022726798noreply@blogger.com3New Delhi, Delhi, India28.6139391 77.20902120000005228.3907261 76.886297700000057 28.8371521 77.531744700000047tag:blogger.com,1999:blog-7681588922431374048.post-83420659852920352562017-04-08T03:03:00.001+05:302017-04-08T03:17:29.875+05:30How to create Google Like Menu Bar by using CSS Flex Property?<div dir="ltr" style="text-align: left;" trbidi="on"><blockquote>Hello Friends, Today I'm going to tell you that How we can create Google Like Menu Bar by using CSS Flex Property.<br /><br />If you are not aware of Flex CSS Property then you should learn it from W3School or somewhere else.<br /><br />Friends, The flex property specifies the length of the item, relative to the rest of the flexible items inside the same container. <small style="font-size: 8px; margin-bottom: 5px;">Source: W3School</small><br /><br />So Friends, Now we are going to start this tutorial. I posted some images below of How the menu bar look like by using Flex CSS Property.</blockquote><center><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://2.bp.blogspot.com/-C53mo7OEcLI/WOf-Grp7i5I/AAAAAAABXK4/JwZQuZ2eYiEtYXYp4ISdC1UWPBsDgfnTwCPcB/s1600/How%2Bto%2Bcreate%2BGoogle%2BLike%2BMenu%2BBar%2Bby%2Busing%2BCSS%2BFlex%2BProperty%2B-%2BPawanMall.Net%2B-%2B1.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Desktop Version of Google Style Menu bar" border="0" class="post-img-responsive" src="https://2.bp.blogspot.com/-C53mo7OEcLI/WOf-Grp7i5I/AAAAAAABXK4/JwZQuZ2eYiEtYXYp4ISdC1UWPBsDgfnTwCPcB/s1600/How%2Bto%2Bcreate%2BGoogle%2BLike%2BMenu%2BBar%2Bby%2Busing%2BCSS%2BFlex%2BProperty%2B-%2BPawanMall.Net%2B-%2B1.PNG" title="In this example you can see desktop version of the menu bar." /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">In this example you can see desktop version of the menu bar.</td></tr></tbody></table><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://4.bp.blogspot.com/-Z17faFjq8BM/WOf-HkzLyAI/AAAAAAABXK8/LY749p_vVhk8LOEUwW5K0XHGvq5gnPAoQCPcB/s1600/How%2Bto%2Bcreate%2BGoogle%2BLike%2BMenu%2BBar%2Bby%2Busing%2BCSS%2BFlex%2BProperty%2B-%2BPawanMall.Net%2B-%2B2.PNG" style="margin-left: auto; margin-right: auto;"><img alt="Mobile Version of Google Style Menu bar" border="0" src="https://4.bp.blogspot.com/-Z17faFjq8BM/WOf-HkzLyAI/AAAAAAABXK8/LY749p_vVhk8LOEUwW5K0XHGvq5gnPAoQCPcB/s1600/How%2Bto%2Bcreate%2BGoogle%2BLike%2BMenu%2BBar%2Bby%2Busing%2BCSS%2BFlex%2BProperty%2B-%2BPawanMall.Net%2B-%2B2.PNG" class="post-img-responsive" title="In this example you can see mobile version of the menu bar." /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">In this example you can see mobile version of the menu bar.</td></tr></tbody></table></center> <blockquote>Following is the HTML Code(index.html) for the Menu bar: <hr /><div class="window-body code"><pre class="prettyprint" style="border:none;margin-top:-20px;"><code><!DOCTYPE html><br /><html><br /><head><br /> <meta charset="utf-8"><br /> <meta name="viewport" content="width=device-width, initial-scale=1"><br /> <title>Made with Thimble</title><br /> <link rel="stylesheet" href="style.css"><br /></head><br /><body><br /><br /> <nav class="menu"><br /> <a class="blue">Home</a><br /> <a class="red">About</a><br /> <a class="orange">Service</a><br /> <a class="green">Company</a><br /> <a class="bloodred">Feedback</a><br /> </nav><br /> <br /> <h3>Google Styled Responsive Menubar using Flex...</h3><br /><br /></body><br /></html></code></pre></div></blockquote> <blockquote>Following is the CSS Code(style.css) for the Menu bar: <hr /><div class="window-body code"><pre class="prettyprint" style="border:none;margin-top:-20px;"><code>/*<br />Made with love for all by @pawan_mall<br />Basic css for decorating page for demo<br />*/<br />@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');<br /><br />body{<br /> padding:0px;<br /> background-color: #d2d2d2;<br />}<br />h3{<br /> text-align: center;<br /> color: #4c4746;<br />}<br /><br />/* <br />Menubar style code start from here<br />Defined display property as flex<br />*/<br />.menu {<br /> font-family: 'Open Sans Condensed', sans-serif;<br /> display: flex;<br /> flex-direction: row;<br /> justify-content: center;<br />}<br /><br />/* <br />Defined menu layout for mobile display<br />*/<br />@media(max-width:668px){<br /> .menu {<br /> display:flex;<br /> flex-direction: column;<br /> margin: 10px;<br /> } <br />}<br />/* <br />Defined menu layout for desktop display<br />*/<br />.menu > a{<br /> text-align: center;<br /> font-weight:bold;<br /> font-size:20px;<br /> color: #5a5a5a;<br /> cursor: pointer;<br /> padding: 10px; <br /> background-color: #F1F0F7;<br /> box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);<br /> transition: all .2s ease-in; <br /> border-top-style: solid;<br /> border-top-width: 5px;<br />}<br />.menu > a:hover{<br /> font-size: 25px;<br /> border-top-style: solid;<br /> border-top-width: 10px;<br />}<br /><br />/* <br />Defined and setup order of menu items and the color scheme<br />*/<br />a.blue{<br /> flex: 1;<br /> order: 1;<br /> border-top-color:#4285F4;<br />}<br />a.blue:hover{<br /> color: #FFFFFF;<br /> background-color: #4285F4;<br /> border-top-color:#4285F4;<br />}<br /><br />a.red{<br /> flex: 1;<br /> order: 2;<br /> border-top-color:#EA4335;<br />}<br />a.red:hover{<br /> color: #FFFFFF;<br /> background-color: #EA4335;<br /> border-top-color:#EA4335;<br />}<br /><br />a.orange{<br /> flex: 1;<br /> order: 3;<br /> border-top-color:#FBBC05;<br />}<br />a.orange:hover{<br /> color: #ffffff;<br /> background-color: #FBBC05;<br /> border-top-color:#FBBC05;<br />}<br /><br />a.green{<br /> flex: 1;<br /> order: 4;<br /> border-top-color:#34A853;<br />}<br />a.green:hover{<br /> color: #ffffff;<br /> background-color: #34A853;<br /> border-top-color:#34A853;<br />}<br /><br />a.bloodred{<br /> flex: 1;<br /> order: 5;<br /> border-top-color:#EA4335;<br />}<br />a.bloodred:hover{<br /> color: #ffffff;<br /> background-color: #EA4335;<br /> border-top-color:#EA4335;<br />}</code></pre></div></blockquote> <blockquote>See below demo and the snippets for the google style menu bar. <hr /><iframe allowfullscreen="true" allowtransparency="true" frameborder="no" height="448" scrolling="no" src="//codepen.io/iPawan/embed/vxqemK/?height=448&theme-id=dark&default-tab=css,result&embed-version=2" style="width: 100%;" title="Google Styled Responsive Menubar using Flex">See the Pen <a href='https://codepen.io/iPawan/pen/vxqemK/'>Google Styled Responsive Menubar using Flex</a> by Pawan Mall (<a href='http://codepen.io/iPawan'>@iPawan</a>) on <a href='http://codepen.io'>CodePen</a>. </iframe></blockquote> <blockquote>For further help, Questions or query please leave your valuable comments in comment box. </blockquote></div>Pawan Mallhttp://www.blogger.com/profile/13987592121022726798noreply@blogger.com19Bhagwati Vihar, Block C, Uttam Nagar, Bindapur, Delhi, 110059, India28.611702 77.0627670000000080.90331700000000126 35.754173000000009 56.320087 118.37136100000001tag:blogger.com,1999:blog-7681588922431374048.post-44063311027456561922016-05-17T23:14:00.000+05:302016-05-17T23:14:25.169+05:30Web Designing & Web Development Tutorial Series - Introduction (Hindi & Urdu) Lesson - 1 <center><a class="post-img-responsive" href="https://2.bp.blogspot.com/-tfyjWd1CyQA/VztEzTY2I-I/AAAAAAABJ94/jV2c71KlHRs1600/Introduct" imageanchor="1" on="" orking.jpg=""><img border="0" height="360" src="https://2.bp.blogspot.com/-tfyjWd1CyQA/VztEzTY2I-I/AAAAAAABJ94/jV2c71KlHRAh3R2HKR0E5-p6X0_XoU-HQCLcB/s640/Introduction%2B-%2BWorking.jpg" width="640" /></a></center><blockquote><p>Web design is the process of creating websites. </p> <p>Web development can range from developing the simplest static single page of plain text to the most complex web-based internet applications, electronic businesses, and social network services.</p> <p>While the terms web design and web development are often used interchangeably, web design is technically a subset of the broader category of web development.</p></blockquote><div class="myTabs"><ul class="myTabs"><li class="active" rel="tab1"><i class="fa fa-play"></i> Video</li><li rel="tab2"><i class="fa fa-headphones"></i> Audio</li><li rel="tab3"><i class="fa fa-file-powerpoint-o"></i> PPT</li><li rel="tab4"><i class="fa fa-file-pdf-o"></i> PDF</li><li><a href="https://drive.google.com/open?id=0B3vCrMJnZM32Y1RUYmxmY0ZSRGs" target="_blank"><i class="fa fa-download"></i> Download</a></li></ul><div class="tab_container"> <div class="tab_content" id="tab1"><iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/Ywggjk8NrUA" style="width: 100%;height:400px;"></iframe></div> <div class="tab_content" id="tab2"><iframe src="https://drive.google.com/file/d/0B3vCrMJnZM32RVpmc0xxWEJmZ3c/preview" style="width: 100%;height:400px;" frameborder="0"></iframe></div> <div class="tab_content" id="tab3"><iframe src="https://docs.google.com/presentation/d/1S4F6wMlCTyxen7NbKEA62wcM6ejCowEej6xbxn8UJpE/embed?start=true&loop=true&delayms=3000" frameborder="0" style="width: 100%;height:400px;" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe></div> <div class="tab_content" id="tab4"><iframe src="https://drive.google.com/file/d/0B3vCrMJnZM32c3lzSFNEaWZzekk/preview" style="width: 100%;height:400px;"></iframe></div> </div><!-- .tab_container --> </div>Pawan Mallhttp://www.blogger.com/profile/13987592121022726798noreply@blogger.com140Uttam Nagar, New Delhi, Delhi 110059, India28.6212718 77.06132660000002928.5933948 77.02098610000003 28.6491488 77.101667100000029tag:blogger.com,1999:blog-7681588922431374048.post-3420594837355499882015-08-06T06:22:00.001+05:302015-08-06T06:24:20.148+05:30Tales of Gorakhpur - Path Towards a Sustainable Future (TERI)<iframe allowfullscreen="" frameborder="0" height="350" src="https://www.youtube.com/embed/og41J9tP1Hk" style="width: 100%;"></iframe><br /><br /><a href="https://i.ytimg.com/vi/og41J9tP1Hk/mqdefault.jpg" imageanchor="1" ><img border="0" src="https://i.ytimg.com/vi/og41J9tP1Hk/mqdefault.jpg" /></a>Pawan Mallhttp://www.blogger.com/profile/13987592121022726798noreply@blogger.com3tag:blogger.com,1999:blog-7681588922431374048.post-57919690446512948052015-05-15T04:03:00.002+05:302015-05-15T04:03:31.968+05:30Responsive CSS3 Colorful Nav Menubar Demo<center><a href="http://2.bp.blogspot.com/-51cSDCUxaS0/VVUe-KonaBI/AAAAAAAA19g/FYX1uvgEQQ4/s1600/Responsive%2BCSS3%2BColorful%2BNav%2BMenubar%2BDemo%2B-%2BPawanMall.net.png" imageanchor="1" ><img border="0" src="http://2.bp.blogspot.com/-51cSDCUxaS0/VVUe-KonaBI/AAAAAAAA19g/FYX1uvgEQQ4/s1600/Responsive%2BCSS3%2BColorful%2BNav%2BMenubar%2BDemo%2B-%2BPawanMall.net.png" class="post-img-responsive" /></a> <blockquote>In this tutorial I want to demonstrate simple CSS code to style your nav menubar with the help of CSS at various screen resolutions.</blockquote> </center> <div class="myTabs"><ul class="myTabs"> <li class="active" rel="tab1"><i class="fa fa-globe"></i> Demo</li> <li rel="tab2"><i class="fa fa-html5"></i> HTML</li> <li rel="tab3"><i class="fa fa-css3"></i> CSS</li> <li rel="tab4"><i class="fa fa-code"></i> JS</li> <li><a href="http://cssdeck.com/labs/Responsive-css3-colorful-nav-menubar-demo" target="_blank"><i class="fa fa-edit"></i> Edit Online</a></li> <li><a href="https://doc-08-4o-docs.googleusercontent.com/docs/securesc/4k7obavoe3etjj1efvfivol554pcl70h/23oh2ad2g36pbervoj2oqqbc4eliut19/1431640800000/05543444282262902031/05543444282262902031/0B3vCrMJnZM32ZUx4RGRQYkY3U0E?e=download" target="_blank"><i class="fa fa-download"></i> Download</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <iframe src="http://cssdeck.com/labs/full/responsive-css3-colorful-nav-menubar-demo//noframe" ></iframe> </div><!-- #tab1 --> <div id="tab2" class="tab_content"> <div class="window-body code"><pre class="prettyprint" style="border:none;margin-top:-20px;"><code><br /><h1 class="heading">Responsive CSS3 Colorful Nav Menubar Demo</h1><br /><div class="wrapper"><br /><h2 class="Cdefault">DEFAULT - Navbar Menu</h2><br /><ul class="menu default"><br /> <li><a href="#">Home</a></li><br /> <li><a href="#">About</a></li><br /> <li><a href="#">News</a></li><br /> <li><a href="#">About</a></li><br /> <li><a href="#">Contact</a></li><br /></ul><br /><div class="clear" /><br /><br /><h2 class="Cgrapefruit">GRAPEFRUIT - Navbar Menu</h2><br /><ul class="menu grapefruit"><br /> <li><a href="#">Home</a></li><br /> <li><a href="#">About</a></li><br /> <li><a href="#">News</a></li><br /> <li><a href="#">About</a></li><br /> <li><a href="#">Contact</a></li><br /></ul><br /><div class="clear" /><br /><br /><h2 class="Cbittersweet">BITTERSWEET - Navbar Menu</h2><br /><ul class="menu bittersweet"><br /> <li><a href="#">Home</a></li><br /> <li><a href="#">About</a></li><br /> <li><a href="#">News</a></li><br /> <li><a href="#">About</a></li><br /> <li><a href="#">Contact</a></li><br /></ul><br /><div class="clear" /><br /><br /><h2 class="Csunflower">SUNFLOWER - Navbar Menu</h2><br /><ul class="menu sunflower"><br /> <li><a href="#">Home</a></li><br /> <li><a href="#">About</a></li><br /> <li><a href="#">News</a></li><br /> <li><a href="#">About</a></li><br /> <li><a href="#">Contact</a></li><br /></ul><br /><div class="clear" /><br /><br /><h2 class="Cgrass">GRASS - Navbar Menu</h2><br /><ul class="menu grass"><br /> <li><a href="#">Home</a></li><br /> <li><a href="#">About</a></li><br /> <li><a href="#">News</a></li><br /> <li><a href="#">About</a></li><br /> <li><a href="#">Contact</a></li><br /></ul><br /><div class="clear" /><br /><br /><h2 class="Cmint">MINT - Navbar Menu</h2><br /><ul class="menu mint"><br /> <li><a href="#">Home</a></li><br /> <li><a href="#">About</a></li><br /> <li><a href="#">News</a></li><br /> <li><a href="#">About</a></li><br /> <li><a href="#">Contact</a></li><br /></ul><br /><div class="clear" /><br /><br /><h2 class="Caqua">AQUA - Navbar Menu</h2><br /><ul class="menu aqua"><br /> <li><a href="#">Home</a></li><br /> <li><a href="#">About</a></li><br /> <li><a href="#">News</a></li><br /> <li><a href="#">About</a></li><br /> <li><a href="#">Contact</a></li><br /></ul><br /><div class="clear" /><br /><br /><h2 class="Cbluejeans">BLUEJEANS - Navbar Menu</h2><br /><ul class="menu bluejeans"><br /> <li><a href="#">Home</a></li><br /> <li><a href="#">About</a></li><br /> <li><a href="#">News</a></li><br /> <li><a href="#">About</a></li><br /> <li><a href="#">Contact</a></li><br /></ul><br /><div class="clear" /><br /><br /><h2 class="Clavander">LAVANDER - Navbar Menu</h2><br /><ul class="menu lavander"><br /> <li><a href="#">Home</a></li><br /> <li><a href="#">About</a></li><br /> <li><a href="#">News</a></li><br /> <li><a href="#">About</a></li><br /> <li><a href="#">Contact</a></li><br /></ul><br /><div class="clear" /><br /><br /><h2 class="Cpinkrose">PINKROSE - Navbar Menu</h2><br /><ul class="menu pinkrose"><br /> <li><a href="#">Home</a></li><br /> <li><a href="#">About</a></li><br /> <li><a href="#">News</a></li><br /> <li><a href="#">About</a></li><br /> <li><a href="#">Contact</a></li><br /></ul><br /><div class="clear" /><br /><br /><h2 class="Clight">LIGHT - Navbar Menu</h2><br /><ul class="menu light"><br /> <li><a href="#">Home</a></li><br /> <li><a href="#">About</a></li><br /> <li><a href="#">News</a></li><br /> <li><a href="#">About</a></li><br /> <li><a href="#">Contact</a></li><br /></ul><br /><div class="clear" /><br /><br /><h2 class="Cgray">GRAY - Navbar Menu</h2><br /><ul class="menu gray"><br /> <li><a href="#">Home</a></li><br /> <li><a href="#">About</a></li><br /> <li><a href="#">News</a></li><br /> <li><a href="#">About</a></li><br /> <li><a href="#">Contact</a></li><br /></ul><br /><div class="clear" /><br /></div><br /></code></pre></div> </div><!-- #tab2 --> <div id="tab3" class="tab_content"> <div class="window-body code"><pre class="prettyprint" style="border:none;margin-top:-20px;"><code><br />ul.menu {<br /> list-style-type: none;<br /> margin: 5% 8%;<br /> padding: 0;<br /> width: 95%;<br /> border-radius: .5em;<br /> box-shadow: 0 0 5px rgba(0, 0, 0, .3 )<br /> clear:both;<br />}<br />ul.menu li {<br /> display: inline;<br /> float: left;<br /> width: 82%;<br /> text-align:center;<br /> border-bottom-style:solid;<br /> border-bottom-width:1px;<br /> border-bottom-color:#fff;<br /> padding: 5px;<br />}<br />ul.menu li:nth-last-child(1) {<br /> border:none;<br />}<br />ul.menu li a {<br /> display: block;<br /> padding: 5px;<br /> text-decoration:none;<br /> font-weight:bolder;<br /> text-transform: uppercase;<br /> font-size:15px;<br /> color:#fff;<br />}<br />ul.menu li a:hover{<br /> border-left-style:solid;<br /> border-left-width:1px;<br /> border-left-color:#fff;<br /> border-right-style:solid;<br /> border-right-width:1px;<br /> border-right-color:#fff;<br />}<br /><br />/* Large screens (640px or 1080px) */<br />@media (min-width: 40rem) { <br /> html { font-size: 112%; }<br />ul.menu {<br /> list-style-type: none;<br /> margin: 2% 8%;<br /> padding: 0;<br /> width: 95%;<br /> border-radius: .5em;<br /> box-shadow: 0 0 5px rgba(0, 0, 0, .3 )<br /> clear:both;<br />}<br />ul.menu li {<br /> display: inline;<br /> float: left;<br /> width: 16%;<br /> text-align:center;<br /> border-right-style:solid;<br /> border-right-width:1px;<br /> border-bottom-style:none;<br /> border-bottom-width:0px;<br /> border-right-color:#fff;<br /> padding: 5px;<br />}<br />ul.menu li:nth-last-child(1) {<br /> border:none;<br />}<br />ul.menu li a {<br /> display: block;<br /> padding: 5px;<br /> text-decoration:none;<br /> font-weight:bolder;<br /> text-transform: uppercase;<br /> font-size:15px;<br /> color:#fff;<br />}<br />ul.menu li a:hover{<br /> border-top-style:solid;<br /> border-top-width:1px;<br /> border-top-color:#fff;<br /> border-bottom-style:solid;<br /> border-bottom-width:1px;<br /> border-bottom-color:#fff;<br /> border-left-style:none;<br /> border-left-width:0px;<br /> border-right-style:none;<br /> border-right-width:0px;<br />}<br /><br />}<br /><br />/*Default Color Palette*/<br />ul.default li{<br /> background-color:#656d77;<br /> box-shadow: 5px 10px 5px #434a53;<br />}<br />ul.default li:hover{<br /> background-color:#434a53;<br /> box-shadow: 0px 5px 0 #656d77;<br />}<br /><br />/*Grapefruit Color Palette*/<br />ul.grapefruit li{<br /> background-color:#ed5565;<br /> box-shadow: 5px 10px 5px #da4453;<br />}<br />ul.grapefruit li:hover{<br /> background-color:#da4453;<br /> box-shadow: 0px 5px 0 #ed5565;<br />}<br /><br />/*Bittersweet Color Palette*/<br />ul.bittersweet li{<br /> background-color:#fc6d58;<br /> box-shadow: 5px 10px 5px #e95546;<br />}<br />ul.bittersweet li:hover{<br /> background-color:#e95546;<br /> box-shadow: 0px 5px 0 #fc6d58;<br />}<br /><br />/*Sunflower Color Palette*/<br />ul.sunflower li{<br /> background-color:#ffcd69;<br /> box-shadow: 5px 10px 5px #f6ba59;<br />}<br />ul.sunflower li:hover{<br /> background-color:#f6ba59;<br /> box-shadow: 0px 5px 0 #ffcd69;<br />}<br /><br />/*Grass Color Palette*/<br />ul.grass li{<br /> background-color:#9fd477;<br /> box-shadow: 5px 10px 5px #8bc163;<br />}<br />ul.grass li:hover{<br /> background-color:#8bc163;<br /> box-shadow: 0px 5px 0 #9fd477;<br />}<br /><br />/*Mint Color Palette*/<br />ul.mint li{<br /> background-color:#46cfb0;<br /> box-shadow: 5px 10px 5px #34bc9d;<br />}<br />ul.mint li:hover{<br /> background-color:#34bc9d;<br /> box-shadow: 0px 5px 0 #46cfb0;<br />}<br /><br />/*Aqua Color Palette*/<br />ul.aqua li{<br /> background-color:#4fc2e5;<br /> box-shadow: 5px 10px 5px #3bb0d6;<br />}<br />ul.aqua li:hover{<br /> background-color:#3bb0d6;<br /> box-shadow: 0px 5px 0 #4fc2e5;<br />}<br /><br />/*Blue Jeans Color Palette*/<br />ul.bluejeans li{<br /> background-color:#5e9de6;<br /> box-shadow: 5px 10px 5px #4b8ad6;<br />}<br />ul.bluejeans li:hover{<br /> background-color:#4b8ad6;<br /> box-shadow: 0px 5px 0 #5e9de6;<br />}<br /><br />/*Lavander Color Palette*/<br />ul.lavander li{<br /> background-color:#ad93e6;<br /> box-shadow: 5px 10px 5px #977bd5;<br />}<br />ul.lavander li:hover{<br /> background-color:#977bd5;<br /> box-shadow: 0px 5px 0 #ad93e6;<br />}<br /><br />/*Pinkrose Color Palette*/<br />ul.pinkrose li{<br /> background-color:#ed87bd;<br /> box-shadow: 5px 10px 5px #d870a9;<br />}<br />ul.pinkrose li:hover{<br /> background-color:#d870a9;<br /> box-shadow: 0px 5px 0 #ed87bd;<br />}<br /><br />/*Light Color Palette*/<br />ul.light li{<br /> background-color:#f5f7fa;<br /> box-shadow: 5px 10px 5px #e6e9ed;<br />}<br />ul.light li:hover{<br /> background-color:#e6e9ed;<br /> box-shadow: 0px 5px 0 #f5f7fa;<br />}<br /><br />/*Gray Color Palette*/<br />ul.gray li{<br /> background-color:#ccd1d8;<br /> box-shadow: 5px 10px 5px #aab2bc;<br />}<br />ul.gray li:hover{<br /> background-color:#aab2bc;<br /> box-shadow: 0px 5px 0 #ccd1d8;<br />}<br /></code></pre></div> </div><!-- #tab3 --> <div id="tab4" class="tab_content"> <div class="window-body code"><pre class="prettyprint" style="border:none;margin-top:-20px;"><code><br />No need for any JS script...<br /></code></pre></div> </div><!-- #tab4 --> </div> <!-- .tab_container --> </div>Pawan Mallhttp://www.blogger.com/profile/13987592121022726798noreply@blogger.com4tag:blogger.com,1999:blog-7681588922431374048.post-65515953455683026332015-02-17T06:31:00.001+05:302015-02-17T06:31:19.193+05:30Online Responsive Resume<center><a href="http://2.bp.blogspot.com/--fJSiW1_abE/VOKQ2B9D9PI/AAAAAAAA1O0/svi9dlTYon8/s1600/Online%2BResponsive%2BResume%2B-%2Bpawanmall.net.jpg" imageanchor="1" ><img border="0" src="http://2.bp.blogspot.com/--fJSiW1_abE/VOKQ2B9D9PI/AAAAAAAA1O0/svi9dlTYon8/s1600/Online%2BResponsive%2BResume%2B-%2Bpawanmall.net.jpg" class="post-img-responsive" /></a><blockquote>In this tutorial I want to demonstrate how we can build a responsive single-page resume layout. I’ll be coding everything in HTML5/CSS3 to work properly at various screen resolutions.</blockquote></center> <br /><div class="myTabs"><ul class="myTabs"><li class="active" rel="tab1"><i class="fa fa-globe"></i> Demo</li><li rel="tab2"><i class="fa fa-html5"></i> HTML</li><li rel="tab3"><i class="fa fa-css3"></i> CSS</li><li rel="tab4"><i class="fa fa-code"></i> JS</li><li><a href="http://cssdeck.com/labs/online-responsive-resume" target="_blank"><i class="fa fa-edit"></i> Edit Online</a></li><li><a href="https://docs.google.com/uc?authuser=0&id=0B3vCrMJnZM32eGYyWGhLRXdUdW8&export=download" target="_blank"><i class="fa fa-download"></i> Download</a></li></ul><div class="tab_container"><div class="tab_content" id="tab1"><iframe src="http://cssdeck.com/labs/full/online-responsive-resume//noframe" ></iframe> </div><!-- #tab1 --> <br /><div class="tab_content" id="tab2"><div class="window-body code"><pre class="prettyprint" style="border: none; margin-top: -20px;"><code><br /><div class="myResume"><br /> <div class="myResume-Contact-Info"><br /> <h1>Pawan Mall</h1><br /> <h3>Web Designer, Developer & Blogger</h3><br /> <h6>New Delhi, Delhi, INDIA</h6><br /> <h6>email@pawanmall.net</h6><br /> <h6>My Portfolio • <a href="http://www.pawanmall.net">www.pawanmall.net</a></h6><br /> </div><br /> <div class="myResume-Profile-Pic"><br /> <img src="http://4.bp.blogspot.com/-PMdKDQ6bm1k/VFK2baK8iEI/AAAAAAAA0vY/mX6UsaXwK-c/s1600/Pawan%2BMall%2B-%2BProfile%2BPic-Small.jpg" alt="Pawan Mall - resume photo avatar" /><br /> </div><br /> <div class="clear"></div><br /> <div class="myResume-Profile-Intro"><br /> <h1 class="title">Profile</h1><br /> <p>I'm something poet, marketer, social media consultant, web designer, web developer, web programmer, blogger(hobby) & a good human being. Originally from Gorakhpur, UP and currently living in the New Delhi. ..</p><br /> <br /> </div> <br /> <div class="myResume-Skills"><br /> <h1 class="title">Skills</h1><br /> <br /> <ul class="myResume-Skills-left"><br /> <li>Development</li><br /> <li>HTML5/CSS3</li><br /> <li>JavaScript & jQuery</li><br /> <li>PHP Backend</li><br /> <li>SQL Databases</li><br /> <li>Wordpress</li><br /> <li>Pligg CMS</li><br /> <li>Some Objective-C</li><br /> </ul><br /> <br /> <ul class="myResume-Skills-right"><br /> <li>Software</li><br /> <li>Adobe Photoshop</li><br /> <li>Adobe Dreamweaver</li><br /> <li>MS Office 2007-2010</li><br /> <li>cPanel & phpMyAdmin</li><br /> <li>Xcode 4</li><br /> </ul><br /> <br /> </div><br /> <div class="clear"></div><br /> <div class="myResume-Education"><br /> <h1 class="title">Education</h1><br /> <ul><br /> <li>Sikkim Manipal University graduate of 2015.</li><br /> </ul><br /> </div> <br /> <div class="myResume-Experience"><br /> <h1 class="title">Experience</h1><br /> <ul><br /> <li>Web Designer/Developer ~ 2007-2014</li><br /> </ul><br /> </div> <br /></div><br /></code></pre></div></div><!-- #tab2 --> <br /><div class="tab_content" id="tab3"><div class="window-body code"><pre class="prettyprint" style="border: none; margin-top: -20px;"><code><br />/* <br />// Online Responsive Resume<br />// Made with ❤ by @Pawan_Mall<br />// http://www.pawanmall.net <br />*/<br /><br />* { margin: 0; padding: 0; }<br /><br />body { <br /> background: #f2f2f2; <br /> font-size: 62.5%; <br /> padding: 10px; <br />}<br />.myResume-Contact-Info h1 { <br /> font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; <br /> margin-bottom: 20px;<br /> font-size: 40px; <br />}<br />.myResume-Contact-Info > h3 { <br /> font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; <br /> color: #484848; <br /> margin-bottom: 10px; <br /> text-decoration: underline; <br />}<br />.myResume-Contact-Info > h6 { <br /> font-family: "Trebuchet MS", Verdana, Arial, sans-serif; <br /> color: #777; <br /> font-weight: normal; <br /> font-size: 1em; <br />}<br /><br />.myResume{<br /> background: #fff; <br /> width:80%;<br /> font-family: "Balthazar", "Droid Serif", serif; <br /> color: #565656; <br /> font-size: 1.8em; <br /> line-height: 1.4em; <br /> margin: 3% auto; <br /> padding: 10px 0px 35px 80px; <br /> //padding: 35px;<br /> text-shadow: 1px 1px 10px #CCC;<br />}<br />.myResume-Contact-Info{<br /> width:50%;<br /> margin-top: 50px; <br /> margin-bottom: 30px;<br /> margin-right:100px;<br /> float:left;<br />}<br />.clear{<br /> clear:both;<br />}<br />.myResume-Profile-Pic{<br /> width:100%;<br /> margin:40px auto;<br />}<br />.myResume-Profile-Pic img{<br /> width:25%;<br /> height:auto; <br /> border-radius: 3px;<br /> box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);<br /> background-color: #fff;<br /> border: 1px solid #ccc;<br /> padding: 5px;<br />}<br />.myResume-Profile-Intro{<br /> width:88.5%;<br /> margin:10 px auto;<br /> text-align:justify;<br /> margin-top:50px;<br />}<br />.myResume-Skills{<br /> width:88.5%;<br /> margin:10 px auto;<br /> text-align:justify;<br /> margin-top:50px;<br />}<br /><br />.myResume-Education{ <br /> width:88.5%;<br /> margin-top:50px;<br />}<br />.myResume-Education > ul > li {<br /> list-style-type: circle; <br />}<br />.myResume-Experience{<br /> width:88.5%;<br /> margin-top:50px;<br />}<br /> .myResume-Experience > ul > li {<br /> list-style-type: circle; <br />}<br /><br />h1.title{<br /> text-transform: uppercase;<br /> font-size: 150%;<br /> background-color:#CCC;<br /> padding:10px 0px 10px 100px;<br /> border-radius:0px 50px 50px 0px;<br /> width:80%;<br /> margin-bottom:10px;<br /> color:#fff;<br /> text-shadow: 2px 2px 8px #000;<br /> position:relative;<br /> left:-85px;<br />}<br /><br />.myResume-Skills-left { <br /> display: block; <br /> float: left; <br /> padding-bottom:20px;<br /> margin-left:30px;<br />}<br /><br />.myResume-Skills-right { <br /> display: block; <br /> float: left;<br /> margin-left:30px;<br />}<br /><br /><br />ul.myResume-Skills-left,ul.myResume-Skills-right { <br /> display: block; <br />}<br />ul.myResume-Skills-left > li { <br /> padding-left: 10px; <br /> list-style-type: circle; <br /> vertical-align: top; <br /> font-family: "Balthazar", "Droid Serif", serif; <br />}<br />ul.myResume-Skills-right > li { <br /> padding-left: 10px; <br /> list-style-type: circle; <br /> vertical-align: top; <br /> font-family: "Balthazar", "Droid Serif", serif; <br />}<br />ul.myResume-Skills-left > li:first-child {<br /> list-style-type: none; <br /> font-weight:bolder;<br /> font-size:20px;<br /> text-decoration:underline;<br />}<br />ul.myResume-Skills-right > li:first-child { <br /> list-style-type: none; <br /> font-weight:bolder; <br /> font-size:20px;<br /> text-decoration:underline;<br />}<br /><br />@media only screen and (max-width: 740px) {<br />.myResume{<br /> width:90%;<br /> font-family: "Balthazar", "Droid Serif", serif; <br /> color: #565656; <br /> padding: 10px;<br /> }<br /> .myResume-Contact-Info h1{<br /> font-size:30px;<br /> padding-left:10%;<br /> }<br /> .myResume-Contact-Info > h3 { <br /> font-size:14px;<br /> padding-left:10%;<br />}<br />.myResume-Contact-Info > h6 { <br /> font-size:13px;<br /> padding-left:10%;<br />}<br /> .myResume-Contact-Info {<br /> width:40%;<br /> text-align:center;<br /> }<br /> .myResume-Profile-Pic{<br /> width:60%;<br /> margin-right:5%;<br /> <br />}<br />.myResume-Profile-Pic img{<br /> width:45%; <br /> float:right; <br />}<br /> <br />h1.title{<br /> font-size: 25px;<br /> background-color:#CCC;<br /> padding:5px 0px 5px 0px;<br /> border-radius:0px;<br /> width:100%;<br /> margin-bottom:10px;<br /> position:relative;<br /> left:-35px;<br /> text-align:center; <br />}<br />.myResume-Profile-Intro{<br /> width:90%; <br /> text-align:justify;<br /> font-size: 20px;<br /> padding-left:18px; <br />}<br />.myResume-Skills{<br /> width:90%;<br /> font-size: 15px;<br /> padding-left:18px; <br />}<br />.myResume-Education{ <br /> width:90%;<br /> font-size: 18px;<br /> padding-left:18px; <br />} <br />.myResume-Experience{<br /> width:90%;<br /> font-size: 18px;<br /> padding-left:18px; <br />} <br />}<br /><br />@media only screen and (max-width: 570px) {<br /> .myResume{<br /> width:90%;<br /> font-family: "Balthazar", "Droid Serif", serif; <br /> color: #565656; <br /> padding: 10px;<br /> }<br /> .myResume-Contact-Info h1{<br /> font-size:60px;<br /> padding-left:10%;<br /> }<br /> .myResume-Contact-Info > h3 { <br /> font-size:18px;<br /> padding-left:10%;<br />}<br />.myResume-Contact-Info > h6 { <br /> font-size:15px;<br /> padding-left:10%;<br />}<br /> .myResume-Contact-Info {<br /> width:90%;<br /> font-size:60%;<br /> text-align:center;<br /> }<br /> .myResume-Profile-Pic{<br /> width:90%;<br /> margin:auto 6%;<br />}<br />.myResume-Profile-Pic img{<br /> width:70%;<br /> margin:auto 15%; <br />}<br /> <br />h1.title{<br /> font-size: 25px;<br /> background-color:#CCC;<br /> padding:5px 0px 5px 0px;<br /> border-radius:0px;<br /> width:100%;<br /> margin-bottom:10px;<br /> position:relative;<br /> left:-35px;<br /> text-align:center; <br />}<br />.myResume-Profile-Intro{<br /> width:90%; <br /> text-align:justify;<br /> font-size: 20px;<br /> padding-left:18px; <br />}<br />.myResume-Skills{<br /> width:90%;<br /> font-size: 15px;<br /> padding-left:18px; <br />}<br />.myResume-Education{ <br /> width:90%;<br /> font-size: 18px;<br /> padding-left:18px; <br />} <br />.myResume-Experience{<br /> width:90%;<br /> font-size: 18px;<br /> padding-left:18px; <br />} <br />}<br /><br />@media only screen and (max-width: 480px) {<br /> .myResume{<br /> width:90%;<br /> font-family: "Balthazar", "Droid Serif", serif; <br /> color: #565656; <br /> padding: 10px;<br /> }<br /> .myResume-Contact-Info h1{<br /> font-size:40px;<br /> padding-left:10%;<br /> }<br /> .myResume-Contact-Info > h3 { <br /> font-size:13px;<br /> padding-left:10%;<br />}<br />.myResume-Contact-Info > h6 { <br /> font-size:13px;<br /> padding-left:10%;<br />}<br /> .myResume-Contact-Info {<br /> width:90%;<br /> font-size:60%;<br /> text-align:center;<br /> }<br /> .myResume-Profile-Pic{<br /> width:90%;<br />}<br />.myResume-Profile-Pic img{<br /> width:80%;<br /> margin:auto 10%; <br />}<br /> <br />h1.title{<br /> font-size: 25px;<br /> background-color:#CCC;<br /> padding:5px 0px 5px 0px;<br /> border-radius:10px;<br /> width:122.0%;<br /> margin-bottom:10px;<br /> position:relative;<br /> left:-32px;<br /> text-align:center; <br />}<br />.myResume-Profile-Intro{<br /> width:90%; <br /> text-align:justify;<br /> font-size: 20px;<br /> padding-left:18px; <br />}<br />.myResume-Skills{<br /> width:90%;<br /> font-size: 18px;<br /> padding-left:18px; <br />}<br />.myResume-Education{ <br /> width:90%;<br /> font-size: 18px;<br /> padding-left:18px; <br />} <br />.myResume-Experience{<br /> width:90%;<br /> font-size: 18px;<br /> padding-left:18px; <br />} <br /> <br />}<br /><br />@media only screen and (max-width: 320px) {<br /> .myResume{<br /> background: #fff; <br /> width:80%;<br /> font-family: "Balthazar", "Droid Serif", serif; <br /> color: #565656; <br /> margin: auto; <br /> padding: 0px 10px 10px 45px;<br /> }<br /> .myResume-Contact-Info h1{<br /> font-size:30px;<br /> }<br /> .myResume-Contact-Info > h3 { <br /> font-size:12px;<br />}<br />.myResume-Contact-Info > h6 { <br /> font-size:12px;<br />}<br /> .myResume-Contact-Info {<br /> width:90%;<br /> font-size:60%;<br /> text-align:center;<br /> margin-left:-15px;<br /> }<br /> .myResume-Profile-Pic{<br /> width:90%;<br /> margin:auto 0%; <br />}<br />.myResume-Profile-Pic img{<br /> width:80%;<br />}<br /> <br />h1.title{<br /> font-size: 20px;<br /> background-color:#CCC;<br /> padding:5px 0px 5px 0px;<br /> border-radius:0px 0px 0px 0px;<br /> width:146%;<br /> margin-bottom:10px;<br /> position:relative;<br /> left:-41px;<br /> text-align:center; <br />}<br />.myResume-Profile-Intro{<br /> width:90%;<br /> text-align:justify;<br /> margin-top:50px;<br /> font-size: 18px;<br /> margin-left:-25px; <br />}<br />.myResume-Skills{<br /> width:90%;<br /> font-size: 15px; <br /> margin-left:-25px; <br />}<br />.myResume-Education{ <br /> width:90%;<br /> font-size: 15px;<br /> margin-left:-25px; <br />} <br />.myResume-Experience{<br /> width:90%;<br /> font-size: 15px;<br /> margin-left:-25px; <br />} <br />}<br /></code></pre></div></div><!-- #tab3 --> <br /><div class="tab_content" id="tab4"><div class="window-body code"><pre class="prettyprint" style="border: none; margin-top: -20px;"><code><br />No need for any JS script...<br /></code></pre></div></div><!-- #tab4 --> </div><!-- .tab_container --> </div>Pawan Mallhttp://www.blogger.com/profile/13987592121022726798noreply@blogger.com2tag:blogger.com,1999:blog-7681588922431374048.post-47049947270630504482015-02-10T06:06:00.000+05:302015-02-10T06:06:58.317+05:30Simple CSS - Responsive vCard & Title Attribute<center><a href="http://4.bp.blogspot.com/-8mFx_4fQeHo/VNlQaztEyfI/AAAAAAAA1NU/ZaIwz592h6g/s1600/Simple%2BCSS%2B-%2BResponsive%2BvCard%2B%26%2BTitle%2B-%2BAttribute%2B-%2BDemo%2B-%2Bpawanmall.net.jpg" imageanchor="1" ><img border="0" src="http://4.bp.blogspot.com/-8mFx_4fQeHo/VNlQaztEyfI/AAAAAAAA1NU/ZaIwz592h6g/s1600/Simple%2BCSS%2B-%2BResponsive%2BvCard%2B%26%2BTitle%2B-%2BAttribute%2B-%2BDemo%2B-%2Bpawanmall.net.jpg" class="post-img-responsive" /></a></center> <blockquote><h1>Responsive vCard & Title Attribute</h1><p>I'm creating a demo of responsive vCard box as well as giving a demo about "title" attribute. With the help of CSS we can stylized "title" attribute too like other elements.</p></blockquote><div class="myTabs"><ul class="myTabs"> <li class="active" rel="tab1"><i class="fa fa-globe"></i> Demo</li> <li rel="tab2"><i class="fa fa-html5"></i> HTML</li> <li rel="tab3"><i class="fa fa-css3"></i> CSS</li> <li rel="tab4"><i class="fa fa-code"></i> JS</li> <li><a href="http://cssdeck.com/labs/simple-css-responsive-vcard-title-attribute-demo" target="_blank"><i class="fa fa-edit"></i> Edit Online</a></li> <li><a href="https://docs.google.com/uc?authuser=0&id=0B3vCrMJnZM32V0ZBdU1CM1dNUkE&export=download" target="_blank"><i class="fa fa-download"></i> Download</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <iframe src="http://cssdeck.com/labs/full/simple-css-responsive-vcard-title-attribute-demo//noframe"></iframe></div><!-- #tab1 --> <div id="tab2" class="tab_content"> <div class="window-body code"><pre class="prettyprint" style="border:none;margin-top:-20px;"><code><br /><div class="vCard"><br /><img src="http://4.bp.blogspot.com/-PMdKDQ6bm1k/VFK2baK8iEI/AAAAAAAA0vY/mX6UsaXwK-c/s1600/Pawan%2BMall%2B-%2BProfile%2BPic-Small.jpg" /><br /><br /><br /> <h1>Hi, I am Pawan Mall!</h1><br /><br /><p>I'm something poet, marketer, social media consultant, web designer/developer/programmer,<br />blogger(as hobby) & a good human being. Originally from Gorakhpur, UP and currently living in<br />New Delhi, India. ..<br /> </p><br /><br /> <ul><br /> <li><a href="#Twitter" title="Follow me on : Twitter">Twitter</a><li><br /> <li><a href="#Facebook" title="Follow me on : Facebook">Facebook</a><li><br /> <li><a href="#Google+" title="Follow me on : Google+">Google+</a><li><br /> <li><a href="#CSSdeck" title="Follow me on : CSSdeck">CSSdeck</a><li><br /> <li><a href="#CodePen" title="Follow me on : CodePen">CodePen</a><li><br /> </ul><br /> <br /></div><br /></code></pre></div> </div><!-- #tab2 --> <div id="tab3" class="tab_content"> <div class="window-body code"><pre class="prettyprint" style="border:none;margin-top:-20px;"><code><br />/* <br />// Simple CSS - Responsive vCard & Title(Attribute)<br />// Made with ❤ by @Pawan_Mall<br />// http://www.pawanmall.net <br />*/<br /><br />@import url(http://fonts.googleapis.com/css?family=Lobster);<br />@import url(http://fonts.googleapis.com/css?family=Indie+Flower);<br />@import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light);<br /><br />body{margin:0px;padding:0px;}<br /><br />.vCard{<br /> margin:4% auto;<br /> padding:15px;<br /> width:80%;<br /> background-color:#fff;<br /> box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);<br /> border-radius:10px;<br />}<br />.vCard img{<br /> margin:10% 0% 0% 30%;<br /> height:auto;<br /> width:35%;<br /> border-radius:50%;<br /> border:double 10px #CCC;<br /> box-shadow: 0 7px 4px #777;<br />}<br />.vCard h1{<br /> font-family: 'Lobster', cursive;<br /> text-align:center;<br /> text-shadow: 0 2px 1px #777;<br />}<br />.vCard p{<br /> font-family: 'Indie Flower', cursive;<br /> text-align:center;<br /> text-shadow: 0 2px 1px #777;<br />}<br /><br />.vCard ul{<br /> list-style:none;<br />}<br />.vCard ul > li{<br /> display:inline-block;<br /> padding:5px;<br /> margin-bottom:10px;<br /> font-family: 'Shadows Into Light', cursive;<br /> <br />}<br />.vCard a:link, a:visited{<br /> text-decoration:none;<br /> box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;<br /> padding:5px;<br /> border-radius:10px 0px 10px 0px;<br /> color:#000;<br /> font-weight:bolder;<br />}<br /><br />.vCard a:hover{<br /> box-shadow:0 0 10px rgba(0, 0, 0, 0.5);<br /> border-radius:0px 10px 0px 10px;<br />}<br /><br />.vCard a[title]{<br /> position:relative;<br /> <br />}<br />.vCard a[title]:before{<br /> content: "";<br /> position:absolute;<br /> bottom:10px;<br /> border-width: 14px 7px;<br /> border-style: solid;<br /> border-color:#3c404b transparent transparent transparent;<br /> left:-9999px;<br /> opacity:0;<br /> transition:.75s opacity, .75s bottom;<br /> <br />}<br /><br />.vCard a[title]:after{<br /> content:attr(title);<br /> color: #FFF;<br /> font:bold 16px arial, sans-serif;<br /> background:#3c404b; <br /> padding:10px; <br /> position:absolute;<br /> left:-9999px;<br /> opacity:0;<br /> bottom:38px;<br /> white-space:nowrap;<br /> border-radius:8px; <br /> transition:.75s opacity, .75s bottom;<br /> font-family: 'Indie Flower', cursive;<br />}<br /><br />.vCard a[title]:hover:before{<br /> left:35px;<br /> opacity:1;<br /> bottom: 30px;<br /> <br />}<br />.vCard a[title]:hover:after{<br /> left:0px;<br /> opacity:1;<br /> bottom: 58px;<br />}<br />/* Animation Effect - effectRotateOut */<br />@-webkit-keyframes rotateOut {<br /> 0% {<br /> -webkit-transform-origin: center center;<br /> transform-origin: center center;<br /> -webkit-transform: rotate(0);<br /> transform: rotate(0);<br /> opacity: 0;<br /> }<br /><br /> 100% {<br /> -webkit-transform-origin: center center;<br /> transform-origin: center center;<br /> -webkit-transform: rotate(360deg);<br /> transform: rotate(360deg);<br /> opacity: 1;<br /> }<br />}<br /><br />@keyframes rotateOut {<br /> 0% {<br /> -webkit-transform-origin: center center;<br /> -ms-transform-origin: center center;<br /> transform-origin: center center;<br /> -webkit-transform: rotate(0);<br /> -ms-transform: rotate(0);<br /> transform: rotate(0);<br /> opacity: 0;<br /> }<br /><br /> 100% {<br /> -webkit-transform-origin: center center;<br /> -ms-transform-origin: center center;<br /> transform-origin: center center;<br /> -webkit-transform: rotate(360deg);<br /> -ms-transform: rotate(360deg);<br /> transform: rotate(360deg);<br /> opacity: 1;<br /> }<br />}<br /><br />.vCard img:hover<br />{<br />animation:rotateOut 1s ;<br />-webkit-animation:rotateOut 1s ; /* Safari and Chrome */<br />}<br /></code></pre></div> </div><!-- #tab3 --> <div id="tab4" class="tab_content"> <div class="window-body code"><pre class="prettyprint" style="border:none;margin-top:-20px;"><code><br />No need for any JS script...<br /></code></pre></div> </div><!-- #tab4 --> </div> <!-- .tab_container --> </div>Pawan Mallhttp://www.blogger.com/profile/13987592121022726798noreply@blogger.com188tag:blogger.com,1999:blog-7681588922431374048.post-39031076284587317042015-02-06T03:30:00.001+05:302015-02-06T03:30:39.165+05:30Pure CSS Lightbox without JS<center><a href="http://3.bp.blogspot.com/-Z5h1gwaWW8U/VNPkhnsHmYI/AAAAAAAA1MI/BZUPmQg573A/s1600/Pure%2BCSS%2BLightbox%2Bwithout%2BJS%2B-%2Bpawanmall.net.jpg" imageanchor="1" ><img border="0" src="http://3.bp.blogspot.com/-Z5h1gwaWW8U/VNPkhnsHmYI/AAAAAAAA1MI/BZUPmQg573A/s1600/Pure%2BCSS%2BLightbox%2Bwithout%2BJS%2B-%2Bpawanmall.net.jpg" class="post-img-responsive" alt="Pure CSS Lightbox without JS" /></a></center> <blockquote><h1>Pure CSS Lightbox without JS</h1><p>Here is a pure CSS lightbox made possible by use of the :target CSS selector. <br /><br />I created this script for this website and I thought that anyone can use this script in their own website or blog so I'm sharing this on my website.</p></blockquote> <div class="myTabs"><ul class="myTabs"> <li class="active" rel="tab1"><i class="fa fa-globe"></i> Demo</li> <li rel="tab2"><i class="fa fa-html5"></i> HTML</li> <li rel="tab3"><i class="fa fa-css3"></i> CSS</li> <li rel="tab4"><i class="fa fa-code"></i> JS</li> <li><a href="http://cssdeck.com/labs/pure-css-lightbox-without-js" target="_blank"><i class="fa fa-edit"></i> Edit Online</a></li> <li><a href="https://docs.google.com/uc?authuser=0&id=0B3vCrMJnZM32UVludmRXZmRfSkU&export=download" target="_blank"><i class="fa fa-download"></i> Download</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <iframe src="http://cssdeck.com/labs/full/pure-css-lightbox-without-js//noframe" ></iframe></div><!-- #tab1 --> <div id="tab2" class="tab_content"> <div class="window-body code"><pre class="prettyprint" style="border:none;margin-top:-20px;"><code><br /> <center><br />This is the main content. To display a lightbox click below icons. <hr/><br/><br /> <a href="javascript:void(0)" onclick="document.getElementById('twitterLight').style.display='block';document.getElementById('twitterFade').style.display='block'" class="btn btn_left twitterbtn"><i class="fa fa-twitter-square fa-3x"></i></a><br /> <br /><a href="javascript:void(0)" onclick="document.getElementById('facebookLight').style.display='block';document.getElementById('facebookFade').style.display='block'" class="btn btn_right facebookbtn"><i class="fa fa-facebook-square fa-3x"></i></a> <br /></center> <br /><br /><div id="twitterLight" class="white_content"><br /> <div class="heading"><br /> <span><i class="fa fa-twitter-square twitterbtn"></i> Twitter</span><br /> <a href ="javascript:void(0)" onclick = "document.getElementById('twitterLight').style.display='none';document.getElementById('twitterFade').style.display='none'">X</a><br /> </div><br /><br /> <div class="mainbody"><br /> <center><br /> <a class="twitter-timeline"<br /> href="https://twitter.com/twitterapi"<br /> data-widget-id="550817849350971392"<br /> data-screen-name="Pawan_Mall"<br /> data-show-replies="false"<br /> data-tweet-limit="3" data-chrome=" nofooter noborders transparent" data-link-color="#cc0000"><br />Tweets by @Pawan_Mall<br /></a><br /><br /><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <br /> </center><br /> </div><br /></div><br /><br /><br /><br /><br /><div id="facebookLight" class="white_content"><br /> <div class="heading"><br /> <span><i class="fa fa-facebook-square facebookbtn"></i> Facebook </span><br /> <a href ="javascript:void(0)" onclick = "document.getElementById('facebookLight').style.display='none';document.getElementById('facebookFade').style.display='none'">X</a><br /> </div><br /><br /> <div class="mainbody"><br /> <center><br /> <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FMr.PawanMall&width&height=258&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:auto;width:100%;" allowTransparency="true"></iframe><br /> </center><br /> </div><br /></div><br /> <div id="twitterFade" class="black_overlay"></div><br /> <div id="facebookFade" class="black_overlay"></div><br /></code></pre></div> </div><!-- #tab2 --> <div id="tab3" class="tab_content"> <div class="window-body code"><pre class="prettyprint" style="border:none;margin-top:-20px;"><code><br />/* <br />// Pure CSS Lightbox without JS<br />// Made with ❤ by @Pawan_Mall<br />// http://www.pawanmall.net <br />*/<br /><br />@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");<br />html{<br /> margin:10%;<br /> padding:5%;<br />}<br />body{<br /> display:inline-block;<br /> padding: 30px;<br /> border: 5px solid #e6e9ed;<br /> background-color: #656d77;<br /> color:#f5f7fa;<br /> border-radius:20px; <br />}<br />.black_overlay{<br /> display: none;<br /> position: absolute;<br /> top: 0%;<br /> left: 0%;<br /> width: 100%;<br /> height: 100%;<br /> background-color: black;<br /> z-index:1001;<br /> -moz-opacity: 0.8;<br /> opacity:.80;<br /> filter: alpha(opacity=80);<br /> }<br /> .white_content {<br /> display: none;<br /> position: absolute;<br /> top: 10%;<br /> left: 15%;<br /> width: 80%;<br /> height: auto;<br /> z-index:1002;<br /> overflow: auto;<br /> }<br />.white_content .heading{<br /> width: 85%;<br /> height: auto;<br /> display:inline-block; <br /> padding: 10px;<br /> border-top: 5px solid #e6e9ed;<br /> border-bottom: 0px solid #e6e9ed;<br /> border-left: 5px solid #e6e9ed;<br /> border-right: 5px solid #e6e9ed;<br /> background-color: #aab2bc;<br /> color:#656d77;<br /> border-radius:20px 20px 0px 0px ; <br />}<br />.white_content .heading span{<br /> font-size:20px;<br /> color:#f5f7fa;<br />}<br />.white_content .heading a{<br /> float:right;<br /> font-size:13px;<br /> text-decoration:none;<br /> background-color:#da4453;<br /> padding:3px;<br /> text-align:center;<br /> color:#f5f7fa;<br /> width:16px;<br /> height:16px;<br /> border-radius:5px;<br />}<br />.white_content .mainbody{<br /> width: 85%;<br /> height: auto; <br /> padding: 10px;<br /> border-top: 0px solid #e6e9ed;<br /> border-bottom: 5px solid #e6e9ed;<br /> border-left: 5px solid #e6e9ed;<br /> border-right: 5px solid #e6e9ed;<br /> background-color: #f5f7fa;<br /> color:#656d77;<br /> border-radius:0px 0px 20px 20px ;<br />}<br />.twitterbtn{<br />color: #55acee;<br />opacity:0.7;<br />}<br />.twitterbtn:hover{<br />opacity:1;<br />}<br />.facebookbtn{<br />color: #223770;<br />opacity:0.7;<br />}<br />.facebookbtn:hover{<br />opacity:1;<br />}<br /></code></pre></div> </div><!-- #tab3 --> <div id="tab4" class="tab_content"> <div class="window-body code"><pre class="prettyprint" style="border:none;margin-top:-20px;"><code><br />No need for any JS script... but Yes, you should have to use little bit of inline JS.<br /><br /><a href ="javascript:void(0)" onclick = "document.getElementById('facebookLight').style.display='none';document.getElementById('facebookFade').style.display='none'">X</a><br /><br /></code></pre></div> </div><!-- #tab4 --> </div> <!-- .tab_container --> </div>Pawan Mallhttp://www.blogger.com/profile/13987592121022726798noreply@blogger.com1tag:blogger.com,1999:blog-7681588922431374048.post-10478791567364602182015-02-05T05:52:00.001+05:302015-02-05T06:06:59.603+05:30Off Canvas Sidebar Nav Pattern - Sidebar Menu<a href="http://1.bp.blogspot.com/-SN-CsS6Febo/VNK5U1a7IGI/AAAAAAAA1LI/LW1xd3GxXZ4/s1600/Off%2BCanvas%2BSidebar%2BNav%2BPattern%2B-%2BSidebar%2BMenu%2B-%2Bpawanmall.net.jpg" imageanchor="1" ><img border="0" src="http://1.bp.blogspot.com/-SN-CsS6Febo/VNK5U1a7IGI/AAAAAAAA1LI/LW1xd3GxXZ4/s1600/Off%2BCanvas%2BSidebar%2BNav%2BPattern%2B-%2BSidebar%2BMenu%2B-%2Bpawanmall.net.jpg" class="post-img-responsive" /></a> <blockquote><p>All off canvas patterns solve the problem of space, by placing some content off screen until needed. In this pattern the navigation is off canvas left when the page first loads on smaller screens.</p> <p>In its place a single menu button that when clicked slides the menu in and the content mostly off screen right. The click event is controlled with a checkbox that's positioned far off the screen.</p><span style="float:right;font-size:12px;"><a href="http://source.tutsplus.com/webdesign/tutorials/014_rwd-nav-patterns-4/demo/sidebar-nav.html" target="_blank">Source <i class="fa fa-external-link"></i></a></span></blockquote> <div class="myTabs"><ul class="myTabs"> <li class="active" rel="tab1"><i class="fa fa-globe"></i> Demo</li> <li rel="tab2"><i class="fa fa-html5"></i> HTML</li> <li rel="tab3"><i class="fa fa-css3"></i> CSS</li> <li rel="tab4"><i class="fa fa-code"></i> JS</li> <li><a href="http://cssdeck.com/labs/off-canvas-sidebar-nav-pattern" target="_blank"><i class="fa fa-edit"></i> Edit Online</a></li> <li><a href="https://docs.google.com/uc?authuser=0&id=0B3vCrMJnZM32SUNabElFa1dYS2s&export=download" target="_blank"><i class="fa fa-download"></i> Download</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <iframe src="http://cssdeck.com/labs/full/off-canvas-sidebar-nav-pattern//noframe"></iframe></div><!-- #tab1 --> <div id="tab2" class="tab_content"> <div class="window-body code"><pre class="prettyprint" style="border:none;margin-top:-20px;"><code><br /><br /><!-- For this pattern we need to work we need to wrap most of our elements inside two divs (wrapper and inner). The navigation sits outside these 2 container divs.<br /><br />Other than the menu and the toggle button, I've stripped out what's inside each of the divs so you can focus on the structure. //--><br /><br /><input id="toggle" type="checkbox" /><br /><nav><br /> <label class="close" for="toggle" onclick><span>X</span> Close</label><br /> <ul id="nav"><br /> <li><a href="">Back to Post</a></li><br /> <li class="current"><a href="sidebar-nav.html">Sidebar Nav</a></li><br /> <li><a href="sidebar-nav-js.html">Sidebar Nav JS</a></li><br /> <li><a href="sidebar+.html">Sidebar+</a></li><br /> <li><a href="panels.html">Panels</a></li><br /> </ul><br /></nav><br /><br /><div class="wrapper"><br /> <div class="inner"><br /> <header><br /> <label class="btn" for="toggle" onclick>Menu</label><br /> </header><br /> <br /> <div class="container main-content"><br /> <div id="content"></div><br /> <div id="sidebar"></div><br /> </div><br /> <br /> <section class="subfooter"></section><br /> <div id="footer"></div><br /> </div><br /></div> <br /><br /></code></pre></div> </div><!-- #tab2 --> <div id="tab3" class="tab_content"> <div class="window-body code"><pre class="prettyprint" style="border:none;margin-top:-20px;"><code><br />/* The Default CSS */<br /><br />.btn {<br /> float: left;<br /> margin: 1.5em 0 0 0;<br /> background: #999;<br /> padding: 0.25em 2%;<br /> color: #fff;<br /> cursor: pointer;<br /> border-radius: 0.25em;<br /> background-color: #5b5756;<br /> background-image: -webkit-linear-gradient(top, #6b6766, #5b5756);<br /> background-image: -moz-linear-gradient(top, #6b6766, #5b5756);<br /> background-image: -ms-linear-gradient(top, #6b6766, #5b5756);<br /> background-image: -o-linear-gradient(top, #6b6766, #5b5756);<br /> background-image: linear-gradient(top, #6b6766, #5b5756);<br />}<br /> <br />.btn:hover {<br /> background-color: #7b7776;<br /> background-image: -webkit-linear-gradient(top, #8b8786, #7b7776);<br /> background-image: -moz-linear-gradient(top, #8b8786, #7b7776);<br /> background-image: -ms-linear-gradient(top, #8b8786, #7b7776);<br /> background-image: -o-linear-gradient(top, #8b8786, #7b7776);<br /> background-image: linear-gradient(top, #8b8786, #7b7776);<br />}<br /><br /><br />#toggle {<br /> position: absolute;<br /> left: -999em;<br />}<br /><br />nav {<br /> position: fixed;<br /> padding: 5em 0 0 0;<br /> background: #3b3736;<br /> width: 75%;<br /> left: -75%;<br /> height: 100%;<br /><br /> -webkit-transition: left 0.5s;<br /> -moz-transition: left 0.5s;<br /> -ms-transition: left 0.5s;<br /> -o-transition: left 0.5s;<br /> transition: left 0.5s;<br />}<br /><br />.close {<br /> cursor: pointer;<br /> color: #fff;<br />}<br /><br />.close:hover {<br /> color: #999;<br />}<br /><br />.close span {<br /> border: 2px solid #fff;<br /> border-radius: 50%;<br /> padding: 0.2em 0.4em;<br />}<br /> <br />#nav {<br /> margin: 0.1875em 0 0 0;<br /> padding: 0;<br /> list-style: none;<br /> border-top: 1px solid #777;<br />}<br /> <br />#nav a {<br /> text-decoration: none;<br /> color: #fff;<br /> padding: 1em 0 1em 5%;<br /> display: block;<br /> border-bottom: 1px solid #777;<br /> height: 4em;<br /> background-image: -webkit-linear-gradient(top, #4b4746, #3b3736);<br /> background-image: -moz-linear-gradient(top, #4b4746, #3b3736);<br /> background-image: -ms-linear-gradient(top, #4b4746, #3b3736);<br /> background-image: -o-linear-gradient(top, #4b4746, #3b3736);<br /> background-image: linear-gradient(top, #4b4746, #3b3736);<br />}<br /><br />#nav a:hover {<br /> background: #4b4746;<br /> background-image: -webkit-linear-gradient(top, #5b5756, #4b4746);<br /> background-image: -moz-linear-gradient(top, #5b5756, #4b4746);<br /> background-image: -ms-linear-gradient(top, #5b5756, #4b4746);<br /> background-image: -o-linear-gradient(top, #5b5756, #4b4746);<br /> background-image: linear-gradient(top, #5b5756, #4b4746);<br />}<br /><br />.wrapper {<br /> width: 100%;<br /> overflow: hidden;<br />}<br /><br />.inner {<br /> float: right;<br /> width: 100%;<br /> margin-right: 0;<br /><br /> -webkit-transition: 0.5s;<br /> -moz-transition: 0.5s;<br /> -ms-transition: 0.5s;<br /> -o-transition: 0.5s;<br /> transition: 0.5s;<br />}<br /><br />/* The CSS to Toggle the Menu<br />To slide in the menu we adjust its left position. To slide out the content we adjust its right margin. For both we use the checkbox hack and target the element with a sibling selector. */<br /><br />:checked ~ nav {<br /> left: 0;<br />}<br /> <br />:checked ~ nav .close {<br /> position: fixed;<br /> top: 1.5em;<br /> left: 4%;<br /> display: block;<br />}<br /><br />:checked ~ .wrapper .inner {<br /> margin-right: -75%;<br />}<br /><br />/* The CSS in Media Queries<br />Once the screen is wider than 48em we convert the menu to a horizontal navigation bar at the top right of the page. */<br /><br />@media screen and (min-width: 48em) {<br /> header {<br /> padding-bottom: 5em;<br /> }<br /> <br /> .logo {<br /> float: left;<br /> margin: 1.25em 0;<br /> }<br /> <br /> .btn {display: none;}<br /> <br /> :checked ~ .wrapper .inner {<br /> margin-right: 0%;<br /> -webkit-transition: 0;<br /> -moz-transition: 0;<br /> -ms-transition: 0;<br /> -o-transition: 0;<br /> transition: 0;<br /> }<br /> <br /> nav,<br /> :checked ~ nav {<br /> float: right;<br /> position: static;<br /> background: transparent;<br /> padding: 0;<br /> height: auto;<br /> width: 100%;<br /> -webkit-transition: 0;<br /> -moz-transition: 0;<br /> -ms-transition: 0;<br /> -o-transition: 0;<br /> transition: 0;<br /> }<br /> <br /> nav .close,<br /> :checked ~ nav .close {<br /> display: none;<br /> }<br /> <br /> #nav {<br /> position: absolute;<br /> top: 1.5em;<br /> right: 2%;<br /> border: 0;<br /> }<br /> <br /> #nav li {display: inline; float: left;}<br /> #nav li.current a {color: #7b7776;}<br /> <br /> #nav a {<br /> padding: 0 1.5em;<br /> display: inline;<br /> border: 0;<br /> background: transparent;<br /> }<br /> <br /> #nav a:hover {background: transparent;}<br /><br /> #sidebar {<br /> margin-top: 5.5em;<br /> }<br />}<br /><br /><br /></code></pre></div> </div><!-- #tab3 --> <div id="tab4" class="tab_content"> <div class="window-body code"><pre class="prettyprint" style="border:none;margin-top:-20px;"><code><br />No need for any JS script...<br /></code></pre></div> </div><!-- #tab4 --> </div> <!-- .tab_container --> </div>Pawan Mallhttp://www.blogger.com/profile/13987592121022726798noreply@blogger.com2tag:blogger.com,1999:blog-7681588922431374048.post-76288054513665677062015-01-31T05:18:00.001+05:302015-01-31T06:45:35.044+05:3012 - CSS3 Blockquote Effects Demo<img src="http://4.bp.blogspot.com/-VP1QZ9R89Y4/VMwZS4KbJMI/AAAAAAAA1IU/pM2pMEJJd6k/s1600/12%2B-%2BCSS3%2BBlockquote%2BEffects%2BDemo.jpg" class="post-img-responsive" /> <center>Tutorials for Blockquote Color Palette. Use following class for blockquote layout.</center> <div class="myTabs"><ul class="myTabs"> <li class="active" rel="DEFAULT1"><i class="fa fa-globe"></i> Demo</li> <li rel="DEFAULT2"><i class="fa fa-html5"></i> HTML</li> <li rel="DEFAULT3"><i class="fa fa-css3"></i> CSS</li> <li rel="DEFAULT4"><i class="fa fa-code"></i> Full Code</li> <li><a href="https://docs.google.com/uc?authuser=0&id=**ID**&export=download" target="_blank"><i class="fa fa-download"></i> Download</a></li> </ul> <div class="tab_container"> <div id="DEFAULT1" class="tab_content"> <blockquote class="default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ... <hr /><br /><code> <blockquote class="<span class="Cdefault">default</span>"> Some Text... </blockquote> </code></blockquote> <blockquote class="grapefruit">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ... <hr /><br /><code> <blockquote class="<span class="Cgrapefruit">grapefruit</span>"> Some Text... </blockquote> </code></blockquote> <blockquote class="bittersweet">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ... <hr /><br /><code> <blockquote class="<span class="Cbittersweet">bittersweet</span>"> Some Text... </blockquote> </code></blockquote> <blockquote class="sunflower">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ... <hr /><br /><code> <blockquote class="<span class="Csunflower">sunflower</span>"> Some Text... </blockquote> </code></blockquote> <blockquote class="grass">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ... <hr /><br /><code> <blockquote class="<span class="Cgrass">grass</span>"> Some Text... </blockquote> </code></blockquote> <blockquote class="mint">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ... <hr /><br /><code> <blockquote class="<span class="Cmint">mint</span>"> Some Text... </blockquote> </code></blockquote> <blockquote class="aqua">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ... <hr /><br /><code> <blockquote class="<span class="Caqua">aqua</span>"> Some Text... </blockquote> </code></blockquote> <blockquote class="bluejeans">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ... <hr /><br /><code> <blockquote class="<span class="Cbluejeans">bluejeans</span>"> Some Text... </blockquote> </code></blockquote> <blockquote class="lavander">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ... <hr /><br /><code> <blockquote class="<span class="Clavander">lavander</span>"> Some Text... </blockquote> </code></blockquote> <blockquote class="pinkrose">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ... <hr /><br /><code> <blockquote class="<span class="Cpinkrose">pinkrose</span>"> Some Text... </blockquote> </code></blockquote> <blockquote class="light">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ... <hr /><br /><code> <blockquote class="<span class="Clight">light</span>"> Some Text... </blockquote> </code></blockquote> <blockquote class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ... <hr /><br /><code> <blockquote class="<span class="Cgray">gray</span>"> Some Text... </blockquote> </code></blockquote> </div><!-- #tab1 --> <div id="DEFAULT2" class="tab_content"> <div class="window-body code"><pre class="prettyprint" style="border:none;margin-top:-20px;"><code><br /> <blockquote class="default"><br /> Some Text...<br /> </blockquote><br /></code></pre></div> </div><!-- #tab2 --> <div id="DEFAULT3" class="tab_content"> <div class="window-body code"><pre class="prettyprint" style="border:none;margin-top:-20px;"><code><br />blockquote{<br /> display:block;<br /> background: #fff;<br /> padding: 15px 20px 15px 45px;<br /> margin: 0 0 20px;<br /> position: relative;<br /> <br /> /*Font*/<br /> font-family: Georgia, serif;<br /> font-size: 14px;<br /> line-height: 1.2;<br /> color: #666;<br /><br /> /*Box Shadow - (Optional)*/<br /> -moz-box-shadow: 2px 2px 15px #ccc;<br /> -webkit-box-shadow: 2px 2px 15px #ccc;<br /> box-shadow: 2px 2px 15px #ccc;<br /><br /> /*Borders - (Optional)*/<br /> border-left-style: solid;<br /> border-left-width: 15px;<br /> border-right-style: solid;<br /> border-right-width: 2px; <br />}<br /><br />blockquote::before{<br /> content: "\201C"; /*Unicode for Left Double Quote*/<br /> <br /> /*Font*/<br /> font-family: Georgia, serif;<br /> font-size: 60px;<br /> font-weight: bold;<br /> color: #999;<br /> <br /> /*Positioning*/<br /> position: absolute;<br /> left: 10px;<br /> top:5px;<br /> <br />}<br /><br />blockquote::after{<br /> /*Reset to make sure*/<br /> content: ";<br />}<br /><br /> /*Default Color Palette*/<br />blockquote.default{ <br /> border-left-color: #656d77;<br /> border-right-color: #434a53; <br />}<br /><br />/*Grapefruit Color Palette*/<br />blockquote.grapefruit{<br /> border-left-color: #ed5565;<br /> border-right-color: #da4453;<br />}<br /><br />/*Bittersweet Color Palette*/<br />blockquote.bittersweet{<br /> border-left-color: #fc6d58;<br /> border-right-color: #e95546;<br />}<br /><br />/*Sunflower Color Palette*/<br />blockquote.sunflower{<br /> border-left-color: #ffcd69;<br /> border-right-color: #f6ba59;<br />}<br /><br />/*Grass Color Palette*/<br />blockquote.grass{<br /> border-left-color: #9fd477;<br /> border-right-color: #8bc163;<br />}<br /><br />/*Mint Color Palette*/<br />blockquote.mint{<br /> border-left-color: #46cfb0;<br /> border-right-color: #34bc9d;<br />}<br /><br />/*Aqua Color Palette*/<br />blockquote.aqua{<br /> border-left-color: #4fc2e5;<br /> border-right-color: #3bb0d6;<br />}<br /><br />/*Blue Jeans Color Palette*/<br />blockquote.bluejeans{<br /> border-left-color: #5e9de6;<br /> border-right-color: #4b8ad6;<br />}<br /><br />/*Lavander Color Palette*/<br />blockquote.lavander{<br /> border-left-color: #ad93e6;<br /> border-right-color: #977bd5;<br />}<br /><br />/*Pinkrose Color Palette*/<br />blockquote.pinkrose{<br /> border-left-color: #ed87bd;<br /> border-right-color: #d870a9;<br />}<br /><br />/*Light Color Palette*/<br />blockquote.light{<br /> border-left-color: #f5f7fa;<br /> border-right-color: #e6e9ed;<br />}<br /><br />/*Gray Color Palette*/<br />blockquote.gray{<br /> border-left-color: #ccd1d8;<br /> border-right-color: #aab2bc;<br />}<br /></code></pre></div> </div><!-- #tab3 --> <div id="DEFAULT4" class="tab_content"> <div class="window-body code"><pre class="prettyprint" style="border:none;margin-top:-20px;"><code><br /><html><br /> <head><br /> <title>DEFAULT - Blockquote Color Palette.</title><br /> <style><br /> blockquote{<br /> display:block;<br /> background: #fff;<br /> padding: 15px 20px 15px 45px;<br /> margin: 0 0 20px;<br /> position: relative;<br /> <br /> /*Font*/<br /> font-family: Georgia, serif;<br /> font-size: 14px;<br /> line-height: 1.2;<br /> color: #666;<br /> <br /> /*Box Shadow - (Optional)*/<br /> -moz-box-shadow: 2px 2px 15px #ccc;<br /> -webkit-box-shadow: 2px 2px 15px #ccc;<br /> box-shadow: 2px 2px 15px #ccc;<br /> <br /> /*Borders - (Optional)*/<br /> border-left-style: solid;<br /> border-left-width: 15px;<br /> border-right-style: solid;<br /> border-right-width: 2px; <br /> }<br /> <br /> blockquote::before{<br /> content: "\201C"; /*Unicode for Left Double Quote*/<br /> <br /> /*Font*/<br /> font-family: Georgia, serif;<br /> font-size: 60px;<br /> font-weight: bold;<br /> color: #999;<br /> <br /> /*Positioning*/<br /> position: absolute;<br /> left: 10px;<br /> top:5px;<br /> <br /> }<br /> blockquote::after{<br /> /*Reset to make sure*/<br /> content: ";<br /> }<br /> <br /> /*Default Color Palette*/<br /> blockquote.default{ <br /> border-left-color: #656d77;<br /> border-right-color: #434a53; <br /> } <br /> </style><br /> </head><br /> <body><br /> <blockquote class="default"><br /> Some Text...<br /> </blockquote><br /> </body><br /></html><br /></code></pre></div> </div><!-- #tab4 --> </div> <!-- .tab_container --> </div> <style>blockquote{display:block;background:#fff;padding:15px 20px 15px 45px;margin:0 0 20px;position:relative;font-family:Georgia,serif;font-size:14px;line-height:1.2;color:#666;-moz-box-shadow:2px 2px 15px #ccc;-webkit-box-shadow:2px 2px 15px #ccc;box-shadow:2px 2px 15px #ccc;border-left-style:solid;border-left-width:15px;border-right-style:solid;border-right-width:2px}blockquote::before{content:"\201C";font-family:Georgia,serif;font-size:60px;font-weight:700;color:#999;position:absolute;left:10px;top:5px}blockquote::after{content:""}blockquote.default{border-left-color:#656d77;border-right-color:#434a53}blockquote.grapefruit{border-left-color:#ed5565;border-right-color:#da4453}blockquote.bittersweet{border-left-color:#fc6d58;border-right-color:#e95546}blockquote.sunflower{border-left-color:#ffcd69;border-right-color:#f6ba59}blockquote.grass{border-left-color:#9fd477;border-right-color:#8bc163}blockquote.mint{border-left-color:#46cfb0;border-right-color:#34bc9d}blockquote.aqua{border-left-color:#4fc2e5;border-right-color:#3bb0d6}blockquote.bluejeans{border-left-color:#5e9de6;border-right-color:#4b8ad6}blockquote.lavander{border-left-color:#ad93e6;border-right-color:#977bd5}blockquote.pinkrose{border-left-color:#ed87bd;border-right-color:#d870a9}blockquote.light{border-left-color:#f5f7fa;border-right-color:#e6e9ed}blockquote.gray{border-left-color:#ccd1d8;border-right-color:#aab2bc}span.Cdefault{color:#434a53}span.Cgrapefruit{color:#da4453}span.Cbittersweet{color:#e95546}span.Csunflower{color:#f6ba59}span.Cgrass{color:#8bc163}span.Cmint{color:#34bc9d}span.Caqua{color:#3bb0d6}span.Cbluejeans{color:#4b8ad6}span.Clavander{color:#977bd5}span.Cpinkrose{color:#d870a9}span.Clight{color:#e6e9ed}span.Cgray{color:#aab2bc}</style>Pawan Mallhttp://www.blogger.com/profile/13987592121022726798noreply@blogger.com6tag:blogger.com,1999:blog-7681588922431374048.post-87541404350817349472015-01-30T01:55:00.001+05:302015-01-31T03:07:49.601+05:30Responsive CSS3/jQuery tab based container box.<blockquote><h2>This is an example of tab based code view box...This is an example of tab based code view box...Responsive CSS3/jQuery tab based container box.Responsive CSS3/jQuery tab based container box.Responsive CSS3/jQuery tab based container box.</h2></blockquote><br /><br /><div class="myTabs"><ul class="myTabs"> <li class="active" rel="tab1"><i class="fa fa-globe"></i> Demo</li> <li rel="tab2"><i class="fa fa-html5"></i> HTML</li> <li rel="tab3"><i class="fa fa-css3"></i> CSS</li> <li rel="tab4"><i class="fa fa-code"></i> JS</li> <li><a href="http://cssdeck.com/labs/responsive-css3-jquery-tab-based-container-box" target="_blank"><i class="fa fa-edit"></i> Edit Online</a></li> <li><a href="https://docs.google.com/uc?authuser=0&id=0B3vCrMJnZM32LWF5T3U4ajdPUkk&export=download" target="_blank"><i class="fa fa-download"></i> Download</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <iframe src="http://cssdeck.com/labs/full/responsive-css3-jquery-tab-based-container-box//noframe"></iframe> </div><!-- #tab1 --> <div id="tab2" class="tab_content"> <div class="window-body code"><pre class="prettyprint" style="border:none;margin-top:-20px;"><code><br /><div class="myTabs"><br /><ul class="myTabs"> <br /> <li class="active" rel="tab1"> Call of Duty</li><br /> <li rel="tab2"> Mortal Combat</li><br /> <li rel="tab3"> Halo</li><br /> <li rel="tab4"> Portal</li><br /> </ul><br /><br /><div class="tab_container"> <br /><br /> <div id="tab1" class="tab_content"> <br /> <br /> <p><br /> <strong><br /> Call of Duty: Black Ops bears the series' standard superbly,<br /> delivering an engrossing campaign and exciting competitive multiplayer.<br /> </strong><br /> </p><br /><br /> </div><!-- #tab1 --><br /> <div id="tab2" class="tab_content"> <br /><br /> <p><br /> <strong><br /> Mortal Kombat returns after a lengthy hiatus and puts players<br /> back into the Tournament for 2D fighting with gruesome combat.<br /> </strong><br /> </p> <p><br /> <strong><br /> Mortal Kombat returns after a lengthy hiatus and puts players<br /> back into the Tournament for 2D fighting with gruesome combat.<br /> </strong><br /> </p><br /> <p><br /> <strong><br /> Mortal Kombat returns after a lengthy hiatus and puts players<br /> back into the Tournament for 2D fighting with gruesome combat.<br /> </strong><br /> </p> <p><br /> <strong><br /> Mortal Kombat returns after a lengthy hiatus and puts players<br /> back into the Tournament for 2D fighting with gruesome combat.<br /> </strong><br /> </p><br /> </div><!-- #tab2 --><br /> <div id="tab3" class="tab_content"> <br /><br /> <p><br /> <strong><br /> Halo: Reach is the culmination of the superlative combat, sensational<br /> multiplayer, and seamless online integration that are the hallmarks<br /> of this superb series.<br /> </strong><br /> </p><br /><br /> </div><!-- #tab3 --><br /> <div id="tab4" class="tab_content"> <br /><br /> <p><br /> <strong><br /> Portal 2 is an action shooter game from Valve Software that draws <br /> from the original formula of innovative gameplay, story, and music,<br /> which earned the original Portal more than 70 industry accolades.<br /> </strong><br /> </p><br /><br /> </div><!-- #tab4 --> <br /> <br /> </div> <!-- .tab_container --> <br /> <br /></div><br /></code></pre></div> </div><!-- #tab2 --> <div id="tab3" class="tab_content"> <div class="window-body code"><pre class="prettyprint" style="border:none;margin-top:-20px;"><code><br />@import url("http://nvcnr.web44.net/stylesheet/reset.css");<br />@import url("http://fonts.googleapis.com/css?family=Roboto:100");<br />.myTabs { <br /> font-family: 'Roboto', sans-serif;<br /> font-weight: bold;<br /> text-shadow: 0 0 1px rgba(0,0,0,0.5);<br /> margin: 20px;<br /> overflow: hidden;<br /> box-shadow: 4px 6px 10px 0 rgba(0,0,0,0.5);<br /> <br />}<br />ul.myTabs {<br /> margin: 0;<br /> padding: 0;<br /> float: left;<br /> list-style: none;<br /> width: 100%;<br /> font-size: 18px;<br /> }<br /> ul.myTabs li {<br /> float: left;<br /> margin: 0;<br /> cursor: pointer;<br /> padding: 0px 21px ;<br /> height: 31px;<br /> line-height: 31px;<br /> font-weight: bold;<br /> overflow: hidden;<br /> background-color: #FFFFFF;<br /> box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);<br /> }<br /> ul.myTabs li:hover {<br /> background: #CCCCCC;<br /> } <br /> ul.myTabs li.active{<br /> background: rgba(0,0,0,0.1);<br /> }<br /> .tab_container {<br /> clear: both;<br /> float: left; <br /> width: 100%;<br /> background: #FFFFFF;<br /> }<br /> .tab_content {<br /> padding: 20px;<br /> font-size: 1.2em;<br /> display: none;<br /> line-height: 1.5em;<br /> }<br />@media screen and (max-width: 600px) {<br /> ul.myTabs li {<br /> clear:both;<br /> width: 100%;<br /> padding-left:2%;<br /> cursor: pointer;<br /> font-weight: bold;<br /> background-color: #FFFFFF;<br /> box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);<br /> }<br />}<br />@media screen and (max-width: 400px) {<br /> ul.myTabs li {<br /> clear:both;<br /> text-align:center;<br /> width: 100%;<br /> padding-left:2%;<br /> cursor: pointer;<br /> font-weight: bold;<br /> background-color: #FFFFFF;<br /> box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);<br /> }<br />}<br />.myTabs.red { background-color: #E74C3C; }<br />.myTabs.green { background-color: #519E2A; }<br />.myTabs.blue { background-color: #0072C6; }<br />.myTabs.orange { background-color: #FF3D0D; }<br />.myTabs.purple { background-color: #800080; }<br /></code></pre></div> </div><!-- #tab3 --> <div id="tab4" class="tab_content"> <div class="window-body code"><pre class="prettyprint" style="border:none;margin-top:-20px;"><code><br />$(document).ready(function() {<br /><br /> $(".tab_content").hide();<br /> $(".tab_content:first").show(); <br /><br /> $("ul.myTabs li").click(function() {<br /> $("ul.myTabs li").removeClass("active");<br /> $(this).addClass("active");<br /> $(".tab_content").hide();<br /> var activeTab = $(this).attr("rel"); <br /> $("#"+activeTab).fadeIn(); <br /> });<br />});<br /></code></pre></div> </div><!-- #tab4 --> </div> <!-- .tab_container --> </div>Pawan Mallhttp://www.blogger.com/profile/13987592121022726798noreply@blogger.com2Bhagwati Vihar, Block C, Bindapur, New Delhi, Delhi 110059, India28.611687458762756 77.06278857354118428.609944958762757 77.060267073541183 28.613429958762755 77.065310073541184tag:blogger.com,1999:blog-7681588922431374048.post-71194151039651150532015-01-01T05:06:00.001+05:302015-01-31T03:07:58.999+05:30Box Shadow Effect Example - CSS3<blockquote><h1>16 types of shadow effect using CSS3...</h1></blockquote><hr /><hr /><div class="ShadowBoxEffects ShadowBoxEffect1">Shadow Effect - 1</div> <div class="ShadowBoxEffects ShadowBoxEffect2">Shadow Effect - 2 </div><div class="ShadowBoxEffects ShadowBoxEffect3">Shadow Effect - 3 </div><div class="ShadowBoxEffects ShadowBoxEffect4">Shadow Effect - 4 </div><div class="ShadowBoxEffects ShadowBoxEffect5">Shadow Effect - 5 </div><div class="ShadowBoxEffects ShadowBoxEffect6">Shadow Effect - 6 </div><div class="ShadowBoxEffects ShadowBoxEffect7">Shadow Effect - 7 </div><div class="ShadowBoxEffects ShadowBoxEffect8">Shadow Effect - 8 </div><div class="ShadowBoxEffects ShadowBoxEffect9">Shadow Effect - 9 </div><div class="ShadowBoxEffects ShadowBoxEffect10">Shadow Effect - 10 </div><div class="ShadowBoxEffects ShadowBoxEffect11">Shadow Effect - 11 </div><div class="ShadowBoxEffects ShadowBoxEffect12">Shadow Effect - 12 </div><div class="ShadowBoxEffects ShadowBoxEffect13">Shadow Effect - 13 </div><div class="ShadowBoxEffects ShadowBoxEffect14">Shadow Effect - 14 </div><div class="ShadowBoxEffects ShadowBoxEffect15">Shadow Effect - 15 </div><div class="ShadowBoxEffects ShadowBoxEffect16">Shadow Effect - 16 </div>Pawan Mallhttp://www.blogger.com/profile/13987592121022726798noreply@blogger.com1tag:blogger.com,1999:blog-7681588922431374048.post-1789882336919420562015-01-01T01:29:00.000+05:302015-01-29T04:16:40.602+05:30Responsive Customized Youtube Video Player with CSS3<p>Responsive Customized Youtube Video Player with CSS3. It'll help you to show your videos on your website more dynamically. </p> <div class="player"> <iframe src="http://www.youtube.com/embed/O7yrNphM8pU" frameborder="0" allowfullscreen></iframe></div>Pawan Mallhttp://www.blogger.com/profile/13987592121022726798noreply@blogger.com2