<!-- This section or div is a container for the entire body of the website. Refer to the #body-container part of the CSS for styling we have applied to this section -->
<div id="body-container">
  <div id="heading-container">
    <div class="heading">
      <h1>MY WEBSITE</h1>
    </div>
  </div>
  
  <!-- This section is the overall container for creating a new post. It includes a button that will show or hide the form to create a new post as well as the form itself. -->
  <div id="add-new-post-container">
    <!-- This section is the button to show the new post form -->
    <button class="new-post-button" onclick="showNewPostForm('new-post');">New Post</button>
    <!-- This section holds the form for creating a new blog post -->
    <div id="new-post">
      <form id="new-post-form" class="new-post-form">
        <!-- This part of the form is the image URL field -->
        <div class="new-form-title">
          <label class="new-post-label">Title</label>
          <input class="new-post-field" id="title" name="title" type="text" required />
        </div>
        <!-- This part of the form is where you enter the description -->
        <div class="new-form-content">
          <label class="new-post-label">Content</label>
          <textarea class="new-post-field" id="content" name="content" require>
          </textarea>
        </div>
        <!-- This part of the form is the save or 'Create Post' button -->
        <div class="new-form-save">
          <input type="submit" value="Create Post" id="create-post-button">
        </div>
      </form>
    </div>
  </div>
  
  <!-- This section is the overall container for ALL content-->
  <div id="content-container">
    <!-- This section is a container for an INDIVIDUAL post -->
    <div class="content-area">
      <div class="title">
        <h2>Hoysala Empire</h2>
      </div>
      <!-- This is a section for the description part of a post -->
      <div class="content">
        The Hoysala Empire was a Kannadiga power originating from the Indian subcontinent, that ruled most of what is now Karnataka, India, between the 10th and the 14th centuries. The capital of the Hoysalas was initially located at Belur but was later moved to Halebidu.

The Hoysala rulers were originally from Malenadu, an elevated region in the Western Ghats. In the 12th century, taking advantage of the internecine warfare between the Western Chalukya Empire and Kalachuris of Kalyani, they annexed areas of present-day Karnataka and the fertile areas north of the Kaveri delta in present-day Tamil Nadu. By the 13th century, they governed most of Karnataka, minor parts of Tamil Nadu and parts of western Andhra Pradesh and Telangana in the Deccan Plateau.

The Hoysala era was an important period in the development of art, architecture, and religion in South India. The empire is remembered today primarily for Hoysala architecture. Over a hundred surviving temples are scattered across Karnataka.

Well known temples "which exhibit an amazing display of sculptural exuberance" include the Chennakeshava Temple, Belur, the Hoysaleswara Temple, Halebidu, and the Chennakesava Temple, Somanathapura.[1] The Hoysala rulers also patronised the fine arts, encouraging literature to flourish in Kannada and Sanskrit.
      </div>
    </div>
  </div>
</div>
/*Here we are importing the Bree Serif font provided by Google. 

Go to https://fonts.google.com/ to see the list of fonts available and replace 'Galada' with the name of the font you want to use. 

You will also need to update the part of the CSS related to the section of the website you want to change. 

In this example I want to use Bree Serif for the heading so I added it under the #heading-container part of this CSS. Keep scrolling to find it.*/

@import url(https://fonts.googleapis.com/css?family=Bree+Serif);

/* Here I am importing the Oswald font. Scroll to the  #content-container part of this CSS to see how to use it.*/
@import url(https://fonts.googleapis.com/css?family=Oswald);

/* Importing Abel font to use it for the 'New Post' button */
@import url(https://fonts.googleapis.com/css?family=Abel);

/* 'body' is a keyword in CSS.

Any styling defined here will be applied to the entire website.
*/
body {
  /* 
  Here I am setting the background colour for the page. Go to https://htmlcolorcodes.com/ to find a color and use the Hex value
  */
  background-color: #F2F2F2; 
}

/*
The styling here is for the section we have created to be the container for our blog.

We gave it a light grey colour so you can see how it differs from the body keyword above.
*/
#body-container {
  /* aligns text to the center of the screen*/
  text-align: center;
  /* uses only 50% of the width of the page contents */
  width: 50%;
  background-color: white; 
  /* aligns the section to the center */
  margin: auto; 
  /* round the corners of the content area */
  border-radius: 1em;
}

/* Styling for the heading section of the page */
#heading-container {
  /* change Galada to the name of the font you want to use */
  font-family: "Bree Serif"; 
  /* font size */
  font-size: 2.5em; 
  /* font colour */
  color: #374450; 
  /* space above heading and start of the content area */
  padding-top: 0.1em;
}

/* Styling for the container for creating a new post */
#add-new-post-container {
    font-family: "Abel";
}

