<!DOCTYPE html>
<html>
<head>
<title>
URL KISALTMA SERVISI
</title>
<style>
.maincontainer,form input[type=text] {
box-shadow : 0 0 11px 4px rgba(0,0,0,.25);
margin : auto
}
body {
font-family : Arial,sans-serif;
padding : 20px;
background : #fff;
display : flex;
flex-direction : column;
justify-content : center;
align-items : center
}
body,html {
height : 100%
}
.maincontainer h1 {
color : #fff;
text-align : center
}
form label {
display : block;
margin-bottom : 20px;
margin-left : 10px;
color : #fff
}
form input[type=text] {
width : 90%;
padding : 10px;
border-radius : 20px;
border : 2px solid #8f94fb
}
#copy-btn,form button {
background-color : #fff;
color : #8f94fb;
border : none;
padding : 5px 10px;
cursor : pointer;
border-radius : 10px;
font-size : 25px;
margin-top : 20px
}
form button:hover {
border : 2px solid #8f94fb
}
#short-url-container {
margin-top : 20px
}
#short-url-container p {
text-align : center;
color : #fff
}
#short-url {
display : flex;
align-items : center;
justify-content : center
}
#short-url a {
word-wrap : break-word;
margin-right : 10px;
color : #fff
}
.maincontainer {
width : 80%;
height : auto;
min-height : 350px;
padding : 40px;
border-radius : 30px;
background : #4e54c8;
background : -webkit-linear-gradient(to right,#8f94fb,#4e54c8);
background : linear-gradient(to right,#8f94fb,#4e54c8)
}
.credit a {
text-decoration : none;
color : #000;
font-weight : 800
}
.credit {
text-align : center;
margin-top : 10px;
font-family : Verdana,Geneva,Tahoma,sans-serif
}
</style>
</head>
<body>
<div class="maincontainer">
<h1>
URL KISALTMA SERVISI
</h1>
<form>
<label for="long-url">
Uzun URL'nizi Girin:
</label>
<input id="long-url" name="long-url" type="text">
<button id="shorten-btn" type="button">
KISALT
</button>
</form>
<div id="short-url-container" style="display:none">
<p>
KISALTILMIS URL'niz:
</p>
<div id="short-url">
<a href="" target="_blank">
</a>
<button id="copy-btn" type="button">
Kopyala
</button>
</div>
</div>
<div class="credit">
Made with
<span style="color:tomato;font-size:20px;">
2024
</span>
by Link Shorter
</div>
</div>
</body>
</html>