withButtons

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .wish-container {
            position: relative;
            margin-left: 20px;
            width: 60vw;
            height: 60vh;
            border: 2px solid;
            overflow-y: scroll;
            overflow-x: hidden;
            padding: 0;
        }

        ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: inline;
            height: 100%;
        }

        li {

            border-bottom: 1px solid black;
            position: relative;
            height: 33%;
            width: 100%;
        }

        .index {
            position: relative;
            display: inline;
            margin-left: 3vw;
            font-size: 5vh;
            top: 3vh;
        }

        .gift {
            width: 12%;
            height: auto;
            margin: 0;
            position: absolute;
            display: inline;
            top: 5vh;
            margin-left: 4vh;
        }

        li a {
            position: absolute;
            text-decoration: none;
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            font-size: 3vw;
            color: black;
            top: 4vh;
          left:20vw;
        }

            li a :hover {
                text-decoration: underline;
            }

       .changeUp,.changeDown {
            margin: 0px;
            position: absolute;
            display: inline;
            height: 5vh;
            width: auto;
            top: 3vh;
        }
        .changeUp {
           margin-left:30vw;
        }
        .changeDown {
            margin-left: 34vw;
        }


        #wishlist {
            text-decoration: underline;
        }


        .info-holder {
            position: absolute;
            right: 0;
            bottom: 0;
            height: 110vh;
            width: 49vw;
            background-color: #ffd2713f;
            clip-path: circle(55.4% at 100% 58%);
        }

        .info {
            position: absolute;
            top: 23vh;
            left: 78vw;
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        }

        .name {
            display: block;
            font-size: 4vw;
            font-weight: 600;
        }

        .line {
            position: absolute;
            left: -2vw;
            top: 22vh;
            width: 22vw;
            height: 1vh;
            background-color: black;
            border-radius: 10vw;
        }

        .team {
            font-size: 2vw;
            font-weight: 600;
            margin-top: 80px;
        }

        .date {
            font-size: 2vw;
            font-weight: 600;
            margin-top: 40px;
        }


    </style>

    <title>WishList</title>
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <div class="wish-container">
        <ul id="menu">

            @foreach (var wish in ViewBag.Wishes)
            {
            <li>
                <!-- <img src="(wish.ImageLink == null ? "~/img/gift.png" : wish.ImageLink;)" class="gift" alt=""> Throws random af errors.. -->
                <a href="#"><img class="changeUp" src="~/img/up.png" /></a>
                <a href="#"><img class="changeDown" src="~/img/down.png" /></a>
                @if (wish.ImageLink != null)
                {
                    <img src="@("/userImages/" + wish.ImageLink)" class="gift" alt="wish img" style="max-height:70px">
                }
                else
                {
                    <img src="~/img/gift.png" class="gift" alt="wish img">
                }

                <a class="item" href="#">@wish.Title</a>

            </li>

            }
        </ul>

    </div>


    <div class="info-holder"></div>
    <div class="info">
        <p class="name">@ViewBag.User.FullName.Split(' ')[0]</p>
        <div class="line"></div>
        <p class="team">Team: @ViewBag.TeamName<br></p>
        <p class="date">Birthday: @ViewBag.User.BirthDate</p>


    </div>


</body>

</html>