<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> <!-- Sets the character encoding for the
document -->
<meta name="viewport" content="width=device-width, initial-
scale=1.0"> <!-- Ensures proper rendering and touch zooming on mobile
devices -->
<title>Codeflash - Samples</title> <!-- Sets the title of the webpage
displayed in the browser tab -->
<style>
/* Resetting default browser styles and setting common properties */
*{
margin: 0;
padding: 0;
list-style: none; /* Removes bullet points from lists */
text-decoration: none; /* Removes underlines from links */
transition: 0.3s; /* Adds a transition effect to all properties */
-webkit-touch-callout: none; /* Disables callout, tooltip appearing
when touching and holding a touch target */
-webkit-user-select: none; /* Disables text selection on Safari */
user-select: none; /* Disables text selection */
outline: none; /* Removes outline from elements */
/* Sets the background color of the body */
body {
background-color: #333; /* Dark gray background */
}
/* Styles for the hamburger menu container */
.ham {
width: 45px;
height: 45px;
background: black;
border-radius: 7px; /* Rounds the corners */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 99; /* Ensures the menu is on top */
position: fixed;
top: 15px;
right: 20px;
/* Styles for the lines inside the hamburger menu */
.line1, .line2, .line3 {
background: white;
border-radius: 3px;
width: 25px;
height: 3px;
margin: 2px;
}
/* Transformations applied when the menu is active (opened) */
.active .line1 {
transform: rotate(-45deg) translate(-5px, 5px);
.active .line2 {
opacity: 0; /* Hides the middle line */
.active .line3 {
transform: rotate(45deg) translate(-5px, -5px);
/* Styles for the header section */
header {
width: 100%;
height: 100vh; /* Full viewport height */
/* Class to slide the menu into view */
.link {
left: 0%;
/* Styles for the navigation menu */
nav ul {
left: -50%; /* Positions the menu off-screen to the left */
position: fixed;
height: 100vh;
width: 50%;
background: #111; /* Dark background for the menu */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* Styles for the menu heading */
ul h1 {
color: #fff; /* White text color */
/* Styles for each menu item */
ul li {
text-align: center;
padding: 15px 0;
width: 100%;
/* Hover effect for menu items */
ul li:hover {
background: #26A69A; /* Changes background on hover */
padding-left: 7%; /* Indents text on hover */
width: 93%;
}
/* Styles for the menu links */
li a {
color: #fff; /* White text color */
/* Styles for text content */
.text {
padding: 1px 10px;
color: #fff; /* White text color */
</style>
</head>
<body>
<header>
<!-- Navigation menu -->
<nav>
<ul id="ul">
<h1>MENU</h1><br>
<li><a href="#">HOME</a></li>
<li><a href="#">PAGES</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
</nav>
<!-- Hamburger menu icon -->
<div id="hamMenu" class="ham" onclick="hamMenuClick()">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<br>
<!-- Sample text content -->
<h2 class="text">Lorem Ipsum</h2>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</p>
<br>
<!-- Sample image -->
<img src="[Link] width="100%">
<br>
<!-- More sample text content -->
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</p>
<br>
<!-- Another sample image -->
<img src="[Link] width="100%">
<br>
<!-- Final sample text content -->
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</p>
<br><br>
<!-- Footer text -->
<p align="center"><font color="#A7A8AA">2023 ©
Codeflash</font></p>
<br>
</header>
<script>
// Function to handle hamburger menu click
function hamMenuClick() {
// Toggles the 'active' class on the hamburger menu to animate the lines
[Link]("hamMenu").[Link]("active");
// Toggles the 'link' class on the navigation menu to slide it into view
[Link]("ul").[Link]("link");
</script>
</body>
</html>