forked from zarif007/RS-Web-Dev
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index2.html
145 lines (120 loc) · 7.39 KB
/
index2.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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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=Fascinate&family=Roboto&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="icon" type="image/x-icon" href="images/html1.jpg">
<title>RS Class 2</title>
</head>
<body Class="bg-dark container">
<!-- <h1 Class="text-primary bg-danger">hello</h1>
<div Class="container ">Container</div>
<span Class="border border-primary border-4 rounded">Border Class</span>
<span Class="py-3 bg-success">Padding Class</span>
<p Class="my-4 bg-success">Margin Class</p> -->
<!--Navbar-->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top container">
<div class="container-fluid ">
<a class="navbar-brand text-primary" href="#">Zarif</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" aria-current="page" href="#home">Home</a>
<a class="nav-link" href="#aboutme">About Me</a>
<a class="nav-link" href="#hobbies">Hobbies</a>
<a class="nav-link" href="#moreaboutme">More about me</a>
</div>
</div>
</div>
</nav>
<!--Banner-->
<div Class="d-flex flex-column flex-lg-row justify-content-evenly align-items-center text-light my-5" id="home">
<div Class="d-flex flex-column">
<h1 Class="">
Hi I am <span>Zarif</span> 🚀 <br/>
I am from RS60 <br/>
Nice to Meet you!!
</h1>
<button type="button" class="btn btn-primary mb-2">Hi!~!!</button>
</div>
<img Class="img-fluid rounded-5 border border-2 border-primary mt-5" src="https://c.tenor.com/RHLWwOjQCF4AAAAC/crookz-nft.gif" alt="gifs" />
</div>
<!--About me-->
<div class="text-light my-5" id="aboutme">
<h1 class="text-primary"><u>About Me</u></h1>
<div id="carouselExampleControls" class="carousel slide my-5" data-bs-ride="carousel">
<div class="carousel-inner border border-2 border-primary rounded-2">
<div class="carousel-item active">
<img src="https://img.freepik.com/premium-vector/ethereum-cryptocurrency-digital-coin-presentation-computer-circuit-board-vector-blockchain_185386-777.jpg?w=2000" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://wallpapers.com/images/high/ethereum-80s-vibe-yiex0f3kcqhhzbrw.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images2.alphacoders.com/118/thumb-1920-1188102.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<h5 class="border border-2 p-2 rounded-2 mt-3 border-primary">
Cristiano Ronaldo dos Santos Aveiro GOIH ComM (Portuguese pronunciation: [kɾiʃˈtjɐnu ʁɔˈnaɫdu]; born 5 February 1985) is a Portuguese professional footballer who plays as a forward for Premier League club Manchester United and captains the Portugal national team. Often considered the best player in the world and widely regarded as one of the greatest players of all time, Ronaldo has won five Ballon d'Or awards[note 3] and four European Golden Shoes, the most by a European player. He has won 32 trophies in his career, including seven league titles, five UEFA Champions Leagues, and the UEFA European Championship. Ronaldo holds the records for most appearances (183), goals (140), and assists (42) in the Champions League, goals in the European Championship (14), international goals (117), and international appearances by a European (189). He is one of the few players to have made over 1,100 professional career appearances, and has scored over 800 official senior career goals for club and country.
</h5>
<div>
<!--Hobbies-->
<div class="my-5" id="hobbies">
<h1 class="text-primary"><u>Hobbies</u></h1>
<ul class="list-group bg-dark mt-2">
<li class="list-group-item list-group-item-primary">Fishing</li>
<li class="list-group-item list-group-item-primary">Sleeping</li>
<li class="list-group-item list-group-item-primary">Sleeping</li>
<li class="list-group-item list-group-item-primary">Sleeping</li>
<li class="list-group-item list-group-item-primary">And Sleeping</li>
</ul>
</div>
<!--More about me-->
<div class="my-5 d-flex flex-column flex-lg-row" id="moreaboutme">
<div class="card mb-3 m-1 bg-dark">
<img src="https://images2.alphacoders.com/118/thumb-1920-1188102.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Ptoject 1</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card mb-3 m-1 bg-dark">
<img src="https://images2.alphacoders.com/118/thumb-1920-1188102.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Ptoject 2</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card mb-3 m-1 bg-dark">
<img src="https://images2.alphacoders.com/118/thumb-1920-1188102.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Ptoject 2</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<footer class="bg-dark text-center text-lg-start">
<div class="text-center p-3">
© 2022 Copyright:
<a class="text-primary" href="https://mdbootstrap.com/">Zarif</a>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>