page alignment and div element alignment

Question

So I am trying to build a page like this :

but it looks like this:

I try to use multiple div and also combine Row and Col to do it but it seems a mess. Some changes also do not have any effects.

Code:

import React from 'react';
import TextContents from '../assets/translations/TextContents';
import BlueButton from '../components/materialdesign/BlueButton';
import TeachIcon from '../assets/images/teach-class-icon.svg';
import HostIcon from '../assets/images/host-a-class-icon.svg';

import './CreateClassAndHost.css';
import { Row, Col, Container } from 'react-bootstrap';

class CreateClassAndHost extends React.Component {

    render() {

        const CreateAClass = 
            <Col className="create-tile">
                <div className="create-style-title">
                    <img
                        src= { TeachIcon }
                        className= "create-icon"
                        alt="TeachIcon"
                    />    
                    <h2>{TextContents.BeATeacher}</h2>
                </div>
                <p>{TextContents.BeATeacherDesc}</p>
                <div className="create-button">
                <BlueButton textSize="13" link_href="/createaclass" text={TextContents.BeATeacherBtn} />
                </div>
            </Col>;

        const CreateAHost = 
            <Col className="create-tile">
                <div className="create-style-title">
                    <img
                        src= { HostIcon }
                        className= "create-icon"
                        alt="HostIcon"
                    />  
                    <h2>{TextContents.HostAClass}</h2>
                </div>
                <p>{TextContents.HostAClassDesc}</p>
                <div className="create-button">
                <BlueButton textSize="13" link_href="/createahost" text={TextContents.HostAClassBtn} />
                </div>
            </Col>;
        return (
            <Container bsPrefix="create-container">
                <h1>{TextContents.CreateClassOrHostTitle}</h1>
                <Row classname="create-section">
                    {CreateAClass}
                    {CreateAHost}
                </Row>
            </Container>

        );
    }

}

export default CreateClassAndHost;

Css code :

.create-container {
    margin-top: 8%;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
}

.create-container h1 {
    text-align: center;
    height: 51px;
    margin: auto;
    font-family: Fredoka One;
    font-size: 50px;
    color: #333333;
    width:100%;
}

.create-section {
    width:100%;
}

.create-icon {
    width:47px;
    height:47px ;
}

.create-style-title {

}

.create-tile {
    display: inline-block;
    left: 12px;
    top: 80px;
    text-align: center;
    width: 200px;
    height: 250px;
    background-color: #ffffff;
}


.create-tile h2 {
    font-family: Source Sans Pro;
    font-weight: bold;
    font-size: 30px;
    line-height: 0.7;
    color: #333333;
    letter-spacing: -0.6px;

}

.create-tile p {
    font-family: Source Sans Pro;
    font-size: 20px;
    line-height: 1.6;
    color: #616161;
    width: 280px;
    height: 85px; 
}

.create-button {
    position: relative;
    left: 0px;
    top: 50px;
}

Any idea how to make it looks like the page provide above ?

Also anyone can provide a good resources on how to build properly layout. I would like to also looke at myself on some resource easily showing how to align,.. build...

Thanks

Answer 1

First of all, I would simplify the structure before anything else. Then I would use the :before selector to insert the being icons and set text-align property value for the parent element to center, set a fixed width for the child elements.

#parent {
  text-align: center;
}

.card {
  width: 200px;
  display: inline-block;
  margin: 25px;
}

a {
  display: inline-block;
  height: 36px;
  line-height: 36px;
  font-size: 17px;
  background: blue;
  margin-top: 25px;
  color: white;
  padding: 0 20px;
  border-radius: 36px;
  box-sizing: border-box;
}

h2 {
  position: relative; /* To help control overlap */
}

h2:before {
  content: "accessible_forward"; /* You can also use images as the content */
  font-family: Material Icons;
  position: relative;
  flort: left;
  margin-right: 10px;
}

.card:nth-of-type(2) h2:before {
  content: "anchor";
}

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div id="parent">

  <div class="card">
    <h2>Titlt1</h2>
    <p>
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
    </p>

    <a hred="#">Click me</a>
  </div>

  <div class="card">
    <h2>Titlt2</h2>
    <p>
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
    </p>
    <a hred="#">Click me</a>
  </div>

</div>