|
|
| Line 2: |
Line 2: |
| | <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>
| |
| | | | |
| | | | |
