NBSgamesAT
/
OBSBrowserSources
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added a social media slider, needs adjustment, works somehow at least

This commit is contained in:
Nicolas Bachschwell 2019-12-18 11:41:11 +01:00
parent a6a010502e
commit 3410cbdca0
Signed by: NBSgamesAT
GPG Key ID: B2F1E0D04F024688
2 changed files with 95 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
contacts-slider/slider.css Normal file
View File

@ -0,0 +1,61 @@
.part {
background-color: #CBF4A5;
color: #000000;
float: left;
height: 50px;
}
.picture {
width: 50px;
height: 50px;
background-color: #A4D469;
float: left;
}
.text {
font-size: 25pt;
float: left;
height: 47px;
padding: 0px 10px;
padding-top: 3px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.parent {
height: 50px;
width: auto;
display: inline-block;
position: relative;
animation-name: animation;
animation-duration: 10s;
animation-delay: 1000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
left: -588.6px;
}
@keyframes animation{
from {
left: -588.6px;
}
to {
left: 100%;
}
}
html, body {
height: 50px;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
.Layer_1 {
height: 40px;
width: 40px;
margin: 5px 0px 0px 5px;
color: #fff;
}
.Layer_1 path{
height: 40px;
width: 40px;
margin: 5px 0px 0px 5px;
color: #fff;
}

34
contacts-slider/slider.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="slider.css" rel="stylesheet" type="text/css">
<title>Document</title>
</head>
<body>
<div class="parent">
<div class="part">
<div class="picture">
<svg data-name="Layer 1" class="Layer_1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#ffffff;}</style></defs><title/><path class="cls-1" d="M116.32,10.5H19L11.48,29.74V106.2H37.13v14.3H52.31l14.1-14.3H87.68S115.87,78,116.32,78,116.32,10.5,116.32,10.5ZM106.8,72.91,90.86,89.24s-26.43-.51-26.94,0L49.73,103.38V89.24H28.35V20.39H106.8Z"/><rect class="cls-1" height="28.94" width="9.73" x="54.27" y="39.01"/><rect class="cls-1" height="28.94" width="9.73" x="80.4" y="39.01"/></svg>
</div>
<div class="text">
NBSgamesAT
</div>
</div>
<div class="part">
<div class="picture">
<svg class="Layer_1" viewBox="0 0 50 41" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-3.574,-10.326)">
<path d="M52.837,15.065C51.026,15.87 49.077,16.413 47.032,16.656C49.12,15.406 50.721,13.426 51.476,11.064C49.523,12.223 47.361,13.064 45.058,13.518C43.215,11.554 40.588,10.326 37.681,10.326C32.1,10.326 27.575,14.851 27.575,20.433C27.575,21.224 27.664,21.995 27.837,22.736C19.437,22.314 11.989,18.291 7.004,12.176C6.134,13.668 5.636,15.404 5.636,17.258C5.636,20.764 7.42,23.858 10.132,25.67C8.476,25.617 6.917,25.162 5.554,24.405C5.553,24.447 5.553,24.49 5.553,24.533C5.553,29.429 9.037,33.513 13.661,34.443C12.813,34.673 11.92,34.797 10.998,34.797C10.346,34.797 9.713,34.734 9.096,34.615C10.383,38.63 14.115,41.553 18.537,41.634C15.078,44.345 10.721,45.961 5.985,45.961C5.17,45.961 4.365,45.913 3.574,45.819C8.048,48.688 13.36,50.36 19.067,50.36C37.658,50.36 47.823,34.96 47.823,21.604C47.823,21.166 47.814,20.729 47.795,20.295C49.769,18.873 51.483,17.092 52.837,15.065Z" style="fill:white;fill-rule:nonzero;"/>
</g>
</svg>
</div>
<div class="text">
NBSgamesAT
</div>
</div>
</div>
</body>
</html>