Skip to content

Instantly share code, notes, and snippets.

Avatar
🏠
Working from home

Manntrix

🏠
Working from home
View GitHub Profile
View app.scss
//Variable Example
$main-color : red;
h1{
color:$main-color;
font-size: 20px;
}
// Nested Rules
$bgcolor : #c1c1c1;
View app.js
import React from 'react';
import './App.scss';
function App() {
return (
<>
{/* Variable Example */}
<h1>This is a variable example</h1>
{/* Nested Rules */}
View app.js
import React from 'react'
import { StyleSheet, View, Text } from 'react-native'
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.dummyText}>Create your first React Native App</Text>
</View>
)
}
View app.js
import React from 'react'
import { StyleSheet, View, Text } from 'react-native'
export default function App() {
return (
<View>
<Text style={styles.dummyText}>Create your first React Native App</Text>
</View>
)
}
View app.js
import React, { Component } from 'react'
import Header from './components/header'
import MiddleSection from './components/middleSection'
export default class App extends Component {
render() {
return (
<>
<Header/>
<MiddleSection/>
View header.js
import React, { Component } from 'react'
import {Link} from 'react-scroll'
export default class header extends Component {
render() {
return (
<ul style={{display: 'flex', listStyle: 'none', justifyContent: 'space-around'}}>
<li><Link activeClass="active" to="home" spy={true} smooth={true}>Home</Link></li>
<li><Link to="about" spy={true} smooth={true}>About</Link></li>
<li><Link to="contact" spy={true} smooth={true}>Contact</Link></li>
View middleSection.js
import React, { Component } from 'react'
export default class middleSection extends Component {
render() {
return (
<>
<div id="home" style={{height: 500}}>
<h1>This is Home section</h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, repellendus. Totam nihil similique a repellat minus dolor amet quasi. Corporis nulla quaerat iste, sed quasi ab dolorem maxime minima animi.
</div>
View header.js
import React, { Component } from 'react'
export default class header extends Component {
render() {
return (
<ul style={{display: 'flex', listStyle: 'none', justifyContent: 'space-around'}}>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Service</li>
View header.js
import React, { Component } from 'react'
import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import Col from 'react-bootstrap/Col'
import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import './header.css'
import { Link } from "react-scroll";
export default class header extends Component {
View responsive.css
@media (max-width: 992px) {
.main-banner .caption h2 {
font-size: 32px;
}
.main-button a{
font-size: 12px;
padding: 10px 15px;
}
.section-heading{
You can’t perform that action at this time.