<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/chriscates/pen/vKoqqO?depth=everything&order=popularity&page=81&q=shop&show_forks=false" />
<style class="cp-pen-styles">@import "https://fonts.googleapis.com/css?family=Roboto";
body {
margin: 0px;
font-family: Roboto, Arial;
}
body * {
box-sizing: border-box;
}
div#home {
height: 100vh;
overflow: auto;
}
div#home div#header {
background: white;
position: fixed;
left: 0px;
top: 0px;
width: 100vw;
height: 50px;
box-shadow: 0px 0px 15px #cbcbcb;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
div#home div#header h1 {
font-size: 18px;
margin: 0px 0px 0px 15px;
text-align: center;
}
div#home div#header a {
padding: 10px;
font-size: 14px;
cursor: pointer;
}
div#home div#header a:hover {
color: blue;
}
div#home div.content {
width: 500px;
margin: auto;
}
div#home div#about {
padding-top: 65px;
}
div#home div#about h1 {
margin: 0px 0px 15px 0px;
text-align: center;
}
div#home div#about img {
display: block;
margin: auto;
width: 200px;
border-radius: 5px;
box-shadow: 0px 0px 15px #cbcbcb;
}
div#home div#about h2 {
text-align: center;
}
div#home div#about p {
text-align: center;
}
div#home div#pizzas h1 {
text-align: center;
font-size: 24px;
}
div#home div#pizza-gallery {
display: flex;
flex-direction: row;
}
div#home div#pizza-gallery div.item {
width: calc(33.33% - 30px);
margin: 15px;
box-shadow: 0px 0px 15px #cbcbcb;
border-radius: 5px;
}
div#home div#pizza-gallery div.item img {
width: 50%;
display: block;
margin: 15px auto;
border-radius: 5px;
box-shadow: 0px 0px 15px #cbcbcb;
}
div#home div#pizza-gallery div.item p {
text-align: center;
font-size: 18px;
}
div#home div#contact h1 {
text-align: center;
}
div#home div#contact input[type="email"], div#home div#contact textarea {
display: block;
margin: auto;
width: 300px;
border: none;
border-bottom: 1px solid #cbcbcb;
padding: 5px;
font-size: 18px;
}
div#home div#contact textarea {
height: 100px;
}
div#home div#contact button {
display: block;
margin: 15px auto;
width: 300px;
paddding: 10px;
}
</style></head><body>
<div id="root"></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://npmcdn.com/react@15.3.0/dist/react.min.js'></script><script src='https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js'></script>
<script >"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Header = function (_React$Component) {
_inherits(Header, _React$Component);
function Header() {
_classCallCheck(this, Header);
return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
}
Header.prototype.render = function render() {
return React.createElement(
"div",
{ id: "header" },
React.createElement(
"h1",
null,
"The Pizza Shop"
),
React.createElement(
"div",
{ id: "menu" },
React.createElement(
"a",
{ href: "#about" },
"About"
),
React.createElement(
"a",
{ href: "#pizzas" },
"Pizzas"
),
React.createElement(
"a",
{ href: "#contact" },
"Contact"
)
)
);
};
return Header;
}(React.Component);
var Image = function (_React$Component2) {
_inherits(Image, _React$Component2);
function Image() {
_classCallCheck(this, Image);
return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments));
}
Image.prototype.render = function render() {
return React.createElement("img", { src: "http://nitzapizza.com/wp-content/uploads/2011/07/maxresdefault-1.jpg" });
};
return Image;
}(React.Component);
var About = function (_React$Component3) {
_inherits(About, _React$Component3);
function About() {
_classCallCheck(this, About);
return _possibleConstructorReturn(this, _React$Component3.apply(this, arguments));
}
About.prototype.render = function render() {
return React.createElement(
"div",
{ id: "about", className: "content" },
React.createElement(
"h1",
null,
"About The Pizza Shop"
),
React.createElement(Image, null),
React.createElement(
"h2",
null,
"We make awesome pizza"
),
React.createElement(
"p",
null,
"The best Pizza in Toronto, we make any type of pizza that's awesome. We're available anywhere and we travel everywhere!"
)
);
};
return About;
}(React.Component);
var PizzaGalleryItem = function (_React$Component4) {
_inherits(PizzaGalleryItem, _React$Component4);
function PizzaGalleryItem() {
_classCallCheck(this, PizzaGalleryItem);
return _possibleConstructorReturn(this, _React$Component4.apply(this, arguments));
}
PizzaGalleryItem.prototype.render = function render() {
return React.createElement(
"div",
{ className: "item" },
React.createElement(Image, null),
React.createElement(
"p",
null,
this.props.title
)
);
};
return PizzaGalleryItem;
}(React.Component);
var PizzaGallery = function (_React$Component5) {
_inherits(PizzaGallery, _React$Component5);
function PizzaGallery() {
_classCallCheck(this, PizzaGallery);
return _possibleConstructorReturn(this, _React$Component5.apply(this, arguments));
}
PizzaGallery.prototype.render = function render() {
return React.createElement(
"div",
{ id: "pizza-gallery" },
React.createElement(PizzaGalleryItem, { title: "Pizza #1" }),
React.createElement(PizzaGalleryItem, { title: "Pizza #2" }),
React.createElement(PizzaGalleryItem, { title: "Pizza #3" })
);
};
return PizzaGallery;
}(React.Component);
var Pizzas = function (_React$Component6) {
_inherits(Pizzas, _React$Component6);
function Pizzas() {
_classCallCheck(this, Pizzas);
return _possibleConstructorReturn(this, _React$Component6.apply(this, arguments));
}
Pizzas.prototype.render = function render() {
return React.createElement(
"div",
{ id: "pizzas" },
React.createElement(
"h1",
null,
"The type of Pizzas we sell"
),
React.createElement(PizzaGallery, null)
);
};
return Pizzas;
}(React.Component);
var Contact = function (_React$Component7) {
_inherits(Contact, _React$Component7);
function Contact() {
_classCallCheck(this, Contact);
return _possibleConstructorReturn(this, _React$Component7.apply(this, arguments));
}
Contact.prototype.render = function render() {
return React.createElement(
"div",
{ id: "contact" },
React.createElement(
"h1",
null,
"Contact us!"
),
React.createElement("input", { type: "email", placeholder: "Email..." }),
React.createElement("textarea", { placeholder: "Message..." }),
React.createElement(
"button",
null,
"Contact"
)
);
};
return Contact;
}(React.Component);
var Home = function (_React$Component8) {
_inherits(Home, _React$Component8);
function Home() {
_classCallCheck(this, Home);
return _possibleConstructorReturn(this, _React$Component8.apply(this, arguments));
}
Home.prototype.render = function render() {
return React.createElement(
"div",
{ id: "home" },
React.createElement(Header, null),
React.createElement(About, null),
React.createElement(Pizzas, null),
React.createElement(Contact, null)
);
};
return Home;
}(React.Component);
ReactDOM.render(React.createElement(Home, null), document.querySelector("#root"));
//# sourceURL=pen.js
</script>
</body></html>
