index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Summary</title>
    <link rel="stylesheet" href="/index.css"/>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@700&display=swap" 
rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js></script>
<script src=https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js></script>


</head>
<body id="bg">
    <div >
        <div class="title-box" >
            <div id="title-txt">Summary Ninja</div>
            <h2>Are you too lazy to read long articles 😒 </h2>
            <h2>Don't worry we got you covered🙌</h2>
        </div> 
        <div class="instruction">
            <div>
                1.Copy the text to the article you want to summarise.
            </div>
            <div>
                2.Paste the text in the box.
            </div>
            <div>
                3.Click Summarise.
            </div>

        </div> 
        <div class="btn-container">
            <a href="summarize.html">
                <div class="button">Lets Start</div>
            </a>

        </div>

        
    </div>
</body>

<script>
VANTA.GLOBE({
  el: "#bg",
  mouseControls: true,
  touchControls: false,
  gyroControls: true,
  minHeight: 200.00,
  minWidth: 200.00,
  scale: 1.00,
  scaleMobile: 1.00,
  color: 0xfc5db,
  size: 1.50,
  backgroundColor: 0x2e282e
})
</script>
</html>