New Nav Bar implemented
This commit is contained in:
Luis Fernando Molina committed
1 parent
c43ba98638
commit
eab34e4da2
10 files changed
+219
-62
No files matched your search
@@ -3,10 +3,54 @@ import React from 'react'
|
||||
const Contact = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="container">
|
||||
<h4 className="center">Contact</h4>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae repudiandae repellat illo magni eligendi cupiditate voluptates eius nam voluptate. Incidunt nihil ullam quae quia officia quaerat, deserunt eligendi explicabo totam?</p>
|
||||
<section class="section container scrollspy" id="contact">
|
||||
<div class="row">
|
||||
<div class="col s12 l5">
|
||||
<h2 class="indigo-text text-darken-4">Get in Touch</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
|
||||
<p>Mauris dolor augue, vulputate in pharetra ac, facilisis nec libero. Fusce condimentum gravida urna, vitae scelerisque erat ornare nec.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
|
||||
<p>Mauris dolor augue, vulputate in pharetra ac, facilisis nec libero. Fusce condimentum gravida urna, vitae scelerisque erat ornare nec.</p>
|
||||
</div>
|
||||
<div class="col s12 l5 offset-l2">
|
||||
<form>
|
||||
<div class="input-field">
|
||||
<i class="material-icons prefix">email</i>
|
||||
<input type="email" id="email"/>
|
||||
<label for="email">Your Email</label>
|
||||
</div>
|
||||
<div class="input-field">
|
||||
<i class="material-icons prefix">message</i>
|
||||
<textarea id="message" class="materialize-textarea" cols="20" rows="20"></textarea>
|
||||
<label for="message">Your Message</label>
|
||||
</div>
|
||||
<div class="input-field">
|
||||
<i class="material-icons prefix">date_range</i>
|
||||
<input type="text" id="date" class="datepicker"/>
|
||||
<label for="date">Choose a date you need me for...</label>
|
||||
</div>
|
||||
<div class="input-field">
|
||||
<p>Services required:</p>
|
||||
<p>
|
||||
<label>
|
||||
<input type="checkbox"/>
|
||||
<span>Photography</span>
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label>
|
||||
<input type="checkbox"/>
|
||||
<span>Photo Editing</span>
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
<div class="input-field center">
|
||||
<button class="btn">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,47 +1,99 @@
|
||||
import React, { Component } from 'react'
|
||||
import axios from 'axios'
|
||||
import { Link } from 'react-router-dom'
|
||||
import Pokeball from '../pokeball.png'
|
||||
|
||||
// Images
|
||||
|
||||
import PortraitImage from '../img/portrait.jpg'
|
||||
import CityImage from '../img/city.jpg'
|
||||
import NatureImage from '../img/nature.jpg'
|
||||
import StreetImage from '../img/street.jpg'
|
||||
import StarsImage from '../img/stars.jpg'
|
||||
|
||||
class Home extends Component {
|
||||
state = {
|
||||
posts: []
|
||||
}
|
||||
componentDidMount(){
|
||||
axios.get('https://jsonplaceholder.typicode.com/posts/')
|
||||
.then(res => {
|
||||
console.log(res);
|
||||
this.setState({
|
||||
posts: res.data.slice(0,10)
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
render(){
|
||||
const { posts } = this.state
|
||||
const postList = posts.length ? (
|
||||
posts.map(post => {
|
||||
return (
|
||||
<div className="post card" key={post.id}>
|
||||
<img src={Pokeball} alt="A Pokeball" />
|
||||
<div className="card-content">
|
||||
<Link to={'/' + post.id}>
|
||||
<span className="card-title red-text">{post.title}</span>
|
||||
</Link>
|
||||
<p>{post.body}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<div className="center">No posts to show</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="container home">
|
||||
<h4 className="center">Home</h4>
|
||||
{postList}
|
||||
|
||||
<section className="container section scrollspy" id="photos">
|
||||
<div className="row">
|
||||
<div className="col s12 l4">
|
||||
<img src={PortraitImage} alt="" className="responsive-img materialboxed"></img>
|
||||
</div>
|
||||
<div className="col s12 l6 offset-l1">
|
||||
<h2 className="indigo-text text-darken-4">Portraits</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col s12 l4 offset-l1 push-l7">
|
||||
<img src={CityImage} alt="" className="responsive-img materialboxed"></img>
|
||||
</div>
|
||||
<div className="col s12 l6 offset-l1 pull-l5 right-align">
|
||||
<h2 className="indigo-text text-darken-4">Cityscapes</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col s12 l4">
|
||||
<img src={NatureImage} alt="" className="responsive-img materialboxed"></img>
|
||||
</div>
|
||||
<div className="col s12 l6 offset-l1">
|
||||
<h2 className="indigo-text text-darken-4">Nature</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<div className="parallax-container">
|
||||
<div className="parallax">
|
||||
<img src={StreetImage} alt="" className="responsive-img"></img>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<section className="section container scrollspy" id="services">
|
||||
<div className="row">
|
||||
<div className="col s12 l4">
|
||||
<h2 className="indigo-text text-darken-4">What I do..</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
|
||||
<p>Mauris dolor augue, vulputate in pharetra ac, facilisis nec libero. Fusce condimentum gravida urna, vitae scelerisque erat ornare nec.</p>
|
||||
</div>
|
||||
<div className="col s12 l6 offset-l2">
|
||||
|
||||
<ul className="tabs">
|
||||
<li className="tab col s6">
|
||||
<a href="#photography" className="active indigo-text text-darken-4">Photography</a>
|
||||
</li>
|
||||
<li className="tab col s6">
|
||||
<a href="#editing" className="indigo-text text-darken-4">Editing</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div id="photography" className="col s12">
|
||||
<p className="flow-text indigo-text text-darken-4">Photography</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
|
||||
<p>Mauris dolor augue, vulputate in pharetra ac, facilisis nec libero. Fusce condimentum gravida urna, vitae scelerisque erat ornare nec.</p>
|
||||
</div>
|
||||
<div id="editing" className="col s12">
|
||||
<p className="flow-text indigo-text text-darken-4">Editing</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
|
||||
<p>Mauris dolor augue, vulputate in pharetra ac, facilisis nec libero. Fusce condimentum gravida urna, vitae scelerisque erat ornare nec.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<div className="parallax-container">
|
||||
<div className="parallax">
|
||||
<img src={StarsImage} alt="" className="responsive-img"></img>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,21 +1,46 @@
|
||||
import React from 'react';
|
||||
import { Link, NavLink, withRouter } from 'react-router-dom'
|
||||
import { NavLink, withRouter } from 'react-router-dom'
|
||||
|
||||
const Navbar = (props) => {
|
||||
return (
|
||||
<nav className="nav-wrapper red darken-3">
|
||||
<div className="container">
|
||||
<Link className="brand-logo" to="/">Advanced Algos Users Module</Link>
|
||||
<ul className="right">
|
||||
<li><NavLink exact to="/">Home</NavLink></li>
|
||||
<li><NavLink to='/profile'>Profile</NavLink></li>
|
||||
<li><NavLink to='/browse'>Browse</NavLink></li>
|
||||
<li><NavLink to='/search'>Search</NavLink></li>
|
||||
<li><NavLink to='/contact'>Contact</NavLink></li>
|
||||
<li><NavLink to='/about'>About</NavLink></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<header>
|
||||
<nav className="nav-wrapper transparent">
|
||||
<div className="container">
|
||||
<a href="http://www.advancedalgos.net" className="brand-logo">Advanced Algos Users Module</a>
|
||||
<a href="" className="sidenav-trigger" data-target="mobile-menu">
|
||||
<i className="material-icons">menu</i>
|
||||
</a>
|
||||
<ul className="right hide-on-med-and-down">
|
||||
<li><NavLink exact to="/">Home</NavLink></li>
|
||||
<li><NavLink to='/profile'>Profile</NavLink></li>
|
||||
<li><NavLink to='/browse'>Browse</NavLink></li>
|
||||
<li><NavLink to='/search'>Search</NavLink></li>
|
||||
<li><NavLink to='/contact'>Contact</NavLink></li>
|
||||
<li><NavLink to='/about'>About</NavLink></li>
|
||||
<li><a href="http://modules.advancedalgos.net">Modules</a></li>
|
||||
|
||||
<li><a href="" className="tooltipped btn-floating btn-small indigo darken-4" data-position="bottom" data-tooltip="Instagram">
|
||||
<i className="fab fa-instagram"></i>
|
||||
</a></li>
|
||||
<li><a href="" className="tooltipped btn-floating btn-small indigo darken-4" data-position="bottom" data-tooltip="Facebook">
|
||||
<i className="fab fa-facebook"></i>
|
||||
</a></li>
|
||||
<li><a href="" className="tooltipped btn-floating btn-small indigo darken-4" data-position="bottom" data-tooltip="Twitter">
|
||||
<i className="fab fa-twitter"></i>
|
||||
</a></li>
|
||||
|
||||
</ul>
|
||||
<ul className="sidenav grey lighten-2" id="mobile-menu">
|
||||
<li><NavLink exact to="/">Home</NavLink></li>
|
||||
<li><NavLink to='/profile'>Profile</NavLink></li>
|
||||
<li><NavLink to='/browse'>Browse</NavLink></li>
|
||||
<li><NavLink to='/search'>Search</NavLink></li>
|
||||
<li><NavLink to='/contact'>Contact</NavLink></li>
|
||||
<li><NavLink to='/about'>About</NavLink></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,14 +1,50 @@
|
||||
import React from 'react'
|
||||
import React, { Component } from 'react'
|
||||
import axios from 'axios'
|
||||
import { Link } from 'react-router-dom'
|
||||
import Pokeball from '../pokeball.png'
|
||||
|
||||
const Search = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="container">
|
||||
<h4 className="center">Search</h4>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae repudiandae repellat illo magni eligendi cupiditate voluptates eius nam voluptate. Incidunt nihil ullam quae quia officia quaerat, deserunt eligendi explicabo totam?</p>
|
||||
class Search extends Component {
|
||||
state = {
|
||||
posts: []
|
||||
}
|
||||
componentDidMount(){
|
||||
axios.get('https://jsonplaceholder.typicode.com/posts/')
|
||||
.then(res => {
|
||||
console.log(res);
|
||||
this.setState({
|
||||
posts: res.data.slice(0,10)
|
||||
});
|
||||
})
|
||||
}
|
||||
render(){
|
||||
const { posts } = this.state
|
||||
const postList = posts.length ? (
|
||||
posts.map(post => {
|
||||
return (
|
||||
<div className="post card" key={post.id}>
|
||||
<img src={Pokeball} alt="A Pokeball" />
|
||||
<div className="card-content">
|
||||
<Link to={'/' + post.id}>
|
||||
<span className="card-title red-text">{post.title}</span>
|
||||
</Link>
|
||||
<p>{post.body}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<div className="center">No posts to show</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="container home">
|
||||
<h4 className="center">Search</h4>
|
||||
{postList}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Search
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 642 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 689 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
Reference in new issue
Block a user