Difference between revisions of "Team:UNOTT/Brainstorms"

Line 1: Line 1:
 
{{:Team:UNOTT/Template/NavBarTest}}
 
{{:Team:UNOTT/Template/NavBarTest}}
−
<html><iframe width="100%" height="1000" src="https://www.youtube.com/embed/myJA9BcgB6Q?autoplay=1" frameborder="0" allowfullscreen></html>
+
<html>
 +
 
 +
<style>
 +
 
 +
@import url('https://fonts.googleapis.com/css?family=Roboto');
 +
 
 +
* {margin:0;padding:0;}
 +
 
 +
body {
 +
  color: black;
 +
  font-family: 'Roboto', sans-serif;
 +
  background-color: #02263E;
 +
  background-size: cover;
 +
  background-repeat: no-repeat;
 +
}
 +
 
 +
a {
 +
  display:block;
 +
}
 +
 
 +
.container {
 +
  width:300px;
 +
  margin: 50px auto;
 +
  display: grid;
 +
  grid-template-columns: 1fr 1fr;
 +
  grid-template-areas:
 +
    "socialmedia-1 socialmedia-2"
 +
    "socialmedia-3 socialmedia-4"
 +
    "socialmedia-5 socialmedia-6";
 +
  text-align: center;
 +
  box-shadow: 0 5px 10px -4px rgba(138,138,138,1);
 +
}
 +
 
 +
/* Setting Size, Colour, Padding */
 +
 
 +
.socialmedia-1,
 +
.socialmedia-2,
 +
.socialmedia-3,
 +
.socialmedia-4,
 +
.socialmedia-5,
 +
.socialmedia-6 {
 +
  margin: 0 auto;
 +
  width: 150px;
 +
  height: 150px;
 +
  padding: 20px 0 0 0;
 +
  background-color: rgba(255,255,255,0.5);
 +
}
 +
 
 +
img {
 +
  border-radius: 50%;
 +
  transition: all .2s linear;
 +
}
 +
 
 +
img:hover {
 +
  border-radius: 5%;
 +
  transform: scale(1.2);
 +
  filter: saturate(5);
 +
  box-shadow: 0 8px 10px -4px rgba(138,138,138,1);
 +
}
 +
 
 +
.socialmedia-1 {
 +
  grid-area: socialmedia-1;
 +
  border-radius: 10px 0 0 0;
 +
}
 +
 
 +
 
 +
.socialmedia-2 {
 +
  grid-area: socialmedia-2;
 +
  border-radius: 0 10px 0 0;
 +
}
 +
 
 +
.socialmedia-3 {
 +
  grid-area: socialmedia-3;
 +
}
 +
 
 +
.socialmedia-4 {
 +
  grid-area: socialmedia-4;
 +
}
 +
 
 +
.socialmedia-5 {
 +
  grid-area: socialmedia-5;
 +
  border-radius: 0 0 0 10px;
 +
}
 +
 
 +
.socialmedia-6 {
 +
  grid-area: socialmedia-6;
 +
  border-radius: 0 0 10px 0;
 +
}
 +
</style>
 +
 
 +
<body>
 +
 
 +
<!-- Icons made by Freepik from https://www.flaticon.com/ www.flaticon.com is licensed by http://creativecommons.org/licenses/by/3.0/ -->
 +
<meta name="viewport" content="width=device-width">
 +
<div class="container">
 +
  <section class="socialmedia-1">
 +
    <a href="#"><img src="https://www.iconexperience.com/_img/g_collection_png/standard/256x256/brain.png" width="64" height="64"></a>
 +
  </section>
 +
  <section class="socialmedia-2"><a href="#"><img src="https://www.iconexperience.com/_img/g_collection_png/standard/256x256/dna.png" width="64" height="64"></a></section>
 +
  <section class="socialmedia-3"><a href="#"><img src="https://static.igem.org/mediawiki/2017/3/35/T--UNOTT--Keycoli.png" width="64" height="64"></a></section>
 +
  <section class="socialmedia-4"><a href="#"><img src="https://www.iconexperience.com/_img/g_collection_png/standard/128x128/key.png" width="64" height="64"></a></section>
 +
 
 +
 
 +
</div>
 +
 
 +
</body>
 +
 
 +
 
 +
</html>
  
 
{{:Team:UNOTT/Template/Footer}}
 
{{:Team:UNOTT/Template/Footer}}

Revision as of 21:23, 26 August 2017