На нашем сайте Вы сможете найти готовые курсовые и дипломные работы по программированию
Сейчас работаем

Шаблон сайта онлайн курсов (html, css)

Задание

Верстка шаблона сайта онлайн курсов по программированию средствами html и css. 

Функционал программы

Шаблон сайта без функционала. Весь функционал напишите сами под свои нужды и так как вам нужно. 

Среда разработки WebStorm.

Фрагмент программного кода

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Мой сайт</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
    <div id="logo" onclick="slowScroll('#top')">
        <span>Мой сайт</span>
    </div>
    <div id="about">
        <a href="#" title="Возможности" onclick="slowScroll('#main')">Возможности</a>
        <a href="#" onclick="slowScroll('#overiew')" title="Преимущества">Преимущества</a>
        <a href="#" onclick="slowScroll('#contacts')" title="Контакты">Контакты</a>
        <a href="#" onclick="slowScroll('#faq')" title="Ответы на вопросы">FAQ</a>
    </div>
</header>
<div id="top">
    <h1>Программирование</h1>
    <h3>как образ жизни</h3>
</div>

<div id="main">
    <div class="intro">
        <h2>Наши услуги помогут вам</h2>
        <span>Большой выбор всего, что может вам пригодиться</span>
    </div>
    <div class="text">
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Eos impedit, ut vero commodi voluptate? Ipsam reiciendis, necessitatibus incidunt ipsa
            quis sapiente excepturi, optio iusto voluptatibus dolorem officia quidem,
            numquam eaque minus, au tem presentiment rem architect dolores.
            Ipsa under id valid optio magna anim! Illumos obcaecati,
            dolorem distinction nemo, ipsum ire.</span>
    </div>
</div>
<div id="overview">
    <h2>Преимущества</h2>
    <h4>с нами все проще</h4>

    <div class="img">
        <img src="/Images/loading-150-1.gif" data-src="http://persianprogrammer.com/Images/Education/Large/202172305154310.png" alt="">
        <span>Изучение языка C# для начинающих</span>
    </div>
    <div class="img">
        <img src="/Images/loading-150-1.gif" data-src="https://itcrumbs.ru/wp-content/uploads/2020/08/fotoshop1.jpg" alt="">
        <span>Уроки PhotoShop для начинающих</span>
    </div>
</div>
<div id="contacts">
    <div style="text-align: center;"><h5>Обратная связь</h5></div>
    <form id="form_input">
        <label for="name">Имя <span>*</span></label><br>
        <input type="text" placeholder="Введите имя" name="name" id="name"><br>
        <label for="email">Ваша почта <span>*</span></label><br>
        <input type="email" placeholder="Введите email" name="email" id="email"><br>
        <label for="message">Сообщение <span>*</span></label><br>
        <textarea placeholder="Введите ваше сообщение" name="message" id="message"></textarea><br>
        <div id="mess_send" class="btn">Отправить</div>
    </form>
</div>

