Benerin Css

assets/css/custom.css

@@ -270,3 +270,12 @@ card .formRegis{
   margin-top:2%;
   margin-bottom: 0;
 }
+
+.ui.segment.transkrip{
+  margin-left:7%;
+  margin-right:7%;
+}
+
+.ui.segment.kop {
+  line-height: 5px;
+}
\ No newline at end of file

assets/js/components/CourseList.jsx

 import React from 'react';
-import { Grid, Segment, Table } from 'semantic-ui-react';
+import { Grid, Segment, Table, Header, Image, Container } from 'semantic-ui-react';
 import Course from './Course';
+
 export default class CourseList extends React.Component {
 
   static propTypes = {
@@ -23,9 +24,30 @@ export default class CourseList extends React.Component {
   }
 
   render = () => (
+    <Segment className="transkrip">
+      <Grid>
+        <Grid.Row columns={2}>
+          <Grid.Column width={2} >
+            <Image src="/assets/img/UI.png" size="tiny" floated="right" />
+          </Grid.Column>
+          <Grid.Column width={4}>
+            <Segment basic >
+              <h3  style={{ lineHeight: '1%' }}>Universitas Indonesia </h3>
+              <h3  style={{ lineHeight: '1%' }}>Fakultas Ilmu Komputer </h3>
+              <h3  style={{ lineHeight: '1%' }}>Program Studi S1</h3>
+            </Segment>
+          </Grid.Column>
+
+        </Grid.Row>
+        <Container fluid>
+          <hr />
+        </Container>
+        <Grid.Row columns={1}>
           <Grid.Column>
-      <Segment>
-        <h2>Nama : {this.props.data.name}</h2>
+            <Container fluid textAlign="center">
+              <h2> Riwayat Akademik Mahasiswa </h2>
+            </Container>
+            <h3>Nama : {this.props.data.name}</h3>
             <Table unstackable>
               <Table.Header>
                 <Table.Row>
@@ -38,7 +60,11 @@ export default class CourseList extends React.Component {
                 { this.generateCourse() }
               </Table.Body>
             </Table>
-      </Segment>
+
           </Grid.Column>
+        </Grid.Row>
+
+      </Grid>
+    </Segment>
   );
 }