<!

---------------------------------------------------- two2
---------------------------------------------------------------->
<section class="gameimg mt-5 w-100" style="width: 100%;">

<!-- backgrounimg2 -->

<div class="yash border border-5 border-success" style="width: 100%;">
<!-- backgrounimg2 -->

<div class="container-lg">
<div class="row">
<div class="col-md-5 w-100 border border-2 border-danger text-
center mt-5">
<div class="gameheading " style="font-size: 33px ;">
<p style="font-weight: bolder;">Recent Games</p>
</div>
</div>
</div>
</div>

<div class="container-lg g-5" style="margin-top: 2% ; ">

<div class="row g-5">

<!-- image 1 -->

<div class="col-md-4 col-lg-4 col-xs-12 pt-4 bg-warning"

style="height: 500px;">
<div class="phototwo text-center " style="box-shadow: 0 0
25px ;">

<div class="imgpng ">

<img src="./img/recent-game/1.jpg" alt=""
style="width: 100%;">
</div>
<div class="mft bg-light text-danger-emphasis border
border-2 mt-5">
<p style="font-size: 20px; font-weight: bolder;">
Suspendisse ut justo tem por, rutrum
</p>
<p>Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Nostrum facere ducimus
culpa ullam a repellendus aliquid hic
repudiandae dolorum nemo odit deserunt
consequatur voluptate, debitis reiciendis est
nihil. Expedita, molestias!</p>
</div>
</div>
</div>
<!-- image 2 -->
<div class="col-md-4 col-lg-4 col-xs-12 pt-4 bg-dark">
<div class="phototwo text-center" style="box-shadow: 0 0
25px ;">

<div class="imgpng">
<img src="./img/recent-game/2.jpg" alt=""
style="width: 100%;">
</div>
<div class="mtf bg-light text-dark border border-2 mt-
5">
 <p style="font-size: 20px; font-weight:
bolder;">Justo tempor, rutrum erat id, molestie
</p>
<p>Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Nostrum facere ducimus
culpa ullam a repellendus aliquid hic
repudiandae dolorum nemo odit deserunt
consequatur voluptate, debitis reiciendis est
nihil. Expedita, molestias!</p>
</div>
</div>
</div>
<!-- image 3 -->
<div class="col-md-4 col-lg-4 col-xs-12 pt-4 bg-info">
<div class="phototwo text-center" style=" box-shadow: 0 0
25px ;">

<div class="imgpng">
<img src="./img/recent-game/3.jpg" alt=""
style="width: 100%;">
</div>
<div class="mtf bg-light text-dark border border-2 mt-
5">
<p style="font-size: 20px; font-weight:
bolder;">Nullam lacinia ex eleifend orci
porttitor
</p>
<p>Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Nostrum facere ducimus
culpa ullam a repellendus aliquid hic
repudiandae dolorum nemo odit deserunt
consequatur voluptate, debitis reiciendis est
nihil. Expedita, molestias!</p>
</div>
</div>
</div>

</div>

<!------------------------------------- btn start

---------------------------------->

<button class="btn btn-warning mt-4 " type="button" data-bs-

toggle="offcanvas"
data-bs-target="#offcanvasBottom" aria-
controls="offcanvasBottom" style="margin-left: 40%;">Toggle
bottom offcanvas</button>

<div class="offcanvas offcanvas-bottom text-center w-100 h-100"

tabindex="-1" id="offcanvasBottom"
 aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header ">
<h5 class="offcanvas-title" id="offcanvasBottomLabel"></h5>
<button type="button" class="btn-close" data-bs-
dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body small">
...
<!---------------------------------------------------- two2
body ---------------------------------------------------------------->
<section class="gameimg mt-5 w-100" style="width: 100%;">

<!-- backgrounimg2 -->

<div class="bcimg" style="width: 100%;">
<!-- backgrounimg2 -->

<div class="container-lg">
<div class="row">
<div class="col-md-5 w-100 text-center mt-
5">
<div class="gameheading " style="font-
size: 33px ;">
<p style="font-weight:
bolder;">Recent Games</p>
</div>
</div>
</div>
</div>

<div class="container-fluid mt-3" style="width:

100%;">
<div class="container-lg " style="margin-top:
2% ; ">
<div class="row ">

<!-- image 1 -->

<div class="col-lg-6 col-md-6 col-xs-12

">
<div class="photoyt text-center;">
<div class="imgyt "
style="width: 100% ;">
<img
src="./img/tournament/1.jpg" alt="" style="width: 100% ;">
<div
class="mft bg-light
text-danger-emphasis border border-2 border-danger mt-3 text-center">
<p style="font-size:
20px; font-weight: bolder;"> World Of
WarCraft
</p>

</div>
</div>
</div>
</div>
 <!-- image 2 -->
<div class="col-lg-6 col-md-6 col-xs-12
">
<div class="photoyt text-center ">
<div class="imgpyt"
style="width: 100%; ">
<img
src="./img/tournament/2.jpg" alt="" style="width: 100%;">

<div
class="mtf bg-light
text-dark border border-2 border-danger mt-3">
<p style="font-size:
20px; font-weight: bolder;">Justo
tempor, rutrum
erat id, molestie
</p>

</div>
</div>
</div>
</div>

</div>
</div>
</div>
</div>

</section>
<!-- two2 -->

</div>
</div>
<!------------------------------------- btn end
---------------------------------->
</div>

</div>

</section>
<!-- two2 -->