louiscklaw/004_comission
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update,

Browse Source
This commit is contained in:
louiscklaw
2025-01-31 19:15:17 +08:00
parent 09adae8c8e
commit 6c60a73f30
1546 changed files with 286918 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
_resources/it114105/ite3006/Assignment/README.md.original Normal file
View File

@@ -0,0 +1,2 @@
# ITE3006-Assignment
Information Technology Essentials - Web

81
_resources/it114105/ite3006/Assignment/aboutus.html Normal file
View File

@@ -0,0 +1,81 @@
<html>
<head>
<title>About US</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="head-container">
<div class="site-banding"><a href="index.html">MOVIE CLUB</a></div>
<div class="menu">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="aboutus.html">About US</a></li>
<li><a href="equipment.html">Lease</a></li>
<li><a href="blog.html">New</a></li>
<li><a href="join.html" target="_blank">JoinUs</a></li>
</ul>
</div>
<span onclick="openNav()">&#9776;</span>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<div class="overlay-content">
<a href="index.html">Home</a>
<a href="aboutus.html">About US</a>
<a href="equipment.html">Lease</a>
<a href="blog.html">New</a>
<a href="join.html" target="_blank">JoinUs</a>
</div>
</div>
</div>
<div class="bannerteam">
<h1><center>About Us, Moive Club</center></h1>
</div>
<div class="joinUs">
<center>
<h1>Movie Club</h1>
<p>The DPFC screens films that have a connection with the Dartmouth Park area of London, England - primarily films made by locals but also films shot in the area. Since launching the DPFC we’ve been astonished at how many talented filmmakers live here...and more keep popping out of the woodwork! At our events we enjoy wine, soft drinks, popcorn and home made brownies while the film is playing, then after the film finishes we have a lively Q&A session, typically with the filmmaker themselves.
Our events are free - so anyone can come - but we do ask people to contribute what they think the evening is worth, and what they can personally afford, when they leave.
The club aims to build a community of likeminded people and have fun watching films together. We also set up the club to support the Highgate Library which had its budget cut recently.</p>
<p>It's for anyone who wants to develop their screen craft and help further their career. Whether you're a working actor searching for the final piece of the puzzle, a musical theatre artist ready to take the leap into Film and TV, or someone that has had limited training and is keen on becoming a professional in the industry, Film Club is for you!</p>
Email: help@movieclub.com
</center>
</div>
<center>
</center>
<footer>
<div class="footer-container">
<ul class="grid-item-one-half">
<li><a href="copyright.html">Conitions& Privacy policy</a></li>
<li><p><br><br><i style="font-size:36px" class="fa">&#xf230;</i>
<i style="font-size:36px" class="fa">&#xf0d4;</i>
<i style="font-size:36px" class="fa">&#xf16a;</i></p></li>
<p style="font-size:12px;">© 2019, FAMC| FILM AND microFILM Co. Ltd.</p>
</ul>
<div class="grid-item-one-half">
<a href="#email">Join our Catalog<br></a>
<form action="mailto:test@gmailcom" method="post">
<input type="email" id="email" name="mail" placeholder="Email Address">
<button type="submit" name="button">SUBSCRIBE</button>
</form>
</div>
</div>
</footer>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</body>
</html>

131
_resources/it114105/ite3006/Assignment/article1.html Normal file
View File

@@ -0,0 +1,131 @@
<html>
<head>
<title>91ST OSCARS SHORTLISTS IN NINE AWARD CATEGORIES ANNOUNCED</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="head-container">
<div class="site-banding"><a href="index.html">MOVIE CLUB</a></div>
<div class="menu">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="aboutus.html">About US</a></li>
<li><a href="equipment.html">Lease</a></li>
<li><a href="blog.html">New</a></li>
<li><a href="join.html" target="_blank">JoinUs</a></li>
</ul>
</div>
<span onclick="openNav()">&#9776;</span>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<div class="overlay-content">
<a href="index.html">Home</a>
<a href="aboutus.html">About US</a>
<a href="equipment.html">Lease</a>
<a href="blog.html">New</a>
<a href="join.html" target="_blank">JoinUs</a>
</div>
</div>
</div>
<div class="mesga">
<img src="image/wall-2.jpg" width="100%">
<div class="about_title">
91ST OSCARS SHORTLISTS IN NINE AWARD CATEGORIES ANNOUNCED
</div>
</div>
<div class="container">
<div class="Post_L">
<div class="article-mainline"></div> <h4 style="text-align:left;"> BY. JERRY KWOK</h4>
<img src="image/oscar0.jpg" alt="">
<br>
<p>The Academy of Motion Picture Arts and Sciences has announced shortlists in consideration for the 91st Oscars® in nine categories: Documentary Feature, Documentary Short Subject, Foreign Language Film, Makeup and Hairstyling, Music (Original Score), Music (Original Song), Animated Short Film, Live Action Short Film and Visual Effects. To download shortlists by category, visit Oscars.org/91st-oscars-shortlists. The 91st Oscars® will be held on Sunday, February 24, 2019, at the Dolby Theatre® at Hollywood & Highland Center® in Hollywood, and will be televised live on the ABC Television Network.</p>
DOCUMENTARY FEATURE
<pre>Fifteen films will advance in the Documentary Feature category for the 91st Academy Awards. One hundred sixty-six films were originally submitted in the category. Members of the Documentary Branch vote to determine the shortlist and the nominees.
The films, listed in alphabetical order by title, are:
CHARM CITY
COMMUNION
CRIME + PUNISHMENT
DARK MONEY
THE DISTANT BARKING OF DOGS
FREE SOLO
HALE COUNTY THIS MORNING, THIS EVENING
MINDING THE CAP
OF FATHERS AND SONS
ON HER SHOULDERS
RBG
SHIRKERS
THE SILENCE OF OTHERS
THREE IDENTICAL STRANGERS
WON'T YOU BE MY NEIGHBOR?</pre>
<pre><iframe width="880" height="495" src="https://www.youtube.com/embed/KY9LE6czjFw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></pre>
</div>
<div class="Post_R">
<div class="Post_R_BOX">
<div class="widget-area">
<h4 class="widget-title">02/2019</h4>
<ul>
<li>
<a href="article4.html">Shock Wave </a>
</li>
<li>
<a href="article3.html">OSCARS 2019: GREEN BOOK WINS BEST PICTURE</a>
</li>
<li>
<a href="article2.html">OSCAR IN MEMORIAM 2019</a>
</li>
<li>
<a href="article1.html">91ST OSCARS SHORTLISTS IN NINE AWARD CATEGORIES ANNOUNCED</a>
</li>
</ul></div>
</div>
</div>
</div>
<footer>
<div class="footer-container">
<ul class="grid-item-one-half">
<li><a href="copyright.html">Conitions& Privacy policy</a></li>
<li><p><br><br><i style="font-size:36px" class="fa">&#xf230;</i>
<i style="font-size:36px" class="fa">&#xf0d4;</i>
<i style="font-size:36px" class="fa">&#xf16a;</i></p></li>
<p style="font-size:12px;">© 2019, FAMC| FILM AND microFILM Co. Ltd.</p>
</ul>
<div class="grid-item-one-half">
<a href="#email">Join our Catalog<br></a>
<form action="mailto:test@gmailcom" method="post">
<input type="email" id="email" name="mail" placeholder="Email Address">
<button type="submit" name="button">SUBSCRIBE</button>
</form>
</div>
</div>
</footer>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</body>
</html>

