Utilizing the card-columns class from Bootstrap 4 to create a page for my portfolio. Everything is functioning well, but I desire to enhance the appearance to make it more appealing.
https://i.sstatic.net/pJTxS.jpg
This is the current design I have implemented. My goal is to ensure that the card labeled Other Projects (same width as Latest Projects) remains below Latest Projects, with the card positioned underneath Other Projects in its own column and then displaying Skills.
<div class="card-columns">
<div class="card">
<div class="card-body">
<h3 class="card-title">About Me</h3>
<hr>
<div class="card-text">
<ul>
<li><b>Languages:</b> Python, JAVA, C</li>
<li><b>Frameworks:</b> Bootstrap (Frontend), Flask, Django, OpenCV</li>
<li><b>Database:</b> MySQL, MS SQL Server</li>
<li><b>Tools:</b> MySQL Workbench, Git</li>
<li><b>Editors Used:</b> Visual Studio Code, Sublime Text, Vim</li>
<li><b>Operating Systems:</b> Linux (Ubuntu), Windows</li>
<li><b>Total Experience: </b>Freshers</li>
<li><b>Current Employer: </b>Student</li>
</ul>
</div>
</div>
</div>
<div class="card p-3">
// Latest Projects Card Here
</div>
<div class="card p-3">
// Other Projects Card Here
</div>
<div class="card p-3">
// Contact Information Card Here
</div>
</div>
The above HTML structure outlines the placement of the different cards on the page layout.
.card-columns {
column-count: 2 !important;
position: relative;
top: 10%;
transform: translateY(10%);
-moz-transform: translateY(10%);
}
These are the CSS modifications I made to split the layout into two columns using the card-columns class.
Your assistance in enhancing the appearance and layout will be greatly appreciated.