vassili/web-app-demos
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

layout more mobile friendly

Browse source
This commit is contained in:
Vassili Minaev 2025-03-21 07:42:41 -06:00
parent dc556c60a9
commit 108193c38c
2 changed files with 13 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
static/selfie-crop.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 59 KiB

19
templates/home.html
View file

@ -7,8 +7,9 @@
<link rel="stylesheet" type="text/css" href="/static/bootstrap/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="/static/bootstrap/bootstrap.min.css">
<style type="text/css"> <style type="text/css">
#card { #card {
width: 600px; min-width: 450px;
height: 300px; max-width: 600px;
max-height: 300px;
box-shadow: box-shadow:
rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.25) 0px 54px 55px,
rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px -12px 30px,
@ -16,17 +17,23 @@
rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.17) 0px 12px 13px,
rgba(0, 0, 0, 0.09) 0px -3px 5px; rgba(0, 0, 0, 0.09) 0px -3px 5px;
} }
#selfie {
width: 150px;
min-width: 150px;
height: 300px;
min-height: 300px;
}
</style> </style>
</head> </head>
<body> <body>
<main class="container-fluid py-4"> <main class="container-fluid py-4">
<section class="card mx-auto mb-5" id="card"> <section class="card mx-auto mb-5" id="card">
<div class="row g-0 h-100"> <div class="d-flex g-0 h-100">
<div class="col-4"> <div id="selfie">
<img src="/static/selfie.jpg" class="img-fluid rounded-start" alt="Vassili's profile photo"> <img src="/static/selfie-crop.jpg" class="img-fluid rounded-start" alt="Vassili's profile photo">
</div> </div>
<div class="col-8 h-100 d-flex flex-column justify-content-between"> <div class="flex-fill d-flex flex-column justify-content-between">
<div class="card-body"> <div class="card-body">
<h3 class="card-title text-center">Vassili Minaev</h3> <h3 class="card-title text-center">Vassili Minaev</h3>
<p class="card-text">I make software, hardware, and in between<br> <p class="card-text">I make software, hardware, and in between<br>