No matter how I tried to modify my CSS I am not able to a row displaying 5 categories in .content despite having the display: flex property.
Why can't I display my .content-2 in the middle? Just like the flex property is ordering it? I am able to get something decent especially in .hori-box-skill when I remove the my javascript remove the collapsible effect.
document.addEventListener("DOMContentLoaded", function() {
var coll = document.getElementsByClassName("collapse");
for (var i = 0; i < coll.length; i++) {
var content = coll[i].nextElementSibling;
content.style.display = "none"; // Ensures it's hidden on load
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
});* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
overflow-x: hidden;
}
/* Top section here */
.top-section {
color: white;
}
.header {
background-image: url("../images/my_pc1.jpg");
background-size: cover;
background-position: center;
height: 100vh;
position: relative;
}
.header::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.2);
/* adjust opacity here */
z-index: 1;
}
.header * {
position: relative;
z-index: 2;
/* Ensures content appears above the overlay */
}
.bottom-section {
background-color: black;
color: white;
padding: 50px;
}
.right-navbar ul {
display: flex;
justify-content: center;
text-align: center;
gap: 20px;
font-size: 20px;
padding: 0;
margin: 0;
}
.navbar {
background-color: rgba(19, 22, 26, 0.5);
/* padding: 10px; */
position: relative;
width: 100%;
}
.navbar li {
padding: 10px;
}
.navbar li:hover {
background-color: rgba(19, 22, 26, 0.7);
}
.description {
padding: 0 30px;
display: flex;
justify-content: space-between;
text-align: center;
}
.description .quote p {
color: white;
padding-top: 150px;
padding-right: 20px;
font-family: "Alfa Slab One";
text-transform: uppercase;
font-size: 20px;
overflow: hidden;
white-space: nowrap;
animation: typing 2.5s steps(38)forwards;
}
.description .quote p::after {
content: "";
position: absolute;
display: block;
height: 100%;
width: 1px;
background: #dadada;
right: 0;
top: 0;
animation: cursorr 1s steps(1, end) 2.5s 1 forwards;
;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes cursorr {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/* Bootom section */
.about {
padding: 30px 20px;
}
.about p {
line-height: 1.5rem;
text-align: justify;
font-size: 20px;
}
.content {
display: flex;
justify-content: space-between;
text-align: center;
flex-wrap: wrap;
gap: 20px;
overflow: hidden;
transition: max-height 0.3s ease-out;
line-height: 2.5rem;
}
.content h4 {
text-transform: uppercase;
}
.collapse {
background-color: #000;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 50px;
text-transform: uppercase;
}
.collapse:after {
content: '\002B';
font-size: 13px;
color: white;
float: right;
margin-left: 5px;
font-size: 25px;
}
.active:after {
content: "\2212";
}
.active,
.collapse:hover {
background-color: #555;
}
a,
li {
list-style: none;
text-decoration: none;
color: white;
}
/* Form */
.form-group {
margin: 2rem 0;
}
.contacts input,
.content textarea {
border: none;
border-bottom: 1px white solid;
width: 90%;
padding-bottom: 1rem;
background-color: black;
}
.contacts input::placeholder,
.contact textarea::placeholder {
color: white;
opacity: 1;
}
.contacts input:focus,
.contact textarea:focus {
outline: none;
/* Removes blue border */
border-bottom: 1px solid white;
/* Keeps your white bottom border */
color: white;
/* Makes typed text white */
}
.form-group .btn {
display: inline-block;
padding: 1rem 2rem;
border: 1px solid;
width: 50%;
border-radius: 10px;
font-size: 20px;
cursor: pointer;
transition: all 0.7s ease-in-out;
}
.form-group .btn:hover {
background-color: #0056b3;
width: 90%;
}
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
/* Media queries */
@media(max-width:768px) {
.right-navbar ul {
flex-direction: column;
align-items: center;
background-color: rgba(0, 0, 0, 0.8);
gap: 10px;
padding: 5px;
}
.right-navbar ul li {
margin: 5px 0;
padding: 5px 0;
font-size: 18px;
}
.navbar {
flex-direction: column;
align-items: center;
width: 100%;
}
.navbar li:hover {
background-color: #555;
width: 100%;
}
.description .quote p {
padding-top: 50px;
font-size: 15px;
text-align: center;
}
.collapse {
font-size: 30px;
}
.form-group .btn {
width: 100%;
}
.about p {
line-height: 1.2rem;
text-align: justify;
font-size: 15px;
word-spacing: 1px;
}
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<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=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
<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=Alfa+Slab+One&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
<div class="top-section">
<header class="header">
<nav class="navbar">
<div class="right-navbar">
<ul>
<li><a href="#about-me">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Project</a></li>
<li><a href ="#contact" class="btn">Contact</a></li>
</ul>
</div>
</nav>
<section class="description">
<div class="name">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
<div class="quote">
<p>I don't develop, I engineer Solutions.</p>
</div>
</section>
</header>
</div>
<!-- bottom section after the picture -->
<div class="bottom-section">
<div class="about" id="about-me">
<h3>About Me</h3>
<p>I am Yannick, A highly motivated and inquisitive problem-solver. I leverage the power of Information Technology to architect, sustain, and optimise innovative solutions.
My core competencies encompass the full lifecycle of applications development and maintenance, complemented by a robust understanding of data-centric disciplines including Data-Science, Analysis, and Engineering. </p>
</div>
<!-- Horizontal sections -->
<section class="hori-box skill" id="skills">
<button type="button" class="collapse">skills glimpse</button>
<div class="content-1">
<div class="box database">
<h4>Programming</h4>
<ul>
<li>
<p>Python</p>
</li>
<li>
<p>Javascript</p>
</li>
<li>
<p>C#</p>
</li>
<li>
<p>HTML & CSS</p>
</li>
<li>
<p>Linux/Unix</p>
</li>
</ul>
</div>
<div class="box programming">
<h4>Databases DBMS</h4>
<ul>
<li>
<p>T-SQL/PL-SQL</p>
</li>
<li>
<p>Mongo DB</p>
</li>
<li>
<p>MariaDB</p>
</li>
<li>
<p>Hbase</p>
</li>
<li>
<p>BigQuery</p>
</li>
</ul>
</div>
<div class="box machine-learning">
<h4>Machine-Learning</h4>
<ul>
<li>
<p>Regressions</p>
</li>
<li>
<p>Random Forests</p>
</li>
<li>
<p>Apriori</p>
</li>
<li>
<p>K-Nearest neighbours</p>
</li>
<li>
<p>Backpropafation</p>
</li>
<li>
<p>RNN</p>
</li>
<li>
<p>LSTM</p>
</li>
<li>
<p>Statistics Inference</p>
</li>
<li>
<p></p>
</li>
</ul>
</div>
<div class="box methodology">
<h4>Methodology</h4>
<ul>
<li>
<p>Agile</p>
</li>
<li>
<p>DevOps</p>
</li>
</ul>
</div>
<div class="box others">
<h4>Others</h4>
<ul>
<li>
<p>Tableau/Power BI</p>
</li>
<li>
<p>Databricks</p>
</li>
<li>
<p>Flask/.Net</p>
</li>
<li>
<p>Gitlab</p>
</li>
<li>
<p>Ansible/Jenkins</p>
</li>
<li>
<p>Docker</p>
</li>
<li>
<p>Kubernetes</p>
</li>
<li>
<p>React/EprssJS</p>
</li>
</ul>
</div>
</div>
</section>
<section class="hori-box project" id="projects">
<button type="button" class="collapse">Projects</button>
<div class="content-2">
<ul>
<li><a href="">Web</a></li>
<li><a href="">Data Science</a></li>
<li><a href="">Data Engineering</a></li>
<li><a href="">DevOps</a></li>
</ul>
</div>
</section>
<section class="hori-box contacts" id="contact">
<button type="button" class="collapse">Get in touch</button>
<div class="content-3">
<form>
<div class="form-group">
<label for="first-name" class="visually-hidden">First Name</label>
<input type="text"
id="first-name"
name="first-name"
placeholder="First Name">
</div>
<div class="form-group">
<label for="last-name" class="visually-hidden">Last Name</label>
<input type="text"
id="last-name"
name="last-name"
placeholder="Last Name">
</div>
<div class="form-group">
<label for="Email" class="visually-hidden">Email Address</label>
<input type="email"
id="Email"
name="Email"
placeholder="Email Address">
</div>
<div class="form-group">
<label for="message" class="visually-hidden">Message</label>
<textarea
id="message"
name="message"
placeholder="Message"> </textarea>
</div>
<div class="form-group">
<button type="submit" class="btn">Send Message</button>
</div>
</form>
</div>
</section>
</div>
<footer>
</footer>Here is the new script I have:
document.addEventListener("DOMContentLoaded", function () {
var coll = document.getElementsByClassName("collapse");
for (var i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () {
var content = this.nextElementSibling;
content.classList.toggle("show");
});
}
});
This got me the display I wanted. then I changed the CSS to:
.content-1,
.content-2,
.content-3 {
display: none;
flex-wrap: wrap;
gap: 20px;
justify-content: space-between;
text-align: center;
}
.content-1.show,
.content-2.show,
.content-3.show {
display: flex;
}