Skip to content

Commit dd8548a

Browse files
JhostinDJhostinD
committed
Página con listas "popular" y "más comprados"
1 parent 80c25f7 commit dd8548a

File tree

1 file changed

+135
-68
lines changed

1 file changed

+135
-68
lines changed

‎PlantillaBasica/EstadisticaVideojuego.html‎

Lines changed: 135 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -44,88 +44,155 @@
4444
</div>
4545
</div>
4646
</nav>
47-
<!-- Page Content-->
47+
<!--Page content-->
4848
<section class="py-5">
49-
<div class="container px-5 my-5">
49+
<div class="container px-5">
50+
<h2 class="fw-bolder fs-5 mb-4">Videojuegos más comprados</h2>
5051
<div class="row gx-5">
51-
<div class="col-lg-3">
52-
<div class="d-flex align-items-center mt-lg-5 mb-4">
53-
<img class="img-fluid rounded-circle" src="https://dummyimage.com/50x50/ced4da/6c757d.jpg" alt="..." />
54-
<div class="ms-3">
55-
<div class="fw-bold">Valerie Luna</div>
56-
<div class="text-muted">News, Business</div>
52+
<div class="col-lg-4 mb-5">
53+
<div class="card h-100 shadow border-0">
54+
<img class="card-img-top" src="Fotos/battlefield2042.webp" alt="..." height="350px" width="600px"/>
55+
<div class="card-body p-4">
56+
<div class="badge bg-primary bg-gradient rounded-pill mb-2">Nuevo</div>
57+
<a class="text-decoration-none link-dark stretched-link" href="#!"><div class="h5 card-title mb-3">Battlefield 2042 Gold Edition</div></a>
58+
<p class="card-text mb-0">35.99€</p>
59+
</div>
60+
<div class="card-footer p-4 pt-0 bg-transparent border-top-0">
61+
<div class="d-flex align-items-end justify-content-between">
62+
<div class="d-flex align-items-center">
63+
<img class="rounded-circle me-3" src="Fotos/originIcon.svg" alt="..." height="40px" width="40px"/>
64+
<div class="small">
65+
<div class="fw-bold">Origin</div>
66+
<div class="text-muted">Global</div>
67+
</div>
68+
</div>
69+
</div>
5770
</div>
5871
</div>
5972
</div>
60-
<div class="col-lg-9">
61-
<!-- Post content-->
62-
<article>
63-
<!-- Post header-->
64-
<header class="mb-4">
65-
<!-- Post title-->
66-
<h1 class="fw-bolder mb-1">Welcome to Blog Post!</h1>
67-
<!-- Post meta content-->
68-
<div class="text-muted fst-italic mb-2">January 1, 2021</div>
69-
<!-- Post categories-->
70-
<a class="badge bg-secondary text-decoration-none link-light" href="#!">Web Design</a>
71-
<a class="badge bg-secondary text-decoration-none link-light" href="#!">Freebies</a>
72-
</header>
73-
<!-- Preview image figure-->
74-
<figure class="mb-4"><img class="img-fluid rounded" src="https://dummyimage.com/900x400/ced4da/6c757d.jpg" alt="..." /></figure>
75-
<!-- Post content-->
76-
<section class="mb-5">
77-
<p class="fs-5 mb-4">Science is an enterprise that should be cherished as an activity of the free human mind. Because it transforms who we are, how we live, and it gives us an understanding of our place in the universe.</p>
78-
<p class="fs-5 mb-4">The universe is large and old, and the ingredients for life as we know it are everywhere, so there's no reason to think that Earth would be unique in that regard. Whether of not the life became intelligent is a different question, and we'll see if we find that.</p>
79-
<p class="fs-5 mb-4">If you get asteroids about a kilometer in size, those are large enough and carry enough energy into our system to disrupt transportation, communication, the food chains, and that can be a really bad day on Earth.</p>
80-
<h2 class="fw-bolder mb-4 mt-5">I have odd cosmic thoughts every day</h2>
81-
<p class="fs-5 mb-4">For me, the most fascinating interface is Twitter. I have odd cosmic thoughts every day and I realized I could hold them to myself or share them with people who might be interested.</p>
82-
<p class="fs-5 mb-4">Venus has a runaway greenhouse effect. I kind of want to know what happened there because we're twirling knobs here on Earth without knowing the consequences of it. Mars once had running water. It's bone dry today. Something bad happened there as well.</p>
83-
</section>
84-
</article>
85-
<!-- Comments section-->
86-
<section>
87-
<div class="card bg-light">
88-
<div class="card-body">
89-
<!-- Comment form-->
90-
<form class="mb-4"><textarea class="form-control" rows="3" placeholder="Join the discussion and leave a comment!"></textarea></form>
91-
<!-- Comment with nested comments-->
92-
<div class="d-flex mb-4">
93-
<!-- Parent comment-->
94-
<div class="flex-shrink-0"><img class="rounded-circle" src="https://dummyimage.com/50x50/ced4da/6c757d.jpg" alt="..." /></div>
95-
<div class="ms-3">
96-
<div class="fw-bold">Commenter Name</div>
97-
If you're going to lead a space frontier, it has to be government; it'll never be private enterprise. Because the space frontier is dangerous, and it's expensive, and it has unquantified risks.
98-
<!-- Child comment 1-->
99-
<div class="d-flex mt-4">
100-
<div class="flex-shrink-0"><img class="rounded-circle" src="https://dummyimage.com/50x50/ced4da/6c757d.jpg" alt="..." /></div>
101-
<div class="ms-3">
102-
<div class="fw-bold">Commenter Name</div>
103-
And under those conditions, you cannot establish a capital-market evaluation of that enterprise. You can't get investors.
104-
</div>
105-
</div>
106-
<!-- Child comment 2-->
107-
<div class="d-flex mt-4">
108-
<div class="flex-shrink-0"><img class="rounded-circle" src="https://dummyimage.com/50x50/ced4da/6c757d.jpg" alt="..." /></div>
109-
<div class="ms-3">
110-
<div class="fw-bold">Commenter Name</div>
111-
When you put money directly to a problem, it makes a good headline.
112-
</div>
73+
<div class="col-lg-4 mb-5">
74+
<div class="card h-100 shadow border-0">
75+
<img class="card-img-top" src="Fotos/gtaV.jpeg" alt="..." height="350px" width="600px"/>
76+
<div class="card-body p-4">
77+
<div class="badge bg-primary bg-gradient rounded-pill mb-2">Popular</div>
78+
<a class="text-decoration-none link-dark stretched-link" href="#!"><div class="h5 card-title mb-3">Grand Theft Auto V</div></a>
79+
<p class="card-text mb-0">12.99€</p>
80+
</div>
81+
<div class="card-footer p-4 pt-0 bg-transparent border-top-0">
82+
<div class="d-flex align-items-end justify-content-between">
83+
<div class="d-flex align-items-center">
84+
<img class="rounded-circle me-3" src="Fotos/rockstarGamesIcon.png" alt="..." height="40px" width="40px"/>
85+
<div class="small">
86+
<div class="fw-bold">Rockstar Games</div>
87+
<div class="text-muted">Global</div>
88+
</div>
89+
</div>
90+
</div>
91+
</div>
92+
</div>
93+
</div>
94+
<div class="col-lg-4 mb-5">
95+
<div class="card h-100 shadow border-0">
96+
<img class="card-img-top" src="Fotos/minecraft.jpg" alt="..." height="350px" width="600px"/>
97+
<div class="card-body p-4">
98+
<a class="text-decoration-none link-dark stretched-link" href="#!"><div class="h5 card-title mb-3">Minecraft Java Edition</div></a>
99+
<p class="card-text mb-0">15.99€</p>
100+
</div>
101+
<div class="card-footer p-4 pt-0 bg-transparent border-top-0">
102+
<div class="d-flex align-items-end justify-content-between">
103+
<div class="d-flex align-items-center">
104+
<img class="rounded-circle me-3" src="Fotos/windowsStore.png" alt="..." height="40px" width="40px"/>
105+
<div class="small">
106+
<div class="fw-bold">Microsoft Store</div>
107+
<div class="text-muted">Europa</div>
108+
</div>
109+
</div>
110+
</div>
111+
</div>
112+
</div>
113+
</div>
114+
</div>
115+
<div class="text-end mb-5 mb-xl-0">
116+
<a class="text-decoration-none" href="#!">
117+
Más videojuegos
118+
<i class="bi bi-arrow-right"></i>
119+
</a>
120+
</div>
121+
</div>
122+
<div class="container px-5">
123+
<h2 class="fw-bolder fs-5 mb-4">Videojuegos Populares</h2>
124+
<div class="row gx-5">
125+
<div class="col-lg-4 mb-5">
126+
<div class="card h-100 shadow border-0">
127+
<img class="card-img-top" src="Fotos/eldenRing.webp" alt="..." height="350px" width="600px"/>
128+
<div class="card-body p-4">
129+
<div class="badge bg-primary bg-gradient rounded-pill mb-2">Nuevo</div>
130+
<a class="text-decoration-none link-dark stretched-link" href="#!"><div class="h5 card-title mb-3">Elden Ring</div></a>
131+
<p class="card-text mb-0">42.99€</p>
132+
</div>
133+
<div class="card-footer p-4 pt-0 bg-transparent border-top-0">
134+
<div class="d-flex align-items-end justify-content-between">
135+
<div class="d-flex align-items-center">
136+
<img class="rounded-circle me-3" src="Fotos/steamIcon.png" alt="..." height="40px" width="40px"/>
137+
<div class="small">
138+
<div class="fw-bold">Steam</div>
139+
<div class="text-muted">Europa</div>
140+
</div>
141+
</div>
142+
</div>
143+
</div>
144+
</div>
145+
</div>
146+
<div class="col-lg-4 mb-5">
147+
<!--div class="nav-link" href="VerVideojuego.html"-->
148+
<div class="card h-100 shadow border-0">
149+
<img class="card-img-top" src="Fotos/godOfWar.jfif" alt="..." height="350px" width="600px"/>
150+
<div class="card-body p-4">
151+
<div class="badge bg-primary bg-gradient rounded-pill mb-2">Nuevo</div>
152+
<a class="text-decoration-none link-dark stretched-link" href="#!"><div class="h5 card-title mb-3">God of War</div></a>
153+
<p class="card-text mb-0">29.99€</p>
154+
</div>
155+
<div class="card-footer p-4 pt-0 bg-transparent border-top-0">
156+
<div class="d-flex align-items-end justify-content-between">
157+
<div class="d-flex align-items-center">
158+
<img class="rounded-circle me-3" src="Fotos/epicGamesIcon.png" alt="..." height="40px" width="40px"/>
159+
<div class="me-3">
160+
<div class="fw-bold">Epic Games</div>
161+
<div class="text-muted">Global</div>
113162
</div>
114163
</div>
115164
</div>
116-
<!-- Single comment-->
117-
<div class="d-flex">
118-
<div class="flex-shrink-0"><img class="rounded-circle" src="https://dummyimage.com/50x50/ced4da/6c757d.jpg" alt="..." /></div>
119-
<div class="ms-3">
120-
<div class="fw-bold">Commenter Name</div>
121-
When I look at the universe and all the ways the universe wants to kill us, I find it hard to reconcile that with statements of beneficence.
165+
</div>
166+
</div>
167+
<!--/div-->
168+
</div>
169+
<div class="col-lg-4 mb-5">
170+
<div class="card h-100 shadow border-0">
171+
<img class="card-img-top" src="Fotos/csgo.png" alt="..." height="350px" width="600px"/>
172+
<div class="card-body p-4">
173+
<a class="text-decoration-none link-dark stretched-link" href="#!"><div class="h5 card-title mb-3">Counter Strike: Global Offensive</div></a>
174+
<p class="card-text mb-0">9.99€</p>
175+
</div>
176+
<div class="card-footer p-4 pt-0 bg-transparent border-top-0">
177+
<div class="d-flex align-items-end justify-content-between">
178+
<div class="d-flex align-items-center">
179+
<img class="rounded-circle me-3" src="Fotos/steamIcon.png" alt="..." height="40px" width="40px"/>
180+
<div class="me-3">
181+
<div class="fw-bold">Steam</div>
182+
<div class="text-muted">Europa</div>
122183
</div>
123184
</div>
124185
</div>
125186
</div>
126-
</section>
187+
</div>
127188
</div>
128189
</div>
190+
<div class="text-end mb-5 mb-xl-0">
191+
<a class="text-decoration-none" href="#!">
192+
Más videojuegos
193+
<i class="bi bi-arrow-right"></i>
194+
</a>
195+
</div>
129196
</div>
130197
</section>
131198
</main>

0 commit comments

Comments
 (0)