Browse Source

update

main
Arsh Sahzad 2 months ago
parent
commit
8ba9c13288
  1. 2
      README.md
  2. 50
      assets/css/link.css
  3. 27
      assets/css/main.css
  4. BIN
      assets/img/logo.png
  5. 76
      assets/js/link.js
  6. 1
      assets/js/main.js
  7. 54
      index.html

2
README.md

@ -1 +1 @@
# InfoForm
# LinkTree

50
assets/css/link.css

@ -0,0 +1,50 @@
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400);
html,
body {
height: 100%;
}
body {
background: radial-gradient(#222922, #000500);
font-family: "Source Code Pro", monospace;
font-weight: 400;
overflow: hidden;
padding: 30px 0 0 30px;
text-align: center;
}
.word {
bottom: 0;
color: #fff;
font-size: 2.5em;
height: 2.5em;
left: 0;
line-height: 2.5em;
margin: auto;
right: 0;
position: absolute;
text-shadow: 0 0 10px rgba(50, 255, 50, 0.5), 0 0 5px rgba(100, 255, 100, 0.5);
top: 0;
}
.word span {
display: inline-block;
transform: translateX(100%) scale(0.9);
transition: transform 500ms;
}
.word .done {
color: #6f6;
transform: translateX(0) scale(1);
}
.overlay {
background-image: linear-gradient(transparent 0%, rgba(10, 16, 10, 0.5) 50%);
background-size: 1000px 2px;
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
}

27
assets/css/main.css

@ -0,0 +1,27 @@
body {
background-color: #bbbbbb;
}
h5 {
color: #343a40;
}
.name {
color: #343a40;
}
.love {
color: #343a40 !important;
}
/*----------------- Mail-------------------- */
#email {
text-decoration: none;
float: right;
color: #343a40;
}
.footer {
margin-top: 5% !important;
margin-bottom: 10px;
}
@media (max-width: 479px) {
.footer {
margin-top: 35% !important;
}
}

BIN
assets/img/logo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

76
assets/js/link.js

@ -0,0 +1,76 @@
function Ticker( elem ) {
elem.lettering();
this.done = false;
this.cycleCount = 5;
this.cycleCurrent = 0;
this.chars = '[email protected]#$%^&*()-_=+{}|[]\\;\':"<>?,./`~'.split('');
this.charsCount = this.chars.length;
this.letters = elem.find( 'span' );
this.letterCount = this.letters.length;
this.letterCurrent = 0;
this.letters.each( function() {
var $this = $( this );
$this.attr( 'data-orig', $this.text() );
$this.text( '-' );
});
}
Ticker.prototype.getChar = function() {
return this.chars[ Math.floor( Math.random() * this.charsCount ) ];
};
Ticker.prototype.reset = function() {
this.done = false;
this.cycleCurrent = 0;
this.letterCurrent = 0;
this.letters.each( function() {
var $this = $( this );
$this.text( $this.attr( 'data-orig' ) );
$this.removeClass( 'done' );
});
this.loop();
};
Ticker.prototype.loop = function() {
var self = this;
this.letters.each( function( index, elem ) {
var $elem = $( elem );
if( index >= self.letterCurrent ) {
if( $elem.text() !== ' ' ) {
$elem.text( self.getChar() );
$elem.css( 'opacity', Math.random() );
}
}
});
if( this.cycleCurrent < this.cycleCount ) {
this.cycleCurrent++;
} else if( this.letterCurrent < this.letterCount ) {
var currLetter = this.letters.eq( this.letterCurrent );
this.cycleCurrent = 0;
currLetter.text( currLetter.attr( 'data-orig' ) ).css( 'opacity', 1 ).addClass( 'done' );
this.letterCurrent++;
} else {
this.done = true;
}
if( !this.done ) {
requestAnimationFrame( function() {
self.loop();
});
} else {
setTimeout( function() {
self.reset();
}, 750 );
}
};
$words = $( '.word' );
$words.each( function() {
var $this = $( this ),
ticker = new Ticker( $this ).reset();
$this.data( 'ticker', ticker );
});

1
assets/js/main.js

@ -0,0 +1 @@
//

54
index.html

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#343a40" />
<meta name="description" content="Links To My Accounts | Developed By - Arsh Sahzad" />
<title>LinkTree - SoftRetic</title>
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="icon" href="./assets/img/logo.png" type="image/x-icon" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"/>
</head>
<body>
<div class="container">
<div class="media mt-5">
<img src="./assets/img/logo.png" class="m-3" alt="image" width="75px"height="75px"/>
<div class="media-body m-2">
<h5 class="align-items-center mt-2">SoftRetic</h5>
<p>IT based company in New Delhi, India.</p>
</div>
</div>
<div class="mt-4">
<a href="https://www.softretic.com/softretic/" class="btn btn-outline-dark btn-block" role="button" target="_blank"><i class="fas fa-globe-europe"></i>&nbsp;</i>Website</a>
<br>
<a href="https://www.softretic.com/portfolio/" class="btn btn-outline-dark btn-block" role="button" target="_blank"><i class="fas fa-user-graduate"></i></i>&nbsp;</i>Portfolio</a>
<br>
<a href="https://www.softretic.com/projects/" class="btn btn-outline-dark btn-block" role="button" target="_blank"><i class="fas fa-sliders-h"></i>&nbsp;</i>Projects</a>
<br>
<a href="https://www.softretic.com/github/" class="btn btn-outline-dark btn-block" role="button" target="_blank"><i class="fab fa-github">&nbsp;</i>Github</a>
<br>
<a href="https://www.softretic.com/gitrepo/" class="btn btn-outline-dark btn-block" role="button" target="_blank"><i class="fab fa-git-alt"></i>&nbsp;</i>GitRepo</a>
<br>
<a href="https://www.softretic.com/linkedin/" class="btn btn-outline-dark btn-block" role="button" target="_blank"><i class="fab fa-linkedin">&nbsp;</i>Linkedin</a>
<br>
<a href="https://www.softretic.com/facebook/" class="btn btn-outline-dark btn-block" role="button" target="_blank"><i class="fab fa-facebook">&nbsp;</i>facebook</a>
<br>
<a href="https://www.softretic.com/instagram/" class="btn btn-outline-dark btn-block" role="button" target="_blank"><i class="fab fa-instagram">&nbsp;</i>Instagram</a>
<br>
<a href="https://www.softretic.com/twitter/" class="btn btn-outline-dark btn-block" role="button" target="_blank"><i class="fab fa-twitter">&nbsp;</i>Twitter</a>
<br>
<a href="https://www.softretic.com/telegram/" class="btn btn-outline-dark btn-block" role="button" target="_blank"><i class="fab fa-telegram-plane">&nbsp;</i>Telegram</a>
</div>
<!--------------------Footer---------------------------->
<div class="footer mt-5">
<hr />
<h6>Developed & Managed by <a href="https://www.softretic.com/softretic" class="name" target="_blank"> SoftRetic</a>
<a id="email" href="mailto:[email protected]"><i class="fa fa-envelope"> </i></a>
</h6>
</div>
</div>
<script type="text/javascript" src="src/js/main.js"></script>
</body>
</html>
Loading…
Cancel
Save