123
_resources/it114105/ite3006/Assignment/article2.html Normal file
View File

@@ -0,0 +1,123 @@
<html>
<head>
<title>OSCAR IN MEMORIAM 2019</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="head-container">
<div class="site-banding"><a href="index.html">MOVIE CLUB</a></div>
<div class="menu">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="aboutus.html">About US</a></li>
<li><a href="equipment.html">Lease</a></li>
<li><a href="blog.html">New</a></li>
<li><a href="join.html" target="_blank">JoinUs</a></li>
</ul>
</div>
<span onclick="openNav()">&#9776;</span>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<div class="overlay-content">
<a href="index.html">Home</a>
<a href="aboutus.html">About US</a>
<a href="equipment.html">Lease</a>
<a href="blog.html">New</a>
<a href="join.html" target="_blank">JoinUs</a>
</div>
</div>
</div>
<div class="mesga">
<img src="image/oscar1.jpg" width="100%">
<div class="about_title">
OSCAR IN MEMORIAM 2019
</div>
</div>
<div class="container">
<div class="Post_L">
<div class="article-mainline"></div> <h4 style="text-align:left;"> BY. AMY BARTON</h4>
<img src="image/awardb.jpg" alt="">
<br>
<p>Once again, The Oscars took time to honor the many talents we lost during the previous year, the lives they touched and the art they made or made possible. You can see the full Oscars 2019 In Memoriam gallery below, and find even more galleries in the Oscars Red Carpet section.</p>
<img src="image/oscar2.jpg" width="50%">
<pre>Former SNL stars Tina Fey, Maya Rudolph and Amy Poehler were the first presenters at the 91st Academy Awards. The trio poked fun at the Oscars before introducing the Actress in a Supporting Role category. “Welcome to the one millionth Academy Awards!” said Fey.
“So just a quick update, in case you’re confused: There is no host tonight,” Rudolph said. “There won’t be a popular movie category. And Mexico is not paying for the wall.”
Added Poehler: “And we won’t be doing awards during the commercials, but we will be presenting commercials during the awards. So if all the winners could please say, ‘Hellman’s Mayonnaise: We’re on the side of food,’ instead of speeches, that would be great.”
</pre>
<img src="image/oscar3.jpg" width="50%">
<pre>Mahershala Ali is the 2019 Oscar winner for ACTOR IN A SUPPORTING ROLE! Congratulations to Mahershala Ali on his 2nd Oscar nomination and win. He previously took home the award for Actor in a Supporting Role for MOONLIGHT. Other nominees for ACTOR IN A SUPPORTING ROLE included Adam Driver in BLACKkKLANSMAN, Sam Elliott in A STAR IS BORN, Richard E. Grant in CAN YOU EVER FORGIVE ME?, and Sam Rockwell in VICE.
</pre>
<img src="image/oscar4.jpg" width="50%">
<pre>As promised, Queen + Adam Lambert ROCKED the opening number of the 91st Oscars! From the moment the first chords of "We Will Rock You" rang through the Dolby Theatre in Hollywood, excitement levels rocketed as everyone leapt to their feet.
Queen's formation in 1970, and subsequent rise to fame is documented in Best Picture nominee BOHEMIAN RHAPSODY. Grammy-nominated singer and "American Idol" alum Adam Lambert has performed with Queen (original band members Brian May and Roger Taylor) since 2011, including two hugely successful world tours.
Queen + Adam Lambert closed out the opening with a rousing performance of the anthem "We Are the Champions," which had the entire audience on their feet, waving their hands, and cheering.
</pre>
<img src="image/oscar5.jpg" width="50%">
<pre>BLACK PANTHER is the 2019 Oscar winner for PRODUCTION DESIGN! Congratulations to Hannah Beachler (Production Design) and Jay Hart (Set Decoration) on their first Oscar wins. This is the first Oscar nomination for Hannah Beachler, and the third for Jay Hart, who was previously nominated for his work on L.A. CONFIDENTIAL and PLEASANTVILLE. Other nominees for PRODUCTION DESIGN included THE FAVOURITE, FIRST MAN, MARY POPPINS RETURNS, and ROMA.
</pre>
<pre><div class=video-container><iframe width="880" height="495" src="https://www.youtube.com/embed/pDKDvDHv73I" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></pre>
</div>
<div class="Post_R">
<div class="Post_R_BOX">
<div class="widget-area">
<h4 class="widget-title">02/2019</h4>
<ul>
<li>
<a href="article4.html">Shock Wave </a>
</li>
<li>
<a href="article3.html">OSCARS 2019: GREEN BOOK WINS BEST PICTURE</a>
</li>
<li>
<a href="article2.html">OSCAR IN MEMORIAM 2019</a>
</li>
<li>
<a href="article1.html">91ST OSCARS SHORTLISTS IN NINE AWARD CATEGORIES ANNOUNCED</a>
</li>
</ul></div>
</div>
</div>
</div>
<footer>
<div class="footer-container">
<ul class="grid-item-one-half">
<li><a href="copyright.html">Conitions& Privacy policy</a></li>
<li><p><br><br><i style="font-size:36px" class="fa">&#xf230;</i>
<i style="font-size:36px" class="fa">&#xf0d4;</i>
<i style="font-size:36px" class="fa">&#xf16a;</i></p></li>
<p style="font-size:12px;">© 2019, FAMC| FILM AND microFILM Co. Ltd.</p>
</ul>
<div class="grid-item-one-half">
<a href="#email">Join our Catalog<br></a>
<form action="mailto:test@gmailcom" method="post">
<input type="email" id="email" name="mail" placeholder="Email Address">
<button type="submit" name="button">SUBSCRIBE</button>
</form>
</div>
</div>
</footer>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</body>
</html>

111
_resources/it114105/ite3006/Assignment/article3.html Normal file
View File

@@ -0,0 +1,111 @@
<html>
<head>
<title>Oscars 2019: GREEN BOOK wins Best Picture</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="head-container">
<div class="site-banding"><a href="index.html">MOVIE CLUB</a></div>
<div class="menu">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="aboutus.html">About US</a></li>
<li><a href="equipment.html">Lease</a></li>
<li><a href="blog.html">New</a></li>
<li><a href="join.html" target="_blank">JoinUs</a></li>
</ul>
</div>
<span onclick="openNav()">&#9776;</span>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<div class="overlay-content">
<a href="index.html">Home</a>
<a href="aboutus.html">About US</a>
<a href="equipment.html">Lease</a>
<a href="blog.html">New</a>
<a href="join.html" target="_blank">JoinUs</a>
</div>
</div>
</div>
<div class="mesga">
<img src="image/article4.jpg" width="100%">
<div class="about_title">
Oscars 2019: GREEN BOOK wins Best Picture
</div>
</div>
<div class="container">
<div class="Post_L">
<div class="article-mainline"></div> <h4 style="text-align:left;"> BY. JAMIE WYLIE</h4>
<img src="image/oscar.png">
<br>
<p> GREEN BOOK is the 2019 Oscar winner for BEST PICTURE! Congratulations to Jim Burke, Charles B. Wessler, Brian Currie, Peter Farrelly, and Nick Vallelonga on their first Oscar win. This is the 2nd Oscar nomination for Jim Burke, who was previously nominated for THE DESCENDANTS. Other nominees for BEST PICTURE included BLACK PANTHER, BLACKkKLANSMAN, BOHEMIAN RHAPSODY, THE FAVOURITE, ROMA, A STAR IS BORN, and VICE.</p>
<img src="image/oscar12.jpg" width="50%">
<pre>SKIN is the 2019 Oscar winner for SHORT FILM (LIVE ACTION)! Congratulations to Guy Nattiv and Jaime Ray Newman on their first Oscar win. Other nominees for SHORT FILM (LIVE ACTION) included DETAINMENT, FAUVE, MARGUERITE, and MOTHER. Watch Guy Nattiv and Jaime Ray Newman's Oscar acceptance speech below.</pre>
<img src="image/oscar13.jpg" width="50%">
<pre>BAO is the 2019 Oscar winner for SHORT FILM (ANIMATED). Congratulations to Domee Shi and Becky Neiman-Cobb on their first Oscar win. Other nominees for SHORT FILM (ANIMATED) included ANIMAL BEHAVIOUR, LATE AFTERNOON, ONE SMALL STEP, and WEEKENDS. Watch Domee Shi and Becky Neiman-Cobb's Oscar acceptance speech below.
BAO is about a lonely Chinese mother suffering from empty nest syndrome who is thrilled to become a parent again when one of her homemade dumplings comes to life. As Dumpling grows, however, the inevitable conflicts between parent and child arise and Mom must acknowledge that no one stays little forever.</pre>
<img src="image/oscar14.jpg" width="50%">
<pre>Olivia Colman is the 2019 Oscar winner for ACTRESS IN A LEADING ROLE! Congratulations to Olivia Colman on her first nomination and Oscar win. Other nominees for ACTRESS IN A LEADING ROLE included Yalitza Aparicio in ROMA, Glenn Close in THE WIFE, Lady Gaga in A STAR IS BORN, and Melissa McCarthy in CAN YOU EVER FORGIVE ME?
“It’s genuinely quite stressful. This is hilarious. I got an Oscar,” Colman exclaimed.
In THE FAVOURITE, Colman portrays Queen Anne, the temperamental ruler of Great Britain whose devious courtiers joust for her favor and political power during the early 1700s.</pre>
<pre><div class=video-container><iframe width="880" height="495" src="https://www.youtube.com/embed/XnCBmMcO7UE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></pre>
</div>
<div class="Post_R">
<div class="Post_R_BOX">
<div class="widget-area">
<h4 class="widget-title">02/2019</h4>
<ul>
<li>
<a href="article4.html">Shock Wave </a>
</li>
<li>
<a href="article3.html">OSCARS 2019: GREEN BOOK WINS BEST PICTURE</a>
</li>
<li>
<a href="article2.html">OSCAR IN MEMORIAM 2019</a>
</li>
<li>
<a href="article1.html">91ST OSCARS SHORTLISTS IN NINE AWARD CATEGORIES ANNOUNCED</a>
</li>
</ul></div>
</div>
</div>
</div>
<footer>
<div class="footer-container">
<ul class="grid-item-one-half">
<li><a href="copyright.html">Conitions& Privacy policy</a></li>
<li><p><br><br><i style="font-size:36px" class="fa">&#xf230;</i>
<i style="font-size:36px" class="fa">&#xf0d4;</i>
<i style="font-size:36px" class="fa">&#xf16a;</i></p></li>
<p style="font-size:12px;">© 2019, FAMC| FILM AND microFILM Co. Ltd.</p>
</ul>
<div class="grid-item-one-half">
<a href="#email">Join our Catalog<br></a>
<form action="mailto:test@gmailcom" method="post">
<input type="email" id="email" name="mail" placeholder="Email Address">
<button type="submit" name="button">SUBSCRIBE</button>
</form>
</div>
</div>
</footer>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</body>
</html>

107
_resources/it114105/ite3006/Assignment/article4.html Normal file
View File

