-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
127 lines (126 loc) · 6.97 KB
/
index.html
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
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>BRAZIL</title>
</head>
<body>
<nav class="navbar p-0 w-100">
<div class=" w-100 p-2 d-flex justify-content-center bg-dark">
<a class="navbar-icon" href="#">
<img id="team-logo" src="./assets/team-logo.png">
</a>
</div>
<div class="nav-items d-flex justify-content-center w-100 bg-success px-md-auto">
<li>
<a href="#">HOME</a></li>
<li>
<a href="#history">HISTORY</a></li>
</li>
<li>
<a href="#squad">SQUAD</a></li>
</li>
<li>
<a href="#news">NEWS</a></li>
</li>
<li>
<a href="#community">COMMUNITY</a></li>
</li>
</div>
</nav>
<main>
<div class="banner d-flex">
<div class="col-3"></div>
<div class="banner-gradient">
<div class="col-4 d-flex justify-content-center align-items-center h-100">
<h1 class="banner-text text-white ms-5">VIVA<br><span class="sub-title">BRAZIL</span></h1>
</div>
</div>
<div class="banner-photo col-9">
<img src="./assets/banner.jpg" alt="">
</div>
<!-- <div class="next-match col-md-6 col-12 d-flex justify-content-center align-items-center flex-column">
<div class="d-flex mb-2">
<div class="team-container d-flex justify-content-center align-items-center flex-column">
<img src="./assets/wc.png" alt="" width="50" height="50">
<p class="m-0">BRASIL</p>
</div>
<h1 class="d-flex align-items-center m-0">VS</h1>
<div class="team-container d-flex justify-content-center align-items-center flex-column">
<img src="./assets/wc.png" alt="" width="50" height="50">
<p class="m-0">BRASIL</p>
</div>
</div>
</div> -->
</div>
<div class="green-line d-flex justify-content-center my-5">
<div class="sub-text text-center h2" id="history">HISTORY</div>
</div>
<div class="container col-lg-8 d-flex">
<div class="row">
<div class="history-img col-lg-6 d-flex align-items-center justify-content-center">
<img src="./assets/history.png" alt="">
</div>
<div class="col-lg-6 d-flex flex-column align-items-center">
<p class="h4 p-3">Brazil is the most successful national team in the FIFA World Cup, being crowned winner five times: 1958, 1962, 1970, 1994 and 2002. The Seleção also has the best overall performance in the World Cup competition, both in proportional and absolute terms, with a record of 73 victories in 109 matches played, 124 goal difference, 237 points, and 18 losses.[13][14] It is the only national team to have played in all World Cup editions without any absence nor need for playoffs,[15] and the only team to have won the World Cup in four different continents: once in Europe (1958 Sweden), once in South America (1962 Chile), twice in North America (1970 Mexico and 1994 United States), and once in Asia (2002 Korea/Japan). Brazil is also the most successful team in the now-defunct FIFA Confederations Cup, winning it four times, in 1997, 2005, 2009, and 2013.</p>
<h3>major Trophies</h3>
<div class="row gap-2 d-flex justify-content-center">
<div class="col-3 d-flex align-items-center">
<img src="./assets/wc.png" alt="" height="50">
<h2 class="m-0">x5</h2>
</div>
<div class="col-3 d-flex align-items-center">
<img src="./assets/ca.png" alt="" height="50">
<h2 class="m-0">x9</h2>
</div>
<div class="col-3 d-flex align-items-center">
<img src="./assets/cc.png" alt="" height="50">
<h2 class="m-0">x4</h2>
</div>
</div>
</div>
</div>
</div>
<div class="green-line d-flex justify-content-center my-5">
<div id="squad" class="sub-text text-center h2">SQUAD</div>
</div>
<!-- <div class="squad-background d-flex justify-content-center align-items-center">
<img class="squad" src="./assets/squad.png" alt="">
</div> -->
<div class="bg-squad">
<div id="team-container" class="container col-md-8"></div>
</div>
<div class="green-line d-flex justify-content-center my-5">
<div id="news" class="sub-text text-center h2">NEWS</div>
</div>
<div class="container d-flex col-lg-9">
<div id="news-container" class="row gap-3 d-flex justify-content-center">
</div>
</div>
<div class="green-line d-flex justify-content-center my-5">
<div id="community" class="sub-text text-center h2">COMMUNITY</div>
</div>
<div class="container col-10 col-md-8 pb-5">
<div class="community-box d-flex flex-row-reverse">
<div class="join-community-box">
<div class="community-container col-lg-6 h-100 flex-column">
<h2 class="text-white h1 m-0">JOIN the COMMUNITY</h2>
<p class="mx-md-5 mb-md-2 my-0 p-1 text-white">Be a part of an ever-growing community supporting the Brazilian football team, the football team ranked first among international teams, with some of the most prolific players in world football.</p>
<a class="join-btn text-white h4" href="#">Join Here</a>
</div>
<img src="./assets/footer-pic.png" alt="">
</div>
</div>
</div>
</main>
<footer class="d-flex justify-content-center align-items-center">
<p class="text-white m-0">Made with Love 💛 by <a class="text-white" href="https://github.com/SivaPrasad43">SIVAPRASAD C</a></p>
</footer>
<script src="./script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html3