Untitled

for (var i = 0; i < works.length; i++) {
    $('#work-items').append("
        <div class='col-md-3'>
            <div class='portfolio-item'>
                <span class='work-name'" + works[i].name + " ></span>
                <a href='" + works[i].link + "' class='work-img weblink' style='text-decoration: none; font-size: 1.2em; color:salmon'>
                    <img class='img-responsive img-thumbnail' style='height: 150px; width: 300px' src='" + works[i].pic + "'>
                    <span class='info'><p class='proj-title'></p>" + works[i].title + " </span >
                </a >
                <a href='" + works[i].github + "' class='work-img github' style = 'text-decoration: none; color: DodgerBlue; font-size: 1.2em' >
                </a >
            </div >
         </div >
    ");
}

var works = [
    {
        name: "Ruby on Rails | Javascript",
        title: "Ecommerce Application",
        pic: "img/workimg/BikesberlinCollage.jpg",
        link: "https://bikesberlinworldwide.herokuapp.com",
        github: "https://github.com/bklynbest/Bikeshop-Ecommerce-app"
    },

    {
        name: "Ruby on Rails | Vue",
        title: "Project Manager",
        pic: "img/workimg/projekt.png",
        link: "https://britanniaprojectmanager.herokuapp.com",
        github: "https://github.com/bklynbest/projektmanager"
    },
]

<html lang="en">


<body>
   <div class="container">
    <h1 class="name">jJonathan</h1>
    <h4 class="title">...</h4>
 </div>
<div class="container">

    <div id="work-items" class="row">
        <div class="col-md-3">
            <div class="portfolio-item"> <span class="work-name" ruby="" on="" rails="" |="" javascript=""></span> <a href="https://bikesberlinworldwide.herokuapp.com" class="work-img weblink" style="text-decoration: none; font-size: 1.2em; color:salmon">         <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/BikesberlinCollage.jpg">         <span class="info"><p class="proj-title"></p>Ecommerce Application</span>           </a>                    <a href="https://github.com/bklynbest/Bikeshop-Ecommerce-app" class="work-img github" style="text-decoration: none; color: DodgerBlue; font-size: 1.2em"> Github            </a> </div>
        </div>
        <div class="col-md-3">
            <div class="portfolio-item"> <span class="work-name" ruby="" on="" rails="" |="" vue=""></span> <a href="https://britanniaprojectmanager.herokuapp.com" class="work-img weblink" style="text-decoration: none; font-size: 1.2em; color:salmon">         <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/projekt.png">            <span class="info"><p class="proj-title"></p>Project Manager</span>             </a>                    <a href="https://github.com/bklynbest/projektmanager" class="work-img github" style="text-decoration: none; color: DodgerBlue; font-size: 1.2em"> Github            </a> </div>
        </div>
        <div class="col-md-3">
            <div class="portfolio-item"> <span class="work-name" ruby="" on="" rails="" |="" javascript=""></span> <a href="https://britanniarecipebox.herokuapp.com/" class="work-img weblink" style="text-decoration: none; font-size: 1.2em; color:salmon">          <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/recipeapp.png">          <span class="info"><p class="proj-title"></p>Recipe Sharing App</span>              </a>                    <a href="https://github.com/bklynbest/recipebox" class="work-img github" style="text-decoration: none; color: DodgerBlue; font-size: 1.2em"> Github         </a> </div>
        </div>
        <div class="col-md-3">
            <div class="portfolio-item"> <span class="work-name" ruby="" on="" rails=""></span> <a href="https://jobs495.herokuapp.com" class="work-img weblink" style="text-decoration: none; font-size: 1.2em; color:salmon">         <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/jobs.png">           <span class="info"><p class="proj-title"></p>Job Board Application</span>           </a>                    <a href="https://github.com/bklynbest/britanniajobs" class="work-img github" style="text-decoration: none; color: DodgerBlue; font-size: 1.2em"> Github         </a> </div>
        </div>
        <div class="col-md-3">
            <div class="portfolio-item"> <span class="work-name" javascript="" |="" react=""></span> <a href="https://britaninaweather.netlify.com/" class="work-img weblink" style="text-decoration: none; font-size: 1.2em; color:salmon">            <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/weather.png">            <span class="info"><p class="proj-title"></p>Weather Checker</span>             </a>                    <a href="https://github.com/bklynbest/britanniaWeather" class="work-img github" style="text-decoration: none; color: DodgerBlue; font-size: 1.2em"> Github          </a> </div>
        </div>
        <div class="col-md-3">
            <div class="portfolio-item"> <span class="work-name" react="" |="" firebase="" redux=""></span> <a href="https://britannia-planner.firebaseapp.com/" class="work-img weblink" style="text-decoration: none; font-size: 1.2em; color:salmon">            <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/planner.png">            <span class="info"><p class="proj-title"></p>Planner</span>             </a>                    <a href="https://github.com/bklynbest/planner" class="work-img github" style="text-decoration: none; color: DodgerBlue; font-size: 1.2em"> Github           </a> </div>
        </div>
        <div class="col-md-3">
            <div class="portfolio-item"> <span class="work-name" javascript=""></span> <a href="https://coolform.netlify.com/" class="work-img weblink" style="text-decoration: none; font-size: 1.2em; color:salmon">          <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/form.png">           <span class="info"><p class="proj-title"></p>Javascript Form</span>             </a>                    <a href="https://github.com/bklynbest/coolform" class="work-img github" style="text-decoration: none; color: DodgerBlue; font-size: 1.2em"> Github          </a> </div>
        </div>
        <div class="col-md-3">
            <div class="portfolio-item"> <span class="work-name" javascript="" |="" react=""></span> <a href="https://brianniachat.netlify.com/" class="work-img weblink" style="text-decoration: none; font-size: 1.2em; color:salmon">            <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/reactchat.png">          <span class="info"><p class="proj-title"></p>React Chat App</span>              </a>                    <a href="https://github.com/bklynbest/reactchatapp" class="work-img github" style="text-decoration: none; color: DodgerBlue; font-size: 1.2em"> Github          </a> </div>
        </div>
    </div>
</div>

<script src="js/work.js"></script>
<script src="js/script.js"></script>