carson
HTML
<div class="maindiv aboutContainer">
<div>
<h1 class="text">Sam Carson</h1>
<p>Welcome to my website. This is used primarily to host my screenshots, email and
third-party links, but I'm considering adding more.</p>
<p><a href="/about">More information...</a></p>
</div>
<div class="box">
<img src="http://img.samcarson.xyz/img/fade.png" width="265px" height="265px"></img>
</div>
</div>
CSS
.aboutContainer {
display: flex;
flex: 1;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
background-color: red;
}
.box {
display: flex;
flex: 1;
margin:0 0.5%;
box-sizing:border-box;
}
body {
background-color: #f0f0f2;
margin: 0;
padding: 0;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.text {
padding-top: 35px;
}
.maindiv {
width: 600px;
margin: 5em auto;
padding-top: 10px;
padding-left: 50px;
padding-right: 10px;
background-color: #fff;
border-radius: 1em;
}
a:link, a:visited {
color: #38488f;
text-decoration: none;
}
@media (max-width: 700px) {
body {
background-color: #fff;
}
.maindiv {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}