Fakultas Ilmu Komputer UI
Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
ppl-fasilkom-ui
2020
PPL-C
Diskominfo-D'Blood
Mantan Aab-D Blood
Commits
81ae7182
Commit
81ae7182
authored
Jun 02, 2020
by
Dhita Putri Pratama
Browse files
[REFACTOR] add hover
parent
fa6a22b3
Pipeline
#48752
failed with stages
in 3 minutes and 52 seconds
Changes
3
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
frontend/src/pages/edukasi.css
0 → 100644
View file @
81ae7182
.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
;
}
frontend/src/pages/edukasi.js
View file @
81ae7182
...
...
@@ -7,6 +7,7 @@ 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
(
...
...
@@ -40,25 +41,33 @@ const Education = () => {
<
/Col
>
<
Col
sm
=
{
4
}
>
<
Row
className
=
"
my-5
"
>
<
Col
className
=
"
thumbnail text-center
"
>
<
img
src
=
{
news_image_2
}
className
=
"
img-fluid rounded mx-auto d-block
"
><
/img
>
<
Col
className
=
"
text-white caption
"
>
Syarat
dan
Ketentuan
Donor
Darah
dari
PMI
:
Batas
Usia
-
Berat
Badan
<
/Col
>
<
/Col
>
<
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
className
=
"
my-5
"
>
<
Col
className
=
"
thumbnail text-center
"
>
<
img
src
=
{
news_image_3
}
className
=
"
img-fluid rounded mx-auto d-block
"
><
/img
>
<
Col
className
=
"
text-white caption
"
>
Donor
darah
di
Depok
<
/Col
>
<
/Col
>
<
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
>
...
...
frontend/src/styles/global.css
View file @
81ae7182
...
...
@@ -240,7 +240,7 @@ body {
.caption
{
position
:
absolute
;
top
:
4
5%
;
top
:
7
5%
;
left
:
0
;
width
:
100%
;
}
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment