Skip to content

Instantly share code, notes, and snippets.

View Kvaibhav01's full-sized avatar
:octocat:
In 💗 with React and Next

Vaibhav Khulbe Kvaibhav01

:octocat:
In 💗 with React and Next
202 followers · 456 following
View GitHub Profile
@Kvaibhav01
Kvaibhav01 / main.dart
Created March 17, 2018 18:18
Making an instance of Materlal App
void main()
{
runApp(new MaterialApp(
home: home,
));
}
@Kvaibhav01
Kvaibhav01 / homePage.dart
Created March 17, 2018 18:33
Designing home page of Material App
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget
{
@override
Widget build(BuildContext context)
{
return new Material(
color: Colors.blue,
);
@Kvaibhav01
Kvaibhav01 / homePage.dart
Last active March 17, 2018 19:15
Making a text widget in Flutter
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget
{
@override
Widget build(BuildContext context)
{
return new Material(
color: Colors.blue,
child: new InkWell(
@Kvaibhav01
Kvaibhav01 / homePage.dart
Created March 17, 2018 19:41
Beautifying text in Flutter
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget
{
@override
Widget build(BuildContext context)
{
return new Material(
color: Colors.blue,
child: new InkWell(
@Kvaibhav01
Kvaibhav01 / index.html
Created June 15, 2018 14:54
HTML file for Material ripple effect without JS
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title>Material Ripple Effect</title>
</head>
<body>
@Kvaibhav01
Kvaibhav01 / index.html
Created June 22, 2018 08:05
HTML file for landing page animation demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CRYPTS-landing page</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
@Kvaibhav01
Kvaibhav01 / style.css
Created June 22, 2018 08:07
CSS file for landing page animation demo
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,700'); /* import Montserrat font */
body, html{
font-family: 'Montserrat', sans-serif;
height: 100;
margin: 0;
}
body{
background: #F4F4F4 url('../assets/candlebg.svg');
@Kvaibhav01
Kvaibhav01 / index.html
Created July 3, 2018 18:14
HTML file for animating with Keyframes extension
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Animate with extension</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
@Kvaibhav01
Kvaibhav01 / styleWithoutExtension.css
Created July 3, 2018 18:21
CSS file for animating with Keyframes extension without using the extension
body{
background: #f1f1f1;
font-family: 'Montserrat', sans-serif;
margin: 0;
}
.container{
background: rgb(103, 170, 89);
padding: 5em;
color: #fff;
@Kvaibhav01
Kvaibhav01 / animationCSS.css
Created July 3, 2018 19:03
CSS animation code snippet for animating with Keyframes extension
@keyframes divAnimation{
0%{
transform: rotate(0) translateY(-15%);
opacity: 0;
}
100%{
transform: rotate(0) translateY(0%);
opacity: 1;
}
}