Skip to content

Commit 990a561

Browse files
coding102coding102
committed
change layout
1 parent 630095e commit 990a561

File tree

11 files changed

+79
-169
lines changed

11 files changed

+79
-169
lines changed

‎index.html

Lines changed: 5 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4,42 +4,14 @@
44
<meta charset="utf-8">
55
<title>Home</title>
66
<link rel="stylesheet" type="text/css" href="my.css">
7+
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
78
</head>
8-
9-
<body>
10-
11-
<div class="container">
12-
13-
<div id="header">
14-
15-
<div id="nav">
16-
17-
<ul>
18-
<li><a href="index.html">Home</a></li>
19-
<li><a href="index2.html">Portfolio</a></li>
20-
<li><a href="index3.html">Experience</a></li>
21-
</ul>
22-
23-
</div>
24-
25-
<img id="background" src="pictures/desk.jpeg" style="width:100%;height: 380px;">
269

27-
</div><!--end header -->
28-
10+
<body>
2911

30-
31-
<div id="footer">
32-
33-
<img id="image1" src="pictures/facebook.png" alt="HTML5 Icon" style="width:50px;height:50px;">
34-
35-
<img id="image2" src="pictures/twitter.png" alt="HTML5 Icon" style="width:50px;height:50px;">
36-
37-
<img id="image3" src="pictures/linked.png" alt="HTML5 Icon" style="width:50px;height:50px;">
38-
39-
</div>
40-
41-
</div><!--end container-->
42-
12+
<div id="textLink">
13+
<a href="index2.html">About</a>
14+
</div><!-- /#main -->
4315
</body>
4416

4517
</html>

‎index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
(function blink() {
2+
$('#blink').fadeOut(500).fadeIn(500, blink);
3+
})();

‎index2.html

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,10 @@
88

99
<body>
1010

11-
<div class="container">
1211

13-
<div id="header">
12+
<div id="header">
1413

15-
<div id="nav">
1614

17-
<ul>
18-
<li><a href="index.html">Home</a></li>
19-
<li><a href="index2.html">Portfolio</a></li>
20-
<li><a href="index3.html">Experience</a></li>
21-
</ul>
22-
23-
</div>
24-
25-
<img src="pictures/desk.jpeg" alt="HTML5 Icon" style="width:100%;height: 80%;">
26-
27-
</div><!--end header -->
28-
2915
<div id="content">
3016

3117
<div class="img">
@@ -80,7 +66,7 @@
8066

8167
</div>
8268

83-
</div><!--end container-->
69+
</div><!--end container-->
8470

8571
</body>
8672

‎my.css

Lines changed: 30 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,41 @@
1-
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
2-
margin: 0;
3-
padding: 0;
4-
border: 0;
5-
outline: 0;
6-
font-size: 100%;
7-
vertical-align: baseline;
8-
background: transparent;
9-
}
10-
111
body {
12-
height: 100%;
13-
width: 100%;
14-
background-color:#1971e5;
15-
}
16-
17-
.container {
18-
width: 100%;
19-
height: 100%;
20-
}
21-
22-
#header {
23-
width: 100%;
24-
position: absolute;
25-
}
26-
27-
#nav {
28-
width: 100%;
29-
height: 70px;
30-
}
31-
32-
#nav ul {
33-
width: 100%;
34-
height: 100%;
35-
list-style-type: none;
36-
background-color: #333;
37-
38-
}
39-
40-
#nav li {
41-
float: left;
42-
}
43-
44-
#nav li, a {
45-
display: block;
46-
color: white;
2+
/* Location of the image */
3+
background-image: url(pictures/desk2.jpg);
4+
5+
/* Background image is centered vertically and horizontally at all times */
6+
background-position: center center;
7+
8+
/* Background image doesn't tile */
9+
background-repeat: no-repeat;
10+
11+
/* Background image is fixed in the viewport so that it doesn't move when the content's height is greater than the image's height */
12+
background-attachment: fixed;
13+
14+
/* This is what makes the background image rescale based on the container's size */
15+
background-size: cover;
16+
17+
/* Set a background color that will be displayed while the background image is loading */
18+
background-color: #464646;
19+
}
20+
21+
#textLink {
22+
height: 20%;
23+
padding-top: 10px;
4724
text-align: center;
48-
padding: 14px 10px 10px 10px;
49-
text-decoration: none;
50-
}
51-
52-
li a:hover {
53-
background-color: #111;
54-
}
55-
56-
#footer {
25+
color: white;
5726
width:100%;
58-
padding: 10px 0 10px 10px;
5927
position: fixed;
6028
bottom: 0;
6129
right: 0;
62-
background-color: black;
30+
background-color: rgba(0,0,0, .6);
6331
}
6432

