Skip to content

Instantly share code, notes, and snippets.

@Lorg0n

Lorg0n/index.html

Created March 8, 2021 10:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Lorg0n/3b29df322454309ee02e6479b697618b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Lorg0n/3b29df322454309ee02e6479b697618b to your computer and use it in GitHub Desktop.
Download ZIP
Webflow-style email input
Raw
index.html
<div class="find">
<input id="google-search" onclick="SendSearch();"></input>
<div id="under-line"></div>
</div>
<div class="sites">
<a href="https://www.vk.com"><img class="icons" src="https://i.imgur.com/Q14P7SA.png"></a>
<a href="https://www.youtube.com"><img class="icons" src="https://i.imgur.com/iY6EWFn.png"></a>
<a href="https://cybershoke.net/"><img class="icons" src="https://i.imgur.com/yMjmO6y.png"></a>
<a href="https://twitch.tv/"><img class="icons" src="https://i.imgur.com/xU8dikQ.png"></a>
<a href="https://ya.ru/"><img class="icons" src="https://i.imgur.com/vkVQytS.png"></a>
<a href="https://google.com/"><img class="icons" src="https://i.imgur.com/8YUA31U.png"></a>
<a href="https://steamcommunity.com/"><img class="icons" src="https://i.imgur.com/uCiv1mL.png"></a>
</div>
Raw
script.js
function openInNewTab(url) {
var win = window.open(url, '_blank');
win.focus();
}
(function() {
document.querySelector('input').addEventListener('keydown', function(e) {
if (e.keyCode === 13) {
// можете делать все что угодно со значением текстового поля
if (document.getElementsByTagName("input")[0].value != ""){
const uri = 'https://www.google.ru/search?q='+document.getElementsByTagName("input")[0].value;
const encoded = encodeURI(uri);
console.log(encoded);
alert(encoded);
openInNewTab(encoded)
}
}
});
})();
/*function SendSearch(){
const uri = 'https://www.google.ru/search?q=шеллы';
const encoded = encodeURI(uri);
console.log(encoded);
alert(encoded)
} */
Raw
style.scss
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap&subset=cyrillic');
* {
outline:none;
}
body{
background: linear-gradient(107.56deg, #222226 0%, #0C0C0D 100%)
}
.find{
position: relative;
width: 750px;
height: 64px;
margin:10px auto;
background: #363636;
border-radius: 4px
}
.sites{
position: relative;
display: block;
box-sizing: border-box;
text-align: justify;
width: 750px;
height: 90px;
margin:34px auto;
}
.sites:after{
position: relative;
display: inline-block;
width: 100%;
height: auto;
box-sizing: border-box;
vertical-align: top;
content: '';
}
.sites>div{
position: relative;
display: inline-block;
width: 25%;
height: 50px;
box-sizing: border-box;
text-align: left;
vertical-align: top;
/* Свои стили */
}
#under-line{
width: 750px;
height: 4px;
position:absolute; bottom:0px;
background: linear-gradient(90deg, #FF0000 0%, #CCFF00 30.73%, #00FF85 66.15%, #BD00FF 100%);
border-radius: 0px 0px 4px 4px;
}
#google-search{
font-family: 'Montserrat', sans-serif;
outline: none;
border: none;
width: calc(100% - 18px);
height: calc(100% - 8px);
height: -1;
background-color: #363636;
font-size: 25px;
color: #D9D9D9;
padding-left: 10px;
}
Raw
styles
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
Raw
webflow-style-email-input.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment