This is an empty skeleton for a flexbox layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/frontstyle.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nabla&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>smelly socks!</h1>
</header>
<nav>
<ul id="main-nav">
<li><a href="../index.html">Home</a></li>
<li></li><span>About me</span></li>
<li></li><a href="../joinus/index.html">Join!</a></li>
</ul>
</nav>
<div class="content-container">
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
</div>
</div>
<footer>
<p>Copyright 2025 The smelly socks students association</p>
<a href="mailto:info@smellysocks.com">Contact us</a>
</footer>
</body>
</html>And this is the CSS:
*{
font-family: Arial, 'Verdana', sans-serif;
}
ul#main-nav{
list-style-type: none;
/*
display:inline-block;
*/
margin:0 auto;
padding: 0;
}
ul#main-nav>li{
display:inline-block;
margin-left: 10px;
margin-right: 10px;
}
.image-title-container {
display: inline-block;
position: relative;
width: 100%; /* Adjust the width as needed */
height: 400px; /* Fixed height */
overflow: hidden;
}
.image-title-container img {
width: 100%;
height: 75%;
object-fit: cover; /* Ensures the image covers the container */
}
.title {
position: absolute;
bottom: 0;
width: 100%;
text-align: left;
font-family: 'Times New Roman', Times, serif;
color: rgb(0, 0, 0);
padding: 2px 0;
font-size: 2rem;
box-sizing: border-box;
}
.text-bg{
padding-top: 8px;
background: rgba(255, 255, 255, 1); /* Semi-transparent background */
}
.title a{
text-decoration: none;
color:black;
}
.title a:hover{
text-decoration: underline;
}
.topic-title{
position:relative;
display:inline;
margin-top: 8px;
top: 8px;
padding: 2px 8px;
color: white;
background-color: rgb(213, 2, 2);
z-index: 900;
}
.text-bg>h1{
margin: 0px 10px 0px 10px;
}
.text-bg>h2{
margin: 0px 10px 0px 10px;
}
.text-bg>h3{
margin: 0px 10px 0px 10px;
}
.text-bg>h4{
margin: 0px 10px 0px 10px;
}
.text-bg>h5{
margin: 0px 10px 0px 10px;
}
.text-bg>h6{
margin: 0px 10px 0px 10px;
}
.content-container{
position:relative;
padding:15px;
top: 86px;
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
.floatleft{
float:left;
}
.floatright{
float:right;
}
body{
margin:0px;
position: relative;
/*top: -22px;*/
}
header{
height: 110px;
width: 100%;
background-color: rgb(205, 235, 245);
position: fixed;
z-index: 1000;
}
footer{
height: 145px;
width: 100%;
background-color: rgb(205, 235, 245);
position: relative;
top: 180px;
z-index: 1000;
text-align: center;
padding-top: 30px;
}
header>h1{
margin: 0px;
position:relative;
top: -20px;
/*z-index: 1000;*/
font-size: 4em;
font-family: "Nabla", serif;
font-optical-sizing: auto;
font-weight: 400;
text-align: center;
font-style: normal;
font-variation-settings:
"EDPT" 100,
"EHLT" 12;
}
nav{
position:fixed;
text-align: center;
top: 70px;
padding: 10px;
z-index:1001;
width:100%;
background-color: rgb(205, 235, 245);
}
.flex-container{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.flex-img-txt{
display: flex;
flex-wrap: wrap;
row-gap: 20px;
}
.flex-item-imgtxt{
width: 47%;
margin: 0px;
padding-top: 0px;
height: auto;
background-color: aqua;
text-align: center;
}
.flex-container{
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.flex-item{
width: 31%;
display: inline-flex;
/*margin: 10px;*/
padding-top: 30px;
height: 400px;
text-align: center;
}
@media screen and (max-width: 820px) {
.content > div{
width: 92%;
}
.flex-item{
width: 47%;
}
.flex-item-imgtxt{
width: 93%;
margin: 10px;
height: 120px;
background-color: aqua;
text-align: center;
}
}
@media screen and (max-width: 600px) {
header>h1{
padding-top: 10px;
font-size: 2.5em;
}
.flex-item{
width: 99%;
}
header{
height: 75px;
}
.content-container{
top: 120px;
}
ul#main-nav{
display:block;
}
ul#main-nav>li{
display:block;
}
nav{
top: 52px;
}
}