Skip to content

Commit eb0cc04

Browse files
ccamccam
committed
First update commit
1 parent 9274d10 commit eb0cc04

11 files changed

+306
-13
lines changed

‎gulpfile.js

+8-8
Original file line numberDiff line numberDiff line change
@@ -6,33 +6,33 @@ var gulp = require('gulp'),
66
imagemin = require('gulp-imagemin');
77

88
gulp.task('sass', function() {
9-
return gulp.src('./css/*.scss')
9+
return gulp.src('src/css/*.scss')
1010
.pipe(sass.sync().on('error', sass.logError))
11-
.pipe(gulp.dest('./css'))
11+
.pipe(gulp.dest('src/css'))
1212
});
1313

1414
gulp.task('sass:watch', function () {
15-
gulp.watch('./css/*.scss', ['sass']);
15+
gulp.watch('src/css/*.scss', ['sass']);
1616
});
1717

1818
gulp.task('minify-css', function () {
19-
return gulp.src('css/main.css')
19+
return gulp.src('src/css/main.css')
2020
.pipe(cleanCSS({compatibility: 'ie8'}))
2121
.pipe(gulp.dest('dist/css'));
2222
});
2323

2424
gulp.task('min-js', function () {
25-
return gulp.src('js/*.js')
25+
return gulp.src('src/js/*.js')
2626
.pipe(uglify())
2727
.pipe(gulp.dest('dist/js'));
2828
});
2929

3030
gulp.task('imagemin', function () {
31-
return gulp.src('css/img/*')
31+
return gulp.src('src/img/*')
3232
.pipe(imagemin())
33-
.pipe(gulp.dest('dist/css/img'));
33+
.pipe(gulp.dest('dist/img'));
3434
});
3535

36-
gulp.task('main', ['sass:watch')
36+
gulp.task('main', ['sass:watch']);
3737

3838
gulp.task('default', ['main']);

‎package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
"gulp-clean-css": "^2.0.10",
1414
"gulp-imagemin": "^3.0.1",
1515
"gulp-sass": "^2.3.1",
16-
"gulp-uglify": "^1.5.3",
17-
"gulp-webserver": "^0.9.1"
16+
"gulp-uglify": "^1.5.3"
1817
}
1918
}

‎src/css/main.css

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
@import url("https://fonts.googleapis.com/css?family=Roboto:300");
2+
a {
3+
text-decoration: none;
4+
color: inherit; }
5+
6+
ul {
7+
list-style: none; }
8+
9+
header {
10+
background-image: url("../img/street.jpg");
11+
background-size: cover;
12+
color: #fff;
13+
height: 55vh; }
14+
header .name {
15+
font-family: 'Roboto', sans-serif;
16+
font-size: 3em;
17+
margin: 0;
18+
padding: 5vh 0 0 10vw; }
19+
header .titles, header .accomps {
20+
color: #fff;
21+
padding: 3vh 0 0 10vw; }
22+
header .titles li {
23+
display: inline;
24+
background-color: rgba(221, 221, 221, 0.5);
25+
border-radius: 15px;
26+
padding: 5px 7px; }
27+
header .accomps li {
28+
display: inline;
29+
padding: 1vw; }
30+
31+
.fabPicFlex {
32+
display: flex;
33+
justify-content: space-between; }
34+
.fabPicFlex .profilePic {
35+
border-radius: 50%;
36+
z-index: 5;
37+
margin: 5vh 0 0 5vw; }
38+
.fabPicFlex .follows {
39+
margin-right: 5vw;
40+
z-index: 5; }
41+
.fabPicFlex .follows p {
42+
margin-right: 25vw;
43+
z-index: 5;
44+
color: #000;
45+
position: relative;
46+
top: 15vh;
47+
right: 5vh; }
48+
.fabPicFlex .follows .FAB {
49+
z-index: 5;
50+
text-align: center;
51+
height: 100px;
52+
width: 100px;
53+
background: #aaa;
54+
color: #fff;
55+
font-size: 5em;
56+
border-radius: 50%;
57+
position: relative;
58+
top: 5vh;
59+
left: 50vw; }
60+
61+
.followsFlex {
62+
display: flex; }
63+
64+
.diagonal {
65+
height: 25vh;
66+
width: 105vw;
67+
overflow: hidden;
68+
position: relative;
69+
top: -10vh;
70+
left: -2vw;
71+
z-index: 2;
72+
background-color: #fff;
73+
transform: skew(0deg, -5deg);
74+
-ms-transform: skew(0deg, -5deg);
75+
-webkit-transform: skew(0deg, -5deg);
76+
box-shadow: inset 10px 5px 5px #999; }
77+
78+
.main {
79+
width: 80vw;
80+
margin: 0 auto; }
81+
82+
.movies h3 {
83+
text-align: center; }
84+
85+
.movies .movieFlex {
86+
display: flex;
87+
background-color: #a1a1a1; }
88+
.movies .movieFlex h4 {
89+
text-align: center; }

‎src/css/main.scss

+128-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,130 @@
1-
body {
2-
background-color: #333;
1+
//fonts
2+
@import url('https://fonts.googleapis.com/css?family=Roboto:300');
3+
4+
a {
5+
text-decoration: none;
6+
color: inherit;
7+
}
8+
9+
ul {
10+
list-style: none;
11+
}
12+
13+
14+
header {
15+
background-image: url('../img/street.jpg');
16+
background-size: cover;
317
color: #fff;
18+
height: 55vh;
19+
20+
21+
.name {
22+
font-family: 'Roboto', sans-serif;
23+
font-size: 3em;
24+
margin: 0;
25+
padding: 5vh 0 0 10vw;
26+
}
27+
28+
.titles, .accomps {
29+
color: #fff;
30+
padding: 3vh 0 0 10vw;
31+
}
32+
33+
.titles {
34+
li {
35+
display: inline;
36+
background-color: rgba(221, 221, 221, 0.5);
37+
border-radius: 15px;
38+
padding: 5px 7px;
39+
}
40+
}
41+
42+
.accomps {
43+
li {
44+
display: inline;
45+
padding: 1vw;
46+
}
47+
}
48+
}
49+
50+
.fabPicFlex {
51+
display: flex;
52+
justify-content: space-between;
53+
54+
.profilePic {
55+
border-radius: 50%;
56+
z-index: 5;
57+
margin: 5vh 0 0 5vw;
58+
}
59+
.follows {
60+
margin-right: 5vw;
61+
z-index: 5;
62+
63+
p {
64+
margin-right: 25vw;
65+
z-index: 5;
66+
color: #000;
67+
position: relative;
68+
top: 15vh;
69+
right: 5vh;
70+
}
71+
.FAB {
72+
z-index: 5;
73+
text-align: center;
74+
height: 100px;
75+
width: 100px;
76+
background: #aaa;
77+
color: #fff;
78+
font-size: 5em;
79+
border-radius: 50%;
80+
position: relative;
81+
top: 5vh;
82+
left: 50vw;
83+
}
84+
}
85+
}
86+
87+
88+
.followsFlex {
89+
display: flex;
90+
491
}
92+
93+
.diagonal {
94+
height: 25vh;
95+
width: 105vw;
96+
overflow: hidden;
97+
98+
position: relative;
99+
top: -10vh;
100+
left: -2vw;
101+
z-index: 2;
102+
background-color: #fff;
103+
transform:skew(0deg,-5deg);
104+
-ms-transform:skew(0deg,-5deg);
105+
-webkit-transform:skew(0deg,-5deg);
106+
box-shadow: inset 10px 5px 5px #999;
107+
}
108+
109+
// Starting main section
110+
.main {
111+
width: 80vw;
112+
margin: 0 auto;
113+
}
114+
115+
.movies {
116+
h3 {
117+
text-align: center;
118+
}
119+
120+
.movieFlex {
121+
display: flex;
122+
background-color: #a1a1a1;
123+
124+
125+
h4 {
126+
text-align: center;
127+
}
128+
}
129+
130+
}

‎src/img/Hugh Jackman.jpeg

9.16 KB
Loading

‎src/img/prest.jpg

8.57 KB
Loading

‎src/img/prisoners.jpg

9.99 KB
Loading

‎src/img/street.jpg

163 KB
Loading

‎src/img/xmen.jpg

16.2 KB
Loading

‎src/img/xmenDOFP.jpg

17.2 KB
Loading

‎src/index.html

+80-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,86 @@
1818
<!-- End Meta Tags -->
1919
</head>
2020
<body>
21-
<!-- Start building amazing things here :) -->
21+
<header>
22+
<h3 class="name">Hugh Jackman</h3>
23+
<ul class="titles">
24+
<li>Actor</li>
25+
<li>Producer</li>
26+
</ul>
2227

28+
<ul class="accomps">
29+
<li>Movies 56</li>
30+
<li>Plays 29 </li>
31+
<li>Musicals 11</li>
32+
</ul>
33+
34+
<div class="fabPicFlex">
35+
<img src="img/Hugh Jackman.jpeg" alt="Hugh Jackman" class="profilePic">
36+
37+
<div class="follows">
38+
<div class="FAB">+</div>
39+
40+
<div class="followsFlex">
41+
<p>Followers <br/> 3.5k</p>
42+
<p> Following <br/> 1.9k</p>
43+
</div>
44+
</div>
45+
46+
47+
</div>
48+
49+
</header>
50+
<div class="diagonal"><!-- This creates the diagonal line on the header bgimg --></div>
51+
52+
53+
54+
55+
56+
<div class="main">
57+
58+
<p class="about">
59+
Hugh Michael Jackman is an Australian actor, singer, multi-instrumentalist, dancer and producer. Jackman has won international recognition for his roles in major films, notably as superhero, period, and romance characters. He is best known for his long-running role as Wolverine in the X-Men film series, as well as for his lead roles in the romantic-comedy fantasy Kate & Leopold (2001), the action-horror film Van Helsing (2004), the drama The Prestige and The Fountain (2006), the epic historical romantic drama Australia (2008), the film version of Les Misérables (2012), and the thriller Prisoners (2013). His work in Les Misérables earned him his first Academy Award nomination for Best Actor and his first Golden Globe Award for Best Actor - Motion Picture Musical or Comedy in 2013.
60+
61+
In Broadway theatre, Jackman won a Tony Award for his role in The Boy from Oz. A four-time host of the Tony Awards themselves, he won an Emmy Award for one of these appearances. Jackman also hosted the 81st Academy Awards on 22 February 2009. Jackman was born in Sydney, New South Wales, to Grace McNeil (Greenwood) and Christopher John Jackman, an accountant. He is the youngest of five children. His parents, both English, moved to Australia shortly before his birth. He also has Greek (from a great-grandfather) and Scottish (from a grandmother) ancestry.
62+
63+
Jackman has a communications degree with a journalism major from the University of Technology Sydney. After graduating, he pursued drama at the Western Australian Academy of Performing Arts, immediately after which he was offered a starring role in the ABC-TV prison drama Correlli (1995), opposite his future wife Deborra-Lee Furness. Several TV guest roles followed, as an actor and variety compere. An accomplished singer, Jackman has starred as Gaston in the Australian production of "Beauty and the Beast." He appeared as Joe Gillis in the Australian production of "Sunset Boulevard." In 1998, he was cast as Curly in the Royal National Theatre's production of Trevor Nunn's Oklahoma. Jackman has made two feature films, the second of which, Erskineville Kings (1999), garnered him an Australian Film Institute nomination for Best Actor in 1999. Recently, he won the part of Logan/Wolverine in the Bryan Singer- directed comic-book movie X-Men (2000). In his spare time, Jackman plays piano, golf, and guitar, and likes to windsurf.
64+
- IMDb Mini Biography By: Anonymous
65+
</p>
66+
67+
<div class="movies">
68+
<h3>Movies</h3>
69+
<div class="movieFlex">
70+
<div class="one">
71+
<h4>The Prestige</h4>
72+
<a href="#">
73+
<img src="img/prest.jpg" alt="The Pretige">
74+
</a>
75+
</div>
76+
77+
<div class="two">
78+
<h4>X-Men: Days of Future Past</h4>
79+
<a href="#">
80+
<img src="img/xmenDOFP.jpg" alt="X-Men: Days of Future Past">
81+
</a>
82+
</div>
83+
84+
<div class="three">
85+
<h4>X-Men</h4>
86+
<a href="#">
87+
<img src="img/xmen.jpg" alt="X-Men">
88+
</a>
89+
</div>
90+
91+
<div class="four">
92+
<h4>The Prisoners</h4>
93+
<a href="#">
94+
<img src="img/prisoners.jpg" alt="The Prisoners">
95+
</a>
96+
</div>
97+
98+
</div>
99+
</div>
100+
101+
</div>
23102
</body>
24103
</html>

0 commit comments

Comments
 (0)