Skip to content

Instantly share code, notes, and snippets.

View mightyteja's full-sized avatar
💭
Daring And Dashing

Teja Babu S mightyteja

💭
Daring And Dashing
View GitHub Profile
@mightyteja
mightyteja / codepen-header.markdown
Created February 21, 2019 08:57
Codepen Header
@mightyteja
mightyteja / index.html
Created January 23, 2019 11:03
Story Tiles
<div class="StoryTiles">
<div class="Flex BorderBottom">
<a href="#" class="FlexCell Cell-2 Tablet-2 BorderRight">
<div class="SingleBorder">
<div>
<h2 class="h3">"I am very grateful that now, as an adult, I can educate others."</h2>
<span class="FakeLink">Meet Connor Markwell</span>
</div>
</div>
<img alt="Connor with a big grin" src="//www.envisionus.com/getattachment/60bcd654-b14a-4500-a339-f86a29d5979a/Connor-Markwell">
@mightyteja
mightyteja / index.html
Created January 23, 2019 05:02
Lightbox with zoom (Magnifier)
<!DOCTYPE html>
<html lang="en">
<head>
<title>LightBox</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
@mightyteja
mightyteja / hammer-js-pinch-pan-zoom-image.markdown
Created January 22, 2019 19:11
Hammer JS Pinch Pan Zoom Image
@mightyteja
mightyteja / index.html
Created January 22, 2019 18:50
Zoom + pan the image on hover & mouse move
<div class="tiles">
<div class="tile" data-scale="1.1" data-image="http://ultraimg.com/images/0yS4A9e.jpg"></div>
<div class="tile" data-scale="1.6" data-image="http://ultraimg.com/images/hzQ2IGW.jpg"></div>
<div class="tile" data-scale="2.4" data-image="http://ultraimg.com/images/bNeWGWB.jpg"></div>
</div>
@mightyteja
mightyteja / index.html
Created November 14, 2018 11:32
Pricing table concept
<body class="flex justify-center p-24">
<section class="w-full flex shadow">
<div class="w-full flex justify-between content-center items-center shadow bg-white rounded py-8 px-8">
<!-- first -->
<div class="w-1/3 flex flex-col py-4 text-center">
<div><img src="https://png.icons8.com/nolan/120/000000/home.png"></div>
<p class="py-4 font-bold">Basic</p>
<p class="py-4">Starts at <br> <span>$15</span>/Month</p>
<p class="py-4">No. of posts - 12</p>
<p class="py-4">Fan Aqcuition - N/A</p>
@mightyteja
mightyteja / bootstrap-testimonial-slider-example-1.markdown
Created October 12, 2018 04:38
Bootstrap Testimonial Slider Example 1

Bootstrap Testimonial Slider Example 1

In this minimal testimonial slider built on the top of bootstrap carousel we have we have changed the navigation dots to the faces of testimonial personalities

A Pen by Teja Babu S on CodePen.

License.

@mightyteja
mightyteja / 1529-image-hover.markdown
Created October 3, 2018 05:45
#1529 - Image Hover
@mightyteja
mightyteja / bootstrap-responsive-card-thumbnail.markdown
Created October 3, 2018 05:04
Bootstrap Responsive Card thumbnail

Bootstrap Responsive Card thumbnail

This is component for make list/grid for blog or other

A Pen by Wisnu ST on CodePen.

License.

@mightyteja
mightyteja / index.html
Created September 17, 2018 08:25
zdqso
<body id="page-top" class="index" data-pinterest-extension-installed="cr1.3.4">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>