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 / navbar.html
Last active January 7, 2018 10:18
navbar
<div class="container">
<div class="main-menu navbar-fixed-top">
<!-- start of NAVBAR-BRAND -->
<div class="navbar-brand">
<a href="#">
<img src="http://dummyimage.com/800x600/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">
</a>
</div>
<!-- end of NAVBAR-BRAND -->
<!-- start of NAV -->
/***** 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 / style.css
Created January 7, 2018 10:27
set all the differences to zero for browsers
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del,
dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
<section id="features">
<div class="container">
<div class="features_wrapper clearfix">
<div class="features_item">
<div class="features_item_icon">
<span class=""></span>
</div>
<h3>text here</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
/**** start of FEATURES ****/
.features_wrapper {
padding: 120px 0;
}
.features_item {
float: left;
width: 33.333%;
box-sizing: border-box;
padding: 0 3.6%;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Описание сайта">
<meta name="keywords" content="Ключевые слова">
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" href="favicon.ico">
@svgerasimov
svgerasimov / button.html
Created January 7, 2018 22:34
кнопка с ховер эффектом html
<div class="btn_wrapper">
<a href="#" class="btn">text here</a>
</div>
@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 / 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 / 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;