gallery

static/photowall.css

+.hr-edge-weak {
+    border: 0;
+    padding-top: 1px;
+    background: linear-gradient(to right, transparent, #d0d0d5, transparent);
+}
+
+.photowall{
+	width:60vw; 
+	height:80vh; 
+	margin:60px auto; 
+	position:relative;
+}
+
+.photowall img{
+	padding:10px 10px 15px; 
+	background:white; 
+	border:1px solid #ddd; 
+	box-shadow:2px 2px 3px rgba(50, 50, 50, 0.4);
+	-webkit-transition:all 0.5s ease-in;
+	-moz-transition:all 0.5s ease-in;
+	transition:all 0.5s ease-in;
+	position:absolute; 
+	z-index:1;
+	max-width: 30vw;
+	max-height: 30vh;
+}
+
+.photowall img:hover{
+	box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4); 
+	-webkit-transform:rotate(0deg) scale(1.20); 
+	-moz-transform:rotate(0deg) scale(1.20); 
+	transform:rotate(0deg) scale(1.20); 
+	z-index:2;
+}
+
+.photowall #photowallpic10:hover{
+	box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4); 
+	-webkit-transform:rotate(-180deg) scale(1.20); 
+	-moz-transform:rotate(-180deg) scale(1.20); 
+	transform:rotate(-180deg) scale(1.20); 
+	z-index:2;
+}
+
+.photowall .pic1{
+	left: 400px; 
+	top: 0; 
+	-webkit-transform: rotate(-5deg); 
+	-moz-transform: rotate(-5deg); 
+	transform: rotate(-5deg);
+}
+
+.photowall .pic2{
+	top: 0; 
+	left: 600px; 
+	-webkit-transform: rotate(-20deg); 
+	-moz-transform: rotate(-20deg); 
+	transform: rotate(-20deg);
+}
+
+.photowall .pic3
+{
+	bottom: 0; 
+	right: 0; 
+	-webkit-transform: rotate(5deg); 
+	-moz-transform: rotate(5deg); 
+	transform: rotate(5deg);
+}
+	
+.photowall .pic4
+{
+	bottom:0; 
+	left:300px; 
+	-webkit-transform: rotate(-10deg); 
+	-moz-transform: rotate(-10deg); 
+	transform: rotate(-10deg);
+}
+
+.photowall .pic5
+{
+	bottom: 130px; 
+	left: 0; 
+	-webkit-transform: rotate(-10deg); 
+	-moz-transform: rotate(-10deg); 
+	transform: rotate(-10deg);
+}
+
+.photowall .pic6
+{
+	top: 0; 
+	left:0; 
+	-webkit-transform: rotate(10deg); 
+	-moz-transform: rotate(10deg); 
+	transform: rotate(10deg);
+}
+
+.photowall .pic7
+{
+	top: 200px; 
+	left: 350px; 
+	-webkit-transform: rotate(20deg); 
+	-moz-transform: rotate(20deg); 
+	transform: rotate(20deg);
+}
+
+.photowall .pic8
+{
+	bottom: -20px; 
+	right: 630px; 
+	-webkit-transform: rotate(5deg); 
+	-moz-transform: rotate(5deg); 
+	transform: rotate(5deg);
+}
+
+.photowall .pic9
+{
+	top: 90px; 
+	left: 550px; 
+	-webkit-transform: rotate(15deg); 
+	-moz-transform: rotate(15deg); 
+	transform: rotate(15deg);
+}
+
+.photowall .pic10
+{
+	left:180px; 
+	top:20px; 
+	-webkit-transform: rotate(-190deg); 
+	-moz-transform: rotate(-190deg); 
+	transform: rotate(-190deg);
+}
\ No newline at end of file

wiki/layout.html

@@ -15,6 +15,7 @@
     <link href="{{ url_for('static', filename = 'navbar.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', filename = 'frame.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', filename = 'main.css') }}" rel="stylesheet">
+    <link href="{{ url_for('static', filename = 'photowall.css') }}" rel="stylesheet">
 
     <script src="{{ url_for('static', filename = 'inner.js') }}"></script>
     <script src="{{ url_for('static', filename = 'homepage.js') }}"></script>

wiki/pages/team.html

@@ -62,6 +62,7 @@
         display: flex;
         flex-direction: column;
         justify-content: space-between;
+        margin: 0 30px;
     }
 
     .member-info h3 {
@@ -342,4 +343,21 @@
         </div>
     </div>
 </div>
+
+
+<div style="height: 10vh;"></div>
+<hr class="hr-edge-weak">
+<div class="photowall">
+    <img class="pic1"  src="https://static.igem.wiki/teams/5276/wiki/photowall/photowallpic1.webp">
+    <img class="pic2"  src="https://static.igem.wiki/teams/5276/wiki/photowall/photowallpic2.webp">
+    <img class="pic3"  src="https://static.igem.wiki/teams/5276/wiki/photowall/photowallpic3.webp">
+    <img class="pic4"  src="https://static.igem.wiki/teams/5276/wiki/photowall/photowallpic4.webp">
+    <img class="pic5"  src="https://static.igem.wiki/teams/5276/wiki/photowall/photowallpic5.webp">
+    <img class="pic6"  src="https://static.igem.wiki/teams/5276/wiki/photowall/photowallpic6.webp">
+    <img class="pic7"  src="https://static.igem.wiki/teams/5276/wiki/photowall/photowallpic7.webp">
+    <img class="pic8"  src="https://static.igem.wiki/teams/5276/wiki/photowall/photowallpic8.webp">
+    <img class="pic9"  src="https://static.igem.wiki/teams/5276/wiki/photowall/photowallpic9.webp">
+    <img class="pic10" id="photowallpic10" src="https://static.igem.wiki/teams/5276/wiki/photowall/photowallpic10.webp">
+</div>
+
 {% endblock %}
\ No newline at end of file