I am currently in the process of rebuilding the Porsche website using HTML, CSS, and JS. Specifically, I am looking to implement a "build your Porsche" link by enclosing it within an anchor tag. However, this seems to be causing excessive spacing on the page.
I have attempted to resolve this issue using the following CSS code:
overflow: hidden;
Unfortunately, this solution did not work as expected. Can anyone shed light on why this might be happening?
This is a snippet of my HTML code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<div id = "links">
<link href = "element.css" type ="text/css" rel = stylesheet>
<script src = "functions.js"></script>
</div>
<title> Porsche </title>
<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
<link href="https://fontmeme.com/porsche-font/" rel = stylesheet>
</head>
<body>
<video id = "fast_cars" muted loop width= "1350" height = "1000" autoplay>
<source src = "Porsche-main.mp4" type = "video/mp4">
<!-- Error Message -->
Your browser does not support this video
</video>
<div id = "video_screen">
<h1 id = "porsche">
Porsche
</h1>
<a id = "cool_stuff" href = "https://www.porsche.com/usa/eventsandracing/"><h2 id = "button_main"> Rediscover Driving </h2></a>
</div>
<div id = "under_video">
<div id = "images">
<img id = "718" src = "718_p.jpg" alt = "718 Porsche" />
<img id = "911" src = "911_p.jpg" alt = "911 Porsche" />
<img id = "cayene" src = "cayene_p.jpg" alt = "Porsche Cayan" />
<img id = "macan" src = "macan_p.jpg" alt = "Porsche Macan" />
<img id = "panarama" src = "panarama_p.jpg" alt = "panarama" />
</div>
<div id = "black_main"></div>
</div>
<h2 id = "para_text"> Producing state-of-the-art sport and racing automobiles since 1931 </h2>
<a id = "link2" href = "https://www.porsche.com/usa/modelstart/"><h1 id = "builder"> Build Your Porsche </h1></a>
</body>
</html>
Below is part of my CSS styling:
body {
background-color: black;
}
@font-face{
font-family: logo_font;
src: url('911porschav3title.ttf');
}
/* More CSS rules here */
#link2 {
overflow: hidden;
}