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.

Database System Concepts
7th Edition
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Chapter1: Introduction
Section: Chapter Questions
Problem 1PE
icon
Related questions
Question
100%

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

 

Expert Solution
Step 1

<!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>

steps

Step by step

Solved in 3 steps

Blurred answer
Knowledge Booster
Designing elements of Web Page
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.
Similar questions
Recommended textbooks for you
Database System Concepts
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
Starting Out with Python (4th Edition)
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
Digital Fundamentals (11th Edition)
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
C How to Program (8th Edition)
C How to Program (8th Edition)
Computer Science
ISBN:
9780133976892
Author:
Paul J. Deitel, Harvey Deitel
Publisher:
PEARSON
Database Systems: Design, Implementation, & Manag…
Database Systems: Design, Implementation, & Manag…
Computer Science
ISBN:
9781337627900
Author:
Carlos Coronel, Steven Morris
Publisher:
Cengage Learning
Programmable Logic Controllers
Programmable Logic Controllers
Computer Science
ISBN:
9780073373843
Author:
Frank D. Petruzella
Publisher:
McGraw-Hill Education