Страница: главная

In this example below you will see how to do a Страница: главная with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by rodskif, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright rodskif ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Страница: главная</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header class="page-header">
            <div class="logo">
                 <img src="https://htmlacademy.ru/assets/course73/logo.svg" width="90" height="90">
            </div>
            <nav class="main-menu">
                <ul>
                    <li><a href="#home">Главная</a></li>
                    <li><a href="#blog">Посты</a></li>
                    <li><a href="#me">Обо мне</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <article class="about-me">
                <section class="profile">
                    <h1>Привет</h1>
                    <p>Меня зовут Кекс. Я кот и веб-разработчик.</p>
                    <p><small>Живу в Санкт-Петербурге и работаю в HTML Academy консультантом по созданию учебных курсов.</small></p>
                </section>
                <aside class="last-actions">
                    
                    <ul>
                        <li>Зачекинился на кухне <time>час назад</time></li>
                        <li>Принесли немного еды <a href="#catfood">#catfood</a> <time>два часа назад</time></li>
                        <li>Зачекинился в ванной <time>вчера</time></li>
                    </ul>
                </aside>
            </article>
            <section class="posts">
                <article class="featured-post">
                    <header>
                        <h1><a href="#post-1">Чешуя на градиентах</a></h1>
                    </header>
                    <section>
                        <p>В этом посте я расскажу как делать повторяющийся чешуйчатый фон на CSS-градиентах. Будем использовать градиенты в сочетании со свойством <code>background-size</code>.</p>
                    </section>
                </article>
            </section>
        </main>
        <footer class="page-footer">
            <section class="info">
                <img src="https://htmlacademy.ru/assets/course73/keks.jpg" width="50">
                Кекс, keks@htmlacademy.ru
            </section>
            <section class="copyright">
                © 2008—2014 Cat Energy
            </section>
        </footer>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/rodskif/andx421andx442andx440andx430andx43dandx438andx446andx430-andx433andx43bandx430andx432andx43dandx430andx44f-OWPdZR */
@font-face {
    font-weight: 400;
    font-family: "Roboto";
    font-style: normal;
    src:
        local("Roboto Regular"),
        local("Roboto-Regular"),
        url("/assets/course73/roboto.woff") format("woff");
}

html,
body {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-family: "Roboto", sans-serif;
    color: white;
    background-color: #2c3e50;
}

a:link,
a:visited,
a:hover,
a:active {
    color: #c0392b;
}

code {
    padding: 0.2em 0.4em;
    font-weight: bold;
    color: #c0392b;
    background: white;
    box-shadow: 0 0 2px #cccccc;
}

