New conent and some mobile styling

This commit is contained in:
Christopher Bell 2022-09-13 21:57:33 -05:00
parent 5a3cd30b26
commit d7c7562b08
3 changed files with 79 additions and 5 deletions

View File

@ -35,7 +35,7 @@ body {
#header {
display: flex;
height: 100vh;
height: 80vh;
justify-content: center;
align-items: center;
background-color: black;
@ -56,13 +56,70 @@ body {
display: block;
}
/* CONTENT */
.content-title {
padding: 20px 0 20px 0;
}
.content-break {
width: 45vw;
width: 50vw;
height: 2px;
border-color: red;
border-color: var(--color-pallete-red);
margin: auto;
}
@media (max-width: 650px)
{
.content-break {
width: 90vw;
}
}
/* ABOUT ME SECTION */
#aboutme {
width: 100%;
padding: 20px 0 20px 0;
}
.aboutme-box {
display: flex;
margin: auto;
max-width: 1000px;
overflow: hidden;
}
.aboutme-box img {
height: auto;
width: auto;
border-radius: 15%;
border: var(--color-pallete-dark-red) solid 2px;
} .aboutme-box p {
text-align: left;
} .aboutme-box h2 {
text-align: left;
margin-bottom: 20px;
}
.aboutme-box-left {
margin-right: 30px;
}
.aboutme-box-left img {
height: auto;
width: 100%;
}
.aboutme-box-right {
width: 100%;
}
/*Mobile*/
@media (max-width: 650px)
{
.aboutme-box {
display: block;
margin: 0 30px 0 30px;
}
.aboutme-box-left {
margin: 0 10px 0 10px;
}
}

View File

@ -34,10 +34,27 @@
</div>
<div id="content">
<div id="fader"></div>
<h1 class="content-title">This Is HEX Studios</h1>
<hr class="content-break"></div>
<div id="aboutme">
<div class="aboutme-box">
<div class="aboutme-box-left">
<img src="res/chris.jpg" alt="">
</div>
<div class="aboutme-box-right">
<h2>About Me</h2>
<p>Hi! I'm Chris Bell. I am a programmer, musician, and nerd. My passion has been Game Development for over 5 years, using Unreal Engine, Unity, and Godot. I am currently a Jr. Unity Developer, but have knowledge in C/C++, C#, Java, HTML/CSS, and a few other languages.</p>
</div>
</div>
</div>
<div id="footer">
</div>

BIN
res/chris.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB