Adding style

lucpod · Sep 9, 2017 · 4523dba · 4523dba
1 parent 69fce8f
commit 4523dba
Show file tree

Hide file tree

Showing 10 changed files with 361 additions and 53 deletions.
diff --git a/src/components/Hero/index.js b/src/components/Hero/index.js
@@ -1,14 +1,14 @@
 import { h } from 'preact'
 
 const Hero = () =>
-  (<section className='hero is-primary'>
+  (<section id='hero' className='section hero is-primary'>
     <div className='hero-body'>
       <div className='container'>
-        <h1 className='title'>
+        <h1>
           It’s time to move to SERVERLESS
         </h1>
         <h2 className='subtitle'>
-          Effective Serverless, AWS Lambda, Node.js training
+          Effective Serverless, AWS Lambda and Node.js training
         </h2>
       </div>
     </div>

diff --git a/src/components/Instructors/Instructors.js b/src/components/Instructors/Instructors.js
@@ -3,7 +3,7 @@ import Instructor from './Instructor'
 import instructors from './data'
 
 const Instructors = () => (
-  <section id='instructors' className='instructors'>
+  <section id='instructors' className='section instructors'>
     <div className='container'>
       <div className='content'>
         <h2>Our Instructors</h2>

diff --git a/src/components/Menu/index.js b/src/components/Menu/index.js
@@ -1,4 +1,7 @@
 import { h, Component } from 'preact'
+import planetaryIcon from '../icons/planetarysystem.svg'
+import galaxyIcon from '../icons/galaxy.svg'
+import scientistIcon from '../icons/scientistavatar.svg'
 
 class Menu extends Component {
   constructor (props) {
@@ -15,37 +18,42 @@ class Menu extends Component {
 
   render () {
     return (
-      <nav className='navbar '>
-        <div className='navbar-brand'>
-          <a className='navbar-item' href='/'>Serverlesslab.com</a>
+      <div style={{borderBottom: '3px solid #FA016D'}}>
+        <nav className='navbar'>
+          <div className='navbar-brand'>
+            <a className='navbar-item' href='/'>Serverlesslab.com</a>
 
-          <div onClick={this._burgerClick}
-            className={`navbar-burger ${this.state.burgerActive ? 'is-active' : ''}`}
-            data-target='navMenu-main'
-          >
-            <span>&nbsp;</span>
-            <span>&nbsp;</span>
-            <span>&nbsp;</span>
+            <div onClick={this._burgerClick}
+              className={`navbar-burger ${this.state.burgerActive ? 'is-active' : ''}`}
+              data-target='navMenu-main'
+            >
+              <span>&nbsp;</span>
+              <span>&nbsp;</span>
+              <span>&nbsp;</span>
+            </div>
           </div>
-        </div>
 
-        <div id='navMenu-main' className={`navbar-menu ${this.state.burgerActive ? 'is-active' : ''}`}>
-          <div className='navbar-start'>
-            <a className='navbar-item ' href='#why-serverless'>
-              Why Serverless?
-            </a>
-            <a className='navbar-item ' href='#curricula'>
-              Curricula
-            </a>
-            <a className='navbar-item ' href='#instructors'>
-              Instructors
-            </a>
-            <a className='navbar-item ' href='#talk-with-us'>
-              Talk with us
-            </a>
+          <div id='navMenu-main' className={`navbar-menu ${this.state.burgerActive ? 'is-active' : ''}`}>
+            <div className='navbar-start'>
+              <a className='navbar-item ' href='#value-proposition'>
+                <img src={planetaryIcon} style={{width: '1em', height: '1em'}} />&nbsp;Our offer
+              </a>
+              <a className='navbar-item ' href='#why-serverless'>
+                <img src={galaxyIcon} style={{width: '1em', height: '1em'}} />&nbsp;Why Serverless?
+              </a>
+              <a className='navbar-item ' href='#curricula'>
+                <img src={galaxyIcon} style={{width: '1em', height: '1em'}} />&nbsp;Curricula
+              </a>
+              <a className='navbar-item ' href='#instructors'>
+                <img src={scientistIcon} style={{width: '1em', height: '1em'}} />&nbsp;Instructors
+              </a>
+              <a className='navbar-item ' href='#talk-with-us'>
+                <img src={galaxyIcon} style={{width: '1em', height: '1em'}} />&nbsp;Talk with us
+              </a>
+            </div>
           </div>
-        </div>
-      </nav>
+        </nav>
+      </div>
     )
   }
 }

diff --git a/src/components/Site.js b/src/components/Site.js
@@ -1,6 +1,7 @@
 import { h, render } from 'preact'
 import HTMLDocument from './HTMLDocument'
 import bulma from 'bulma/css/bulma.css'
+import style from '../style.css'
 import Menu from './Menu'
 import Hero from './Hero'
 import ValueProposition from './ValueProposition'
@@ -25,7 +26,7 @@ const Site = ({assets}) => (
     metatags={[
       { name: 'description', content: 'Serverless workshops from serverless and AWS experts' }
     ]}
-    stylesheets={[ bulma ]}
+    stylesheets={[ bulma, style ]}
     scripts={[ `${assets.main}` ]}
   >
     <div id='main'>

diff --git a/src/components/ValueProposition/index.js b/src/components/ValueProposition/index.js
@@ -1,28 +1,40 @@
 import { h } from 'preact'
 
+import planetaryIcon from '../icons/planetarysystem.svg'
+
 const ValueProposition = () =>
-  (<section id='value-proposition' className='value-proposition'>
+  (<section id='value-proposition' className='section value-proposition'>
     <div className='container'>
       <div className='content'>
-        <h2>Serverless Lab has designed a training curriculum to
-        &nbsp;get your organisation ready to work with serverless.</h2>
-        <p>
-          Serverless Lab covers all the topics needed to build enterprise
-          &nbsp;ready applications taking advantage of the Serverless paradigm and the
-          &nbsp;<strong>AWS cloud infrastructure</strong>.<br />
-          &nbsp;Our practical curriculum includes the main serverless technologies like
-          &nbsp;<strong>Lambda Functions</strong>,
-          &nbsp;<strong>API gateway</strong>,
-          &nbsp;<strong>Dynamo DB</strong>,
-          &nbsp;<strong>S3</strong>,
-          &nbsp;<strong>RDS</strong>,
-          &nbsp;<strong>Cloudwatch</strong> and covers a variety of topics from the basic
-          &nbsp;to advanced topics like
-          &nbsp;<strong>networking</strong>,
-          &nbsp;<strong>performance</strong>,
-          &nbsp;<strong>security</strong>,
-          &nbsp;<strong>troubleshooting</strong> and <strong>continuous delivery</strong>.
-        </p>
+        <h1 className='title'>Our offer</h1>
+      </div>
+      <div className='columns'>
+        <div className='column is-three-quarters'>
+          <div className='content'>
+            <h2>Serverless Lab has designed a training curriculum to
+            &nbsp;get your organisation ready to work with serverless.</h2>
+            <p>
+              Serverless Lab covers all the topics needed to build enterprise
+              &nbsp;ready applications taking advantage of the Serverless paradigm and the
+              &nbsp;<strong>AWS cloud infrastructure</strong>.<br />
+              Our practical curriculum includes the main serverless technologies like
+              &nbsp;<strong>Lambda Functions</strong>,
+              &nbsp;<strong>API gateway</strong>,
+              &nbsp;<strong>Dynamo DB</strong>,
+              &nbsp;<strong>S3</strong>,
+              &nbsp;<strong>RDS</strong>,
+              &nbsp;<strong>Cloudwatch</strong> and covers a variety of topics from the basic
+              &nbsp;to advanced topics like
+              &nbsp;<strong>networking</strong>,
+              &nbsp;<strong>performance</strong>,
+              &nbsp;<strong>security</strong>,
+              &nbsp;<strong>troubleshooting</strong> and <strong>continuous delivery</strong>.
+            </p>
+          </div>
+        </div>
+        <div className='column'>
+          <img src={planetaryIcon} style={{width: '100%', maxWidth: '10em'}} />
+        </div>
       </div>
     </div>
   </section>)

diff --git a/src/components/WhyServerless/index.js b/src/components/WhyServerless/index.js
@@ -1,7 +1,7 @@
 import { h } from 'preact'
 
 const Hero = () =>
-  (<section id='why-serverless' className='why-serverless'>
+  (<section id='why-serverless' className='section why-serverless'>
     <div className='container'>
       <div className='content'>
         <h2>Why is time to jump into serverless?</h2>