Copypasta 'responsive' html and CSS, then 'hack' on it a while.
This commit is contained in:
scoobybejesus
parent
2a0014481a
commit
a79ef1db0f
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
|
|
@ -1,10 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Scoobs!</title>
|
||||
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
|
||||
|
|
@ -13,25 +13,77 @@
|
|||
<meta name="msapplication-TileColor" content="#2b5797">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Scoobs Did It Again</h1>
|
||||
|
||||
<p>How exciting.</p>
|
||||
<div class="header-border">
|
||||
<div>
|
||||
<h1>Scoobs Did It Again</h1>
|
||||
<div class='subtitle'>
|
||||
<p>How <em><b>exciting</b></em>...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Be sure to check out all the great related services. Links coming soon...</p>
|
||||
<div class="navbar">
|
||||
<a href="http://scoobs.xyz" class="active">Home</a>
|
||||
<a href="http://bookstack.scoobs.xyz/">My Docs</a>
|
||||
<a href="http://gitea.scoobs.xyz/">My Repos</a>
|
||||
<a href="https://github.com/scoobybejesus" class="right">Find me on github</a>
|
||||
</div>
|
||||
|
||||
<p>Buy my new book. On sale now.</p>
|
||||
|
||||
<p>For online documentation and support please refer to
|
||||
<a href="http://bookstack.scoobs.xyz/">My Docs</a>.<br/>
|
||||
</p>
|
||||
<div class="row">
|
||||
|
||||
<p>Even better, check out
|
||||
<a href="http://gitea.scoobs.xyz/">My Repos</a>.<br/>
|
||||
</p>
|
||||
<div class="side">
|
||||
<h2>About Me</h2>
|
||||
<h5>Just kidding. This is Kirby:</h5>
|
||||
<div class="first_row_img" style="height:333px;"><img src="/images/kirb_pup.jpg"></div>
|
||||
<p>He was pretty young. This from June 2013.</p>
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
|
||||
<h2>PROGRESS OR SLOPPY COPYPASTA? YOU DECIDE! (Aug 3, 2020)</h2>
|
||||
<h5>More Kirby.</h5>
|
||||
<div class="first_row_img" style="height:333px;"><img src="/images/kirb_bnw2.jpg"></div>
|
||||
<p>I copied most of the html and CSS from
|
||||
<a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_example_website">here</a>.
|
||||
Even so, I am reasonably proud of myself for putting it together, even if it started out as a
|
||||
big copypasta. I "hacked" on a bunch of it to make it my own and turn it into something that is
|
||||
a bit more likeable than it was when I started.</p>
|
||||
<p>It's not great, but it's a nice start. After all, I've got a couple pictures
|
||||
of Kirbs to show for it. It's enough to warrant a `git push`
|
||||
I think.</p>
|
||||
<br>
|
||||
|
||||
<h2>MAKING PROGRESS (Aug 2, 2020)</h2>
|
||||
<h5>CSS + html = I have a fancy, responsive website.</h5>
|
||||
<div>
|
||||
<p>I created a website to sell my book. Buy my new book. On sale now.</p>
|
||||
<p>That is completely true, except for the part about there being a book (i.e.,
|
||||
that was false, and there is no book).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>For online documentation and support please refer to
|
||||
<a href="http://bookstack.scoobs.xyz/">My Docs</a>.<br />
|
||||
</p>
|
||||
|
||||
<p>Even better, check out
|
||||
<a href="http://gitea.scoobs.xyz/">My Repos</a>.<br />
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Style the body */
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Header/logo Title */
|
||||
.header-border {
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
background: #526e8d;
|
||||
color: rgb(189, 182, 182);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
/* Increase the font size of the heading */
|
||||
.header-border h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
/* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */
|
||||
.navbar {
|
||||
overflow: hidden;
|
||||
background-color: #333;
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Style the navigation bar links */
|
||||
.navbar a {
|
||||
float: left;
|
||||
display: block;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 14px 20px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
/* Right-aligned link */
|
||||
.navbar a.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* Change color on hover */
|
||||
.navbar a:hover {
|
||||
background-color: #ddd;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* Active/current link */
|
||||
.navbar a.active {
|
||||
background-color: #666;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Column container */
|
||||
.row {
|
||||
display: -ms-flexbox;
|
||||
/* IE10 */
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
/* IE10 */
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Create two unequal columns that sits next to each other */
|
||||
/* Sidebar/left column */
|
||||
.side {
|
||||
-ms-flex: 30%;
|
||||
/* IE10 */
|
||||
flex: 30%;
|
||||
background-color: #dad8d8;
|
||||
padding: 20px;
|
||||
color: rgb(116, 111, 111);
|
||||
}
|
||||
|
||||
/* Main column */
|
||||
.main {
|
||||
-ms-flex: 70%;
|
||||
/* IE10 */
|
||||
flex: 70%;
|
||||
background-color: rgb(87, 84, 84);
|
||||
padding: 20px;
|
||||
color: #e9e7e7;
|
||||
}
|
||||
|
||||
/* Fake image, just for this example */
|
||||
.first_row_img {
|
||||
background-color: rgb(194, 191, 191);
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
background: rgb(190, 189, 189);
|
||||
}
|
||||
|
||||
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
|
||||
@media screen and (max-width: 600px) {
|
||||
.row {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
|
||||
@media screen and (max-width: 300px) {
|
||||
.navbar a {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue