خرید بک لینک

درباره سایت

CodingForums

آخرین مطالب

امکانات وب

text-shadow overlapping 2 out of 11 names shown

I'm making a website for my steamgroup and i'm having the members of the groups names on the website, on click a link to their profiles on steam.
This is a friends source with some additions, in the scrolling part there are two names, VANiSH and max and the shadows on the names seem to overlap the text for some reason, i can't find the issue.
I am very new to coding so please be begier friendly.
Code:
<style>
body {
    font-family: 'Yantramanav', sans-serif;
        overflow: hidden;
}

video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
        -moz-user-select: none;
    -webkit-user-select: none;
}

h1 {
    font-size: 6em;
    font-style: italic;
    text-shadow: 2px 0px 0px rgba(220, 42, 223, 05), -2px 0px 0px rgba(220, 42, 223, 05), 0px -2px 0px rgba(220, 42, 223, 05), 0px 2px 0px rgba(220, 42, 223, 05);
    letter-spacing: 20px;
        display: inline-block;
    color: lightslategray
        -moz-user-select: none;
    -webkit-user-select: none;
    text-decoration; none
        margin: 0 0 .5em;
        color: black;
}

.marq {
    height:100px;
    width:400px;
        overflow: hidden;
}
       
div.opacity {
    opacity: 0.85;
}

p:hover {
    color: red;
}
       
       
p  {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    text-align: center;
    display: inline-block;
        color: black;
    text-shadow: 2px 2px 0px rgba(255, 106, 255, 1), -2px -2px 0px rgba(255, 0, 0, 1);
        margin: 5px;
    padding: 0;
        letter-spacing: 2px;
    font-size: 27px;
}

.reveal {
  -webkit-animation: reveal 1s cubic-bezier(0, 1, 0.5, 1) 1 normal forwards;
    -moz-animation: reveal 1s ease-in 1 normal forwards;
      -o-animation: reveal 1s cubic-bezier(0, 1, 0.5, 1) 1 normal forwards;
          animation: reveal 1s cubic-bezier(0, 1, 0.5, 1) 1 normal forwards;
}

.first {
  -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
      -o-animation-delay: 0;
          animation-delay: 0;
}

.second {
  -webkit-animation-delay: 500ms;
    -moz-animation-delay: 500ms;
      -o-animation-delay: 500ms;
          animation-delay: 500ms;
}

@-webkit-keyframes reveal {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
      -moz-transform: translateY(100%);
        -o-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
        -o-transform: translateY(0);
            transform: translateY(0);
  }
}

@-moz-keyframes reveal {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
      -moz-transform: translateY(100%);
        -o-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
        -o-transform: translateY(0);
            transform: translateY(0);
  }
}

@-o-keyframes reveal {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
      -moz-transform: translateY(100%);
        -o-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
        -o-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes reveal {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
      -moz-transform: translateY(100%);
        -o-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
        -o-transform: translateY(0);
            transform: translateY(0);
  }
}

#fade {
    -webkit-animation: fadein 3s;
      -moz-animation: fadein 3s;
        -ms-animation: fadein 3s;
        -o-animation: fadein 3s;
            animation: fadein 3s;
}

@keyframes fadein {
    from { opacity: 0; }
    to  { opacity: 1; }
}

@-moz-keyframes fadein {
    from { opacity: 0; }
    to  { opacity: 1; }
}

@-webkit-keyframes fadein {
    from { opacity: 0; }
    to  { opacity: 1; }
}

@-ms-keyframes fadein {
    from { opacity: 0; }
    to  { opacity: 1; }
}

@-o-keyframes fadein {
    from { opacity: 0; }
    to  { opacity: 1; }
       
}

</style>

<!DOCTYPE html>
<html>

<video autoplay loop src="1000.mp4" id="myVideo" type="video/mp4">
</video>


<title></title>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>


