Develop Reference

HTML5Up Overflow how to put links on the picture

I downloaded this html5 template for a project https://html5up.net/overflow and I dont know how to put a link for github on the pictures displayed in the gallery (those 8 ) I want that when I click the pic and expand , the next click should sent me to a link and not to scroll over the next or previous picture.I tried to check the code but i found it to complicated for my actual level to figure it out . I am hoping that i can get some help here :) thank you
EDIT: I actualy need help in this part of code
<div class="inner gallery">
<div class="row gtr-0">
<div class="col-3 col-12-mobile"><img src="images/thumbs/Pairs.png" alt="" title="A little game in"/></div>
<div class="col-3 col-12-mobile"><img src="images/thumbs/Chrome.png" alt="" title="Dressed in Clarity" /></div>
<div class="col-3 col-12-mobile"><img src="images/thumbs/MP3.png" alt="" title="Raven" /></div>
<div class="col-3 col-12-mobile"><img src="images/thumbs/Studenti.png" alt="" title="I'll have a cup of Disneyland, please" /></div>
</div>
</div>
When I click them twice I would like to send me to other links on other sites

if im understanding correctly what do you want do this
Change in your code..
Proceed as anticipated
for
Proceed as anticipated
dont forget to remove remove class="..."

Script that post image

I'm making a project, it's a website that list some events, here its preview:
https://i.imgur.com/yo20mTo.jpg
I can modify the html and css and post more events like the image above, but it's not practical if I have to alter the html every single time I want to post an event or update it.
Is there any way to make a script to do it? Like a page where I just put things like event name, date, a image and stuff, and it generate an event like in the image above?
To be more specific, an script that makes this just by typing the information I want:
<div class="item active">
<img class="img-responsive" src="imagens/aero.jpg" alt="Image">
<div class="carousel-caption">
<h3>Aerosmith em São Paulo</h3>
<p>Mais informações</p>
</div>
</div>
Like a form that it automatcly creates it:
<div class="item active">
</div>
</div>
Then i put an image:
<div class="item active">
<div class="item active">
<img class="img-responsive" src="imagens/aero.jpg" alt="Image">
<div class="carousel-caption">
</div>
</div>
and then some info about it:
<div class="item active">
<img class="img-responsive" src="imagens/aero.jpg" alt="Image">
<div class="carousel-caption">
<h3>Aerosmith em São Paulo</h3>
<p>Mais informações</p>
</div>
</div>
and finally i post it and it gets like the image above.

You are talking about building a CMS. You may want to build your own, which can be fun, but likely you will want to use something that already exists and is easy to host. One easy to use example would be Wordpress.
Alternatively you could look at a static site generator (such as hugo), which will generate html pages for you on your computer, which you can then upload to your hosting provider.
If you go the Hugo route, you will have to create a page template for each event, and then make a data file (it can use several formats like json or yml) which contains the data for every event.

Rendering images dynamically into DOM. Glitchy effect

I'm trying to dynamically render a set of questions and an image (positioned next to each other) each time a button is clicked.
I'm using bootstrap and here is my code.
<div v-if="!submittedAnswer" class="row text-center" id="questions-container">
<div class="image-holder col-sm-5">
<img :src="questions[questionIndex].imgUrl" class="img-responsive" />
</div>
<div v-for="(item,index) in questions[questionIndex].choices" class="col-sm-7 text-center choice">
<p class="shadow-effect
" :class="{'active': activeChoiceId == index}" :id="index" #click="chooseAnswer">{{item}}</p>
</div>
</div>
As can be seen both the image and the question set are rendered in their own respective columns. The issue im facing is that they load in a weird order which in turn creates a glitchy looking affect. I've managed to screenshot what happens.
Even though they are split in two separate columns. The second column seems to partially render in the area of the first column. Then when the image renders, it pushes them over, creating a buggy looking effect.
I've tried creating larger space between them with margins, padding. Or using flexbox instead but the issue still persists.