/* Header */
header.page-header {
    position: relative;
    z-index: 5;
    min-height: 20px;
    padding: 20px;
    color: white;
    background-image:
        linear-gradient(45deg, #34495e 25%, transparent 25%),
        linear-gradient(-45deg, #34495e 25%, transparent 25%),
        linear-gradient(135deg, #34495e 25%, transparent 25%),
        linear-gradient(-135deg, #34495e 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
    box-shadow: 0 0 5px 0 #333333;
}

.logo {
    position: absolute;
    top: 10px;
    left: 20px;
    margin: 0;
}

.main-menu ul {
    margin: 0;
    margin-left: 130px;
    padding: 0;
    list-style: none;
}

.main-menu li {
    display: inline-block;
    margin-right: 1em;
}

.main-menu a {
    color: white;
}

/* Main */
main {
    display: block; /* для страховки, очень новый элемент */
    min-height: 200px;
    padding-top: 50px;
    color: black;
    background-color: white;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAMAAAApB0NrAAAABlBMVEX///+pqalTpKl9AAAAAnRSTlMAGovxNEIAAAAdSURBVDjLY2AAAUaG4UYxDDsfjfp91O+jfqfE7wCzpQCw/dq+qQAAAABJRU5ErkJggg==");
}

main::after {
    content: "";
    display: table;
    clear: both;
}

.about-me {
    min-height: 100px;
    margin: 0 20px;
    padding: 10px;
    background-color: rgba(241, 196, 15, 0.1);
    border-radius: 5px;
    box-shadow: 0 0 3px #cccccc;
}

.about-me::after {
    content: "";
    display: table;
    clear: both;
}

.profile {
    float: left;
    width: 51%;
    min-height: 100px;
    padding: 2%;
    background-color: rgba(243, 156, 18, 0.1);
    border-radius: 5px;
}

.profile h1 {
    margin: 0;
    font-size: 1.7em;
}

.profile p {
    margin: 0.5em 0;
}

.last-actions {
    float: right;
    width: 40%;
    min-height: 100px;
    background: #f1c40f;
    border: 5px solid white;
    border-bottom-width: 15px;
    box-shadow: 0 0 8px -1px #f39c12;
}

.last-actions ul {
    margin: 0;
    padding: 10px;
    list-style: none;
}

.last-actions li {
    margin-bottom: 0.5em;
    font-size: 14px;
    font-family: "Courier New";
}

.last-actions time {
    display: block;
    font-size: 11px;
    color: #666666;
}

.posts {
    min-height: 50px;
    margin: 20px 0;
    padding: 20px;
    background: #f5f5f5;
    box-shadow: 0 0 5px #cccccc;
}

.featured-post header h1 {
    margin: 0;
    margin-bottom: 0.8em;
}

/* Footer */
footer.page-footer {
    min-height: 50px;
    padding: 20px;
    font-size: 14px;
    color: black;
    background-color: #f1c40f;
    background-image: linear-gradient(45deg, transparent 50%, white 50%),
    linear-gradient(-45deg, transparent 50%, white 50%),
    linear-gradient(135deg, transparent 50%, #2c3e50 50%),
    linear-gradient(-135deg, transparent 50%, #2c3e50 50%);
    background-repeat: repeat-x;
    background-position: 0 0, 0 0, 0 100%, 0 100%;
    background-size: 10px 12px;
}

.page-footer::after {
    content: "";
    display: table;
    clear: both;
}

.page-footer .info {
    float: left;
}

.page-footer .info img {
    margin-right: 0.5em;
    vertical-align: middle;
    border: 2px solid white;
    box-shadow: 0 0 4px #c0392b;
    transform: rotate(-5deg);
}

.page-footer .copyright {
    float: right;
    padding-top: 20px;
    font-size: 12px;
}

/*Downloaded from https://www.codeseek.co/rodskif/andx421andx442andx440andx430andx43dandx438andx446andx430-andx433andx43bandx430andx432andx43dandx430andx44f-OWPdZR */
// Знакомство с HTML5

// ПОДКЛЮЧЕНИЕ ШРИФТОВ
// Технически подключение веб-шрифтов производится с помощью CSS-правила @font-face. Читается как «эт-правило font-face». Вот пример:

// @font-face {
//     font-family: "Roboto";
//     src:
//         local("Roboto Regular"),
//         url("/assets/course73/roboto.woff") format("woff");
// }

// В этом правиле вы указываете название шрифта, которое будете использовать в font-family и источники, из которых браузер сможет загрузить шрифт. Обычно сначала указывают название шрифта в системе, чтобы браузер попытался найти его локально, а затем указывают адрес файла шрифта в интернете.

// Более подробно о технических тонкостях подключения шрифтов можно прочитать в серии статей на webfont.ru: первая часть и вторая часть.

// Получается, что можно хранить шрифты и подключать их со своего сервера. Это особенно полезно, когда шрифт очень редкий и его нет ни в одном из шрифтовых сервисов. В этом случае поступают так:

//     Берут файл шрифта (например, .ttf) и конвертируют в веб-формат в сервисе наподобие Font Squirrel (для кириллических шрифтов надо указать дополнительные параметры конвертации).
//     Затем сконвертированные файлы шрифта размещают у себя на сервере.
//     И подключают шрифт с помощью @font-face.

Comments