Skip to content

Instantly share code, notes, and snippets.

View svgerasimov's full-sized avatar

Svyatoslav Gerasimov svgerasimov

  • Russia, Voronezh
View GitHub Profile
@svgerasimov
svgerasimov / contact_window
Last active March 7, 2018 22:31
Модальное окно
<button onclick="showPopup();">Нажми на меня, чтобы показать форму обратной связи</button>
<div class="popup">
<div class="popup_bg"></div>
<div class="form">
<form>
<input type="text" name="name" placeholder="Ваше имя">
<input type="text" name="email" placeholder="Ваша почта">
<textarea name="message" id="message" cols="30" rows="10" placeholder="Ваше сообщение"></textarea>
<input type="submit" value="Отправить">
</form>
@svgerasimov
svgerasimov / detect closest edge.js
Created January 10, 2018 19:26
detect closest edge.js
//Detect Closest Edge
function closestEdge(x,y,w,h) {
var topEdgeDist = distMetric(x,y,w/2,0);
var bottomEdgeDist = distMetric(x,y,w/2,h);
var leftEdgeDist = distMetric(x,y,0,h/2);
var rightEdgeDist = distMetric(x,y,w,h/2);
var min = Math.min(topEdgeDist,bottomEdgeDist,leftEdgeDist,rightEdgeDist);
switch (min) {
case leftEdgeDist:
@svgerasimov
svgerasimov / navbar.html
Created January 8, 2018 13:49
navbar.html
<div class="container">
<div class="main-menu navbar-fixed-top">
<!-- start of BRAND -->
<div class="brand">
<a href="#">
<img src="" alt="">
</a>
</div>
<!-- end of BRAND -->
<!-- start of NAV -->
@svgerasimov
svgerasimov / navbar.css
Created January 8, 2018 13:47
navbar.css
/***** start of navbar *****/
.main-menu {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: none;
border-radius: 0;
margin-bottom: 0;
width: 100%;
padding: 20px 0;
background: #fff;
transition: all 0.4s ease-in-out;
@svgerasimov
svgerasimov / divider.css
Created January 7, 2018 23:39
<hr class="divider"> css
/* start of DIVIDER*/
.divider {
display: block;
max-width: 50px;
height: 2px;
background-color: #00e0d0;
border: none;
box-sizing: content-box;
overflow: hidden;
margin: 27px auto;
@svgerasimov
svgerasimov / <hr class="divider">
Created January 7, 2018 23:39
<hr class="divider"> html
<hr class="divider">
@svgerasimov
svgerasimov / swiper_pagination.css
Created January 7, 2018 23:18
swiper_pagination on CSS
/* start of SWIPER PAGINATION*/
.swiper_pagination {
display: block;
position: absolute;
z-index: 2;
transition: 300ms;
transform: translateX(-50%);
left: 50%;
bottom: 70px;
text-align: center;
@svgerasimov
svgerasimov / swiper_pagination.html
Created January 7, 2018 23:16
swiper pagination on html
<!--start of SWIPER PAGINATION-->
<div class="swiper_pagination">
<span class="swiper_pagination_bullet swiper_pagination_bullet_active"></span>
<span class="swiper_pagination_bullet"></span>
<span class="swiper_pagination_bullet"></span>
<span class="swiper_pagination_bullet"></span>
</div>
<!--end of SWIPER PAGINATION-->
@svgerasimov
svgerasimov / button.css
Created January 7, 2018 22:36
стили для кнопки с ховер эффектом
.btn_wrapper {
display: block;
min-width: 100%;
}
.btn {
width: 120px;
height: 40px;
position: relative;
display: inline-block;
line-height: 40px;
@svgerasimov
svgerasimov / button.html
Created January 7, 2018 22:34
кнопка с ховер эффектом html
<div class="btn_wrapper">
<a href="#" class="btn">text here</a>
</div>