diff --git a/static/photowall.css b/static/photowall.css new file mode 100644 index 0000000000000000000000000000000000000000..75a566e6f11ac74ae9484bfc5973fddcd977d4e5 --- /dev/null +++ b/static/photowall.css @@ -0,0 +1,130 @@ +.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 diff --git a/wiki/layout.html b/wiki/layout.html index 0b2d720aae25a2c48e77acc4e316925ff4e456f8..eedb1e17ccdb07c94cb8dc0474904a91243c6501 100644 --- a/wiki/layout.html +++ b/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> diff --git a/wiki/pages/team.html b/wiki/pages/team.html index 89be1c83cb8e7d38fcfcdb1103b3565052484997..3b383eab1efb4b079a6d7f9aa30103fe667b8459 100644 --- a/wiki/pages/team.html +++ b/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