Fakultas Ilmu Komputer UI

Commit 18960c55 authored by Muhammad Fairuzi Teguh's avatar Muhammad Fairuzi Teguh
Browse files

Merge branch 'PBI-7/edukasi_page' of...

Merge branch 'PBI-7/edukasi_page' of https://gitlab.cs.ui.ac.id/ppl-fasilkom-ui/2020/ppl-c/diskominfo-d-blood/mantan-aab-d-blood into PBI-7/integrasi_edukasi
parents 1f07e733 81ae7182
......@@ -31,6 +31,7 @@ const Navbar = () => {
<Nav className="mr-auto">
<NavLink to="/">Home</NavLink>
<NavLink to="/jadwal-donor">Jadwal Donor</NavLink>
<NavLink to="/edukasi">Edukasi</NavLink>
<Button
variant="red-transparent"
onClick={
......
......@@ -32,6 +32,7 @@ describe(`Navbar`, () => {
const { container } = render(<Navbar />)
expect(container).toHaveTextContent("Home")
expect(container).toHaveTextContent("Jadwal Donor")
expect(container).toHaveTextContent("Edukasi")
})
})
......
.column {
margin: 15px 15px 0;
padding: 0;
}
.column:last-child {
padding-bottom: 60px;
}
.column::after {
content: "";
clear: both;
display: block;
}
.column div {
position: relative;
float: left;
width: 300px;
height: 200px;
margin: 0 0 0 25px;
padding: 0;
}
.column div:first-child {
margin-left: 0;
}
.column div span {
position: absolute;
bottom: -70px;
left: 0;
z-index: -1;
display: block;
width: 300px;
margin: 0;
padding: 0;
color: #444;
font-size: 18px;
text-decoration: none;
text-align: center;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
opacity: 0;
}
figure {
width: 300px;
height: 200px;
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
}
figure:hover + span {
bottom: -55px;
opacity: 1;
}
import React from "react"
import { Container, Col, Row } from "react-bootstrap"
import Layout from "../components/layout"
import SEO from "../components/seo"
import news_image_1 from "../images/education-1.png"
import news_image_2 from "../images/education-2.jpg"
import news_image_3 from "../images/education-3.jpg"
import "./index.css"
import "../styles/global.css"
import "./edukasi.css"
const Education = () => {
return (
<Layout navbar>
<SEO title="Edukasi - Ini yang perlu diketahui tentang Donor Darah" />
<Container>
<Row>
<Col sm={8}>
<Row>
<h3 id="title">
<b className="text-red">
Ini yang perlu diketahui mengenai golongan darah
</b>
</h3>
<img
src={news_image_1}
className="img-fluid rounded mx-auto d-block"
></img>
</Row>
<Row>
<Col className="bg-cream mx-3 py-5 my-5 text-justify">
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 ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</Col>
</Row>
</Col>
<Col sm={4}>
<Row className="my-5">
<div class="column">
<div>
<figure>
<img
src={news_image_2}
className="img-fluid rounded mx-auto d-block"
/>
</figure>
<span>
Syarat dan Ketentuan Donor Darah dari PMI: Batas Usia -
Berat
</span>
</div>
</div>
</Row>
<Row>
<div class="column">
<div>
<figure>
<img
src={news_image_3}
className="img-fluid rounded mx-auto d-block"
/>
</figure>
<span>Donor Darah di Depok</span>
</div>
</div>
</Row>
</Col>
</Row>
</Container>
</Layout>
)
}
export default Education
import Education from "./edukasi"
import "@testing-library/react"
import { render } from "../utils/test-util"
import React from "react"
describe(`Education`, () => {
it(`shows the page`, () => {
const { container } = render(<Education />)
expect(container).toHaveTextContent(
"Ini yang perlu diketahui mengenai golongan darah"
)
expect(container).toHaveTextContent(
"Syarat dan Ketentuan Donor Darah dari PMI: Batas Usia - Berat Badan"
)
expect(container).toHaveTextContent("Donor darah di Depok")
})
})
......@@ -234,6 +234,17 @@ body {
content: "⚠ ";
}
.thumbnail {
position: relative;
}
.caption {
position: absolute;
top: 75%;
left: 0;
width: 100%;
}
#title {
text-align: center;
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment