So I am trying to build a page 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 } 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 (
<div className="create-container">
<h1>{TextContents.CreateClassOrHostTitle}</h1>
<Row classname="create-section">
{CreateAClass}
{CreateAHost}
</Row>
</div>
);
}
}
export default CreateClassAndHost;
Css code :
.create-container {
width: 80%;
position: absolute;
display: flex;
text-align: center;
margin-top:5%;
margin-bottom: 5%;
}
.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
Go to Source
Author: Seb