Skip to content

Instantly share code, notes, and snippets.

Avatar
:octocat:
In 💗 with React and Vue

Vaibhav Khulbe Kvaibhav01

:octocat:
In 💗 with React and Vue
View GitHub Profile
@Kvaibhav01
Kvaibhav01 / main.dart
Created Mar 17, 2018
Making an instance of Materlal App
View main.dart
void main()
{
runApp(new MaterialApp(
home: home,
));
}
@Kvaibhav01
Kvaibhav01 / homePage.dart
Created Mar 17, 2018
Designing home page of Material App
View homePage.dart
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 Mar 17, 2018
Making a text widget in Flutter
View homePage.dart
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 Mar 17, 2018
Beautifying text in Flutter
View homePage.dart
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 Jun 15, 2018
HTML file for Material ripple effect without JS
View index.html
<!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 / style.css
Created Jun 15, 2018
CSS file for Material ripple effect without JS
View style.css
.container {
background-color: #c1c1c1;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.btn {
background-color: orange;
@Kvaibhav01
Kvaibhav01 / index.html
Created Jun 22, 2018
HTML file for landing page animation demo
View index.html
<!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 Jun 22, 2018
CSS file for landing page animation demo
View style.css
@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 Jul 3, 2018
HTML file for animating with Keyframes extension
View index.html
<!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 Jul 3, 2018
CSS file for animating with Keyframes extension without using the extension
View styleWithoutExtension.css
body{
background: #f1f1f1;
font-family: 'Montserrat', sans-serif;
margin: 0;
}
.container{
background: rgb(103, 170, 89);
padding: 5em;
color: #fff;