Update: Intro section layout
Set: Image position and size Set: Font size and text position
This commit is contained in:
parent
97fb5d8242
commit
b3d6a2d202
@ -21,7 +21,7 @@ main {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
@ -80,7 +80,92 @@ footer {
|
||||
.section1::before {
|
||||
background-image: url("https://static.vecteezy.com/system/resources/thumbnails/013/384/142/small_2x/fabric-texture-abstract-pattern-black-and-white-textiles-backgrounds-photo.jpg");
|
||||
}
|
||||
.section1 .portrait {
|
||||
text-align: right;
|
||||
margin-top: 0;
|
||||
margin-right: -25rem;
|
||||
}
|
||||
.section1 .portrait img {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.section1 .content {
|
||||
text-align: left;
|
||||
margin-left: -30rem;
|
||||
}
|
||||
.section1 .content h1 {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: -5rem;
|
||||
color: #5488bf;
|
||||
text-shadow: 0 0 9px #373737;
|
||||
}
|
||||
.section1 .content h1 .myname {
|
||||
font-style: normal;
|
||||
color: #fff;
|
||||
}
|
||||
.section1 .content .tagline {
|
||||
font-size: 1.7rem;
|
||||
text-align: left;
|
||||
}
|
||||
.section1 .content .tagline .tagline-item {
|
||||
display: inline;
|
||||
margin-right: 0.7ch;
|
||||
}
|
||||
.section1 .content .tagline .cursor {
|
||||
display: inline-block;
|
||||
animation: blink 1s steps(2, start) infinite;
|
||||
margin-left: 0.2ch;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.section1 .content {
|
||||
margin: 0;
|
||||
}
|
||||
.section1 .content .portrait {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
.section1 .content .portrait img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
margin: 0;
|
||||
}
|
||||
.section1 .content h1 {
|
||||
text-align: left;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1ch;
|
||||
margin-left: 1.5rem;
|
||||
font-size: 2.7rem;
|
||||
}
|
||||
.section1 .content .tagline {
|
||||
display: block;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
.section1 .content .tagline .tagline-item {
|
||||
display: block;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.section1 .content .tagline .tagline-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.section1 .content .tagline .cursor {
|
||||
margin-left: 0.4ch;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 100% {
|
||||
color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
50% {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.section2::before {
|
||||
background-image: url("https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg");
|
||||
}
|
||||
|
||||
@ -10,8 +10,17 @@
|
||||
<main>
|
||||
<section class="section intro section1" id="intro">
|
||||
<div class="content">
|
||||
<h1>Hello, I'm <i class="myname">[My Name]</i></h1>
|
||||
<p>Code Wizard | Linux Fanatic | Amateur Artist</p>
|
||||
<div class="portrait">
|
||||
<img src="../img/me.jpg" alt="A stylized portrait" />
|
||||
</div>
|
||||
<h1>
|
||||
Hello, I'm <span class="myname">[My Name]</span>
|
||||
</h1>
|
||||
<p>
|
||||
<span class="tagline">Code Wizard. </span>
|
||||
<span class="tagline">Terminal Fanatic. </span>
|
||||
<span class="tagline">Amateur Artist. <span class="cursor">_</span></span>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
BIN
img/me.jpg
Normal file
BIN
img/me.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
108
scss/about.scss
108
scss/about.scss
@ -27,7 +27,7 @@ main {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
@ -85,11 +85,113 @@ footer {
|
||||
|
||||
// Example background images per section
|
||||
.section1 {
|
||||
&::before {
|
||||
background-image: url('https://static.vecteezy.com/system/resources/thumbnails/013/384/142/small_2x/fabric-texture-abstract-pattern-black-and-white-textiles-backgrounds-photo.jpg');
|
||||
&::before {
|
||||
background-image: url('https://static.vecteezy.com/system/resources/thumbnails/013/384/142/small_2x/fabric-texture-abstract-pattern-black-and-white-textiles-backgrounds-photo.jpg');
|
||||
}
|
||||
|
||||
.portrait {
|
||||
text-align: right;
|
||||
margin-top: 0;
|
||||
margin-right: -25rem;
|
||||
|
||||
img {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
//border: 3px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
text-align: left;
|
||||
margin-left: -30rem;
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: -5rem;
|
||||
color: #5488bf;
|
||||
text-shadow: 0 0 9px #373737;
|
||||
|
||||
.myname {
|
||||
font-style: normal;
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-size: 1.7rem;
|
||||
//color: #ccc;
|
||||
text-align: left;
|
||||
|
||||
.tagline-item {
|
||||
display: inline;
|
||||
margin-right: 0.7ch;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
display: inline-block;
|
||||
animation: blink 1s steps(2, start) infinite;
|
||||
margin-left: 0.2ch;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.content {
|
||||
margin: 0;
|
||||
.portrait {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
|
||||
img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
margin: 0;
|
||||
//border: 3px solid rgba(255, 255, 255, 0.3);
|
||||
//box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: left;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1ch;
|
||||
margin-left: 1.5rem;
|
||||
font-size: 2.7rem;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
display: block;
|
||||
margin-left: 1.5rem;
|
||||
|
||||
.tagline-item {
|
||||
display: block;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.tagline-item:last-child {
|
||||
margin-bottom: 0; // remove extra space after last line
|
||||
}
|
||||
|
||||
.cursor {
|
||||
margin-left: 0.4ch; // keep close to text
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Blinking cursor animation
|
||||
@keyframes blink {
|
||||
0%, 100% { color: #fff0; }
|
||||
50% { color: #fff; }
|
||||
}
|
||||
|
||||
|
||||
.section2 {
|
||||
&::before {
|
||||
background-image: url('https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg');
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user