Posts

Showing posts from September, 2019

React.js

https://github.com/Gspatelw3/react-app/tree/master // Insert background Image in react component <div className="bannerBox" style={{'backgroundImage': 'url('+(process.env.PUBLIC_URL)+'/img/banner.jpg)'}}> // Particlejs in react component import React, { Component } from 'react'; import Particles from 'react-particles-js'; const particleOps = {    particles: {       color: {          value: '#f90',       },       number: {          value: 150,          density: {             enable: true,             value_area: 600          }       },       opacity: {          value: 1,       },    },    interactivity: {       detect_on: 'canvas',   ...

Sass varibale

// Page$page-bg: #fff; // Width $width-base: 1140px; // Colors $color-error: #d9534f; $color-success: #74ad58; $color-info: #5bc0de; $color-orange: #f07f16; $color-primary: #4d2f48; $color-white: #fff; $color-black: #000; $color-gray: #eee; // Breakpoints $breakpoint-small: 575px; $breakpoint-phone: 767px; $breakpoint-tablet: 991px; $breakpoint-desktop: 1199px; $base-duration: 0.35s;$base-timing: ease-in-out; // # Typography // =============================================== */ $text-color-base: #000; $text-color-orange: #f07f16; $text-color-white: #fff; $text-color-primary: #4d2f48; $text-color-gray: #eee; $text-color-gray-alt: #e5e5e5; $link-color-base: #f07f16; $link-decoration-base: none; $link-hover-color-base: $text-color-base; $link-hover-decoration-base: none; $font-family-base: 'Fira Sans', sans-serif; $font-size-base: 18px; $font-size-h1: 42px; $font-size-h2: 30px; $font-size-h3: 24px; $font-size-h4: 20px; $font-size-h5: 18...

reset.css

* { margin: 0; padding: 0; box-sizing: border-box; } body { color: #000; font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: Arial, Helvetica, sans-serif;  -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; background: #fff;  } a { text-decoration: none; color: #f90; transition: 0.3s ease-in-out; } a:hover { color: #000; } img { max-width: 100%; height: auto; border: 0; display: block; } /* Typography */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.1; margin: 0 0 10x; } h1 { font-size: 40px; } h2 { font-size: 35px; } h3 { font-size: 30px; } h4 { font-size: 25px; } h5 { font-size: 20px; } h6 { font-size: 18px; } p { margin-bottom: 20px; } /* Button */ .button { padding: 5px 20px; height: 45px; border: 0; outline: none; cursor: pointer; transition: 0.3s ease-in-out; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; bac...