-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
163 lines (150 loc) · 9.01 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,100,300italic' rel='stylesheet' type='text/css'>
<link href='http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="vendors/css/slick.css">
<link rel="stylesheet" type="text/css" href="vendors/css/slick-theme.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/css/animate.css">
<link rel="stylesheet" type="text/css" href="./resources/css/style.css">
<title>Leonardo Dicaprio</title>
</head>
<body>
<header>
<nav>
<ul class="main-nav animated fadeInDown">
<li><a href="#porfolio">Portfolio</a></li>
<li><a href="#movies">Movies</a></li>
<li><a href="#news">News</a></li>
</ul>
</nav>
<div class="cover-text-box animated fadeInLeft">
<h1>The <span id="header-oscar-winner">Oscar Winner</span><br><span id="header-star-name">Leonardo Dicaprio</span></h1>
<a href="#porfolio">Discover More</a>
</div>
</header>
<section class="section-porfolio" id="porfolio">
<div class="row">
<div class="col span-1-of-2 porfolio-text animated pulse">
<div class="portfolio-content">
<h2 class="animated fadeInLeft">Portfolio</h2>
<p>
<span class="porfolio-star-name">Leonardo DiCaprio</span> was born on November 11, 1974, in Los Angeles, California. Leonardo DiCaprio is an American actor known for his good looks and edgy, unconventional roles. DiCaprio started out in television in the early 1990s. This Boy’s Life (1993) with Robert De Niro was his first major film role.
</p><br />
<p>
Prior to “The Great Gatsby”, he starred in “Django Unchained, ” where he received a Golden Globe nomination for his work. As the title role in “J. Edgar ”, under the direction of Clint Eastwood, he received Golden Globe, Critics’ Choice and Screen Actors Guild (SAG) Award nominations for his work in the film. Additionally, he starred in Christopher Nolan’s blockbuster “Inception...
</p>
</div>
<div class="porfolio-link">
<a href="https://en.wikipedia.org/wiki/Leonardo_DiCaprio" target="_blank">Learn More</a>
</div>
</div>
</div>
</section>
<section class="section-movies" id="movies">
<div class="row movie-heading">
<h2>Professionally Performed</h2>
</div>
<div class="row">
<figure class="col span-2-of-3 movie-photo">
<a href="http://www.imdb.com/title/tt1343092" target="_blank">
<img src="resources/img/wolf_of_wall_street.jpg" alt="wolf-of-wallstreet-photo">
</a>
</figure>
<div class="col span-1-of-3 movie-info animated fadeInRight">
<h3 class="movie-title"><i class="ion-videocamera"></i>Wolf of Wall Street</h3>
<p class="movie-text">
Based on the true story of <span id="belfort-highlight">Jordan Belfort</span>, from his rise to a wealthy stock-broker living the high life to his fall involving crime, corruption and the federal government.
</p>
</div>
</div>
<div class="row">
<div class="col span-1-of-3 movie-info animated fadeInLeft">
<h3 class="movie-title"><i class="ion-videocamera"></i>The Great Gatsby</h3>
<p class="movie-text">
A writer and wall street trader, Nick, finds himself drawn to the past and lifestyle of his millionaire neighbor, <span id="gatsby-highlight">Jay Gatsby.</span>
</p>
</div>
<figure class="col span-2-of-3 movie-photo" style="margin-left:0px;">
<a href="http://www.imdb.com/title/tt0993846/" target="_blank">
<img src="resources/img/the-great-gatsby.jpg" alt="the-great-gatsby-photo">
</a>
</figure>
</div>
<div class="row bottom-row"></div>
</section>
<section class="section-news" id="news">
<div class="row">
<h2>Current News</h2>
</div>
<button type="button" class="slick-prev">Previous</button>
<div class="news-slide-box">
<div class="slide-content">
<img src="resources/img/leonardo_foundation.jpg">
<div class="news-description">
<a href="#">Leonardo Foundation</a>
<p class="news-detail">
The Leonardo DiCaprio Foundation is dedicated to the long-term health and wellbeing of all Earth’s inhabitants. Through collaborative partnerships, we support innovative projects that protect vulnerable wildlife from extinction...
</p>
</div>
</div>
<div class="slide-content">
<img src="resources/img/oscar_award.jpg">
<div class="news-description">
<a href="#">Oscar Award</a>
<p class="news-detail">
Leonardo DiCaprio's Oscar acceptance speech was certainly one for the record books. After six previous Academy Award nominations, DiCaprio finally joined the ranks of Oscar winners and took home the 2016 Oscar for Best Actor in a Leading Role.
</p>
</div>
</div>
<div class="slide-content">
<img src="resources/img/environmentalist.jpg">
<div class="news-description">
<a href="#">Enviornmental Protection</a>
<p class="news-detail">
Through his foundation, Leonardo has produced a number of media projects that communicate the urgency of the issues to the public, including two short web films Water Planet and Global Warning, which have been viewed by people around the world.
</p>
</div>
</div>
<div class="slide-content">
<img src="resources/img/art_work.jpg">
<div class="news-description">
<a href="#">Leonardo Art Works</a>
<p class="news-detail">
The acclaimed actor and art-aficionado Leonardo DiCaprio has developed an acute eye for up-and-coming artists and amassed an impressive collection over the years. He is also frequently seen behind the scenes at major auctions...
</p>
</div>
</div>
<div class="slide-content">
<img src="resources/img/economic_award.jpg">
<div class="news-description">
<a href="#">Economic Forum</a>
<p class="news-detail">
'We simply cannot allow the corporate greed of the coal, oil and gas industries to determine the future of humanity,' DiCaprio said to polite applause. 'Those entities with a financial interest in preserving this destructive system have denied...'
</p>
</div>
</div>
<div class="slide-content">
<img src="resources/img/foundation-logo.jpg">
<div class="news-description">
<a href="#">To be Announced</a>
</div>
</div>
</div>
<button type="button" class="slick-next">Next</button>
</section>
<footer>
<ul class="row">
<li>
Leonardo Dicaprio Foundation
</li>
</ul>
</footer>
<script type="text/javascript" src="vendors/js/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="vendors/js/slick.min.js"></script>
<script type="text/javascript" src="resources/js/script.js"></script>
</body>
</html>