65-
#footer img {
66-
padding: 7px 7px 7px 7px;
67-
}
68-
69-
33+
#textLink a {
34+
font-family: 'Poiret One', cursive;
35+
color: white;
36+
text-decoration: none;
37+
font-size: 9vh;
7038

39+
}
7140

7241

‎my2.css

Lines changed: 39 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,46 @@
1-
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
2-
margin: 0;
3-
padding: 0;
4-
border: 0;
5-
outline: 0;
6-
font-size: 100%;
7-
vertical-align: baseline;
8-
background: transparent;
9-
}
10-
111
body {
12-
height: 100%;
13-
width: 100%;
14-
background-color:#1971e5;
15-
}
16-
17-
.container {
18-
width: 100%;
19-
height: 100%;
20-
}
21-
22-
#header {
23-
width: 100%;
24-
height:55%;
25-
position: absolute;
26-
}
27-
28-
#nav {
29-
width: 100%;
30-
height: 75px;
31-
}
32-
33-
#nav ul {
34-
width: 100%;
35-
height: 100%;
36-
list-style-type: none;
37-
background-color: #333;
38-
39-
}
40-
41-
#nav li {
42-
float:left;
2+
/* Location of the image */
3+
background-image: url(pictures/desk3.jpg);
4+
5+
/* Background image is centered vertically and horizontally at all times */
6+
background-position: center center;
7+
8+
/* Background image doesn't tile */
9+
background-repeat: no-repeat;
10+
11+
/* Background image is fixed in the viewport so that it doesn't move when the content's height is greater than the image's height */
12+
background-attachment: fixed;
13+
14+
/* This is what makes the background image rescale based on the container's size */
15+
background-size: cover;
16+
17+
/* Set a background color that will be displayed while the background image is loading */
18+
background-color: #464646;
19+
}
20+
21+
#textLink {
22+
height: 20%;
23+
padding-top: 10px;
24+
text-align: center;
25+
color: white;
26+
width:100%;
27+
position: fixed;
28+
bottom: 0;
29+
right: 0;
30+
background-color: rgba(0,0,0, .6);
4331
}
4432

45-
#nav li, a {
46-
display: block;
33+
#textLink a {
34+
font-family: 'Poiret One', cursive;
4735
color: white;
48-
text-align: center;
49-
padding: 14px 10px 10px 10px;
5036
text-decoration: none;
51-
font-size: 3vh;
52-
}
37+
font-size: 9vh;
5338

54-
li a:hover {
55-
background-color: #111;
5639
}
5740

5841

5942

43+
6044
#content {
6145
top: 470px;
6246
position: absolute;
@@ -92,16 +76,12 @@ div.desc {
9276
}
9377

9478
#footer {
79+
height: 20%;
80+
padding-top: 10px;
81+
text-align: center;
82+
color: white;
9583
width:100%;
96-
padding: 10px 0 10px 10px;
9784
position: fixed;
9885
bottom: 0;
99-
background-color: black;
100-
}
101-
102-
#footer img {
103-
padding: 7px 7px 7px 7px;
104-
}
105-
106-
107-
86+
right: 0;
87+
background-color: rgba(0,0,0, .6);

‎pictures/desk.jpeg

-134 KB
Binary file not shown.

‎pictures/desk.jpg

4.14 MB
Loading

‎pictures/desk2.jpg

1.51 MB
Loading

‎pictures/desk3.jpg

136 KB
Loading

‎pictures/home.jpg

3.04 MB
Loading

‎pictures/imag.jpg

-94.4 KB
Binary file not shown.

0 commit comments

Comments
 (0)