✨ Add profile image
This commit is contained in:
parent
66048ddd0b
commit
1a959a4dbf
3 changed files with 18 additions and 2 deletions
BIN
build/img/profile-manga.jpg
Normal file
BIN
build/img/profile-manga.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
|
|
@ -9,6 +9,9 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header class="py-3 mb-4 border-bottom">
|
<header class="py-3 mb-4 border-bottom">
|
||||||
|
<figure class="figure">
|
||||||
|
<img src="img/profile-manga.jpg" class="figure-img img-fluid rounded-circle" alt="{{name}}"/>
|
||||||
|
</figure>
|
||||||
<div class="container d-flex flex-wrap justify-content-center">
|
<div class="container d-flex flex-wrap justify-content-center">
|
||||||
<h1 class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto text-dark px-4 py-2 border border-white rounded">
|
<h1 class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto text-dark px-4 py-2 border border-white rounded">
|
||||||
{{name}}
|
{{name}}
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
@use "sass:map";
|
||||||
|
|
||||||
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
|
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
|
||||||
@import "../node_modules/bootstrap/scss/functions";
|
@import "../node_modules/bootstrap/scss/functions";
|
||||||
|
|
||||||
|
|
@ -39,8 +41,19 @@ body {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
header {
|
||||||
background-color: $mostly-white;
|
h1 {
|
||||||
|
background-color: $mostly-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure {
|
||||||
|
max-width: 10rem;
|
||||||
|
text-align: center;
|
||||||
|
margin: map.get($spacers, 5) auto $spacer;
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
section ul {
|
section ul {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue