some projects · some projects · some projects · some projects · some projects · some projects · some projects · some projects · some projects ·
some projects · some projects · some projects · some projects · some projects · some projects · some projects · some projects · some projects ·
<head>
<meta charset= »UTF-8″>
<meta http-equiv= »X-UA-Compatible » content= »IE=edge »>
<meta name= »viewport » content= »width=device-width, initial-scale=1.0″>
<style>
.line{
margin-top: 80px;
margin-bottom: 80px;
background-color: white;
height: 2px;
width: 100%;
}
.scrolling{
position: relative;
/* width: 100%; */
overflow: hidden;
}
.scroll{
width: 100%;
overflow:hidden;
display: flex;
}
.scrolling-text span:hover{
color: #00FFFF;
-webkit-text-stroke: 1px #00FFFF;
transition: all 0.5s ease;
}
.scrolling-text{
font-weight: 400;
font-family: ‘Poppins’, sans-serif;
color: rgba(0, 0, 0, 0);
white-space: nowrap;
font-size: 48pt;
line-height: 12vh;
animation: animate 80s linear infinite;
animation-delay: -80s;
}
.scrolling-text2{
animation: animate2 80s linear infinite;
animation-delay: -40s;
font-family: ‘Poppins’, sans-serif;
}
.outlined{
-webkit-text-stroke: 1px white;
}
.scrolling h1{
color:white;
font-size: 118px;
font-weight: 500;
}
.scrolling span{
font-family: ‘Libre baskerville’, serif;
color: #1E1E21;
font-style: italic;
}
@keyframes animate
{
0%
{
transform: translateX(100%);
}
100%
{
transform: translateX(-100%);
}
}
@keyframes animate2
{
0%
{
transform: translateX(0);
}
100%
{
transform: translateX(-200%);
}
}
</style>
</head>
<body>
<section class= »scrolling »>
<div style= »margin-left: 4%; margin-right: 4% »>
<div class= »line »>
</div>
</div>
<div class= »scroll »>
<div class= »scrolling-text »>
<h1 class= »outlined »> some <span>projects</span> · some <span>projects</span> ·
some
<span>projects</span> · some <span>projects</span> · some
<span>projects</span> · some
<span>projects</span> · some <span>projects</span> · some
<span>projects</span> · some
<span>projects</span> ·
</h1>
</div>
<div class= »scrolling-text scrolling-text2″>
<h1 class= »outlined »> some <span>projects</span> · some <span>projects</span> ·
some
<span>projects</span> · some <span>projects</span> · some
<span>projects</span> · some
<span>projects</span> · some <span>projects</span> · some
<span>projects</span> · some
<span>projects</span> ·
</h1>
</div>
</div>
<div style= »margin-left: 4%; margin-right: 4% »>
<div class= »line »>
</div>
</div>
</section>
</body>