parent
13d3d4842f
commit
7a4b8385dc
4 changed files with 113 additions and 1 deletions
|
After Width: | Height: | Size: 324 KiB |
@ -0,0 +1,50 @@ |
||||
body { |
||||
text-rendering: optimizeLegibility; |
||||
font: 1rem/1.3 sans-serif; |
||||
} |
||||
|
||||
.container { |
||||
max-width: 40rem; |
||||
margin: 1rem auto 0 auto; |
||||
} |
||||
|
||||
.sidebar { |
||||
margin-top: 1rem; |
||||
float: left; |
||||
width: 8rem; |
||||
text-align: right; |
||||
} |
||||
|
||||
.sidebar img { |
||||
width: 100%; |
||||
} |
||||
|
||||
.topbar { |
||||
} |
||||
|
||||
.topbar ul { |
||||
padding-left: 0; |
||||
} |
||||
|
||||
.topbar li { |
||||
display: inline; |
||||
margin-right: 0.5rem; |
||||
} |
||||
|
||||
.content { |
||||
} |
||||
|
||||
@media screen and (min-width:30rem) { |
||||
.content { |
||||
margin-left: 10rem; |
||||
} |
||||
.topbar { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
@media screen and (max-width:30rem) { |
||||
.sidebar { |
||||
display: none; |
||||
} |
||||
} |
||||
@ -0,0 +1,60 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
||||
<meta charset="utf-8"/> |
||||
|
||||
<title>Tanner Collin</title> |
||||
|
||||
<link rel="stylesheet" type="text/css" href="/theme/style.css" /> |
||||
</head> |
||||
|
||||
<body> |
||||
<div class="container"> |
||||
<div class="sidebar"> |
||||
<img src="/theme/me.jpg" /> |
||||
<p> |
||||
Tanner Collin |
||||
</p> |
||||
<p> |
||||
Home <br /> |
||||
About <br /> |
||||
Contact <br /> |
||||
</p> |
||||
</div> |
||||
<div class="content"> |
||||
<div class="topbar"> |
||||
<p> |
||||
Tanner Collin |
||||
</p> |
||||
|
||||
<ul> |
||||
<li>Home</li> |
||||
<li>About</li> |
||||
<li>Contact</li> |
||||
</ul> |
||||
</div> |
||||
<header> |
||||
<h1>My Title</h1> |
||||
<p>May 7th, 2020</p> |
||||
<header> |
||||
<hr /> |
||||
<article> |
||||
<p> |
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a semper lacus. Sed vulputate ligula eget odio mollis, sed dictum dui euismod. Vivamus quis gravida diam. Sed elementum dolor non augue egestas scelerisque. Donec odio diam, feugiat sit amet accumsan eget, lobortis vel mi. Mauris a ipsum ut urna vestibulum bibendum. Nunc ut placerat ex. Morbi eleifend risus in neque suscipit aliquet. Praesent sed dolor vel tellus sagittis viverra. Vestibulum et tincidunt sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel laoreet nibh, pulvinar porta risus. |
||||
<p> |
||||
|
||||
<p> |
||||
Nunc euismod nulla ac felis pellentesque auctor. Phasellus mi lacus, cursus id justo nec, finibus dictum velit. Pellentesque quis nisl sollicitudin, viverra mi vel, eleifend lectus. Morbi sollicitudin ultricies elementum. Sed ut feugiat neque, vel scelerisque dolor. Quisque quis luctus lectus, quis venenatis nisi. Proin massa tortor, luctus sed pharetra sit amet, interdum eget lacus. Integer vel arcu pretium ipsum venenatis porttitor a a dui. Nullam interdum vehicula efficitur. Nullam non consequat sem. Nunc finibus enim neque, a tristique massa aliquet rhoncus. |
||||
<p> |
||||
|
||||
<p> |
||||
Nulla sapien odio, blandit ut pellentesque a, tincidunt id libero. Curabitur vitae lorem ullamcorper, vestibulum quam sed, pharetra ex. Pellentesque fermentum elit in facilisis bibendum. Duis porta ante felis, non molestie ipsum porta at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse ultrices erat ut dolor fermentum aliquet. Quisque condimentum sed arcu eget faucibus. Pellentesque eget nisl sit amet tortor blandit feugiat convallis in dolor. Sed ornare tristique nulla, in hendrerit neque condimentum id. Aenean sollicitudin, eros ut porttitor porta, risus sem auctor tortor, sed fringilla est odio ac odio. Nulla tempus odio magna, nec fringilla erat faucibus ac. |
||||
</p> |
||||
</article> |
||||
</div> |
||||
</div> |
||||
</body> |
||||
|
||||
</html> |
||||
|
||||
Loading…
Reference in new issue