Benerin Css

assets/css/custom.css

@@ -269,4 +269,13 @@ card .formRegis{
    margin-left:7%;
   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,22 +24,47 @@ export default class CourseList extends React.Component {
   }
 
   render = () => (
-    <Grid.Column>
-      <Segment>
-        <h2>Nama : {this.props.data.name}</h2>
-        <Table unstackable>
-          <Table.Header>
-            <Table.Row>
-              <Table.HeaderCell>Mata Kuliah</Table.HeaderCell>
-              <Table.HeaderCell>Nilai</Table.HeaderCell>
-            </Table.Row>
-          </Table.Header>
-
-          <Table.Body>
-            { this.generateCourse() }
-          </Table.Body>
-        </Table>
-      </Segment>
-    </Grid.Column>
+    <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>
+            <Container fluid textAlign="center">
+              <h2> Riwayat Akademik Mahasiswa </h2>
+            </Container>
+            <h3>Nama : {this.props.data.name}</h3>
+            <Table unstackable>
+              <Table.Header>
+                <Table.Row>
+                  <Table.HeaderCell>Mata Kuliah</Table.HeaderCell>
+                  <Table.HeaderCell>Nilai</Table.HeaderCell>
+                </Table.Row>
+              </Table.Header>
+
+              <Table.Body>
+                { this.generateCourse() }
+              </Table.Body>
+            </Table>
+
+          </Grid.Column>
+        </Grid.Row>
+
+      </Grid>
+    </Segment>
   );
 }