04. Duolingo User

 <!-- I am getting the hang of this coding thing.

Colors: 
#141f23 Dark Greyish Black
#ffffff White 
#bbbaba Light Grey
#1CB0F6 Dodger Blue 
#7df060 Is a Green

Happy coding -->

<div class="p-3 container" style="background-color:#141f23;width:45%;margin:auto;border-radius:15px">
 <div class="row">
<div class="col-lg-9"> <div>
<h1 style="color:#ffffff">nickname</h1>
<p style="color:#bbbaba">full name<br>
 "we love super short quotes" <br>
<img src="flag.png" width="30" style="border-radius:5px">
<img src="flag.png" width="30" style="border-radius:5px">
<img src="flag.png" width="30" style="border-radius:5px">
<br>
<span style="color:#1CB0F6"><b>they/them • 0 friends</b><br></span>
</p>
</div> </div>

<div class="col-lg-3"> <div>
 <!-- Icon! -->
<img src="profile.png" style="border-radius:100px;width:150px;display:block;margin:auto"> 
 <!-- Change the Image SRC -->
</div> </div> </div>

 <div class="p-2 row">
<a class="btn btn-primary col-lg-8" style="background-color:#141f23;color:#7df060;border:2px solid #7df060;border-radius:12px" data-toggle="collapse" href="#about">
 <i class="fa-solid fa-user-plus" style="color:#7df060"></i> About</a>
 
<a class="btn btn-danger col-lg-2" style="background-color:#141f23;border:2px solid #bbbaba;border-radius:12px"
 data-toggle="collapse" href="#stats"><i class="fa-solid fa-chart-column" style="color:#1CB0F6"></i></a>
 
<a class="btn btn-danger col-lg-2" style="background-color:#141f23;border:2px solid #bbbaba;border-radius:12px" 
 data-toggle="collapse" href="#achievements"><i class="fa-solid fa-trophy" style="color:#1CB0F6"></i></a>

 </div>

<!-- Containers. There will be 3! 
This one is the about-->
<div class="collapse" id="about">
 <br>
 <h1 style="color:#ffffff">XP this Week</h1>
 <div class="p-2" style="border: 2px solid #bbbaba;border-radius:15px">
 
 <p style="color:#1CB0F6;margin:1.5px">nickname 
 <!-- The socials will be next to the nickname 
 --> 
 
 <a href="link" style="color:#1CB0F6">
 <i class="fab fa-instagram"> </i> 
 </a> 
 
 <a href="link" style="color:#1CB0F6">
 <i class="fab fa-youtube"> </i> 
 </a>
 
 <a href="link" style="color:#1CB0F6">
 <i class="fab fa-pinterest"> </i> 
 </a>
 
 <a href="link" style="color:#1CB0F6">
 <i class="fab fa-discord"> </i> 
 </a>
 
 <a href="link" style="color:#1CB0F6">
 <i class="fab fa-artstation"> </i> 
 </a>
 <a href="link" style="color:#1CB0F6">
 <i class="fab fa-artfight"> </i> 
 </a>
 </p>
 
 <p style="color:#ffffff">Duolingo is a fun and educational language learning app. It has over 40+ languages and quick, bite sized lessons. You can practice speaking, reading, listening, and writing to build vocabulary and grammar on your target language. Duolingo has so much to say, but the box expands. Duo can write anything he wants now. Can you too? Most people say the app is innefficient to learn a language, but I personally believe it's alright when founding a sustainable vocabulary. You should obviously learn a language not only with Duolingo! One of the reason for this is that Duo doesn't teach grammatical and conjugation cases (in my <i>case</i>) badum tss...) efficiently, so it's up to you really to find more resources. It's unfortunate because they once had that functionality! Why remove something to helpful, little birdie?! </p> 
 
 </div>
 </div>
 
 <!-- #2 This one is the Statistics -->
 <div class="collapse" id="stats">
 <br>
 <h1 style="color:#ffffff">Statistics</h1>
 <div class="p-2 column" style="border: 2px solid #bbbaba;border-radius:15px">
 
<p class="btn btn-warning" style="width:100%">
 <span style="color:#ffffff"> <b>50+ years</b> <br>
 <span style="color:#ffffff"> Since I started language learning</span> </span>
</p>

 <p class="btn btn-danger" style="width:100%;background-color:#141f23;border:2px solid #bbbaba;">
 <b>Requests</b> <br>
 <span style="color:#bbbaba">Closed</span>
 </p>
 
 <p class="btn btn-danger" style="width:100%;background-color:#141f23;border:2px solid #bbbaba;">
 <b>Trades</b> <br>
 <span style="color:#bbbaba">Closed</span>
 </p>
 
 <p class="btn btn-danger" style="width:100%;background-color:#141f23;border:2px solid #bbbaba;">
 <b>Commissions</b> <br>
 <span style="color:#bbbaba">Closed</span>
 </p>
 
<!-- Do remember to change the link -->
 <br> <br>
 <a href="LINK_HERE" style="color:#bbbaba"> T.O.S/Additional Information </a>
 </div> 
 
 </div>
 
 <!-- OK. Section 3. Achievements. -->
 <div class="collapse" id="achievements"> <br>
 <h1 style="color:#ffffff">Achievements</h1>
 <div class="p-2 row" style="width:100%;border: 2px solid #bbbaba;;border-radius:15px;margin:auto">
 <div>
 <p style="color:#ffffff">Uh You can talk about fun facts/moments, stuff you never mentioned beforehard in the about or link some other stuff. Or maybe all three. Creativity is key </p> <br>
 
 
 <a href="LINK_HERE" STYLE="COLOR:#ffffff" 
 title="Link other places" class="m-2 tooltipster"> Link other places </a> + 
 <a href="LINK_HERE" STYLE="COLOR:#ffffff"
 title="Link other places" class="m-2 tooltipster"> Link other places </a> +
 <a href="LINK_HERE" STYLE="COLOR:#ffffff"
 title="Link other places" class="m-2 tooltipster"> Link other places </a>
 
 
 </div> </div> </div>
 <!-- Credits -->
 <a href="https://toyhou.se/doritochan001" style="text-align:center;color:#bbbaba"> Coded with owls </a>
 <!-- The code did end now,
you can add other stuff underneath. -->
 
 </div> 




<!-- 

yay ur done
-->