How-To Hardware

For optimal viewing experience please use 150% Zoom. (hint: ctrl + plus)

CSS:
#HWH {
	display: inline-block;
	padding: 15px;
	font-family: "Permanent Marker";
	font-size: 50px;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	line-height: 30px;
	color: #98FB98;
	margin: 0 auto;
	width: 1275px;
	height: 80px;
	position: relative;
	top: 20px;
	left: 285px;
}

Setting the id to "___" is the first step.
Having the display set to "inline-block" allows it only to take as much space as it needs. You can also use "block" but it takes up much more space than is needed.
Padding is the empty space between the content or the area inside its borders.
Font-family is the type font that you want, for example, Arial, Times New Roman, or Sans Serif. In my case I used a custom font, by linking the css of the font. (link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Permanent+Marker" />)
Font-size is well.. the size of the font. Just like if you were in a Google docs and wanted it to look/be bigger.
Font-style adjusts the text for if you want to underline, bold, or italicize something.
Font-variant makes the lowercase letters in a word into a capitlized form, but smaller font size.
Font-weight property sets the thickness and thinness of the characters of the text.
Line-height property adjusts how vertically far apart sentences/words on top of eaach other are from each other.
Color.. sets the color of the text.
Margin is the empty space around the outside of its borders/of the element.
Width property sets how wide something is, from side to side/horizontally.
Height property sets the height of an element, such as text, or even an image, from top to bottom/vertically.
Position property allows you to select the type of positioning method that you think fits best with what you want. There are 6 different types, static|absolute|fixed|relative|initial|inherit. Here's a link for more info on position "http://www.w3schools.com/cssref/pr_class_position.asp".
Top property only functions when there's a position property. It positions the element the amount you specified AWAY from the top of the page/window.
Left property only functions when there's a position property. It positions the element the amount you specified AWAY from the left of the page/window.

The p id allows for text to be displayed, in my case I used the p tag because I felt it worked easier for me, but you can use things like an h1 tag if you prefer that.


                HTML:
<p id="HWH">What makes up a computer?</p>


               HTML:
<p id="HOWTOHOVER">(hover over the words to get information!)</p>

As said above, you can use an h tag instead of p tag. I changed the font-size, and color in the css, that should be on your right.

CSS:
#HOWTOHOVER {
	display: inline-block;
	padding: 15px;
	font-family: "gt_walsheim_regular";
	font-size: 13px;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	line-height: 15px;
	margin: 0 auto;
	color: #CD5C5C;
	position: relative;
	top: -37.5px;
	left: 23px;
}

I have explained all of this above, but I will point on some sort of new stuff. I created a new id for the text, assigned a new font-family, and used a new css color that I've never used before.


                 HTML:
<p id="moboText">Motherboard</p>

Also as said above, I set up a p tag for motherboard. I am setting it up for it to slide images and text when hovering. Hint: You'll see it after this.

CSS:
#moboText {
    position: absolute;
    top:125px;
    left:-35px;
    display: inline-block;
    padding: 30px;
    font-family: "Permanent Marker";
    font-size: 42px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 20px;
    color: white;
    margin:40px;
    border: transparent;
}

As you can see I used positioning to have the text where I wanted. Something new here is that I made the border transparent, essentially turns the border invisible.


                 HTML:
<div id="moboPic">
<img id="moboPic" src="http://cdn.wccftech.com/wp-content/uploads/2014/08/Gigabyte-GA-X99-Gaming-5-Motherboard.png"/>
<p id="moboInfo"> INSERT MOTHERBOARD INFO HERE</p>
</div>

I set up a div with the id moboPic. The id is going to control both the image and the info inside the text because it's inside of the div assigned with the "moboPic" id.

#moboPic{
    position: absolute;
    height: 467px;
    width: 340px;
    top:18%;
    left:-60%;
    -webkit-transition: all 1s ease;
}
#moboInfo {
    position: relative;
    font-family: "gt_walsheim_regular";
    font-size: 21px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 25px;
    color: #87cefa;
    top: 72px;
    left: 157px;
    width: 500px;
}
#moboText:hover + #moboPic{
    z-index: -1;
    left:600px;
    top: 125px;
}

Transitions allows you to adjust property values in order to create effects such as expanding height or width over a 2 second duration, or as I did "slide" in. For more information on CSS transitions please visit "www.w3schools.com/css_transitions.asp". The other property I will be covering is "z-index". Z-index allows you to adjust the stack order of an element, for example you want to put ___ image behind "HI IM BOB", usually the image will just cover the text, but if you use "z-index: -1;" the image will go behind the text, and both the text and image will be visible. Note: the default z-index is 1.


                 HTML:
<p id="cpuText">CPU</p>

Created p tag, you can use h# tag. "cpuText" id allows me to adjust the CSS linked to the text/element.

CSS:
#cpuText{
    position: absolute;
    top:200px;
    left: 50px;
    left:-35px;
    display: inline-block;
	padding: 30px;
	font-family: "Permanent Marker";
	font-size: 42px;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	line-height: 20px;
	color: white;
	margin:40px;
	border: transparent;
}