@@ -0,0 +1,107 @@
<html>
<head>
<title>Shock Wave 2017</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="head-container">
<div class="site-banding"><a href="index.html">MOVIE CLUB</a></div>
<div class="menu">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="aboutus.html">About US</a></li>
<li><a href="equipment.html">Lease</a></li>
<li><a href="blog.html">New</a></li>
<li><a href="join.html" target="_blank">JoinUs</a></li>
</ul>
</div>
<span onclick="openNav()">&#9776;</span>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<div class="overlay-content">
<a href="index.html">Home</a>
<a href="aboutus.html">About US</a>
<a href="equipment.html">Lease</a>
<a href="blog.html">New</a>
<a href="join.html" target="_blank">JoinUs</a>
</div>
</div>
</div>
<div class="mesga">
<img src="image/article4.jpg" width="100%">
<div class="about_title">
Shock Wave 2017</div>
</div>
</div>
<div class="container">
<div class="Post_L">
<div class="article-mainline"></div> <h4 style="text-align:left;"> BY. JERRY KWOK</h4>
<img src="image/art4.jpg" alt="">
<br>
<p>" Bomb disposal experts " ( Shock Wave ) is Herman Yau directed by Andy investments producer and starred in a Hong Kong and mainland China co-production of the gangster action movie from Universal Entertainment , Bona Film and other companies co-produced [1] , starring Other There are also Jiang Wu , Song Jia , Jiang Yiwen and Wu Zhuoyu . Telling about the bomb blasting expert Zhang Zaishan ( Andy Lau ), who was once an undercover apprentice who studied the blasting criminals in the criminal gang of Hong Jipeng ( Jiang Wu ornaments) who was nicknamed "hot" ; after a year and a half, Hong Jipeng reported The betrayal of the betrayal was made in the mountains, and an explosion was made in the Hong Kong Hung Hom Cross Harbour Tunnel . On April 18, 2016, Hong Kong, Taiwan, and China were released on April 20, April 21, and April 28, 2017 respectively. The film won seven nominations for the 37th Hong Kong Film Awards Best Film, Best Director, Best Actor, Jiang YanwenWin the best supporting actor award.
In March 2018, Haoyu Entertainment Group announced that it will launch a sequel to the return of Andy Lau and Qiu Litao, " Bombing Expert 2, and the sequel will start shooting in March 2019.</p>
<h2>Company:</h2>
<pre>Co-Presented by：Universe Entertainment Ltd, Infinitus Entertainment Ltd, Bona Film Group Co Ltd,Xiaomi Pictures Co Ltd, Tencent Penguin Pictures (Shanghai) Co Ltd,Sublime Media Co Ltd, Yinming Culture Communication Co Ltd,Shanghai Tao Piao Piao Movie & TV Culture Co Ltd</pre>
<h2>Produced </h2>
<pre>by：Alvin Lam, Andy Lau, Chan Pui Wah,Esther Koo, Alice Chan, Jeffrey Chan, Simon Li,Thomas Tang, Chang Bin, C.K. Wong, Xingbo Guan </pre>
<pre><div class=video-container><iframe width="887" height="499" src="https://www.youtube.com/embed/qIQlLZWmcGw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></pre>
</div>
<div class="Post_R">
<div class="Post_R_BOX">
<div class="widget-area">
<h4 class="widget-title">02/2019</h4>
<ul>
<li>
<a href="article4.html">Shock Wave </a>
</li>
<li>
<a href="article3.html">OSCARS 2019: GREEN BOOK WINS BEST PICTURE</a>
</li>
<li>
<a href="article2.html">OSCAR IN MEMORIAM 2019</a>
</li>
<li>
<a href="article1.html">91ST OSCARS SHORTLISTS IN NINE AWARD CATEGORIES ANNOUNCED</a>
</li>
</ul></div>
</div>
</div>
</div>
<footer>
<div class="footer-container">
<ul class="grid-item-one-half">
<li><a href="copyright.html">Conitions& Privacy policy</a></li>
<li><p><br><br><i style="font-size:36px" class="fa">&#xf230;</i>
<i style="font-size:36px" class="fa">&#xf0d4;</i>
<i style="font-size:36px" class="fa">&#xf16a;</i></p></li>
<p style="font-size:12px;">© 2019, FAMC| FILM AND microFILM Co. Ltd.</p>
</ul>
<div class="grid-item-one-half">
<a href="#email">Join our Catalog<br></a>
<form action="mailto:test@gmailcom" method="post">
<input type="email" id="email" name="mail" placeholder="Email Address">
<button type="submit" name="button">SUBSCRIBE</button>
</form>
</div>
</div>
</footer>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</body>
</html>

143
_resources/it114105/ite3006/Assignment/blog.html Normal file
View File

@@ -0,0 +1,143 @@
<html>
<head>
<title>News</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="head-container">
<div class="site-banding"><a href="index.html">MOVIE CLUB</a></div>
<div class="menu">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="aboutus.html">About US</a></li>
<li><a href="equipment.html">Lease</a></li>
<li><a href="blog.html">New</a></li>
<li><a href="join.html" target="_blank">JoinUs</a></li>
</ul>
</div>
<span onclick="openNav()">&#9776;</span>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<div class="overlay-content">
<a href="index.html">Home</a>
<a href="aboutus.html">About US</a>
<a href="equipment.html">Lease</a>
<a href="blog.html">New</a>
<a href="join.html" target="_blank">JoinUs</a>
</div>
</div>
</div>
<div class="mesga">
<img src="image/blogWall.jpg" width="100%">
<div class="about_title">Post</div>
</div>
<div class="container">
<div class="Post_L">
<article id="article1" class="article-container">
<div class="article-date"><b>28<br>FEB<br>2019</b></div>
<a href="article4.html"><div class="article-img"><img src="image/art5.jpg" alt=""></div>
<div class="article-main">
<h1>Shock Wave 2017</h1>
<div class="article-mainline"></div>
<p>
It is Herman Yau directed by Andy investments producer and starred in a Hong Kong and mainland China...
</p>
<button type="button" name="button">Read More</button></a>
</div>
</article>
<article id="article2" class="article-container">
<div class="article-date"><b>26<br>FEB<br>2019</b></div>
<a href="article3.html"><div class="article-img"><img src="image/winner-wall.jpg" alt=""></div>
<div class="article-main">
<h1>OSCAR WINNERS 2019: SEE THE FULL LIST</h1>
<div class="article-mainline"></div>
<p>
The 2019 Oscar winners are here! It was a night of memorable moments and fabulous firsts...
</p>
<button type="button" name="button">Read More</button></a>
</div>
</article>
<article id="article3" class="article-container">
<div class="article-date"><b>25<br>FEB<br>2019</b></div>
<a href="article1.html"><div class="article-img"><img src="image/oscar.png" alt=""></div>
<div class="article-main">
<h1>'Oscars All Access' to Stream Exclusively on Twitter</h1>
<div class="article-mainline"></div>
<p>
Red carpet highlights and insider access to the biggest night in Hollywood will be streamed live exclusively on Twitter.
</p>
<button type="button" name="button">Read More</button></a>
</div>
</article>
<article id="article4" class="article-container">
<div class="article-date"><b>25<br>FEB<br>2019</b></div>
<a href="article2.html"><div class="article-img"><img src="image/oscar1-full.jpg" alt=""></div>
<div class="article-main">
<h1>OSCAR IN MEMORIAM 2019</h1>
<div class="article-mainline"></div>
<p>
Once again, The Oscars took time to honor the many talents we lost during the previous year, the lives they touched and the art they made or made possible.
</p>
<button type="button" name="button">Read More</button></a>
</div>
</article>
</div>
<div class="Post_R">
<div class="Post_R_BOX">
<div class="widget-area">
<h4 class="widget-title">02/2019</h4>
<ul>
<li>
<a href="article4.html">Shock Wave </a>
</li>
<li>
<a href="article3.html">OSCARS 2019: GREEN BOOK WINS BEST PICTURE</a>
</li>
<li>
<a href="article2.html">OSCAR IN MEMORIAM 2019</a>
</li>
<li>
<a href="article1.html">91ST OSCARS SHORTLISTS IN NINE AWARD CATEGORIES ANNOUNCED</a>
</li>
</ul></div>
</div>
</div>
</div>
<footer>
<div class="footer-container">
<ul class="grid-item-one-half">
<li><a href="copyright.html">Conitions& Privacy policy</a></li>
<li><p><br><br><i style="font-size:36px" class="fa">&#xf230;</i>
<i style="font-size:36px" class="fa">&#xf0d4;</i>
<i style="font-size:36px" class="fa">&#xf16a;</i></p></li>
<p style="font-size:12px;">© 2019, FAMC| FILM AND microFILM Co. Ltd.</p>
</ul>
<div class="grid-item-one-half">
<a href="#email">Join our Catalog<br></a>
<form action="mailto:test@gmailcom" method="post">
<input type="email" id="email" name="mail" placeholder="Email Address">
<button type="submit" name="button">SUBSCRIBE</button>
</form>
</div>
</div>
</footer>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</body>
</html>

