LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
@import "https://fonts.googleapis.com/css?family=Abril+Fatface|Roboto";
.App {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  font-family: 'Roboto';
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (max-width: 980px) {
  .App {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.App .Image {
  width: 50vw;
  position: relative;
  background-size: cover;
  background-position: center;
}
@media screen and (max-width: 980px) {
  .App .Image {
    width: 100vw;
    height: 70vh;
  }
}
.App .Profile {
  width: 50vw;
  padding: 5vw 10vw;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  color: #2C2C54;
}
@media screen and (max-width: 980px) {
  .App .Profile {
    width: 100vw;
    height: 30vh;
  }
}
.App .Profile .Name {
  font-size: 6vw;
  font-family: 'Abril Fatface';
  margin-bottom: 4vw;
}
.App .Profile .Bio {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 3vw;
  opacity: .4;
}
.App .Profile .Quote {
  margin-top: auto;
}
.App .Profile .Quote blockquote {
  font-size: 36px;
  font-family: 'Abril Fatface';
  font-style: italic;
  line-height: 1.4;
  margin-bottom: .6em;
}
.App .Profile .Quote .byline {
  font-family: 'Times', serif;
  text-align: right;
  font-size: 22px;
  font-style: italic;
  opacity: .25;
}
JS
var App = React.createClass({
	getDefaultProps: function() {
		return({
			person: {
				name: 'Jack-Edward Oliver',
				biography: '26 year old Designer / Developer living in Stockholm. Originally from Oxford, England. Love to make stuff.',
			},
			image: 'http://static1.squarespace.com/static/55acc005e4b098e615cd80e2/t/57b057398419c2c454f09924/1471025851733/',
			quote: {
				content: 'Beautiful things don\'t ask for attention',
				source: 'The Secret Life of Walter Mitty'
			}
			
		})
	},
	render: function() {
		return(
			
); } }); var Image = React.createClass({ render: function() { return (
); } }); var Profile = React.createClass({ render: function() { return (

{this.props.person.name}

{this.props.person.biography}

“ {this.props.quote.content} ”
— {this.props.quote.source}
); } }); ReactDOM.render(,document.getElementById('app'));
Host Instantly Drag and Drop Website Builder

 

Description

Day 6 of the ReactJS DailyUI project. I'm going to be making 100 different React pens over the next 100 days, in order to get better.
Term
Mon, 11/27/2017 - 21:34

Related Codes

Pen ID
Pen ID
Pen ID