Registro

2,277 agilebug663

Abrir en el editor Publica tu código

Recomendado

20 June 2025

Formulario de registro de inicio de sesión HTML con efecto de tarjeta 3D

12 December 2025

Formulario de inicio de sesión y registro de gestión culinaria

7 July 2023

Formulario de inicio de sesión/registro versión 2

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BBC</title>
    <link rel="website icon" type="png"
    href="img/images.png">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/">
</head>
<body>
    <header class="header">
        <nav class="navbar">
            <div class="logo">МойСайт</div>
            <ul class="nav-menu">
                <li><a href="#home">Главная</a></li>
                <li><a href="#about">О нас</a></li>
                <li><a href="#services">Услуги</a></li>
                <li><a href="#contact">Контакты</a></li>
                <li class="navbar-register"><a href="#register">Регистрация</a></li>
            </ul>
            <div id="register-modal" class="modal">
                <div class="modal-content">
                    <span class="close">×</span>
                    <form id="registrationForm">
                            <h2>Регистрация</h2>
                
                            <div class="input-group">
                                <label for="username">Имя пользователя</label>
                                <input type="text" id="username" name="username" required>
                            </div>
                
                            <div class="input-group">
                                <label for="email">Электронная почта</label>
                                <input type="email" id="email" name="email" required>
                            </div>
                
                            <div class="input-group">
                                <label for="password">Пароль</label>
                                <input type="password" id="password" name="password" required>
                            </div>
                
                            <div class="input-group">
                                <label for="confirmPassword">Подтвердите пароль</label>
                                <input type="password" id="confirmPassword" name="confirmPassword" required>
                            </div>
                
                            <button class="button-1:hover button-2 " type="submit">Зарегистрироваться</button>
                        </form>
                    </div>
            </div>
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </nav>
    </header>
    <section id="home" class="hero">
        <div class="hero-content">
            <h1>Добро Пожаловать на BBC</h1>
            <p>Мы предлагаем лучшие услуги для вас.</p>
            <a href="#services" class="btn">Узнать больше</a>
        </div>
    </section>

<section id="about" class="about">
        <h2>О нас</h2>
        <p>Мы команда профессионалов, стремящихся предоставить лучшие решения для наших клиентов.</p>
    
    <section id="services" class="services">
        <h2>Наши Услуги, Цены и Трансляции </h2>
        <div class="service-cards">
            <div class="card">
                <h3>Услуги</h3>
                <p> программы и услуги, которые информируют, обучают и развлекают, а также доставляют их всем аудиториям на телевидении, радио, iPlayer, звуках, новостях, спорте и многом другом .</p>
            </div>
            <div class="card">
                <h3>Цены</h3>
                <p>Текущая цена BBC составляет 50 000 VND — за последние 24 часа она увеличилась на 0,30%. Следите за ценой акций BIBICA CORPORATION на нашем подробном графике.</p>
            </div>
            <div class="card">
                <h3>Трансляции</h3>
                <p>BBC One, BBC Two (включая национальные и региональные варианты), BBC Four, BBC News, CBBC и CBeebies, а также в длинных программах BBC Three .</p>
            </div>
        </div>
    </section>

CSS

/* Replace with your CSS Code 
(Leave empty if not needed) */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: #333;
}

.header {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: fixed;
    width: 100%;
    z-index: 1000;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
}

.nav-menu {
    list-style: none;
    display: flex;
    align-items: center;
}

.nav-menu li {
    margin-left: 2rem;
}

.nav-menu a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-menu a:hover {
    color: #007BFF;
}

.register-button {
    padding: 0.5rem 1rem;
    background-color: #007BFF;
    color: #fff;
    border-radius: 4px;
}

.register-button:hover {
    background-color: #0056b3;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger span {
    height: 3px;
    width: 25px;
    background: #333;
    margin-bottom: 4px;
    border-radius: 3px;
}

.hero {
    height: 100vh;
    background: url('https://via.placeholder.com/1920x1080') no-repeat center center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 1rem;
}

.hero-content {
    background: rgba(255, 255, 255, 0.8);
    padding: 2rem;
    border-radius: 10px;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.btn {
    padding: 0.75rem 1.5rem;
    background-color: #007BFF;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #0056b3;
}

.about, .services {
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.about h2, .services h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.about p, .services p {
    font-size: 1.1rem;
    color: #555;
}

.service-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
}

.card {
    background-color: #f9f9f9;
    padding: 2rem;
    border-radius: 8px;
    width: 300px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.card h3 {
    margin-bottom: 1rem;
    color: #007BFF;
}

.card p {
    color: #555;
}

.footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1.5rem 2rem;
}

@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 60px;
        right: -100%;
        height: 100vh;
        width: 200px;
        background-color: #fff;
        flex-direction: column;
        align-items: flex-start;
        padding: 2rem;
        transition: right 0.3s;
    }

.nav-menu.active {
        right: 0;
    }

.nav-menu li {
        margin: 1.5rem 0;
    }

.hamburger {
        display: flex;
    }
}

.navbar-register {
    margin-left: auto;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    padding-top: 60px;
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

section {
    padding: 20px;
    margin: 10px;
}

.input-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

.button-2 {
    width: 100%;
    padding: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

.button-1:hover {
    background-color: #218838;
}

.image-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.image {
    width: 200px;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.image:hover {
    transform: scale(1.1);
}

.button-3 {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
button:hover {
    background-color: #0056b3;
}

/* Replace with your JS Code 
(Leave empty if not needed) */
document.addEventListener('DOMContentLoaded', () => {
    const hamburger = document.querySelector('.hamburger');
    const navMenu = document.querySelector('.nav-menu');

hamburger.addEventListener('click', () => {
        navMenu.classList.toggle('active');
    });

document.addEventListener('DOMContentLoaded', function() {
    var modal = document.getElementById("register-modal");
    var registerLink = document.querySelector(".navbar-register a");
    var closeButton = document.querySelector(".close");

registerLink.onclick = function() {
        modal.style.display = "block";
    }

closeButton.onclick = function() {
        modal.style.display = "none";
    }

window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
});

document.getElementById('registrationForm').addEventListener('submit', function(event) {
    event.preventDefault();
    
    const username = document.getElementById('username').value;
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    const confirmPassword = document.getElementById('confirmPassword').value;

if (password !== confirmPassword) {
        alert('Пароли не совпадают');
        return;
    }

alert('Регистрация прошла успешно');
});

function changeImage() {
    const images = document.querySelectorAll('.image');
    images.forEach((img, index) => {
        img.src = `image${index + 2}.jpg`; 
    });
}