79
_resources/it114105/ite3006/Assignment/copyright.html Normal file
View File

@@ -0,0 +1,79 @@
<html>
<head>
<title>Copyright</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="head-container">
<div class="site-banding">MOVIE CLUB</div>
<div class="menu">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="aboutus.html">About US</a></li>
<li><a href="equipment.html">Lease</a></li>
<li><a href="blog.html">New</a></li>
<li><a href="join.html" target="_blank">JoinUs</a></li>
</ul>
</div>
<span onclick="openNav()">&#9776;</span>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<div class="overlay-content">
<a href="index.html">Home</a>
<a href="aboutus.html">About US</a>
<a href="equipment.html">Lease</a>
<a href="blog.html">New</a>
<a href="join.html" target="_blank">JoinUs</a>
</div>
</div>
</div>
<div class="mesga">
<img src="image/banner-download.jpg" width="100%">
<div class="about_title">Copyright& Privacy policy</div>
</div>
<div class="banner-shadow">
<pre>
<h2>Terms and copyright</h2>1.Movie Studio (hereinafter referred to as the studio), in order to effectively protect the rights and interests of the studio, etc., specifically formulated this specification.<br>2. All content published in this studio, including texts, pictures and videos, is owned by the studio and protected by the Basic Law and international copyright laws enacted by the Hong Kong Special Administrative Region.<br>3. All works on the website of the studio, such as photos and videos, whose copyrights, patents, and other intellectual property rights are owned by the legal rights holders of the studio; in addition to obtaining the legal authorization of the studio in advance, No one may reproduce, edit, distribute, modify, lease, sell or otherwise use the product in any form. Offenders shall bear the relevant legal responsibilities, and the studio reserves the right to claim.<br>4. This studio reserves the right to make the final decision.<br>
<h2>Disclaimer</h2>1. The studio does not ensure that the network service will meet the requirements of the user, nor does it ensure that the network service will not be interrupted, nor does it guarantee the timeliness, security and accuracy of the network service.<br>2. This studio is not responsible for the accuracy and completeness of the external web links set up to provide convenience to users. At the same time, for the links to these external web pages, any web content not distributed by the studio, the studio does not assume any responsibility.
<h2>Confidentiality of personal data collected</h2>1. The studio strictly keeps the personal data of the members confidential under all circumstances. The Studio will not transfer, sell, lend, lease or lease other personal data or other companies outside of Hong Kong unless the consent of the person is obtained.<br>
<h2>Studio uses cookies statement</h2>A cookie is a small amount of data created in a computer when a person visits a website on the computer. It often includes an anonymous unique identifier. A cookie can be used to identify a computer. It, however, is not used to collect any personal information. In other words, it does not have the function of identifying an individual user of the website.
Cookies are used by Movie Studio Co. Ltd to collect statistics about the number of visits of users to depato.com and the users’ preference of websites and online services offered on the website.
You may choose to accept or reject cookies. If you reject the cookies, you will not be able to use some of the functions of the website, such as saving your preferences in using the website and accessing some online services on the website.
Page tagging
Javascript and pixel tags are used to collect statistics on customer usage patterns of the website and Movie Studio Co. Ltd online services offered on the website; and for tracking the performance of our online advertisements. A pixel tag is a transparent image placed on certain webpages to collect data on user activities. The collected data are aggregated and analysed for measuring the effectiveness, improving the usability of the website and the services / online advertisements provided on the website. No personal or identifiable information about a visitor would be collected.
You may disable JavaScript on your computer. Disabling JavaScript should not affect your access to the website, but you will not be able to use some of the website functions, such as changing text size and accessing the website online services offered through the website.
</pre>
</div>
<footer>
<div class="footer-container">
<ul class="grid-item-one-half">
<li><a href="copyright.html">Conitions& Privacy policy</a></li>
<li><p><br><br><i style="font-size:36px" class="fa">&#xf230;</i>
<i style="font-size:36px" class="fa">&#xf0d4;</i>
<i style="font-size:36px" class="fa">&#xf16a;</i></p></li>
<p style="font-size:12px;">© 2019, FAMC| FILM AND microFILM Co. Ltd.</p>
</ul>
<div class="grid-item-one-half">
<a href="#email">Join our Catalog<br></a>
<form action="mailto:test@gmailcom" method="post">
<input type="email" id="email" name="mail" placeholder="Email Address">
<button type="submit" name="button">SUBSCRIBE</button>
</form>
</div>
</div>
</footer>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</body>
</html>

572
_resources/it114105/ite3006/Assignment/css/style.css Normal file
View File

