styling event card

src/conteiners/eventCard/EventCard.js

@@ -42,25 +42,36 @@ export class EventCard extends React.Component {
                     </div>            
                     <div className="container-wrap">
                         <div className="event-card-info">
-                            <div>
+                            <div className="info-content">
                                 <p><span>Age limit: </span>{event.ageLimit}</p>
-                                <p>{event.aidStations}</p>
-                                <p>{event.awardMedals}</p>
-                                <p>{event.equipmentStorage}</p>
-                                <p>{event.halfmarathoneDistancePrice}</p>
-                                <p>{event.marathoneDistancePrice}</p>
-                                <p>{event.maximumTime}</p>
-                                <p>{event.overview}</p>
-                                <p>{event.parking}</p>
-                                <p>{event.refreshments}</p>
+                                <p><span>Aid stations: </span>{event.aidStations}</p>
+                                <p><span>Award medals: </span>{event.awardMedals}</p>
+                                <p><span>Equipment storage: </span>{event.equipmentStorage}</p>
+
+                                <div className="price">
+                                    <h3>Price</h3>
+                                    <p><span>Half marathone: </span>{event.halfmarathoneDistancePrice}</p>
+                                    <p><span>Marathone: </span>{event.marathoneDistancePrice}</p>
+                                </div>
+                                
+                                <p><span>Maximum time: </span>{event.maximumTime}</p>
+
+                                <div className="overview">
+                                    <p>{event.overview}</p>
+                                </div>
+                                
+                                <p><span>Parking: </span>{event.parking}</p>
+                                <p><span>Refreshments: </span>{event.refreshments}</p>
 
                                 {/*{event.contentVideo}
                                 {event.mainBannerPicture}
                                 {event.map}
                                 */}
                             </div>
-                            <div>
-
+                            <div className="reg-form">
+                                <div className="btn-group">
+                                    <button className="btn" type="button">Register</button>
+                                </div>
                             </div>
                         </div>
                     </div>

src/conteiners/eventCard/eventCard.scss

@@ -75,11 +75,40 @@
     }
 
     &-info {
+        display: flex;
         padding: 5rem 0;
+        margin: 0 -1rem;
 
-        p {
-            font-size: 1.4rem;
-            margin-bottom: 1.5rem;
+        .info-content {
+            width: 50%;
+            padding: 0 1rem;
+
+            .price {
+                margin: 3rem 0;
+            }
+            
+            .overview {
+                margin: 4rem 0;
+            }
+
+            p {
+                font-size: 1.4rem;
+                margin-bottom: 1.5rem;
+
+                span {
+                    font-weight: $bold;
+                }
+            }
+
+            h3 {
+                font-size: 2.4rem;
+                font-weight: $bold;
+            }
+        }
+
+        .reg-form {
+            width: 50%;
+            padding: 0 1rem;
         }
     }
 
@@ -93,5 +122,18 @@
         &-title {
             padding-bottom: 4rem;
         }
+
+        &-info {
+            flex-direction: column;
+        }
+
+        .info-content{
+            margin-bottom: 5rem;
+        }
+
+        .info-content,
+        .reg-form {
+            width: 100%;
+        }
     }
 }

src/styles/custom.scss

@@ -56,4 +56,25 @@ i {
 	overflow: hidden;
 	clip: rect(0,0,0,0);
 	border: 0;
+}
+
+.btn-group {
+    padding: 2rem 0;
+    text-align: center;
+}
+
+.btn {
+    min-width: 12rem;
+    background-color: $color-mint;
+    padding: 0.7rem 1rem;
+    border: none;
+    border-radius: 3px;
+    color: $color-white;
+    font-weight: $semi-bold;
+    font-size: 1.5rem;
+    transition: 0.5s;
+
+    &:hover {
+        background-color: $color-blue;
+    }
 }