When your view renders, it renders like this:
<div class="image-holder col-sm-5">{{ image }}</div>
<div class="col-sm-7 text-center choice"">{{ answer }}</div>
<div class="col-sm-7 text-center choice"">{{ answer }}</div>
<div class="col-sm-7 text-center choice"">{{ answer }}</div>
.
.
.
Since the bootstrap grid has 12 spaces, the "col-sm-7" div blocks after the first one are rendered in a new line, because they have no more space to render.
What you need to do is to wrap all the answers inside a <div class="col-sm-7"> block, so they would render correctly. Something like this:
<div v-if="!submittedAnswer" class="row text-center" id="questions-container">
<div class="image-holder col-sm-5">
<img :src="questions[questionIndex].imgUrl" class="img-responsive" />
</div>
<div class="col-sm-7">
<div v-for="(item,index) in questions[questionIndex].choices" class="text-center choice">
<p class="shadow-effect
" :class="{'active': activeChoiceId == index}" :id="index" #click="chooseAnswer">{{item}}</p>
</div>
</div>
</div>

Why is my image path not render my image in vue.js project?

I am attempting to access an image in vue.js and render to the DOM, but it is not working.
This is the code :
<template lang="html">
<div>
<h1 class=""> {{ Tex }}</h1>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h3><b>Connect Soft documents</b></h3>
<p class="lead">Allow documents that feed into each other to provide a consistent, untainted view of the financial, operational and social behaviour of the institution.</p>
</div>
<div class="col-sm-4">
<img src="ConnectDocuments.png" alt="Documents" class="pull-right img-responsive imG" width="250" height="250">
</div>
</div>
<hr>
<div class="row">
<!-- position image to the right when on desktop,, but allow image to occupy the whole webpage when the device is less the 768px-->
<div class="col-sm-5">
<h3><b>Improve decision models</b></h3>
<p class="lead">Use statistical modelling to identify patterns and anomalies in the data that can help in
making better decisions.</p>
</div>
<div class="col-sm-6">
<img src="./assets/Statistics.png" alt="Statistics" width="350px" height="270px" class="pull-right img-responsive imG">
</div>
</div>
</div>
</div>
</template>
This is an image of the project folder to see how I am referencing the image path.

I think you misspelled ../../assets/Statistics.png

how to resize image and change view in mobile version

Here is a link to the site I am currently having issues with:
Link to the Site
as you can see at a full-size window, everything looks quite nice - like a twisted my senses graphic. And now:
As the width of the browser window falls below 1200 pictures (humanoids) "descend" one after the other.
What to do and how to do your photos to a resolution of 768px scale all like their background?
What to do and how to below 768px resolution photos arranged themselves one after another and the lyrics appeared next Featured click on a puppet loaded text using js.
I would be grateful for any suggestions.

Check the bootstrap documentation for its grid system here: http://getbootstrap.com/css/#grid-example-mixed-complete
There are 4 different types of classes col-sm col-xs col-md col-lg each one fitted for different screen sizes and you can combine them to make dynamic grids for your site.
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-3">Test col</div>
<div class="col-xs-6 col-md-4 col-lg-3">Test col</div>
<div class="col-xs-6 col-md-4 col-lg-3">Test col</div>
<div class="col-xs-6 col-md-4 col-lg-3">Test col</div>
</div>
For example the code above has different behavior on small, medium and large screens. The columns resize according to the screen size. On your source code you are only using col-lg type cols.

Since your code is not posted, and you asked for suggestions, I will give you the ones I have. first if your images are moving below each order when you go below a certain screen size/width it is because you wrote code to do that or at least you are not properly using bootstrap. Add a class of img-responsive to your images. It is a bootstrap class that helps you with image responsive designs.
Add a class of col-sm-3 to divs surrounding the images or to the images themselves, it will keep them close on one line for from lg desktops to tablets. if you want the same thing for mobile, you had a class of col-xs-3
<div class="col-sm-3">
<img src="#" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="#" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="#" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="#" class="img-responsive">
</div>