@@ -0,0 +1,572 @@
body{
margin: 0;
padding: 0;
overflow-y: scroll;
overflow-x: hidden;
}
img {
height: auto;
max-width: 100%;
vertical-align: middle;
margin:0;
}
article button{
background-color: black;
color: white;
height: 50px;
width: 180px;
border: 0;
cursor: pointer;
transition: 0.5s;
opacity: 0.8;
}
article button:hover{
opacity: 1;
}
a{
text-decoration: none;
color: black;
}
a:hover{
text-decoration: none;
color:black;
}
.video-container{
position:relative;
padding-bottom:56.25%;
padding-top:30px;height:0;overflow:hidden;
}
.video-container iframe,
.video-container object,
.video-container embed{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.head-container{
width: 100%;
height:auto;
overflow: hidden;
}
.site-banding{
float: left;
width: 30%;
font-size: 42px;
margin: 25px 0 0 100px;
}
.menu{
float: right;
padding-right: 180px;
}
.menu ul{
list-style-type: none;
text-transform: uppercase;
overflow: hidden;
line-height: 40px;
font-size: 20px;
width: 100%;
}
.menu li{
float: left;
padding: 10px 20px 0 0;
}
.menu a{
text-decoration: none;
color: black;
}
.head-container span{
font-size:30px;
cursor:pointer;
float:right;
padding:5px 15px 0px 10px ;
display: none;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
/*mesga*/
.mesga{
position: relative;
}
.mesga-box{
position: absolute;
top: 0;
left: 70%;
height: 100%;
width: 30%;
background-color: rgb(0,0,0,0.5);
color: white;
}
.mesga-box center{
padding-top: 40%;
}
.mesga-box-sub{
bottom:0;
padding:0 30px 20px 0;
color: white;
font-size: 16px;
}
.mesga-box-sub::after{
content: " ";
left: 0;
width: 100px;
height: 5px;
background-color: #FFF;
}
.mesga-box-sub::after::after{
content: " ";
left: 0;
width: 100px;
height: 3px;
background-color: #FFF;
}
/* main*/
.main{
margin: 10% 20% 10% 20%;
}
.joinUs{
padding: 5%;
margin: 5%;
border-color: black;
border-style: solid;
}
.container{
width: 100%;
overflow : hidden;
height: auto;
overflow : hidden;
margin: 5% 5% 5% 5%;
}
.Post_detail{
width: 100%;
}
.Post_L{
width:55%;
float: left;
margin-left: 30px;
z-index: 9999;
text-align: justify;
text-justify: inter-ideograph;
}
.Post_L img{
width: 100%;
}
.Post_R{
width:30%;
float: left;
padding-left: 50px;
}
.Post_R_BOX{
padding-top: 60px;
padding-left: 50px;
}
.widget-title{
font-weight: 400;
position: relative;
margin-bottom: 15px;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 18px;
margin-top:30px;
}
.widget-area .widget-title:before{
content: "";
position: absolute;
left: 0;
top: 100%;
margin-top: 8px;
height: 1px;
width: 40px;
background: #5bc2ce;
}
.widget-area .widget-title:after{
content: "";
position: absolute;
left: 0;
top: 100%;
margin-top: 12px;
height: 1px;
width: 20px;
background: #5bc2ce;
}
.widget-area ul{
list-style: none;
padding: 0;
margin: 0;
}
.widget-area ul ul{
border-top: 1px solid #F6F6F6;
margin-top: 5px;
}
.widget-area ul ul li{
padding-left: 10px;
}
.widget-area ul ul li:last-child{
border-bottom: 0;
padding-bottom: 0;
}
.widget-area li{
padding: 6px 0;
border-bottom: 1px solid #F6F6F6;
}
.widget-area a{
text-decoration: none;
color: #404040;
}
.widget-area a:hover{
color: #5bc2ce;
}
.widget-area .widget{
margin-bottom: 40px;
}
.article-container{
padding-top: 50px;
width: 100%;
height:auto;
overflow: hidden;
}
.article-date{
float: left;
padding-left: 5%;
text-align: center;
}
.article-img{
float: left;
padding-left: 25px;
padding-right: 30px;
}
.article-img img{
height: auto;
width: auto;;
max-width: 100%;
max-height: 100%;
}
.article-main{
float: left;
padding-top: 10px;
width: 40%;
height: auto;
word-wrap: break-all;
}
.article-mainline{
content: " ";
left: 0;
width: 100px;
height: 2px;
background-color: #000;
}
.about_title{
font-size: 2rem;
letter-spacing: 1px;
font-weight: 600;
text-transform: uppercase;
color: #FFF;
position: relative;
z-index: 99;
position: absolute;
margin-left: 100px;
bottom: 40px;
}
.about_title:after{
content: "";
position: absolute;
left: 0;
top: 80%;
margin-top: 6px;
width: 100px;
height: 2px;
background: #FFF;
}
.about_title:before{
content: "";
position: absolute;
left: 0;
top: 80%;
margin-top: 12px;
width: 30px;
height: 2px;
background: #FFF;
}
pre {
background: #eee;
font-family: "Courier 10 Pitch", Courier, monospace;
font-size: 15px;
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
white-space: pre-wrap;
padding: 1.6em;
}
pre h2{
font-weight: 400;
line-height: 1.2;
font-size: 1.5em;
margin: 0;
}
.banner-shadow{
padding:4%;
left: 0;
right:0;
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
width: 100%;
padding-left: 16%;
}
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
.main-equi img{
width: 80%;
}
.main-equi{
margin: 5% 5% 5% 5%;
padding-left: 100px;
}
.bannerteam{
width: 100%;
height: 70%;
animation: bannerteam 10s infinite;
animation-direction:alternate;
margin-top: -30px;
}
.bannerteam h1{
-webkit-animation: bannerteamfont 10s infinite;
animation-direction:alternate;
line-height: 530px;
font-size: 48px;
}
@keyframes bannerteam{
0%{background:white;}
100%{background:black;}
}
@-webkit-keyframes bannerteamfont {
from {color: black;}
to {color: white;}
}
/*Footer*/
footer{
width: 100%;
height: 250px;
position: relative;
bottom: 0;
}
.footer-container{
margin:0 0 0 15%;
overflow: hidden;
}
.grid-item-one-half input{
border: 2px solid black;
height: 40px;
width: 300px;
}
input[type=email]{
padding: 12px 20px 12px 12px;
}
.grid-item-one-half button{
padding-left: -20px;
}
.grid-item-one-half {
float: left;
text-align: left;
width: 40%;
}
.grid-item-one-half li{
list-style-type: none;
}
.grid-item-one-half a{
color: rgba(0, 0, 0, 0.6);
}
.grid-item-one-half a:hover{
color: black;
}
.grid-item-one-half button{
background-color: black;
color: white;
height: 40px;
width: 90px;
border: 0;
cursor: pointer;
transition: 0.5s;
opacity: 0.8;
}
.grid-item-one-half button:hover{
opacity: 0.4;
}
@media screen and (max-width:1556px) {
.article-img {width: 38%; }
.main{
margin: 5% 10% 5% 10%;
}
}
@media screen and (max-width:1284px) {
.site-banding{margin: 25px 0 0 50px;}
}
@media screen and (max-width:1060px){
.main{margin: 5% 1% 8% 5%;}
.footer-container{margin: 110px;}
.grid-item-one-half input{width: 200px}
.grid-item-one-half button{font-size: 12px}
}
@media screen and (max-width:1038px){
.Post_L{
width: 70%;
}
.Post_R{
width: 30%;
}
}
@media screen and (max-width:967px){
.site-banding{
margin: 25px 0 0 30px;
width: 40%;
font-size: 36px;
}
.menu {padding:0;}
.article-img img{
width: 120%;
padding-top: 30px;
}
.footer-container{ margin: 0 0 0 8%;}
.footer-container ul{overflow: hidden;
line-height: 40px;}
.grid-item-one-half br{display: none;}
}
@media screen and (max-width:820px){
.Post_R{
display: none;
}
.Post_L{
float: none;
width: 80%;
}
}
@media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
@media screen and (max-width:720px){
.main{padding-top: 30px; }
.article-img{ width: 70%;}
.article-img img{ padding: 0;}
.article-main{
width: 70%;
padding-left: 13%;
}
.article-date{font-size: 8px; padding: 0;}
.site-banding{
font-size: 24px;
}
.menu{
display: none;
}
.about_title{
display: none;
}
.head-container span{
display: inline;
}
#article3{display:none;}
}
@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
.mesga-box h1{
font-size: 16px;
}
}
@media screen and (max-width:406px){
.main{margin: 0;}
.article-main, .article-img, .article-date{float:none;}
.article-img{ width: 100%; padding: 0;}
.article-main{width: 100%; padding: 0;}
.article-main button{align-self: center;}
.articlw-date{text-align: left;}
}

132
_resources/it114105/ite3006/Assignment/equipment.html Normal file
View File

@@ -0,0 +1,132 @@
<html>
<head>
<title>Camera</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="head-container">
<div class="site-banding"><a href="index.html">MOVIE CLUB</a></div>
<div class="menu">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="aboutus.html">About US</a></li>
<li><a href="equipment.html">Lease</a></li>
<li><a href="blog.html">New</a></li>
<li><a href="join.html" target="_blank">JoinUs</a></li>
</ul>
</div>
<span onclick="openNav()">&#9776;</span>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<div class="overlay-content">
<a href="index.html">Home</a>
<a href="aboutus.html">About US</a>
<a href="equipment.html">Lease</a>
<a href="blog.html">New</a>
<a href="join.html" target="_blank">JoinUs</a>
</div>
</div>
</div>
<div class="mesga">
<img src="image/blogWall.jpg" width="100%">
<div class="about_title">
Camera
</div>
</div>
</div>
<div class="main-equi">
<center><h1>List of Equipment</h1></center>
<p></p>
</div>
<div class="row">
<div class="column">
<img src="image/camera/z.jpg" >
<h3>Blackmagic Pocket Cinema Camera 4K</h3>
<img src="image/camera/x.jpg" >
<h3>PXW-FS5M2</h3>
<img src="image/camera/c.jpg" >
<h3>AU-EVA1</h3>
<img src="image/camera/v.jpg" >
<h3>RED EPIC-W HELIUM 8K</h3>
<img src="image/camera/b.jpg" >
<h3>URSA MINI 4.6K EF</h3>
<img src="image/camera/n.jpg" >
<h3>PMW-F5</h3>
<img src="image/camera/m.jpg" >
<h3>AG-DVX200</h3>
<img src="image/camera/cn.jpg" >
<h3>TG1</h3>
</div>
<div class="column">
<img src="image/camera/zz.jpg" >
<h3>FDR-X3000R</h3>
<img src="image/camera/zx.jpg" >
<h3>URSA MINI PRO 4.6K</h3>
<img src="image/camera/zc.jpg" >
<h3>PXW-FS5</h3>
<img src="image/camera/zv.jpg" >
<h3>Blackmagic URSA PL</h3>
<img src="image/camera/zb.jpg" >
<h3>NEX-FS100</h3>
<img src="image/camera/zn.jpg" >
<h3>PXW-FS7</h3>
<img src="image/camera/cx.jpg" >
<h3>GoPro HERO7 BLACK</h3>
<img src="image/camera/cc.jpg" >
<h3>DSC-RX0</h3>
<img src="image/camera/vz.jpg" >
<h3>Canon 7D</h3>
</div>
<div class="column">
<img src="image/camera/zm.jpg" >
<h3>NEX-VG900</h3>
<img src="image/camera/xz.jpg" >
<h3>Blackmagic Design Production Camera 4K EF</h3>
<img src="image/camera/xx.jpg" >
<h3>PXW-Z90</h3>
<img src="image/camera/xc.jpg" >
<h3>AG-AC160</h3>
<img src="image/camera/xv.jpg" >
<h3>NEX-VG10</h3>
<img src="image/camera/xb.jpg" >
<h3>Gopro Hero 3+</h3>
<img src="image/camera/cv.jpg" >
<h3>Sony FDR-X1000VR</h3>
<img src="image/camera/cb.jpg" >
<h3>TS-4</h3>
</div>
</div>
</div>
<footer>
<div class="footer-container">
<ul class="grid-item-one-half">
<li><a href="copyright.html">Conitions& Privacy policy</a></li>
<li><p><br><br><i style="font-size:36px" class="fa">&#xf230;</i>
<i style="font-size:36px" class="fa">&#xf0d4;</i>
<i style="font-size:36px" class="fa">&#xf16a;</i></p></li>
<p style="font-size:12px;">© 2019, FAMC| FILM AND microFILM Co. Ltd.</p>
</ul>
<div class="grid-item-one-half">
<a href="#email">Join our Catalog<br></a>
<form action="mailto:test@gmailcom" method="post">
<input type="email" id="email" name="mail" placeholder="Email Address">
<button type="submit" name="button">SUBSCRIBE</button>
</form>
</div>
</div>
</footer>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</body>
</html>

BIN
_resources/it114105/ite3006/Assignment/image/art4.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/art5.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/article4.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/awarda.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/awardb.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/banner-download.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/banner.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/blogWall.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/HK.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 458 KiB

BIN
_resources/it114105/ite3006/Assignment/image/camera/b.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/c.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/cb.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/cc.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/champion.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/cn.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/cv.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/cx.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/cz.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/m.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/n.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/oscar.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/v.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/vz.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 216 KiB

BIN
_resources/it114105/ite3006/Assignment/image/camera/wall.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/x.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/xb.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/xc.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/xv.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/xx.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/xz.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/z.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/zb.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/zc.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/zm.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/zn.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/zv.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/zx.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/camera/zz.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/contactus.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/joinWall.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/ocsar13.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/oscar-full.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/oscar.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/oscar0.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/oscar1-full.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/oscar1.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/oscar11.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/oscar12.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/oscar13.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/oscar14.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/oscar2.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/oscar3.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/oscar4.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/oscar5.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/wall-2.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/wall.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/winner-wall.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
_resources/it114105/ite3006/Assignment/image/winner.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

120
_resources/it114105/ite3006/Assignment/index.html Normal file
View File

@@ -0,0 +1,120 @@
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="head-container">
<div class="site-banding"><a href="index.html">MOVIE CLUB</a></div>
<div class="menu">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="aboutus.html">About US</a></li>
<li><a href="equipment.html">Lease</a></li>
<li><a href="blog.html">New</a></li>
<li><a href="join.html" target="_blank">JoinUs</a></li>
</ul>
</div>
<span onclick="openNav()">&#9776;</span>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<div class="overlay-content">
<a href="index.html">Home</a>
<a href="aboutus.html">About US</a>
<a href="equipment.html">Lease</a>
<a href="blog.html">New</a>
<a href="join.html" target="_blank">JoinUs</a>
</div>
</div>
</div>
<div class="mesga">
<img src="image/wall.jpg" width="100%">
<div class="mesga-box">
<center>
<h1 clas="mesga-box-title">“PROFESSIONAL FILMMAKING TECHNOLOGIES.”</h1>
<div class="mesga-box-sub">movie club</div>
</center>
</div>
</div>
<div class="joinUs">
<center>
<h1>Movie Club</h1>
<p>For people who are tired of chitchats and shallow conversations. Join us if you are interested in deeper interaction in philosophy, love, arts, literature, science and society.</p>
<a href="join.html"><button type="button" name="button">Join Us</button></a>
</center>
</div>
<div class="main">
<article id="article1" class="article-container">
<div class="article-date"><b>28<br>FEB<br>2019</b></div>
<a href="article4.html"><div class="article-img"><img src="image/art5.jpg" alt=""></div>
<div class="article-main">
<h1>Hong Kong Film Awards</h1>
<div class="article-mainline"></div>
<p>
It is an important award in the Chinese film industry. One of the most outstanding awards in Chinese movies.
</p>
<button type="button" name="button">Read More</button></a>
</div>
</article>
<article id="article2" class="article-container">
<div class="article-date"><b>26<br>FEB<br>2019</b></div>
<a href="article3.html"><div class="article-img"><img src="image/winner-wall.jpg" alt=""></div>
<div class="article-main">
<h1>OSCAR WINNERS 2019: SEE THE FULL LIST</h1>
<div class="article-mainline"></div>
<p>
The 2019 Oscar winners are here! It was a night of memorable moments and fabulous firsts...
</p>
<button type="button" name="button">Read More</button></a>
</div>
</article>
<article id="article3" class="article-container">
<div class="article-date"><b>25<br>FEB<br>2019</b></div>
<a href="article1.html"><div class="article-img"><img src="image/oscar.png" alt=""></div>
<div class="article-main">
<h1>'Oscars All Access' to Stream Exclusively on Twitter</h1>
<div class="article-mainline"></div>
<p>
Red carpet highlights and insider access to the biggest night in Hollywood will be streamed live exclusively on Twitter.
</p>
<button type="button" name="button">Read More</button></a>
</div>
</article>
</div>
<footer>
<div class="footer-container">
<ul class="grid-item-one-half">
<li><a href="copyright.html">Conitions& Privacy policy</a></li>
<li><p><br><br><i style="font-size:36px" class="fa">&#xf230;</i>
<i style="font-size:36px" class="fa">&#xf0d4;</i>
<i style="font-size:36px" class="fa">&#xf16a;</i></p></li>
<p style="font-size:12px;">© 2019, FAMC| FILM AND microFILM Co. Ltd.</p>
</ul>
<div class="grid-item-one-half">
<a href="#email">Join our Catalog<br></a>
<form action="mailto:test@gmailcom" method="post">
<input type="email" id="email" name="mail" placeholder="Email Address">
<button type="submit" name="button">SUBSCRIBE</button>
</form>
</div>
</div>
</footer>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</body>
</html>

209
_resources/it114105/ite3006/Assignment/join.html Normal file
View File

@@ -0,0 +1,209 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Join US - Move Club</title>
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #3F3F3F;
margin: 0;
padding: 0;
color: #000;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 960px;
background-color: #FFF;
margin: 0 auto;
overflow: hidden;
}
.main{
padding: 50px;
}
.main form{
margin-left:0px;
}
.readmore{
color:black;
background:#66b3bd;
text-align:center;
float: inherit ;
font-weight: bold;
margin-left:80px;
margin-right:80px;
padding: 12px;
margin-bottom: 30px;
}
.readmore:hover{
background: #63CFDB;
}
.readmore a{
color: black;
}
input[type="submit"]{
border:0 none;
cursor:pointer;
}
footer {
background-color: #363636;
font-size: 10px;
margin-top: 100px;
padding: 0;
height: 100px;
z-index: 99999;
bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<img src="image/joinWall.png" width="100%" style="z-index:999;">
<div class="main">
<form action="mailto:hr@movieclub.com" method="post">
<table width="752" height="922">
<tr>
<td width="288" height="38"><strong>Name:*</strong></td>
<td width="162"><input name="firstName" type="text" size="15" pattern="^[A-Za-z]*$" required></td>
<td width="286"><input name="LastName" type="text" size="15" pattern="^[A-Za-z]*$" required></td>
</tr>
<tr>
<td height="46">&nbsp;</td>
<td>First Name </td>
<td>Last Name</td>
</tr>
<tr>
<td height="46">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="46"><strong>Gender:</strong></td>
<td><input type="radio" name="gender" value="Male">Male</td>
<td><input type="radio" name="gender" value="Female">Female</td>
</tr>
<tr>
<td height="51">&nbsp;</td>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td height="51"><strong>E-mail:*</strong></td>
<td colspan="2"><input name="email" type="email" placeholder="example@example.com" size="40" required></td>
</tr>
<tr>
<td height="35">&nbsp;</td>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td height="57"><strong>Phone Number:*</strong></td>
<td colspan="2"><input type="text" name="areaCode" pattern="^[0-9]*$" maxlength="5" size="10" required > - <input type="text" name="phoneNu" size="20" pattern="^[0-9]*$" required></td>
</tr>
<tr>
<td height="35">&nbsp;</td>
<td colspan="2" >Area Code Phone Number</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2" >&nbsp;</td>
</tr>
<tr>
<td height="52"><strong>Address:</strong></td>
<td colspan="2" ><input name="StAddr3" type="text" size="40"></td>
</tr>
<tr>
<td height="37">&nbsp;</td>
<td colspan="2" >StreetAddress</td>
</tr>
<tr>
<td height="34">&nbsp;</td>
<td colspan="2" ><input name="StAddr" type="text" size="40"></td>
</tr>
<tr>
<td height="38">&nbsp;</td>
<td colspan="2" >Street Address Line 2</td>
</tr>
<tr>
<td height="41">&nbsp;</td>
<td ><input name="StAddr2" type="text" size="20"></td>
<td ><input name="StAddr4" type="text" size="20"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td >City</td>
<td >State/Province</td>
</tr>
<tr>
<td height="38">&nbsp;</td>
<td colspan="2" >&nbsp;</td>
</tr>
<tr>
<td height="35"><strong>Birth Date:*</strong></td>
<td colspan="2" ><input type="date" required></td>
</tr>
<tr>
<td height="35">&nbsp;</td>
<td colspan="2" >&nbsp;</td>
</tr>
<tr>
<td height="35"><strong>Where did you hear about us?</strong></td>
<td colspan="2" > <input type="checkbox">Google</td>
</tr>
<tr>
<td height="35">&nbsp;</td>
<td colspan="2" > <input type="checkbox">New Article</td>
</tr>
<tr>
<td height="35">&nbsp;</td>
<td colspan="2" > <input type="checkbox">A Friend or colleauge</td>
</tr>
</table>
<button type="submit" name="button">Submit</button>
</form>
</div>
<footer>
</footer>
</div>
</body>
</html>