All of the topics have been discussed above. Note that you can modify these values.


                 HTML:
<div id="cpuPic">
<img src="http://i.imgur.com/NTkFJ1v.png">
<p id="cpuInfo"> INSERT CPU INFO HERE </p>
</div>

I set up a div with the id 'cpuPic'. The id is going to control both the image and the info inside the text because it's inside of the div assigned with the "cpuPic" id.

 #cpuPic{
    position: absolute;
    width:800px;
    height:800px;
    top:18%;
    left:-90%;
    -webkit-transition: all 1s ease;
}
#cpuInfo {
    position: absolute;
    font-family: "gt_walsheim_regular";
    font-size: 25px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 25px;
    color: #87cefa;
    top: -20px;
    left: 360px;
    width: 500px;
}
#cpuText:hover + #cpuPic{
    z-index: -1;
    left:400px;
    top: 225px;
}

I will be covering hover, if you want information on the other properties they're all explained above. by putting ":hover" to an id or class, you can give it properities if the element has ":hover", in my case I made it so that when you hovered the word "CPU" the id "cpuPic" would do an CSS transition. You can mix things up obviously.


                 HTML:
<p id = "ramText">RAM</p>

Created p tag, you can use h# tag. "ramText" id allows me to adjust the CSS linked to the text/element.

#ramText{
    position: absolute;
    top:275px;
    left:-35px;
    display: inline-block;
	padding: 30px;
	font-family: "Permanent Marker";
	font-size: 42px;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	line-height: 20px;
	color: white;
	margin:40px;
	border: transparent;
}

All of the "hardwareText", and hardware representing cpu, ram, etc. Use the same format/template.


                 <div id="ramPic">
<img id="ramPic" src="http://www.freeiconspng.com/uploads/blocks-ram-icon--0.png">
<p id="ramInfo"> INSERT RAM INFO HERE.</p>
</div>

I set up a div with the id 'ramPic'. The id is going to control both the image and the info inside the text because it's inside of the div assigned with the "ramPic" id.

#ramPic{
    position: absolute;
    width:55%;
    height:80%;
    top:18%;
    left:-60%;
    -webkit-transition: all 1s ease;
}
#ramInfo {
    position: relative;
    font-family: "gt_walsheim_regular";
    font-size: 25px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 25px;
    color: #87cefa;
    top: 100px;
    left: -39.5px;
    width: 500px;
}
#ramText:hover + #ramPic{
    z-index: -1;
    left:775px;
    top: 75px;
}

We'll revisit a topic. By having the id/class have ":hover", it allows the "ramText" when hovered to use any effects of "ramPic" in my case I used a "webkit-transition:" to create the effect of the image "sliding in". The image itself is positioned -60% outside of the view of your screen.


                 HTML:
<p id="harddriveText">Hard Drive</p>

Created p tag, you can use h# tag. "harddriveext" id allows me to adjust the CSS linked to the text/element.

#harddriveText{
    position: absolute;
    top:350px;
    left:-35px;
    display: inline-block;
	padding: 30px;
	font-family: "Permanent Marker";
	font-size: 42px;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	line-height: 20px;
	color: white;
	margin:40px;
	border: transparent;
}

REVIEW TIME! Setting the id to "___" is the first step.
Having the display set to "inline-block" allows it only to take as much space as it needs. You can also use "block" but it takes up much more space than is needed.
Padding is the empty space between the content or the area inside its borders.
Font-family is the type font that you want, for example, Arial, Times New Roman, or Sans Serif. In my case I used a custom font, by linking the css of the font. (link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Permanent+Marker" />)
Font-size is well.. the size of the font. Just like if you were in a Google docs and wanted it to look/be bigger.
Font-style adjusts the text for if you want to underline, bold, or italicize something.
Font-variant makes the lowercase letters in a word into a capitlized form, but smaller font size.
Font-weight property sets the thickness and thinness of the characters of the text.
Line-height property adjusts how vertically far apart sentences/words on top of eaach other are from each other.
Color.. sets the color of the text.
Margin is the empty space around the outside of its borders/of the element.
Width property sets how wide something is, from side to side/horizontally.
Height property sets the height of an element, such as text, or even an image, from top to bottom/vertically.
Position property allows you to select the type of positioning method that you think fits best with what you want. There are 6 different types, static|absolute|fixed|relative|initial|inherit. Here's a link for more info on position "http://www.w3schools.com/cssref/pr_class_position.asp".
Top property only functions when there's a position property. It positions the element the amount you specified AWAY from the top of the page/window.
Left property only functions when there's a position property. It positions the element the amount you specified AWAY from the left of the page/window.


                 HTML:
<div id="harddrivePic">
<img id="harddrivePic"src="http://i.imgur.com/KaqsC4t.png"/>
<p id="harddriveInfo"> INSERT HARD DRIVE INFO </p>
</div>

I set up a div with the id 'harddrivePic'. The id is going to control both the image and the info inside the text because it's inside of the div assigned with the "harddrivePic" id.

CSS:
#harddrivePic {
    position: absolute;
    width:356px;
    height: 356px;
    top:18%;
    left:-80%;
    -webkit-transition: all 1s ease;
}
#harddriveInfo {
    position: relative;
    font-family: "gt_walsheim_regular";
    font-size: 25px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 25px;
    color: #87cefa;
    top: 65px;
    left: 50px;
    width: 500px;
}
#harddriveText:hover + #harddrivePic{
    z-index: -1;
    left:715px;
    top: 115px;
}

