Skip to content

Will Baxter #86

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MrStashy wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Will Baxter #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 70 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,77 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />

<title>Top Gun: An Unofficial Tribute</title>
</head>
<body>

<header>
<img src="https://1000logos.net/wp-content/uploads/2022/11/Top-Gun-Logo-1986.png" style="width: 700px;">
</header>
<section>
<h1 id="mainTitle"><marquee>
An Unofficial Tribute
</marquee>
</h1>
</section>
<nav>
<a href="#storysection"><h3 class="navbutton">Story</h3></a>
<a href="#castsection"><h3 class="navbutton">Cast</h3></a>
<a href="#reviewsection"><h3 class="navbutton">Reviews</h3></a>
<a href="#ticketsection"><h3 class="navbutton">Book Seats</h3></a>
</nav>
<section class="pagesection">
<a id="storysection"><h2 class="sectionheading">
You're Going to Top Gun
</h2></a>
<p>
Top Gun is an action-packed film directed by Tony Scott, starring Tom Cruise as Pete "Maverick" Mitchell, a talented fighter pilot attending the elite Top Gun Naval Fighter Weapons School. The movie follows Maverick's journey as he competes for the prestigious Top Gun Trophy, faces personal challenges, and navigates the high-stakes world of aerial combat.
</p>
<img src="https://nationalinterest.org/sites/default/files/styles/desktop__1260_/public/main_images/f-14killer.jpg?itok=9jT3kioH" style="width: 150px;">
</section>
<section class="pagesection">
<a id="castsection"><h2 class="sectionheading">
Meet Your Classmates
</h2></a>
<container id="cast">
<container class="castbox">
<p>Tom Cruise</p>
<img src="https://media-cldnry.s-nbcnews.com/image/upload/t_fit-760w,f_auto,q_auto:best/newscms/2016_17/1067926/cruise-today-inline-160428.jpg" style="height: 150px;">
</container>
<container class="castbox">
<p>Kelly McGillis</p>
<img src="https://www.usmagazine.com/wp-content/uploads/2022/05/Everything-Kelly-McGillis-Has-Said-About-Top-Gun-Maverick4.jpg?quality=47&strip=all" style="height: 150px;">
</container>
<container class="castbox">
<p>Anthony Edwards</p>
<img src="https://hips.hearstapps.com/digitalspyuk.cdnds.net/17/25/1498222632-anthony-edwards-in-top-gun.jpg" style="height: 150px;">
</container>
<container class="castbox">
<p>Meg Ryan</p>
<img src="https://i.dailymail.co.uk/1s/2022/05/23/12/58074965-10834855-image-m-32_1653306592624.jpg" style="height: 150px;">
</container>
</container>
</section>
<section class="pagesection">
<a id="reviewsection"><h2 class="sectionheading">
Read the Reports
</h2></a>
<container id="reviews">
<container class="reviewbox">
<em><p>"Tom Cruise soars as Maverick in the adrenaline-packed 'Top Gun.' The aerial sequences are breathtaking, blending high-octane action with a killer soundtrack. A cinematic triumph that leaves audiences on the edge."</p></em>
<h3>The Daily Mail</h3>
</container>
<container class="reviewbox">
<em><p>"In 'Top Gun,' Tom Cruise's Maverick is a charismatic force, steering the film with charm and intensity. The dogfight sequences are a visual feast, capturing the essence of aerial combat. 'Top Gun' is an immersive journey into the danger zone, leaving audiences craving more high-flying heroics."</p></em>
<h3>Mark Kermode</h3>
</container>
</container>
</section>
<section class="pagesection">
<a id="ticketsection"><h2 class="sectionheading">
Book Your Seat
</h2></a>
<a href="http://www.odeon.co.uk"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Odeon_logo.svg/2560px-Odeon_logo.svg.png" style="height: 50px; padding-top:30px"></a>

</section>
</body>
</html>
98 changes: 98 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@

body {
background-image: url("https://smartcdn.gprod.postmedia.digital/torontosun/wp-content/uploads/2022/05/Kelly-McGillis-e1652298563726.jpg?quality=90&strip=all&w=288&h=216&sig=MM35L1qgVGxwMZw848OKcA");
margin: 0px;
}

header {
background-image: linear-gradient(rgb(255, 255, 255), rgba(255, 255, 255, 0));
text-align: center;
}

#mainTitle {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
text-align: center;
font-size: 75px;
margin-top: -80px;
margin-bottom: 0px;
color: black;
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255));
}

nav {
justify-content: center;
display: flex;
background-image: linear-gradient(rgb(255, 255, 255), rgba(255, 255, 255, 0.4));
}

.navbutton {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
border-width: 2;
border-style: solid;
width: 140px;
text-align: center;

}


.pagesection {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
background-color: rgba(255, 255, 255, 0.4);
height: 350px;
text-align: center;
}

.sectionheading {
margin: 0px;
padding-top: 50px;
font-size: 40px;
}

#cast {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr
}

.castbox {
border-style:solid;
margin: 10px;
padding-bottom: 25px;
background-color: rgba(255, 255, 255, 0.4);
border-radius: 10px;
}

p {
padding-left: 20px;
padding-right: 20px;
}

#reviews {
display: grid;
grid-template-rows: 1fr 1fr;
}

.reviewbox {
border-style: solid;
margin: 20px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.4);
font-size: small;
}

h2 {
text-decoration: underline solid white;
}

nav a {
text-decoration: none;
color:black;
padding: 0px;
margin: 30px;


}

h3 {
padding: 0;
margin: 0;
}