<link href="https://fonts.googleapis.com/css?family=Sarala" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ovo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Didact+Gothic" rel="stylesheet">       
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Yantramanav:100" rel="stylesheet">

  <center>
 
  <big>
  <a href="https://www.steamcommunity.com/groups/anlmerad" target="_blank" style="text-decoration:none">
  <h1 style="font-family: 'Ovo', sans-serif;" unselectable="on" draggable="false" class="reveal first">
  animerad
  </h1>
  </big>
 
  <br>
  <p></p>
  <br>
  <p></p>
  <br>

  <div id="fade">
 
  <marquee class="marq" direction="left" behavior="scroll" scrollamount="10" onmouseover="this.stop();" onmouseout="this.start();">
 
  <a href="http://steamcommunity.com/profiles/76561198267608167" target="_blank" style="text-decoration:none">
  <p style="font-family: 'Sarala', monospace;" unselectable="on" draggable="false" onmousedown="return false">
  vind
  </p>


  <a href="http://steamcommunity.com/profiles/76561198137616625" target="_blank" style="text-decoration:none">
  <p style="font-family: 'Sarala', monospace;" unselectable="on" draggable="false" onmousedown="return false">
  silents
  </p>
 
 
  <a href="http://steamcommunity.com/profiles/76561198059542343" target="_blank" style="text-decoration:none">
  <p style="font-family: 'Sarala', monospace;" unselectable="on" draggable="false" onmousedown="return false">
  lake
  </p>

 
  <a href="http://steamcommunity.com/profiles/76561198141989620" target="_blank" style="text-decoration:none">
  <p style="font-family: 'Sarala', monospace;" unselectable="on" draggable="false" onmousedown="return false">
  Mariam
  </p>
 

  <a href="http://steamcommunity.com/profiles/76561198231597836" target="_blank" style="text-decoration:none">
  <p style="font-family: 'Sarala', monospace;" unselectable="on" draggable="false" onmousedown="return false">
  dexter
  </p>

 
  <a href="http://steamcommunity.com/profiles/76561198283034004" target="_blank" style="text-decoration:none">
  <p style="font-family: 'Sarala', monospace;" unselectable="on" draggable="false" onmousedown="return false">
  VANiSH
   
 
  <a href="http://steamcommunity.com/profiles/76561198343125887" target="_blank" style="text-decoration:none">
  <p style="font-family: 'Sarala', monospace;" unselectable="on" draggable="false" onmousedown="return false">
  max
  </p>

 
  <a href="http://steamcommunity.com/profiles/76561198089292281" target="_blank" style="text-decoration:none">
  <p style="font-family: 'Sarala', monospace;" unselectable="on" draggable="false" onmousedown="return false">
  antin
  </p>
 
 
  <a href="http://steamcommunity.com/profiles/76561198205807793" target="_blank" style="text-decoration:none">
  <p style="font-family: 'Sarala', monospace;" unselectable="on" draggable="false" onmousedown="return false">
  lune
  </p>
     
 
  <a href="http://steamcommunity.com/profiles/76561198077460370" target="_blank" style="text-decoration:none">
  <p style="font-family: 'Sarala', monospace;" unselectable="on" draggable="false" onmousedown="return false">
  mupp
  </p>
 
 
  <a href="http://steamcommunity.com/profiles/76561198422125053" target="_blank" style="text-decoration:none">
  <p style="font-family: 'Sarala', monospace;" unselectable="on" draggable="false" onmousedown="return false">
  Cheevin
  </p>
 
 
 
  </marquee>
 
  </div>
 
 
  </center>
 
 
 
<p></p>
<br>


<body>
</body>

<script>
$(function() {
  $('.marquee').marquee({
    duration: 5000,
    startVisible: true,
    duplicated: true
  });
});
</script>

<script>
var title = new MovingTitle(" animerad.pw...", 400, 16);
title.init();

function MovingTitle(writeText, interval, visibleLetters) {
    var _instance = {};

    var _currId = 0;
    var _numberOfLetters = writeText.length;

    function updateTitle() {
        _currId += 1;
        if(_currId > _numberOfLetters - 1) {
            _currId = 0;
        }

        var startId = _currId;
        var endId = startId + visibleLetters;
        var finalText;
        if(endId < _numberOfLetters - 1) {
            finalText = writeText.substring(startId, endId);
        } else {
            var cappedEndId = _numberOfLetters;
            endId = endId - cappedEndId;

            finalText = writeText.substring(startId, cappedEndId) +    writeText.substring(0, endId);
        }

        document.title = finalText;
    }

    _instance.init = function() {
        setInterval(updateTitle, interval);
    };

    return _instance;
}
</script>


<script>
<textarea rows=3 cols=20></textarea>​

$("textarea").keydown(false);
</script>

<script>
document.addEventListener('contextmenu', event => event.preventDefault());
</script>

 <script>
var vid = document.getElementById("myVideo");
vid.volume = 0.025;
</script>

برچسب: نویسنده: آیلین رضوانی تاريخ: پنجشنبه 2 آذر 1396 ساعت: 16:25

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه