Online редактор кода

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Name</title>

</head>
<body>

<div id="main">
    <div id="top">
        Website Name
    </div>

<nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Contact</a>
        <a href="#">Blog</a>
    </nav>

<div class="content">
        <div id="block1">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
            <a href="#">Link 4</a>
            <a href="#">Link 5</a>
        </div>
        <div id="block2">
        
        <h1>Page Title</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum porta erat in pellentesque. Nam sit amet viverra massa. Nulla facilisi. Vestibulum pellentesque massa quis vulputate tristique. Praesent eget augue elit. Etiam ultrices, nibh ac tempor varius, mauris enim dapibus justo, non dignissim magna libero eu est. Sed aliquam mattis purus, vel aliquam est interdum nec. Mauris porttitor lobortis dui, nec pharetra eros sagittis eget.</p>

<h2>Page Subtitle</h2>
<p>Nunc eros diam, fermentum at dui at, blandit luctus libero. Nulla condimentum sit amet felis in cursus. Ut ultricies iaculis dictum. Pellentesque in est ac libero interdum fermentum sed ac dolor. Donec elementum rutrum dictum. Suspendisse lacus erat, ultrices vel massa sit amet, rutrum cursus lorem. Cras at sapien ac orci mattis pharetra. Donec vestibulum sed magna vel lobortis. Pellentesque pretium gravida accumsan. Phasellus gravida enim quis sem feugiat varius. Nulla ornare magna convallis est consequat, sed congue justo rutrum.</p>

<h2>Page Subtitle</h2>
<p>Aliquam eu neque quis tortor fringilla semper vitae eu est. Proin sapien arcu, ultricies at dolor in, suscipit lobortis nunc. Mauris eget finibus leo, sed gravida orci. Integer at mi sed metus varius congue. Sed sed sagittis magna, blandit mollis elit. Fusce eu maximus sapien, vel tempor risus. Suspendisse aliquam venenatis elementum. Etiam bibendum convallis consequat.</p>
        </div>
    </div>

<div class="footer">
        © 2025 Website Name. All rights reserved.
    </div>
</div>

</body>
</html>

CSS

body {
    background-color: #f9fafc;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}

#main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

#top {
    background-color: #4a90e2;
    color: #fff;
    padding: 20px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    border-radius: 8px;
}

nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
    padding: 10px 0;
    border-bottom: 2px solid #ddd;
}

nav a {
    text-decoration: none;
    color: #4a90e2;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

nav a:hover {
    background-color: #4a90e2;
    color: #fff;
}

.content {
    display: flex;
    gap: 20px;
}

#block1 {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    width: 30%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#block1 a {
    display: block;
    text-decoration: none;
    color: #333;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    transition: color 0.3s;
}

#block1 a:hover {
    color: #4a90e2;
}

#block2 {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    width: 70%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.footer {
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
    color: #aaa;
}

JavaScript