Skip to content

Commit 829c498

Browse files
author
atj61275
committed
related sides
1 parent 87a6171 commit 829c498

1 file changed

Lines changed: 59 additions & 22 deletions

File tree

‎index.html‎

Lines changed: 59 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,53 +9,90 @@
99
body {
1010
font-family: 'Montserrat', sans-serif;
1111
color: #333;
12-
background-color: #f4f0ff; /* Subdued purple background */
12+
background-color: #f4f0ff;
13+
margin: 0;
14+
padding: 0;
15+
display: flex;
16+
flex-direction: column;
17+
align-items: center;
1318
}
14-
15-
.header {
16-
background-color: #e0d4ff; /* Lighter shade of purple for header */
17-
padding: 20px;
18-
text-align: center;
19-
}
20-
21-
.nav {
19+
.header, .footer, .nav {
20+
width: 100%;
2221
text-align: center;
22+
background-color: #e0d4ff;
2323
padding: 20px;
2424
}
25-
2625
.nav a {
2726
margin: 0 15px;
2827
text-decoration: none;
29-
color: #5d3dbd; /* Deeper purple for contrast */
28+
color: #5d3dbd;
29+
}
30+
.main-container {
31+
display: flex;
32+
width: 100%;
33+
align-items: flex-start; /* Aligns items at the top */
34+
}
35+
.sidebar {
36+
flex: 1; /* Allows sidebars to take up space on the sides */
37+
padding: 20px;
38+
overflow-y: auto;
39+
height: 100vh; /* Full height of the viewport */
40+
box-sizing: border-box; /* Includes padding in the element's total width and height */
3041
}
31-
3242
.content {
43+
flex: 3; /* Content takes more space */
3344
padding: 20px;
45+
max-width: 1200px; /* Adjust based on preference */
46+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
47+
margin: auto; /* Centers the content */
48+
box-sizing: border-box; /* Includes padding in the element's total width and height */
3449
}
35-
36-
.footer {
37-
background-color: #e0d4ff; /* Matches header */
50+
/* Styles for the side content rolls */
51+
.side-roll h2 {
52+
font-size: 1.2rem;
53+
color: #5d3dbd;
54+
}
55+
.article-thumbnail, .viewed-article {
56+
margin: 10px 0;
3857
padding: 10px;
39-
text-align: center;
58+
background-color: #e0d4ff;
59+
border-radius: 5px;
4060
}
4161
</style>
4262
</head>
4363
<body>
4464
<div class="header">
4565
<h1>Welcome to Hyper Impressed</h1>
4666
</div>
47-
4867
<div class="nav">
4968
<a href="world-philosophy/index.html">World Philosophy</a>
5069
<a href="spirit-philosophy/index.html">Human Philosophy</a>
5170
<a href="exercise/index.html">Exercise</a>
52-
<!-- Add more links as needed -->
5371
</div>
54-
55-
<div class="content">
56-
<p>Explore a range of topics from World Philosophy to Spirit Philosophy, Exercise, and more. Click on the topics above to dive deeper into each category.</p>
72+
<div class="main-container">
73+
<div class="sidebar">
74+
<!-- Previously viewed articles -->
75+
<div class="side-roll">
76+
<h2>Previously Viewed</h2>
77+
<div class="viewed-article">Article 1</div>
78+
<div class="viewed-article">Article 2</div>
79+
<!-- Additional viewed articles -->
80+
</div>
81+
</div>
82+
<div class="content">
83+
<!-- Main content -->
84+
<p>Main content area. This space is used for the article or main page content.</p>
85+
</div>
86+
<div class="sidebar">
87+
<!-- Related articles -->
88+
<div class="side-roll">
89+
<h2>Related Articles</h2>
90+
<div class="article-thumbnail">Related Article 1</div>
91+
<div class="article-thumbnail">Related Article 2</div>
92+
<!-- Additional related articles -->
93+
</div>
94+
</div>
5795
</div>
58-
5996
<div class="footer">
6097
<p>Contact us at email@example.com</p>
6198
</div>

0 commit comments

Comments
 (0)