I am trying to create a website that will contain several articles and I am wondering how to create a link out of the articles on the main page and have the user click on it to read the full article similar to an informational or news website. The current problem is that the entire articles are posted on the main page and the goal is to create a link out of the available articles on the main page for the user to click on to read the full article like other informational/news sites. How would I be able to do this is what I'm wondering? Full link to code: https://jsfiddle.net/0xkuqb39/1/
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<div class="header">
<div id ="header">
<h2 style="text-indent: 1em; font-family: Helvetica; color: blue;">Articles</h2>
</div></div><br>
<div class="row">
<div class="leftcolumn">
<div class="card">
<div id="Title">
<h2>Article 1</h2>
<h5>Date</h5>
<p>Some text here </p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div id="Title2">
<h2>Article 2</h2>
<h5>Date</h5>
<p> Some text here </p>
</div>
</div>
</div>
<div class="footer">
<div id="footer">
</div>
</body>
$(document).ready(function () {
$("#header").hide().fadeIn(2000);
});
$(document).ready(function () {
$("#title").hide().fadeIn(2000);
});
$(document).ready(function () {
$("#footer").hide().fadeIn(2000);
});/* Add a gray background color with some padding */
body {
font-family: Arial;
padding: 20px;
background: #32cd32;
}
/* Header/Blog Title */
.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: #7df9ff;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 100%;
}
/* Add a card effect for articles */
.card {
background-color: #87ceeb;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #00bfff;
margin-top: 20px;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<div class="header">
<div id ="header">
<h2 style="text-indent: 1em; font-family: Helvetica; color: blue;">Articles</h2>
</div></div><br>
<div class="row">
<div class="leftcolumn">
<div class="card">
<div id="Title">
<h2>Article 1</h2>
<h5>Date</h5>
<p>Some text here <a href="article1.html">read full article</a></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div id="Title2">
<h2>Article 2</h2>
<h5>Date</h5>
<p>Some text here <a href="https://en.wikipedia.org/wiki/Main_Page">read full article</a></p>
</div>
</div>
</div>
<div class="footer">
<div id="footer">
</div>
</body>
</html>Currently, your anchors (links) are looking like this:
<a href="#contact">Contact</a>
This way is used to link to a different location on the same page. So for example:
<a href="#content">Go to content</a>
<!-- Just to create a visual separation -->
<div style="height: 100vh"></div>
<div id="content">
Test
</div>However, if you don't want your articles to be on the main page, you would need to create a separate HTML file for each and every one of them. So if, for example, you created a new HTML file called "article_1.html", and put it in the same folder as your main page, then you could link to it like this:
<a href="article_1.html">Article 1</a>