War veteran, Software developer, and one crazy cat on the blockchain...
War veteran, Software developer, and one crazy cat on the blockchain...
Subscribe to MaxFlowO₂ 终端浪人
Subscribe to MaxFlowO₂ 终端浪人
Share Dialog
Share Dialog
<100 subscribers
<100 subscribers
So, let’s finally build from post to post… remember this one, aka last week?
![Cover image for MFO₂: Week[1] HTML5 init()](https://img.paragraph.com/cdn-cgi/image/format=auto,width=3840,quality=85/https://storage.googleapis.com/papyrus_images/57dc7cd15ad508ec3ac741a604829bfe3bea7345aafd14b889c92203d9d66f87.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>MaxFlowO₂'s Hello World</title>
<meta name="author" content="MaxFlowO₂">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div>
<h1>Tell Chow I said, "Hallo"</h1>
</div>
</body>
</html>
Kind of bland if you ask me… here’s it hosted. Noticing something… this might be one of those things you can pick up on and see this week’s hosting. First thing first let’s make this more XML-ish by closing tags and what not. Now it’s this…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>MaxFlowO₂'s Hello World</title>
<meta name="author" content="MaxFlowO₂" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div>
<h1>Tell Chow I said, "Hallo"</h1>
</div>
</body>
</html>
Also, we got to add CSS 3 the, “style sheets.” So, I made a directory called css, kinda blaring obvious here, and a file called week2.css. So since there’s three tags in there we are going to cover only three css elements, more to be added later.
body {}
div {}
h1 {}
So, how to style the body?
background-color: (value)
valid color name
hex values
RGB values
background-image: url(URI);
background--repeat: (value)
repeat - x (horizontal repeat)
repeat - y (vertical repeat)
no-repeat
background-position (location)
background-attachment: fixed
background: (color) (image) (repeat) (attachment) (position)
other global variables
padding
margin
color
border
border-radius
font-family
font-size (px/em)
height (percentage/px)
width (percentage/px)
text-align
text-shadow
box-shadow (inset) (x-offset) (y-offset) (blur radius) (color)
List goes on and on, but below is a neat way to center an image that’s reactive to any and all backgrounds
body:before {
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -10;
background: url(../images/BG.png) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
So what are we going to do? Well, let’s go black or #000000 for a background, and worry about the rest when we have to, since we don’t want a global for everything…
body {
background: #000000;
}
The next item would be the div, so let’s style this and make sure we got some margins/padding, curved edges, and a nice hard line with box shadows…
div {
background: #ffffff;
border: #505050;
border-radius: 10px 10px 10px 10px;
padding: 2em;
margin: 2em;
box-shadow: 5px 5px 10px violet;
}
Now how abut the font?
h1 {
font-size: 2.5em;
padding: 2em;
margin: 2em;
text-shadow: 1px 1px 2px #505050;
}
As you can see here versus here CSS makes the difference. This week was some basics… Did not want to get into reusable classes (week 3 writeup?). Probably some images for background, and get you really learning how to format data to be properly appeasing…
Thank you for the time,
Max Flow O₂
So, let’s finally build from post to post… remember this one, aka last week?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>MaxFlowO₂'s Hello World</title>
<meta name="author" content="MaxFlowO₂">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div>
<h1>Tell Chow I said, "Hallo"</h1>
</div>
</body>
</html>
Kind of bland if you ask me… here’s it hosted. Noticing something… this might be one of those things you can pick up on and see this week’s hosting. First thing first let’s make this more XML-ish by closing tags and what not. Now it’s this…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>MaxFlowO₂'s Hello World</title>
<meta name="author" content="MaxFlowO₂" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div>
<h1>Tell Chow I said, "Hallo"</h1>
</div>
</body>
</html>
Also, we got to add CSS 3 the, “style sheets.” So, I made a directory called css, kinda blaring obvious here, and a file called week2.css. So since there’s three tags in there we are going to cover only three css elements, more to be added later.
body {}
div {}
h1 {}
So, how to style the body?
background-color: (value)
valid color name
hex values
RGB values
background-image: url(URI);
background--repeat: (value)
repeat - x (horizontal repeat)
repeat - y (vertical repeat)
no-repeat
background-position (location)
background-attachment: fixed
background: (color) (image) (repeat) (attachment) (position)
other global variables
padding
margin
color
border
border-radius
font-family
font-size (px/em)
height (percentage/px)
width (percentage/px)
text-align
text-shadow
box-shadow (inset) (x-offset) (y-offset) (blur radius) (color)
List goes on and on, but below is a neat way to center an image that’s reactive to any and all backgrounds
body:before {
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -10;
background: url(../images/BG.png) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
So what are we going to do? Well, let’s go black or #000000 for a background, and worry about the rest when we have to, since we don’t want a global for everything…
body {
background: #000000;
}
The next item would be the div, so let’s style this and make sure we got some margins/padding, curved edges, and a nice hard line with box shadows…
div {
background: #ffffff;
border: #505050;
border-radius: 10px 10px 10px 10px;
padding: 2em;
margin: 2em;
box-shadow: 5px 5px 10px violet;
}
Now how abut the font?
h1 {
font-size: 2.5em;
padding: 2em;
margin: 2em;
text-shadow: 1px 1px 2px #505050;
}
As you can see here versus here CSS makes the difference. This week was some basics… Did not want to get into reusable classes (week 3 writeup?). Probably some images for background, and get you really learning how to format data to be properly appeasing…
Thank you for the time,
Max Flow O₂
No activity yet