/* Default styling for the button to show/hide a new post */
.new-post-button {
  /* give the button a thin grey border */
  border: 1px solid #EFEFEF;
  /* round button borders */
  border-radius: 0.5em;
  
  /* button font and styling */
  font-size: 1.5em;
  font-weight: 0.5em;
  color: #3B3B3B;
 
  /* button size and colour */
  background-color: #EFEFEF;
  padding: 0.3em;
  
  /* add space below button */
  margin-bottom: 2em;
}

/* change the style of the button when the user hovers over it*/
.new-post-button:hover {
  background-color: #3B3B3B;
  color: #EFEFEF;
  /* adds a shadow behind the button */
  box-shadow: 0.1em 0.1em 0.2em #D3D0DE;
}

/* 
Initially the new post for should be hidden
*/
#new-post {
  display: none;
}

/* Positioning the new post form to show how we want it to on the page */
.new-post-form {
  /* make the new form area 80% of the width of the page */
  width: 80%;
  /* position the new form area to the center of the page*/
  margin: 0 auto;
  text-align: left;
}

/* Styling for the labels on the new post form */
.new-post-form label {
  font-size: 1.5em;
  font-weight: bolder;
  display: inline-block;
}

/* Styling the text box the image URL */
input[type="text"], textarea {
  width: 100%;
  height: 3em;
  margin-top: 2em;
  
  font-family: "Abel";
  font-size: 1em;
}

/* Adding space to the top of the field for adding content to a new post */
.new-form-content {
  margin-top: 2em;
}

/* Styling the section the holds the button to save or create a new blog post */
.new-form-save {
  /* space above 'Create Post' button */
  margin-top: 2em;
}

/* Styling the 'Create Post' button itself */
#create-post-button {
   /* give the button a grey blue border */
  border: 1px solid #EFEFEF;
  /* round button borders */
  border-radius: 0.5em;
  
  /* button font and styling */
  font-size: 1.5em;
  font-weight: 0.5em;
  color: #3B3B3B;
 
  /* button size and colour */
  background-color: #EFEFEF;
  padding: 0.5em;
}

/* change the styling of the 'Create Post' button when the user hovers over it */
#create-post-button:hover{
  background-color: #3B3B3B;
  color: #EFEFEF;
}

/* Styling the overall container for ALL the blog posts */
#content-container {
  /* change Oswald to the name of your font you want to use for the main body of the blog*/
  font-family: "Oswald";
  /* add some space at the top of the post to separate it from what's above it */
  padding-top: 4em;
  /* only allow it to take up 70% of the width of the content area */
  width: 70%;
  /* align section to the center of the page */
  margin: 0 auto;
  /* align text to the left */
  text-align: left;
}

/* Style the title of each post */
.title{
  font-family: "Bree Serif";
  font-size: 1.5em;
}


/* Styling the description area for each post */
.content {
  /* space before and after description */
  margin-top: 1em;
  padding-bottom: 2em;
  
  /* font size and colour */
  font-size: 1.2em;
  color: #404040;
}
// This is triggered when we click the 'New Post' button. It displays the form for creating a new post.
function showNewPostForm(id) {
  var form = document.getElementById(id);
  if (form.style.display == 'block') {
    form.style.display = 'none';
  } else {
    form.style.display = 'block';
  }
}

// Here were are finding the exact button to create a new post
var createNewPostBtn = document.getElementById('create-post-button');

// When the user clicks the 'Create Post' button we want to grab the information they've entered and use it to create a new post
createNewPostBtn.onclick = function() {
  // This is needed for CodePen
  event.preventDefault()
  
  // here were are finding the section of the page where we want to add the new post
  const container = document.getElementById('content-container');
  
  // here we get the values for the title and the content of the new post that the user entered into the form
  const title = document.getElementById('title').value;
  const content = document.getElementById('content').value;
  
  // here we create the section that will hold the new post
  let newContent = document.createElement('div');
  newContent.className = "content-area";
  
  // here we create the section that will hold the title of the new post
  let newTitle = document.createElement('div')
  newTitle.className = "title";
  newTitle.innerHTML = title;
  
  // here we create the section that will hold the content of the new post
  let newCont = document.createElement('div');
  newCont.className="content";
  newCont.innerHTML = content;
  
  // here we add the image and description to the new post section
  newContent.appendChild(newTitle);
  newContent.appendChild(newCont);
  
  // here we add the new post to the page
  container.appendChild(newContent);
  
  // here we reset the form and then hide it again.
  document.getElementById('new-post-form').reset();
  showNewPostForm('new-post');
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.