Line 1: | Line 1: | ||
{{IGEM_TopBar}} | {{IGEM_TopBar}} | ||
{{AUC-EGYPT}} | {{AUC-EGYPT}} | ||
+ | |||
+ | <head> | ||
+ | <style> | ||
+ | @import url('https://fonts.googleapis.com/css?family=Amatic+SC&display=swap'); | ||
+ | |||
+ | * { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | body { | ||
+ | /*background-image: linear-gradient(to bottom right, #436B95, #001F46);*/ | ||
+ | background-color: #080727; | ||
+ | } | ||
+ | html { | ||
+ | height: 100%; | ||
+ | } | ||
+ | body { | ||
+ | height: 100%; | ||
+ | margin: 0; | ||
+ | background-repeat: no-repeat; | ||
+ | background-attachment: fixed; | ||
+ | } | ||
+ | #gif { | ||
+ | width: 80%; | ||
+ | } | ||
+ | |||
+ | .page { | ||
+ | margin: 0; | ||
+ | padding:50px; | ||
+ | text-align: center; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | .title { | ||
+ | margin: 12px; | ||
+ | font-size: 1.5em; | ||
+ | font-family: 'Amatic SC', cursive; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | .slideshow-container { | ||
+ | /*max-width: 645px; | ||
+ | max-height: 380px;*/ | ||
+ | |||
+ | position:relative; | ||
+ | margin: auto; | ||
+ | /*border: 5px solid #001f3f; | ||
+ | box-shadow: 0 0 10px #001f3f; | ||
+ | border-radius: 10px;*/ | ||
+ | } | ||
+ | |||
+ | .slide-container { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .prev, .next { | ||
+ | cursor: pointer; | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | width: auto; | ||
+ | padding: 16px; | ||
+ | color: white; | ||
+ | font-weight: bold; | ||
+ | font-size: 20px; | ||
+ | transition: 0.6s ease; | ||
+ | border-radius: 0 3px 3px 0; | ||
+ | user-select: none; | ||
+ | } | ||
+ | |||
+ | .prev { | ||
+ | left: 0; | ||
+ | border-radius: 3px 0 0 3px; | ||
+ | } | ||
+ | |||
+ | .next { | ||
+ | right: 0; | ||
+ | border-radius: 3px 0 0 3px; | ||
+ | } | ||
+ | |||
+ | .prev:hover, .next:hover { | ||
+ | background-color: rgba(0,0,0,0.6); | ||
+ | } | ||
+ | |||
+ | .slide-number { | ||
+ | color: #f2f2f2; | ||
+ | background-color: rgba(0,0,0,0.6); | ||
+ | font-size: 12px; | ||
+ | padding: 8px 12px; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | } | ||
+ | |||
+ | .slide-img { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .slide-caption { | ||
+ | color: #f2f2f2; | ||
+ | background-color: #001f3f; | ||
+ | opacity: 0.7; | ||
+ | border-radius: 0 15px 15px 0; | ||
+ | font-size: 15px; | ||
+ | padding: 8px 12px; | ||
+ | position: absolute; | ||
+ | bottom: 8px; | ||
+ | width: 90%; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | .slide-selector { | ||
+ | padding: 10px; | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
<html> | <html> | ||
Line 6: | Line 121: | ||
<div class="page"> | <div class="page"> | ||
− | + | ||
− | + | ||
<div class="slideshow-container"> | <div class="slideshow-container"> | ||
Revision as of 22:01, 24 October 2020
<head> <style> @import url('https://fonts.googleapis.com/css?family=Amatic+SC&display=swap');
- {
margin: 0; padding: 0; } body {
/*background-image: linear-gradient(to bottom right, #436B95, #001F46);*/ background-color: #080727;
} html {
height: 100%;
} body {
height: 100%; margin: 0; background-repeat: no-repeat; background-attachment: fixed;
}
- gif {
width: 80%;
}
.page { margin: 0; padding:50px; text-align: center;
}
.title {
margin: 12px;
font-size: 1.5em;
font-family: 'Amatic SC', cursive;
color: white;
}
.slideshow-container { /*max-width: 645px; max-height: 380px;*/
position:relative; margin: auto; /*border: 5px solid #001f3f; box-shadow: 0 0 10px #001f3f; border-radius: 10px;*/ }
.slide-container { display: none; }
.prev, .next { cursor: pointer; position: absolute;
top: 50%; width: auto; padding: 16px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none;
}
.prev {
left: 0; border-radius: 3px 0 0 3px;
}
.next {
right: 0; border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.6);
}
.slide-number {
color: #f2f2f2;
background-color: rgba(0,0,0,0.6);
font-size: 12px; padding: 8px 12px; position: absolute;
top: 0; }
.slide-img { width: 100%; }
.slide-caption { color: #f2f2f2; background-color: #001f3f; opacity: 0.7; border-radius: 0 15px 15px 0;
font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 90%;
text-align: left; }
.slide-selector { padding: 10px; } </style> </head>