f1infopage/frontpage.html at master · Seynab150/f1infopage · GitHub

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Front page pop-up</title>
    <link rel="stylesheet" href="frontpage.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=Montserrat:wght@300;600&display=swap"
      rel="stylesheet"
    />
    <script src="script.js"></script>
  </head>


<header>

  <!--Nav Bar -->
  <div class="nav" id="myTopnav">
     <a class="main" href="index.html">Home</a>
    <div class="dropdown">
      <button class="dropgbtn"> Teams </button>
      <div class="dropdown-content">
        <a href="#">Red Bull Racing</a>
        <a href="#">Mercedes</a>
        <a href="#">Ferrari</a>
        <a href="#">Aston Martin</a>
        <a href="#">McLaren</a>
        <a href="#">Alpine</a>
        <a href="#">Williams</a>
        <a href="#">Haas F1 Team</a>
        <a href="#">Alfa Romeo</a>
        <a href="#">AlfaTauri</a>
      </div>
    </div>
      <div class="dropdown">
        <button class="dropgbtn"> Rules and Regulations </button>
        <div class="dropdown-content">
          <a href="#">Rules</a>
          <a href="#">Regulating Body</a>
        </div>
      </div>
      <div class="dropdown">
        <button class="dropgbtn"> F1 History </button>
        <div class="dropdown-content">
          <a href="#">History</a>
          <a href="#">Past Controversies</a>
        </div>
      </div>

</header>


<body class="body">


  <div class = "title"> </div>
  <div class = "break"></div>


  <!-- Main container-->
  <div class="row">
    <div class="column">
        <button class="button">
            <img class = "img" src="https://i.guim.co.uk/img/media/cefc0674922217b6e0d646d338f08412ef9b9ff5/54_207_4975_2985/master/4975.jpg?width=1200&quality=85&auto=format&fit=max&s=8927d0bde1b8aa57b48916a73d545f17" alt="Image 1">
        </button>
    </div>
    <div class="column">
        <button class="button">
            <div class="text">
              <h2> Teams </h2>
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
              </div>
        </button>
    </div>
</div>

<div class="row">
    <div class="column">
        <button class="button">
            <div class="text">
              <h2> Rules and Regulations</h2>
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
            </div>
        </button>
    </div>
    <div class="column">
        <button class="button">
            <img class = "img" src="https://d3cm515ijfiu6w.cloudfront.net/wp-content/uploads/2022/10/10160207/fia-flag-dutch-grand-prix-planet-f1.jpg" alt="Image 2">
        </button>
    </div>
</div>

<div class="row">
    <div class="column">
        <button class="button">
            <img class = "img" src="https://www.silverarrows.net/wp-content/uploads/2019/11/M204776-e1574966649361.jpg" alt="Image 3">
        </button>
    </div>
    <div class="column">
        <button class="button">
            <div class="text">
              <h2> F1 History</h2>
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
              </div>
        </button>
    </div>
</div>

</body>