Пример 4. Сайт

Ниже представлен код HTML и CSS с помощью которых можно организовать сайт.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мой сайт - Главная</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- Шапка -->
    <header>
        <div class="container header-content">
            <div class="logo">МойСайт</div>
            <nav>
                <ul>
                    <li><a href="#">Главная</a></li>
                    <li><a href="#">О нас</a></li>
                    <li><a href="#">Услуги</a></li>
                    <li><a href="#">Портфолио</a></li>
                    <li><a href"#">Контакты</a></li>
                </ul>
            </nav>
        </div>
    </header>
    
    <!-- Основное содержимое -->
    <main>
        <section class="hero">
            <div class="container">
                <h1>Добро пожаловать на наш сайт</h1>
                <p>Мы предлагаем инновационные решения для вашего бизнеса. 
                    Наши продукты помогут вам достичь новых высот.</p>
                <a href="#" class="btn">Узнать больше</a>
            </div>
        </section>
        
        <div class="container">
            <section class="features">
                <div class="feature">
                    <i class="fas fa-rocket"></i>
                    <h3>Быстро</h3>
                    <p>Наши решения работают молниеносно, экономя ваше время.</p>
                </div>
                <div class="feature">
                    <i class="fas fa-shield-alt"></i>
                    <h3>Надежно</h3>
                    <p>Гарантируем безопасность и стабильность работы.</p>
                </div>
                <div class="feature">
                    <i class="fas fa-cogs"></i>
                    <h3>Удобно</h3>
                    <p>Интуитивно понятный интерфейс для комфортной работы.</p>
                </div>
            </section>
        </div>
    </main>
    
    <!-- Подвал -->
    <footer class="standard-footer">
        <div class="container">
            <div class="footer-columns">
                <div class="footer-column">
                    <h3>О компании</h3>
                    <p>Мы создаем качественные digital-решения для бизнеса с 2010 года.</p>
                </div>
                <div class="footer-column">
                    <h3>Навигация</h3>
                    <ul>
                        <li><a href="/">Главная</a></li>
                        <li><a href="/about">О нас</a></li>
                        <li><a href="/services">Услуги</a></li>
                        <li><a href="/portfolio">Портфолио</a></li>
                        <li><a href="/contact">Контакты</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Контакты</h3>
                    <p>г. Москва, ул. Примерная, 123</p>
                    <p>Телефон: +7 (123) 456-78-90</p>
                    <p>Email: info@mysite.ru</p>
                </div>
            </div>
            <div class="footer-bottom">
                <p>© 2023 МойСайт. Все права защищены.</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-vk"></i></a>
                    <a href="#"><i class="fab fa-telegram"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>

/* Общие стили */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    font-family: 'Arial', sans-serif;
    min-height: 100vh;
    background-color: #f5f5f5;
    color: #333;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: none;
    color: inherit
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Шапка */
header {
    background-color: #2c3e50;
    color: white;
    padding: 15px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    padding: 5px 10px;
    border-radius: 3px;
    transition: background-color 0.3s;
}

nav ul li a:hover {
    background-color: #34495e;
}

/* Основное содержимое */
main {
    flex: 1;
    padding: 30px 0;
}

.hero {
    background-color: #3498db;
    color: white;
    padding: 60px 0;
    text-align: center;
    margin-bottom: 30px;
}

.hero h1 {
    font-size: 36px;
    margin-bottom: 20px;
}

.hero p {
    font-size: 18px;
    max-width: 700px;
    margin: 0 auto 25px;
}

.btn {
    display: inline-block;
    background-color: #e74c3c;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #c0392b;
}

.features {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 40px 0;
}

.feature {
    flex: 0 0 calc(33.333% - 20px);
    background: white;
    padding: 25px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    text-align: center;
}

.feature i {
    font-size: 40px;
    color: #3498db;
    margin-bottom: 15px;
}

.feature h3 {
    margin-bottom: 15px;
}

/* Подвал */
footer {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 40px 0 20px;
}

.footer-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30px;
}

.footer-column {
    flex: 1;
    min-width: 200px;
    margin-bottom: 20px;
    padding: 0 15px;
}

.footer-column h3 {
    color: white;
    margin-bottom: 20px;
    font-size: 18px;
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column ul li a {
    color: #bdc3c7;
    transition: color 0.3s;
}

.footer-column ul li a:hover {
    color: #3498db;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.social-links a {
    color: #bdc3c7;
    margin-left: 15px;
    font-size: 18px;
    transition: color 0.3s;
}

.social-links a:hover {
    color: #3498db;
}

Мой сайт - Главная

МойСайт

Добро пожаловать на наш сайт

Мы предлагаем инновационные решения для вашего бизнеса. Наши продукты помогут вам достичь новых высот.

Узнать больше

Быстро

Наши решения работают молниеносно, экономя ваше время.

Надежно

Гарантируем безопасность и стабильность работы.

Удобно

Интуитивно понятный интерфейс для комфортной работы.