Merge pull request #252 from snackaholic/develop

add broprocss
surpassinggoogle · Apr 10, 2019 · 4eb7cdc · 4eb7cdc
2 parents 269f8fd + 2cff753
commit 4eb7cdc
Show file tree

Hide file tree

Showing 2 changed files with 135 additions and 52 deletions.
diff --git a/src/client/bropro/Bropro.js b/src/client/bropro/Bropro.js
@@ -1,52 +1,52 @@
-import React from 'react';
-import Brocard from './Brocard';
-//import './bropro.css';
-
-class Bropro extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-  render() {
-    return (
-      <div className="shifted" style={{ margin: 0 }}>
-        <div className="banner">
-          <div className="innerWrapper">
-            <h3>BroPro</h3>
-            <p>
-              BROPRO allows you to exchange teardrops token for more than &apos;just talent&apos;,
-              these ones are un(dis)talented brothers (sisters included) who actually want to play a
-              role in historical history, by helping you through the process of building your
-              dreams.
-            </p>
-          </div>
-        </div>
-        <div className="container">
-          <div className="center" style={{ marginTop: '50px' }}>
-            <h3>BroPro Members</h3>
-            <p>These members are already taking part in BroPro</p>
-            <div className="broproCards">
-              <Brocard
-                name="surpassinggoogle"
-                text="I will provide a 30 min chat session (audio or video) about community/project development and general success."
-                price="100"
-              />
-              <Brocard
-                name="tobias-g"
-                text="I provide a 30 min chat session (audio) to help you design your application UI and provide you guidance surrounding developing your steem front end."
-                price="500"
-              />
-              <Brocard
-                name="ankarlie"
-                text="I will provide a 30 min chat session teaching you about viable crypto investments. We will cover trading, blockchain, free/paid investments, etc."
-                price="100"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default Bropro;
+import React from 'react';
+import Brocard from './Brocard';
+import './bropro.css';
+
+class Bropro extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    return (
+      <div className="shifted" style={{ margin: 0 }}>
+        <div className="banner">
+          <div className="innerWrapper">
+            <h3>BroPro</h3>
+            <p>
+              BROPRO allows you to exchange teardrops token for more than &apos;just talent&apos;,
+              these ones are un(dis)talented brothers (sisters included) who actually want to play a
+              role in historical history, by helping you through the process of building your
+              dreams.
+            </p>
+          </div>
+        </div>
+        <div className="container">
+          <div className="center" style={{ marginTop: '50px' }}>
+            <h3>BroPro Members</h3>
+            <p>These members are already taking part in BroPro</p>
+            <div className="broproCards">
+              <Brocard
+                name="surpassinggoogle"
+                text="I will provide a 30 min chat session (audio or video) about community/project development and general success."
+                price="100"
+              />
+              <Brocard
+                name="tobias-g"
+                text="I provide a 30 min chat session (audio) to help you design your application UI and provide you guidance surrounding developing your steem front end."
+                price="500"
+              />
+              <Brocard
+                name="ankarlie"
+                text="I will provide a 30 min chat session teaching you about viable crypto investments. We will cover trading, blockchain, free/paid investments, etc."
+                price="100"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Bropro;
diff --git a/src/client/bropro/bropro.css b/src/client/bropro/bropro.css
@@ -0,0 +1,83 @@
+.banner {
+    background-color: purple;
+    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.09'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+    color: white;
+    text-align: center;
+    padding: 30px 0;
+}
+
+.banner .innerWrapper {
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.banner .innerWrapper > * {
+    color: #fff !important;
+}
+
+.broproCards {
+    margin: 10px -13px 0px -13px;
+}
+
+.broproCards:after {
+    clear:both;
+    content:'';
+    display:table;
+}
+
+.bro-card-wrapper {
+    padding: 0 13px;
+    float:left;
+}
+
+.bro-card {
+    background: white;
+    padding: 20px;
+    box-shadow: 0 3px 13px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    text-align: center;
+    margin-bottom: 25px;
+    height: 330px;
+    width: 300px;
+}
+
+.bro-card a {
+    display:block;
+    margin-bottom:20px;
+} 
+
+.bro-card h4 {
+    color: purple;
+    font-weight:bold;
+}
+
+.bro-card h6 {
+    margin: 20px;
+    font-size: 14px;
+}
+
+.bro-card img {
+    height: 50px;
+    width: 50px;
+    border-radius: 50%;
+}
+
+.bro-card button {
+    display: inline-block;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid #dcdfe6;
+    color: #606266;
+    -webkit-appearance: none;
+    text-align: center;
+    box-sizing: border-box;
+    outline: 0;
+    margin: 0;
+    transition: .1s;
+    font-weight: 500;
+    padding: 12px 20px;
+    font-size: 14px;
+    border-radius: 4px;
+}