Copied successfully!
Introduction to <br>tag
The <br>tag in HTML stands for <break>and is used to create a line break within text. Unlike other HTML tags, <br>is an empty element, meaning it does not have a closing tag, this tag is a simple yet powerful tool in web development, allowing developers to control text flow and structure without starting a new paragraph.
Copy to clipboard
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title of <br></title>
<link rel="stylesheet" href="styles.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Montserrat:wght@500;600&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<nav class="navbar">
<div class="logo">ModernWeb</div>
<button class="menu-btn" id="menu-btn" aria-label="Toggle menu">☰</button>
<ul class="nav-menu" id="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>
</ul>
</nav>
</header>
<section class="hero">
<div class="hero-content">
<h1>Discover Modern Web Design<br> that Stands Out</h1>
<p>We bring your ideas to life with<br> innovative and captivating designs. <br> Let's build something amazing together.</p>
<a href="#" class="cta-button">Get Started</a>
</div>
</section>
<section class="features">
<div class="container">
<h2>Our Key Features</h2>
<div class="feature-grid">
<div class="feature-card">
<div class="icon">📱</div>
<h3>Responsive Design</h3>
<p>Looks perfect on any device<br> and screen size.</p>
</div>
<div class="feature-card">
<div class="icon">⚡</div>
<h3>Lightning Fast</h3>
<p>Optimized for speed<br> and performance.</p>
</div>
<div class="feature-card">
<div class="icon">🎨</div>
<h3>Creative Layouts</h3>
<p>Customizable layouts<br> to match your vision.</p>
</div>
<div class="feature-card">
<div class="icon">🔒</div>
<h3>Secure & Reliable</h3>
<p>We prioritize your security<br> and data privacy.</p>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer-columns">
<div class="footer-column">
<h3>About Us</h3>
<p>ModernWeb is your go-to platform for building visually stunning and high-performing websites. We focus on delivering top-notch web experiences.</p>
</div>
<div class="footer-column">
<h3>Quick Links</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Learn</h3>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Follow Us</h3>
<div class="social-icons">
<a href="#" aria-label="Facebook">
</a>
<a href="#" aria-label="Twitter">
</a>
<a href="#" aria-label="LinkedIn">
</a>
<a href="#" aria-label="Instagram">
</a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 ModernWeb. All rights reserved.</p>
</div>
</div>
</footer>
</body>
</html>Copy to clipboard
/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
background-color: #f4f4f9;
color: #333;
line-height: 1.6;
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Header and Navigation */
.header {
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px 0;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.logo {
font-size: 1.8rem;
font-weight: 600;
font-family: 'Montserrat', sans-serif;
color: #2575fc;
text-transform: uppercase;
}
.menu-btn {
display: none;
background: none;
border: none;
font-size: 2rem;
color: #333;
cursor: pointer;
}
.nav-menu {
list-style: none;
display: flex;
transition: all 0.3s ease;
}
.nav-menu li {
margin-left: 20px;
}
.nav-menu a {
text-decoration: none;
color: #333;
font-weight: 500;
transition: color 0.3s ease, transform 0.3s ease;
}
.nav-menu a:hover {
color: #007bff;
transform: scale(1.1);
}
/* Medium Devices (max-width: 768px) */
@media (max-width: 768px) {
.menu-btn {
display: block;
}
.nav-menu {
display: none;
flex-direction: column;
position: absolute;
top: 5.40em;
right: 0;
background-color: #ffffff;
border-radius: 0 0 10px 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 30px;
width: 580px;
border-top: 1px solid #dddfe0;
z-index: 1000;
transition: all 0.3s ease;
}
.nav-menu.active {
display: flex;
}
.nav-menu li {
margin: 10px 0;
}
}
/* Small Devices (max-width: 600px) */
@media (max-width: 600px) {
.nav-menu {
width: 100%;
top: 4.5em;
padding: 20px;
border-radius: 0;
}
}
/* Extra Small Devices (max-width: 480px) */
@media (max-width: 480px) and (min-width: 361px) {
.nav-menu {
width: 100%;
padding: 15px;
top: 4.2em;
font-size: 0.9rem;
}
.nav-menu li {
margin: 8px 0;
}
.cta-button {
font-size: 0.9rem;
padding: 10px 20px;
}
}
/* Ultra Small Devices (max-width: 320px) */
@media (max-width: 320px) {
.nav-menu {
width: 100%;
padding: 10px;
top: 3.8em;
}
.nav-menu li {
margin: 5px 0;
font-size: 0.8rem;
}
.cta-button {
font-size: 0.8rem;
padding: 8px 16px;
}
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: #fff;
text-align: center;
padding: 100px 20px;
position: relative;
overflow: hidden;
}
.hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 20%, transparent 70%);
opacity: 0.7;
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 1;
animation: fadeInUp 1.2s ease-out;
}
@keyframes fadeInUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.hero-content h1 {
font-size: 2.8rem;
margin-bottom: 20px;
font-family: 'Montserrat', sans-serif;
}
.hero-content p {
font-size: 1.2rem;
margin-bottom: 30px;
}
.cta-button {
background-color: #ffffff;
color: #2575fc;
padding: 12px 25px;
text-decoration: none;
border-radius: 30px;
font-weight: 700;
transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.cta-button:hover {
background-color: #2575fc;
color: #ffffff;
transform: translateY(-3px);
}
.features .container {
max-width: 1200px;
margin: 0 auto;
}
.features h2 {
font-size: 2.4rem;
margin-bottom: 50px;
color: #333;
font-family: 'Montserrat', sans-serif;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.feature-card {
background-color: #ffffff;
border-radius: 15px;
padding: 30px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(0,0,0,0.05) 20%, transparent 80%);
opacity: 0;
transition: opacity 0.3s ease;
}
.feature-card:hover::before {
opacity: 1;
}
.icon {
font-size: 2rem;
margin-bottom: 15px;
color: #2575fc;
}
.feature-card h3 {
font-size: 1.6rem;
margin-bottom: 10px;
color: #2575fc;
}
.feature-card p {
font-size: 1rem;
color: #666;
}
/* Footer */
.footer {
background-color: #333;
color: #ffffff;
padding: 40px 20px;
text-align: center;
margin-top: 1em;
}
.footer .container {
max-width: 1200px;
margin: 0 auto;
}
.footer-columns {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 30px;
gap: 20px;
}
.footer-column {
flex: 1;
min-width: 200px;
margin-bottom: 20px;
}
.footer-column h3 {
font-size: 1.2rem;
margin-bottom: 15px;
color: #ffffff;
}
.footer-column p {
font-size: 0.9rem;
color: #dddddd;
line-height: 1.6;
}
.footer-column ul {
list-style: none;
padding: 0;
}
.footer-column ul li {
margin-bottom: 10px;
}
.footer-column ul li a {
text-decoration: none;
color: #cccccc;
font-size: 0.9rem;
transition: color 0.3s ease;
}
.footer-column ul li a:hover {
color: #6a11cb;
}
.social-icons {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
margin-top: 10px;
}
.social-icons a {
display: block;
text-decoration: none;
margin-bottom: 10px;
color: #ffffff;
transition: color 0.3s ease, transform 0.3s ease;
}
.social-icons a:hover {
color: #6a11cb;
transform: scale(1.1);
}
.footer-bottom {
border-top: 1px solid #444;
padding-top: 20px;
font-size: 0.8rem;
color: #aaaaaa;
}
/* Responsive Footer for Small Devices */
@media (max-width: 768px) {
.footer-columns {
flex-direction: column;
align-items: center;
text-align: center;
}
.footer-column {
margin-bottom: 20px;
}
}Copy to clipboard
// JavaScript for menu toggle
const menuBtn = document.getElementById('menu-btn');
const navMenu = document.getElementById('nav-menu');
menuBtn.addEventListener('click', () => {
navMenu.classList.toggle('active');
});
Global Attributes
| Attributes | Description |
|---|---|
| accesskey | Specifies a shortcut key to activate or focus an element. |
| autocapitalize | Controls whether and how text input is automatically capitalized. |
| class | Specifies one or more class names for the element, allowing CSS styling and JavaScript manipulation. |
| contenteditable | Specifies whether the content of an element is editable or not. |
| contextmenu | Specifies a context menu for the element. |
| dir | Defines the text direction. Possible values are "ltr" (left-to-right), "rtl" (right-to-left), and "auto". |
| draggable | Specifies whether an element is draggable. Possible values are "true" or "false". |
| enterkeyhint | Specifies the action label or icon to be shown for the enter key on virtual keyboards. |
| hidden | Indicates that the element is not yet, or is no longer, relevant. The browser does not display elements that have the `hidden` attribute set. |
| id | Specifies a unique identifier for the element. |
| inputmode | Provides a hint to browsers for which virtual keyboard configuration to use when editing this element or its descendants. |
| is | Allows you to specify the type of custom element. |
| lang | Specifies the language of the element's content. |
| nonce | A cryptographic nonce ("number used once") that can be used by Content Security Policy (CSP) to determine whether or not a given fetch will be allowed to proceed. |
| part | Specifies the element’s part in the shadow DOM. |
| slot | Assigns a slot in a shadow DOM shadow tree. |
| spellcheck | Indicates whether the element is subject to spell checking. |
| style | Provides inline CSS styling for the element. |
| tabindex | Specifies the tab order of the element. |
| title | Adds extra information about the element, displayed as a tooltip when hovering over the element. |
| translate | Specifies whether the content of the element should be translated. Possible values are "yes" or "no". |
| HTML Attributes | Global Attributes | Event Attributes |
|---|---|---|
| To view the full list | To view the full list | To view the full list |
| elements |  |  |  |  |  |
|---|---|---|---|---|---|
| <br> | Yes | Yes | Yes | Yes | Yes |
Improve Our Platform
Did you find what you were looking for?
Learn how to contribute.Last updated on by our contributors.
View this page on GitHub• Report an issue with this content