<script setup> </script> <template> <div id="main"> <div id="profilePicture"> <img src="/Clyde.png"> </div> <div id="researcherInfos"> <div class="surrounded" > John Doe </div> <div class="surrounded" > Orcid : 12144-2144-12336-B </div> <div class="surrounded" > Email : John.Doe@umons.ac.be </div> <div class="surrounded" > site : <a href="http://localhost:5173" style="color: #007aff">here</a> </div> <div class="surrounded" > Domain : physics, IT </div> <div id="coAuthorList" class="surrounded"> Co-authors list : D </div> </div> <div id="stats"> <div class="surrounded"> Stat type : <select name="stats" id="stats-select"> <option value="views">Views</option> <option value="co-authors">Co-authors</option> <option value="articles">Articles</option> <option value="language">Languages</option> </select> </div> <div class="surrounded"> Class by: <select name="classedBy" id="classed-select"> <option value="years">Years</option> <option value="months">Months</option> <option value="topics">Topics</option> </select> </div> </div> <div id="articles"> </div> </div> </template> <style scoped> #main { display: grid; grid-template-columns: 22% auto; grid-template-rows: 26% auto; height: 100%; width: 100%; } #profilePicture { display: flex; justify-content: center; } #profilePicture img{ align-self: center; justify-self: center; width:60%; } #researcherInfos { display: grid; grid-template-columns: auto auto auto; column-gap: 5px; grid-template-rows: auto auto ; } .surrounded { border:2px solid black; color:white; background-color:rgb(50,50,50); font-size: x-large; align-self: center; text-align: center; background-color: rgba(255, 255, 255, 0.09); border-radius:20px;margin-bottom:10px; } #stats { } #articles { background-color: orange; } </style>