david/portfolio-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lists in blocks, responsive centering

Browse Source
This commit is contained in:
David Madl
2026-05-08 15:28:57 +02:00
parent 81256d5828
commit a407891fe4
2 changed files with 52 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
index.html
View File

@@ -1,12 +1,27 @@
<div class="blocks"> <div class="blocks">
<div class="block"> <div class="block">
<h2>Optimizing software</h2> <h2>Optimizing software</h2>
<ul>
<li>Lorem ipsum</li>
<li>dolor sit amet</li>
<li>consecteur amet elit</li>
</ul>
</div> </div>
<div class="block"> <div class="block">
<h2>Feasibility studies</h2> <h2>Feasibility studies</h2>
<ul>
<li>Lorem ipsum</li>
<li>dolor sit amet</li>
<li>consecteur amet elit</li>
</ul>
</div> </div>
<div class="block"> <div class="block">
<h2>Designing software</h2> <h2>Designing software</h2>
<ul>
<li>Lorem ipsum</li>
<li>dolor sit amet</li>
<li>consecteur amet elit</li>
</ul>
</div> </div>
</div> </div>
<div class="body"> <div class="body">

49
main.css
View File

@@ -1,7 +1,17 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");
body {
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Space Grotesk", system-ui, sans-serif;
}
.blocks { .blocks {
display: flex; display: flex;
/*gap: 20px;*/ /*gap: 20px;*/
padding-top: 5.78vw; padding-top: 5.78vw; /* hor spacing from line to heading top */
background-image: url("https://abanbytes.eu/upload/hero_bg_plain.svg"); background-image: url("https://abanbytes.eu/upload/hero_bg_plain.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -26,35 +36,50 @@
margin-right: 13.05vw; margin-right: 13.05vw;
} }
.block h2 {
margin-top: 0px;
}
.block { .block {
flex: 1; flex: 1;
height: 200px; height: 200px;
background: #e5e7eb; /*background: #e5e7eb;
border: 1px solid #ccc; border: 1px solid #ccc;*/
display: flex; display: flex;
/*align-items: center; /*align-items: center;
justify-content: center;*/ justify-content: center;*/
flex-direction: column;
}
.block h2 {
margin-top: 0px;
margin-bottom: 0.5rem;
font-size: 1.5rem;
}
.block ul {
margin-top: 0;
padding-left: 1.25rem;
} }
/* Small screens */ /* Small screens */
@media (max-width: 600px) { @media (max-width: 960px) {
.blocks { .blocks {
flex-direction: column; flex-direction: column;
padding-top: 15.92vw; padding-top: 18.17vw;
margin: 2.25vw; margin-top: 2.25vw;
margin-bottom: 2.25vw;
} }
.block { .block {
width: 100%; width: min(100%, 15em);
padding-left: 5.72vw;
} }
.block:nth-child(1), .block:nth-child(2), .block:nth-child(3) { .block:nth-child(1), .block:nth-child(2), .block:nth-child(3) {
margin-top: 0; margin-top: 0;
margin-right: 0;
margin-bottom: 2.25vw; margin-bottom: 2.25vw;
margin-left: 0; /* horizontal centering blocks */
margin-left: auto;
margin-right: auto;
}
.block:nth-child(1) {
margin-top:
} }
} }