<div id="faq">
    <div>
        <span class="title">Оплата</span><br>
        <span class="heading">Как будет проходит оплата?</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium beatae asperiores debitis perspiciatis perferendis nemo tempore distinctio officia commodi et non tempora laudantium culpa nostrum, quidem, quasi ratione itaque nam.</p>
        <span class="heading">Как будет проходит оплата?</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium beatae asperiores debitis perspiciatis perferendis nemo tempore distinctio officia commodi et non tempora laudantium culpa nostrum, quidem, quasi ratione itaque nam.</p>
        <span class="heading">Как будет проходит оплата?</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium beatae asperiores debitis perspiciatis perferendis nemo tempore distinctio officia commodi et non tempora laudantium culpa nostrum, quidem, quasi ratione itaque nam.</p>
    </div>
    <div>
        <span class="title">Информация</span><br>
        <span class="heading">Что входит в услуги сервиса</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium beatae asperiores debitis perspiciatis perferendis nemo tempore distinctio officia commodi et non tempora laudantium culpa nostrum, quidem, quasi ratione itaque nam.</p>
        <span class="heading">Что входит в услуги сервиса</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium beatae asperiores debitis perspiciatis perferendis nemo tempore distinctio officia commodi et non tempora laudantium culpa nostrum, quidem, quasi ratione itaque nam.</p>
        <span class="heading">Что входит в услуги сервиса</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium beatae asperiores debitis perspiciatis perferendis nemo tempore distinctio officia commodi et non tempora laudantium culpa nostrum, quidem, quasi ratione itaque nam.</p>
    </div>
    <div>
        <span class="title">Гарантии</span><br>
        <span class="heading">Какие гарантии есть</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium beatae asperiores debitis perspiciatis perferendis nemo tempore distinctio officia commodi et non tempora laudantium culpa nostrum, quidem, quasi ratione itaque nam.</p>
        <span class="heading">Какие гарантии есть</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium beatae asperiores debitis perspiciatis perferendis nemo tempore distinctio officia commodi et non tempora laudantium culpa nostrum, quidem, quasi ratione itaque nam.</p>
        <span class="heading">Какие гарантии есть</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium beatae asperiores debitis perspiciatis perferendis nemo tempore distinctio officia commodi et non tempora laudantium culpa nostrum, quidem, quasi ratione itaque nam.</p>
    </div>
</div>
<script src="/Images/loading-150-1.gif" data-src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    function slowScroll(id) {
        $('body', 'html').animate({
            scrollTop: $(id).offset().top
        }, 500);
    }

    $(document).on("scroll", function () {
        if ($(window).scrollTop() === 0)
            $("header").removeClass("fixed")
        else
            $("header").attr("class", "fixed")
    });
</script>
</body>
</html>

Скриншот архива с проектом

Пояснения по запуску программы

Просто открыть файл index.html в браузере.

Купить 1000,00 
Сразу после оплаты Вы получите работу на электронную почту. Файлы отправляются автоматически. Исходник программ Вы сможете отредактировать, как Вам нужно.
Комментарии (0)

admin

/ /

Оставить комментарий

Ты не можешь комментировать

Только зарегистрированые пользователи имеют возможность комментировать работы
Похожие работы
Другие работы автора
Тип Название Рейтинг Категория Стоимость
Исходник Автомагазин (C#, WPF, SQL Server, SQLite) new 0 .NET (C#) 2 000,00
Исходник Автошкола (C#, WPF, SQL Server, SQLite) new 0 .NET (C#) 2 500,00
Курсовая АИС "Авиакасса" (C#, WPF, WinForms, SQLite, SQL Server, Access) 0 .NET (C#) 5 500,00
Курсовая АИС База данных "Регистратура поликлиники" (C#, WPF,WinFroms, SQLite, Access ) 0 .NET (C#) 5 000,00
Исходник АИС Кинотеатр (C#, WPF, Windows Forms, SqLite, SQL Server) 0 .NET (C#) 2 000,00
Новые работы
Тип Название Рейтинг Категория Стоимость
Исходник Библиотека. Учет книг (C#, WPF, NET 6.0, SQL Server) new 0 .NET (C#) 2 000,00
Исходник Учет посещаемости занятий (C#, WPF, SQL Server, SQLite) new 0 .NET (C#) 2 500,00
Исходник Программа "Гипотеза Коллатца" Python new 0 Python 500,00
Исходник Генератор календарей (Python) new 1 Python 800,00
Контрольная Театр (C#, WinForms, Access) new 0 .NET (C#) 1 500,00
Купить

1000,00 

Покупается впервые!
Сразу после оплаты Вы получите работу на электронную почту. Файлы отправляются автоматически. Исходник программ Вы сможете отредактировать, как Вам нужно.

Заказать через

Сайт.rar
6776
Оцени работу

рейтинг

Категории
Шаблон сайта онлайн курсов (html, css)
Шаблон сайта онлайн курсов по программированию. Это не рабочий сайт. функционала нет, его вы напишите сами.
Категория: Образование
Стоимость: 1000,00