All of the CSS follows a kind of template/format.


                 HTML:
<p id="busText">Computer Comms</p>

Created p tag, you can use h# tag. "harddriveext" id allows me to adjust the CSS linked to the text/element.

CSS:
#busText{
    position: absolute;
    top:425px;
    left:-35px;
    display: inline-block;
	padding: 30px;
	font-family: "Permanent Marker";
	font-size: 42px;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	line-height: 20px;
	color: white;
	margin:40px;
	border: transparent;
}

All of this CSS follows a template/format.


                 HTML:
<div id="busPic">
<img id="busPic"src="http://i.imgur.com/Xm5l5TK.png">
<p id="busInfo">INSERT BUS INFO HERE</p>
                </div>

I set up a div with the id 'busPic'. The id is going to control both the image and the info inside the text because it's inside of the div assigned with the "busPic" id.

CSS:
#busPic {
    position: absolute;
    width:426.666666667px;
    height: 312.666666667px;
    top:18%;
    left:-80%;
    -webkit-transition: all 1s ease;
}
#busInfo {
    position: relative;
    font-family: "gt_walsheim_regular";
    font-size: 25px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 25px;
    color: #87cefa;
    top: 50px;
    left: 100px;
    width: 500px;
}
#busText:hover + #busPic{
    z-index: -1;
    left:660px;
    top: 135px;
}

All of the CSS follows a kind of template/format.


                 HTML:
<p id="peripheralText">Peripherals</p>

Created p tag, you can use h# tag. "peripheralText" id allows me to adjust the CSS linked to the text/element.

CSS:
#peripheralText{
    position: absolute;
    top:500px;
    left:-35px;
    display: inline-block;
	padding: 30px;
	font-family: "Permanent Marker";
	font-size: 42px;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	line-height: 20px;
	color: white;
	margin:40px;
	border: transparent;
}

All the CSS follows a template/format.


                 HTML:
<div id="peripheralPic">
<img id="peripheralPic"src="http://i.imgur.com/pAjhBiy.png">
<p id="peripheralInfo">

I set up a div with the id 'peripheralsPic'. The id is going to control both the image and the info inside the text because it's inside of the div assigned with the "peripheralsPic" id.

#peripheralPic {
    position: absolute;
    width: 296.65px;
    height: 509.85px;
    top:1%;
    left:-100%;
    -webkit-transition: all 1s ease;
}
#peripheralInfo {
    position: relative;
    font-family: "gt_walsheim_regular";
    font-size: 20px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 25px;
    color: #87cefa;
    top: 5px;
    left: -10px;
    width: 500px;
}
#peripheralText:hover + #peripheralPic{
    z-index: -1;
    left:725px;
    top: 135px;
}

RECAP TIME! Setting the id to "___" is the first step.
Having the display set to "inline-block" allows it only to take as much space as it needs. You can also use "block" but it takes up much more space than is needed.
Padding is the empty space between the content or the area inside its borders.
Font-family is the type font that you want, for example, Arial, Times New Roman, or Sans Serif. In my case I used a custom font, by linking the css of the font. (link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Permanent+Marker" />)
Font-size is well.. the size of the font. Just like if you were in a Google docs and wanted it to look/be bigger.
Font-style adjusts the text for if you want to underline, bold, or italicize something.
Font-variant makes the lowercase letters in a word into a capitlized form, but smaller font size.
Font-weight property sets the thickness and thinness of the characters of the text.
Line-height property adjusts how vertically far apart sentences/words on top of eaach other are from each other.
Color.. sets the color of the text.
Margin is the empty space around the outside of its borders/of the element.
Width property sets how wide something is, from side to side/horizontally.
Height property sets the height of an element, such as text, or even an image, from top to bottom/vertically.
Position property allows you to select the type of positioning method that you think fits best with what you want. There are 6 different types, static|absolute|fixed|relative|initial|inherit. Here's a link for more info on position "http://www.w3schools.com/cssref/pr_class_position.asp".
Top property only functions when there's a position property. It positions the element the amount you specified AWAY from the top of the page/window.
Left property only functions when there's a position property. It positions the element the amount you specified AWAY from the left of the page/window.
Z-index allows you to adjust the stack order of an element, for example you want to put ___ image behind "HI IM BOB", usually the image will just cover the text, but if you use "z-index: -1;" the image will go behind the text, and both the text and image will be visible. Note: the default z-index is 1.
Transitions allows you to adjust property values in order to create effects such as expanding height or width over a 2 second duration, or as I did "slide" in. For more information on CSS transitions please visit "www.w3schools.com/css_transitions.asp".