/
eb
/
BisLite
Обзор
Документация
Войти
/
eb
/
BisLite
Код
Запросы
0
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
index.html
475 строк
17 KB
EvgeniyBudaev
add project
03 апр 2020, 10:41
03 апр 2020, 10:41
2d10e54
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bislite Урок5 Специфичность CSS</title> <link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/media.css"> </head> <body> <header class="header"> <div class="container"> <div class="header__inner"> <div class="header__logo"> <a href="#"> <span>Bis</span>Lite </a> </div> <nav class="header__menu"> <div class="header__menu-btn"> <div class="header__menu-row"></div> <div class="header__menu-row"></div> <div class="header__menu-row"></div> </div> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li class="header__drop-down drop-down"><a class="drop-down__link" href="#"> Services </a> <ul class="drop-down__list"> <li><a href="#">Web Design</a></li> <li><a href="#">Wordpress Design</a></li> <li><a href="#">Mobile App Devplopment</a></li> <li><a href="#">Internet Marketing</a></li> <li><a href="#">Social Media Management</a></li> </ul> </li> <li class="header__drop-down drop-down"><a class="drop-down__link" href="#">Portfolio </a> <ul class="drop-down__list"> <li><a href="#">Web Design</a></li> <li><a href="#">Wordpress Design</a></li> <li><a href="#">Mobile App Devplopment</a></li> <li><a href="#">Internet Marketing</a></li> <li><a href="#">Social Media Management</a></li> </ul> </li> <li class="header__link-blog"><a href="#">Blog</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> </div> </div> </header> <section class="slider"> <div class="container"> <div class="slider__inner"> <div class="slider__item"> <div class="slider__item-text"> We design clean, crisp & memorable icons </div> </div> <div class="slider__item"> <div class="slider__item-text"> We design clean, crisp & memorable icons </div> </div> <div class="slider__item"> <div class="slider__item-text"> We design clean, crisp & memorable icons </div> </div> <div class="slider__item"> <div class="slider__item-text"> We design clean, crisp & memorable icons </div> </div> <div class="slider__item"> <div class="slider__item-text"> We design clean, crisp & memorable icons </div> </div> </div> </div> </section> <section class="items"> <div class="container"> <div class="items__inner"> <div class="item"> <div class="item__title"> <div class="item__icons"> <img src="images/icons/item-1.svg" alt="icon"> </div> Clean Theme </div> <div class="item__text">Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie. Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </div> <a href="#" class="item__link">Read More</a> </div> <div class="item"> <div class="item__title"> <div class="item__icons"> <img src="images/icons/item-2.svg" alt="icon"> </div> Responsive Design </div> <div class="item__text">Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie. Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </div> <a href="#" class="item__link">Read More</a> </div> <div class="item"> <div class="item__title"> <div class="item__icons"> <img src="images/icons/item-3.svg" alt="icon"> </div> Fully layerd PSD </div> <div class="item__text">Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie. Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </div> <a href="#" class="item__link">Read More</a> </div> <div class="item"> <div class="item__title"> <div class="item__icons"> <img class="telegram-icons" src="images/icons/item-4.svg" alt="icon"> </div> Ready for coding </div> <div class="item__text">Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie. Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </div> <a href="#" class="item__link">Read More</a> </div> </div> </div> </section> <section class="works"> <div class="container"> <div class="works__title">latest works</div> <div class="works__inner"> <div class="works__inner-item"> <div class="works__inner-box"> <img src="images/slider/item-1.jpg" alt="works slider"> <div class="works__inner-link"> <a href="#"><img src="images/slider/optic.svg" alt="eye"></a> <a href="#"><img src="images/slider/link.svg" alt="link"></a> </div> </div> </div> <div class="works__inner-item"> <div class="works__inner-box"> <img src="images/slider/item-2.jpg" alt="works slider"> <div class="works__inner-link"> <a href="#"><img src="images/slider/optic.svg" alt="eye"></a> <a href="#"><img src="images/slider/link.svg" alt="link"></a> </div> </div> </div> <div class="works__inner-item"> <div class="works__inner-box"> <img src="images/slider/item-3.jpg" alt="works slider"> <div class="works__inner-link"> <a href="#"><img src="images/slider/optic.svg" alt="eye"></a> <a href="#"><img src="images/slider/link.svg" alt="link"></a> </div> </div> </div> <div class="works__inner-item"> <div class="works__inner-box"> <img src="images/slider/item-4.jpg" alt="works slider"> <div class="works__inner-link"> <a href="#"><img src="images/slider/optic.svg" alt="eye"></a> <a href="#"><img src="images/slider/link.svg" alt="link"></a> </div> </div> </div> <div class="works__inner-item"> <div class="works__inner-box"> <img src="images/slider/item-1.jpg" alt="works slider"> <div class="works__inner-link"> <a href="#"><img src="images/slider/optic.svg" alt="eye"></a> <a href="#"><img src="images/slider/link.svg" alt="link"></a> </div> </div> </div> <div class="works__inner-item"> <div class="works__inner-box"> <img src="images/slider/item-2.jpg" alt="works slider"> <div class="works__inner-link"> <a href="#"><img src="images/slider/optic.svg" alt="eye"></a> <a href="#"><img src="images/slider/link.svg" alt="link"></a> </div> </div> </div> <div class="works__inner-item"> <div class="works__inner-box"> <img src="images/slider/item-3.jpg" alt="works slider"> <div class="works__inner-link"> <a href="#"><img src="images/slider/optic.svg" alt="eye"></a> <a href="#"><img src="images/slider/link.svg" alt="link"></a> </div> </div> </div> <div class="works__inner-item"> <div class="works__inner-box"> <img src="images/slider/item-4.jpg" alt="works slider"> <div class="works__inner-link"> <a href="#"><img src="images/slider/optic.svg" alt="eye"></a> <a href="#"><img src="images/slider/link.svg" alt="link"></a> </div> </div> </div> <div class="works__inner-item"> <div class="works__inner-box"> <img src="images/slider/item-1.jpg" alt="works slider"> <div class="works__inner-link"> <a href="#"><img src="images/slider/optic.svg" alt="eye"></a> <a href="#"><img src="images/slider/link.svg" alt="link"></a> </div> </div> </div> <div class="works__inner-item"> <div class="works__inner-box"> <img src="images/slider/item-2.jpg" alt="works slider"> <div class="works__inner-link"> <a href="#"><img src="images/slider/optic.svg" alt="eye"></a> <a href="#"><img src="images/slider/link.svg" alt="link"></a> </div> </div> </div> <div class="works__inner-item"> <div class="works__inner-box"> <img src="images/slider/item-3.jpg" alt="works slider"> <div class="works__inner-link"> <a href="#"><img src="images/slider/optic.svg" alt="eye"></a> <a href="#"><img src="images/slider/link.svg" alt="link"></a> </div> </div> </div> <div class="works__inner-item"> <div class="works__inner-box"> <img src="images/slider/item-4.jpg" alt="works slider"> <div class="works__inner-link"> <a href="#"><img src="images/slider/optic.svg" alt="eye"></a> <a href="#"><img src="images/slider/link.svg" alt="link"></a> </div> </div> </div> <div class="works__inner-item"> <div class="works__inner-box"> <img src="images/slider/item-1.jpg" alt="works slider"> <div class="works__inner-link"> <a href="#"><img src="images/slider/optic.svg" alt="eye"></a> <a href="#"><img src="images/slider/link.svg" alt="link"></a> </div> </div> </div> <div class="works__inner-item"> <div class="works__inner-box"> <img src="images/slider/item-2.jpg" alt="works slider"> <div class="works__inner-link"> <a href="#"><img src="images/slider/optic.svg" alt="eye"></a> <a href="#"><img src="images/slider/link.svg" alt="link"></a> </div> </div> </div> <div class="works__inner-item"> <div class="works__inner-box"> <img src="images/slider/item-3.jpg" alt="works slider"> <div class="works__inner-link"> <a href="#"><img src="images/slider/optic.svg" alt="eye"></a> <a href="#"><img src="images/slider/link.svg" alt="link"></a> </div> </div> </div> <div class="works__inner-item"> <div class="works__inner-box"> <img src="images/slider/item-4.jpg" alt="works slider"> <div class="works__inner-link"> <a href="#"><img src="images/slider/optic.svg" alt="eye"></a> <a href="#"><img src="images/slider/link.svg" alt="link"></a> </div> </div> </div> </div> </div> </section> <section class="clients"> <div class="container"> <div class="clients__inner"> <div class="testimonials"> <div class="testimonials__title">testimonial</div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut nulla sapien, at aliquam erat. Sed vitae massa tellus. Aliquam commodo aliquam metus, sed iaculis nibh tempus id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam nec nisi in nisl euismod fringilla. <span>John Travis, CEO, DomainName.com</span> </p> </div> <div class="clients-logo"> <div class="clients-logo__title">our clients</div> <div class="clients-logo__images"> <img src="images/clients/client-logo.jpg" alt="clients-logo"> </div> </div> </div> <div class="download"> <div class="download__text"> This is a clean and modern, four column website PSD template. You can code it into a Wordpress website, HTML5 responsive website for your personal or client works. So ahead and download this wonderful PSD template! </div> <div class="download__btn"> <a href="#" download>download psd</a> </div> </div> </div> </section> <footer class="footer"> <div class="container"> <div class="footer__inner"> <div class="footer__item footer__item-content"> <div class="footer__items-title">About us</div> <div class="footer__text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod placerat dui et tincidunt. Sed sollicitudin posuere auctor. Phasellus at ultricies nisl. Integer at leo eros. Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie. </div> </div> <div class="footer__item footer__item-list"> <div class="footer__items-title">Explore</div> <ul class="footer__list"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> </ul> </div> <div class="footer__item"> <div class="footer__items-title">Browse</div> <ul class="footer__list"> <li><a href="#">Careers</a></li> <li><a href="#">Press & Media</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Terms of Service</a></li> <li><a href="#">Privacy Policy</a></li> </ul> </div> <div class="footer__item footer__item-contact"> <div class="footer__items-title">contact us</div> <div class="footer__adress"> <span>BisLite Inc.</span> Always Street 265 0X - 125 - Canada </div> <div class="footer__phone"> Phone: <a href="tel:987-6543-210"></a> Fax: <a href="tel:987-6543-210"></a> </div> </div> <div class="footer__item footer__item-social"> <div class="footer__items-title">connect with us</div> <ul class="footer__social"> <li><a href="#"><img src="images/social/facebook.png" alt=""></a></li> <li><a href="#"><img src="images/social/dribbble.png" alt=""></a></li> <li><a href="#"><img src="images/social/pinterest.png" alt=""></a></li> <li><a href="#"><img src="images/social/linkedin.png" alt=""></a></li> <li><a href="#"><img src="images/social/skype.png" alt=""></a></li> <li><a href="#"><img src="images/social/share.png" alt=""></a></li> </ul> </div> </div> <div class="footer__bottom"> <div class="footer__copy"> © Copyright 2012 - BisLite Inc. All rights reserved. Some free icons used here are created by Brankic1979.com. Client Logos are copyright and trademark of the respective owners / companies. </div> <div class="footer__logo"> <a href="#"> <span>Bis</span>Lite </a> </div> </div> </div> </footer> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="js/slick.min.js"></script> <script src="js/main.js"></script> </body> </html> <!-- ctrl+H - сетка в PS --> <!-- ctrl+A, ctrc+C - работа с текстом --> <!-- ctrl+R - направляющие --> <!-- alt+scroll - масштабирование --> <!-- пробел - движение по макету --> <!-- ctrl+N - создать новую вкладку --> <!-- ctrl+shift-S - сохранить как --> <!-- Урок про приоритетность css <div class="test"> <div class="box"> <h1 class="title" id="title-top" style="color: blueviolet">Lorem, ipsum dolor.</h1> </div> </div> -->