Create a Webpage using notepad

Welcome to today's video everyone. In today's video, we show how to design a simple responsive web layout using our computer's basic text editor Notepad. Watch the video tutorial below before collecting the code for this snippet. If you watch the video then you can understand the step-by-step process of this project. Although the responsive part is not shown in the video I have added this part to the source code for your convenience. Our YouTube channel has many more videos like this. If the videos are useful for you then you can subscribe to our channel.

Hope you have watched the video and understood how to design a simple web layout with a notepad. In this web layout, we have a navigation menu, a banner, a content section, and a footer. There is a logo on the left and some navigation items on the right in the navigation menu. The Banner Section has headlines, sub-headlines, supporting background images, and a call-to-action button. There are two images side by side in the content section. Below the images, there are some supporting texts. We have added copyright text to the footer section below all. We've used CSS media queries to make the snippet responsive so it looks good on smaller devices. You will not be able to see the responsive part in the video. For your convenience, I have added that part.

You May Also like:

Create a Webpage using notepad [ Source Code ]:

Create an HTML file and paste the code in there. We are not using any external CSS file here but if you want you can create one. in case of any inconvenience, please download the source code from the download button below.

ADD HTML:

<!DOCTYPE html>
<!--divinectorweb.com-->
<html>
<head>
	<title>website using notepad</title>
	<link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
    <style>
        * {
	margin: 0;
	padding: 0;
}
.wrapper {
	width: 1170px;
	margin: 0 auto;
}
header {
	height: 60px;
	background: #030407;
	padding: 0 50px;
}
.logo {
	width: 30%;
	float: left;
	color: #fff;
	font-weight: bold;
	line-height: 60px;
	font-size: 25px;
}
nav {
	width: 68%;
	float: right;
}
nav ul {
	list-style: none;
	float: right;
}
nav ul li {
	display: inline-block
}
nav ul li a {
	text-decoration: none;
	color: #fff;
	font-weight: bold;
	margin: 0 10px;
	line-height: 60px
}
.banner {
	color: #fff;
	display: grid;
	place-items: center;
	height: 95vh;
	background-image: url(img/1.jpg);
	background-size: cover;
	background-position: center center;
}
.banner h1 {
	font-size: 70px;
	font-family: alfa slab one;
}
.banner a {
	text-decoration: none;
	background: orangered;
	display: inline-block;
	color: #fff;
	padding: 10px 20px;
	font-size: 18px;
	margin-top: 25px;
	border-radius: 50px;
	text-transform: uppercase;
}
.content {
	padding: 5% 0;
}
.img-area {
	display: flex;
	width: 95%;
	margin: auto;
	margin-left: 10px;
}
.img-area img {
	width: 48%;
	margin: 30px 15px;
}
.content p {
	font-size: 18px;
	line-height: 1.7;
	font-family: sans-serif;
	margin-bottom: 20px;
}
footer {
	background: #000;
	color: #fff;
	padding: 15px 50px;
	text-align: center;
}
/* responsive css */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	header {
		padding: 0 30px;
	}
	.wrapper {
		width: 100%;
	}
	.logo {
		width: 100%;
		text-align: center;
	}
	nav {
		width: 100%;
		float: none;
		text-align: center;
	}
	nav ul {
		float: none;
	}
	nav ul li a {
		margin: 0 5px;
		line-height: 18px;
	}
	.banner .wrapper {
		text-align: center;
	}
}
@media (max-width:767px) {
	header {
		padding: 0 30px;
	}
	.wrapper {
		width: 100%;
	}
	.logo {
		width: 100%;
		text-align: center;
	}
	nav {
		width: 100%;
		float: none;
		text-align: center;
	}
	nav ul {
		float: none;
	}
	nav ul li a {
		margin: 0 5px;
		line-height: 20px;
		font-size: 10px;
	}
	.banner {
		width: 100vw;
	}
	.banner .wrapper {
		text-align: center;
	}
	.banner {
		height: 45vh;
	}
	.banner h1 {
		font-size: 30px;
	}
	.content p {
		text-align: center;
	}
}
    </style>
</head>
<body>
	<header>
		<div class="wrapper">
			<div class="logo">
				Logo
			</div>
			<nav>
				<ul>
					<li>
						<a href="#">Home</a>
					</li>
					<li>
						<a href="#">About</a>
					</li>
					<li>
						<a href="#">Portfolio</a>
					</li>
					<li>
						<a href="#">Services</a>
					</li>
					<li>
						<a href="#">Contact</a>
					</li>
				</ul>
			</nav>
		</div>
	</header>
	<div class="banner">
		<div class="wrapper">
			<h4>Hello, Welcome to my Website</h4>
			<h1>Jason Holder</h1>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p><a href="#">Learn More</a>
		</div>
	</div>
	<div class="content">
		<div class="wrapper">
			<div class="img-area"><img alt="" src="img/2.jpg"> <img alt="" src="img/3.jpg"></div>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
		</div>
	</div>
	<footer>
		<p>All Right Reserved by @Brand Name</p>
	</footer>
</body>
</html>

We hope the code is working for you. Our visitors can find more code snippets when they click on a load more button below the Homepage of our website. There are more code samples that can help you learn new things. We wish to thank you for coming to us.

DOWNLOAD CODE

Create a Webpage using notepad [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Create a Webpage using notepad

Create a Webpage using notepad [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form