Create a simple one page HTML newsletter using HTML and CSS for a fictitious club or a real organization if you so wish. This must be a single page project. As a member you are commissioned to build a one page newsletter. The basic structure should follow the following specifications: Header and footer. A three column main content layout. The columns should be 20%, 60%, 20%. The maximum width of the newsletter must be 1200px. All styling must be included in a single CSS file.
Web development:
Create a simple one page HTML newsletter using HTML and CSS for a fictitious club or a real organization if you so wish. This must be a single page project. As a member you are commissioned to build a one page newsletter. The basic structure should follow the following specifications:
- Header and footer.
- A three column main content layout. The columns should be 20%, 60%, 20%.
- The maximum width of the newsletter must be 1200px.
- All styling must be included in a single CSS file.
- Your newsletter must use HTML5 semantic layout convention.
- You must provide usage of at least two block level elements, three font style elements, and two list elements, at least two images in the document
<!DOCTYPE html>
<html>
<head>
<title>
Simple web Development Template
</title>
</head>
<body>
<nav class="navbar background">
<ul class="nav-list">
<div class="logo">
<img src="logo.png">
</div>
<li><a href="#web">Web Technology</a></li>
<li><a href="#program">C Programming</a></li>
<li><a href="#course">Courses</a></li>
</ul>
<div class="rightNav">
<input type="text" name="search" id="search">
<button class="btn btn-sm">Search</button>
</div>
</nav>
<section class="firstsection">
<div class="box-main">
<div class="firstHalf">
<h1 class="text-big" id="web">
Web Technology
</h1>
<p class="text-small">
HTML stands for HyperText Markup
Language. It is used to design
web pages using a markup language.
HTML is the combination of Hypertext
and Markup language. Hypertext
defines the link between the web
pages. A markup language is used
to define the text document within
tag which defines the structure of
web pages. HTML is a markup language
that is used by the browser to
manipulate text, images, and other
content to display it in the required
format.
</p>
</div>
</div>
</section>
<section class="secondsection">
<div class="box-main">
<div class="secondHalf">
<h1 class="text-big" id="program">
C Programming
</h1>
<p class="text-small">
C is a procedural programming language.
It was initially developed by Dennis
Ritchie as a system programming
language to write operating system.
The main features of C language include
low-level access to memory, simple set
of keywords, and clean style, these
features make C language suitable for
system programming like operating system
or compiler development.
</p>
</div>
</div>
</section>
<section class="section">
<div class="paras">
<h1 class="sectionTag text-big">Java</h1>
<p class="sectionSubTag text-small">
Java has been one of the most
popular programming language
for many years. Java is Object
Oriented. However it is not
considered as pure object oriented
as it provides support for primitive
data types (like int, char, etc) The
Java codes are first compiled into byte
code (machine independent code). Then
the byte code is run on Java Virtual
Machine (JVM) regardless of the
underlying architecture.
</p>
</div>
<div class="thumbnail">
<img src="img.png" alt="laptop image">
</div>
</section>
<footer class="background">
<p class="text-footer">
Copyright ©-All rights are reserved
</p>
</footer>
</body>
</html>
Step by step
Solved in 3 steps