player final

Build a Music Player With Vuetify

Final product image
What You’ll Be Creating

Building apps with Vue.js is easy, fun, and enjoyable. You can build a working app with minimum effort. To prove that, today I’ll show you how easy it is to build your own full-featured music player. To make things even easier, we’ll use Vuetify.js, a Vue.js powered UI library, which will speed up the UI construction. I can almost feel your impatience, so let’s get started. 

You can find the full source code in the GitHub repo. And here is the working demo. To follow this tutorial, you should be familiar with Vue components, Vue single file components, and ES2015 syntax.

Planning the App

Every creation starts with an idea and at least some basic planning. So first we need to decide what we want to build and what functionality we want to implement. It’s said that a picture is worth a thousand words, so let’s start with a simple sketch of the music player.

Vue music player wireframe sketch

I made this wireframe so you can get a general notion of the UI we want to build. The next step is to describe the functionality we intend to implement.

As John Johnson says: 

First, solve the problem. Then, write the code.

We’ll use that as a source of wisdom, and we’ll plan the app out before we start coding it.

App Components

Vue.js is a component-based framework. So we need first to split the app into individual components (five in our case, as shown in the sketch above), and to outline the features and functionality for each of them. 

Title Bar

This component will contain the following parts:

  • a menu on the left side
  • the name of the app in the center
  • three static icons on the right side

Info Panel

This component will show basic information about the currently played track:

  • the track’s artist and title on the left side
  • the current track’s position and duration on the right side

Control Bars

This component will contain two bars, which will include all the controls necessary to manipulate the audio tracks in the player’s playlist.

  • a volume slider with an icon on the left (its appearance will change according to the volume level and when the sound is muted), and volume percentage on the right
  • buttons for playing, pausing, stopping, and skipping the tracks.
  • two buttons on the far right: one for repeating the current track, and one for shuffling the tracks’ order of playing
  • a seek bar showing the currently played track’s position, with the ability to change it with a mouse click on the bar

Playlist Panel

This component will contain the tracks’ playlist with the following functionality:

  • display a track with the proper number, artist, title, and duration properties
  • select a track on single click
  • play a track on double click

Search Bar

This component will offer search functionality in the cases when we want to find and play particular track(s).

Of course, the above outline cannot cover all the details and nuances, and this is perfectly fine. For now, it’s enough for us to get an overall picture of the final product. We’ll handle all the details and eventual challenges during the building process.

So let’s get into the fun part and write some code!

Getting Started

Vuetify’s quick start page offers plenty of options to get you started. We’ll use one of the pre-made Vue CLI templates called Webpack Simple. Run the following commands in the directory you want to use for this project:

First, install Vue CLI:

Then, create the app: 

Next, go to the app’s directory and install all dependencies: 

We’ll use Howler.js (a JavaScript audio library) to handle the audio parts of the music player. So we need to include it in the project too. Run the following command:

And finally, run the app:

The app will open on localhost:8080 in your default browser. You should see a simple Vuetify app skeleton. 

Tweaking the Template

To adjust it to our needs, we need to clean up the template and tweak it a bit. Rename the App.vue file to Player.vue, open it, delete everything inside, and add the following instead:

We wrap our music player app in the v-app component, which is required for the app to work properly. We also pass the dark prop, to apply the Vuetify dark theme.

Now, open the main.js file, delete the original content, and add the following:

Also, open the index.html file and change the content of the </code> tag to <em>Vue Music Player</em>.</p> <p>Now, in your browser, you should see an empty dark page. And voila. You are ready to start creating.</p> <p>Before you start coding, it’s good to know that Vuetify offers code snippets and autocompletion for the major code editors: VS Code, Atom, and Sublime. To get the snippets, search for the extension in your favorite editor (<code class="inline">vuetify-vscode</code>, or <code class="inline">vuetify-atom</code>, or <code class="inline">vuetify-sublime</code>).</p> <h2>Build the Title Bar Component</h2> <p>In the <strong>src</strong> directory, create a new <strong>components</strong> folder. Then, in that folder, create the <strong>PlayerTitleBar.vue</strong> file with the following content: </p> <pre class="brush: html noskimlinks noskimwords"><template> <v-system-bar window> <v-menu offset-y transition="slide-y-transition"> <v-btn flat small right slot="activator"> <v-icon>headset</v-icon> MENU </v-btn> <v-list> <v-list-tile @click="dialog = true"> <v-list-tile-title>About</v-list-tile-title> </v-list-tile> <v-dialog v-model="dialog" max-width="300"> <v-card> <v-card-title><h2>Vue Music Player</h2></v-card-title> <v-card-text>Version 1.0.0</v-card-text> <v-card-actions> <v-spacer></v-spacer> <v-btn flat @click="dialog = false">OK</v-btn> </v-card-actions> </v-card> </v-dialog> </v-list> </v-menu> <v-spacer></v-spacer> VUE MUSIC PLAYER <v-spacer></v-spacer> <v-icon>remove</v-icon> <v-icon>check_box_outline_blank</v-icon> <v-icon>close</v-icon> </v-system-bar> </template> </pre> <p>Here, we use the following Vuetify components: toolbar, menu, button, icon, list, dialog, and card. </p> <p>We separate the menu, the name, and the icons with the <code class="inline"><v-spacer></code> component. To show or hide the dialog, we create the <code class="inline">dialog: false</code> data property. Its value will toggle when we click on the <em>About</em> menu item.</p> <p>Now, in the <strong>Player.vue</strong> file, import the title bar component, register it in the components object, and add it in the template.</p> <pre class="brush: html noskimlinks noskimwords"><template> <v-app dark> <v-content> <v-container> <player-title-bar></player-title-bar> // ADD the component in the template </v-container> </v-content> </v-app> </template> </pre> <p>Now, check the result in your browser. You should see the following:</p> <figure class="post_image"><img alt="The player title bar" data-src="https://cms-assets.tutsplus.com/uploads/users/2028/posts/31228/image/player_title_bar.png"></figure> <p>We’ll repeat these three steps for the other four components. So when in the next sections I tell you to import, register and add a component in the template, you should follow the same procedure described here.</p> <h2>Build the Playlist Component<br /></h2> <p>In the root directory, create a new <strong>playlist</strong> folder and add the audio files you want to play. The file names must be written with underscores between the words and a <strong>.mp3</strong> extension at the end—for example, <strong>Remember_the_Way.mp3</strong>. Now, create an audio tracks array inside <strong>Player.vue</strong>‘s data object: </p> <pre class="brush: javascript noskimlinks noskimwords">playlist: [ {title: "Streets of Sant'Ivo", artist: "Ask Again", howl: null, display: true}, {title: "Remember the Way", artist: "Ask Again", howl: null, display: true}, ... ]</pre> <p>Each track has <code class="inline">title</code> and <code class="inline">artist</code> properties, a <code class="inline">howl</code> object set to <code class="inline">null</code>, and a <code class="inline">display</code> property set to <code class="inline">true</code>. </p> <p>The <code class="inline">display</code> property will be used when we implement the search functionality. Now it is set to <code class="inline">true</code> for all tracks, so all of them are visible.</p> <p>Howler wraps an audio file in a <code class="inline">howl</code> object. We set <code class="inline">howl</code> to <code class="inline">null</code> because we’ll populate it dynamically at the creation of the Vue instance. To do that, we use the Vue’s <code class="inline">created</code> lifecycle hook. </p> <pre class="brush: javascript noskimlinks noskimwords">created: function () { this.playlist.forEach( (track) => { let file = track.title.replace(/s/g, "_") track.howl = new Howl({ src: [`./playlist/${file}.mp3`] }) }) }</pre> <p>This will set a new <code class="inline">Howl</code> object for each track in the playlist.</p> <p>Now, create the <strong>PlayerPlaylistPanel.vue</strong> component and add this inside: </p> <pre class="brush: html noskimlinks noskimwords"><template> <v-card height="330"> <v-list> <v-list-tile v-for="(track, index) in playlist" :key="track.title" v-show="track.display"> <v-list-tile-content> <v-list-tile-title>{{ index }} {{ track.artist }} - {{ track.title }}</v-list-tile-title> </v-list-tile-content> <v-spacer></v-spacer> {{ track.howl.duration() }} </v-list-tile> </v-list> </v-card> </template> </pre> <p>First, we pass the prop <code class="inline">playlist</code> from the <strong>Player.vue</strong> file. Next, in the template, we go through each track with the <code class="inline">v-for</code> directive and display the track’s index, followed by the track’s artist and title, and the duration of the track on the far right. We also use <code class="inline">v-show</code> bound to the <code class="inline">display</code> property. A track will be visible only if <code class="inline">display</code> is <code class="inline">true</code>.</p> <p>Now, in the <strong>Player.vue</strong> file, we import, register, and add the playlist component in the template. Then, we bind the <code class="inline">playlist</code> prop to the <code class="inline">playlist</code> data property like this: <code class="inline"><player-playlist-panel :playlist="playlist"></player-playlist-panel></code>.</p> <p>Let’s check the result in the browser:</p> <figure class="post_image"><img alt="The player playlist panel" data-src="https://cms-assets.tutsplus.com/uploads/users/2028/posts/31228/image/player_playlist_panel.png"></figure> <p>There are two problems here. First, the numbers of the tracks are not correct, and second, the track’s duration is shown in milliseconds, but we want it to be in minutes. We’ll fix each of these issues by creating a formatting filter. </p> <p>In the <strong>main.js</strong> file, create a <code class="inline">numbers</code> filter and a <code class="inline">minutes</code> filter, which will be globally accessible. Next, in <strong>PlayerPlaylistPanel.vue</strong>, we use them like this: <code class="inline">{{ index | numbers }}</code> and <code class="inline">{{ track.howl.duration() | minutes }}</code>.</p> <p>Now, if you check the app, everything should display correctly. </p> <figure class="post_image"><img alt="The player playlist panel with fixed numbers and minutes" data-src="https://cms-assets.tutsplus.com/uploads/users/2028/posts/31228/image/player_playlist_panel_fixed.png"></figure> <h3>Make Tracks Selectable<br /></h3> <p>In the <strong>Player.vue</strong> file, add the <code class="inline">selectedTrack: null</code> data property and bind it to the playlist component (<code class="inline">:selectedTrack="selectedTrack"</code>). Then, we pass the prop in the <strong>PlayerPlaylistPanel.vue</strong> file (<code class="inline">selectedTrack: Object</code>).  </p> <p>We also add a click event listener to <code class="inline"><v-list-tile-content @click="selectTrack(track)"></code> and then create the <code class="inline">selectTrack()</code> method:</p> <pre class="brush: javascript noskimlinks noskimwords">methods: { selectTrack (track) { this.$emit('selecttrack', track) } } </pre> <p>Now, back in <code class="inline">Player.vue</code>, add the <code class="inline">selecttrack</code> event to the playlist component (<code class="inline">@selecttrack="selectTrack"</code>) and create the <code class="inline">selectTrack()</code> method:</p> <pre class="brush: javascript noskimlinks noskimwords">selectTrack (track) { this.selectedTrack = track }</pre> <p>Now, if you go to the playlist and click on a track, it will be selected. We can’t see it, but we can prove it in the Vue DevTools. In the following screenshot, the second track is selected:</p> <figure class="post_image"><img alt="The player playlist with selected track shown in DevTools " data-src="https://cms-assets.tutsplus.com/uploads/users/2028/posts/31228/image/player_playlist_selected_track.png"></figure> <h4>Row and Selection Styling</h4> <p>The next step is to make the selection visible. To do it, we’ll bind a class which will color the selected track in orange and another class which will make even rows darker to make the tracks more distinguishable. Put the following after the <code class="inline">v-show</code> directive:</p> <pre class="brush: html noskimlinks noskimwords">:class="[{selected: track === selectedTrack}, {even: index % 2 == 0}]" </pre> <p>We’ll also add another class, which will show a scrollbar when the list gets too big.</p> <pre class="brush: html noskimlinks noskimwords"><v-card height="330" :class="{playlist}"></pre> <p>We add the necessary classes at the end of the file. </p> <pre class="brush: css noskimlinks noskimwords"><style scoped> .selected { background-color: orange !important; } .even { background-color: #505050 } .playlist { overflow: auto } </style></pre> <p>And that’s it. Now, the selected track is highlighted in orange.</p> <figure class="post_image"><img alt="The player playlist with selected track colored" data-src="https://cms-assets.tutsplus.com/uploads/users/2028/posts/31228/image/player_playlist_selected_track_color.png"></figure> <p>We’ll add the double click play functionality at the end of the next section.</p> <h2>Build the Player Controls Component<br /></h2> <p>Let’s create the player controls now. We’ll start with the play, pause, and stop buttons. </p> <h3>Add the Play, Pause, and Stop Buttons<br /></h3> <p>Create the <strong>PlayerControlsBars.vue</strong> component and add this inside: </p> <pre class="brush: html noskimlinks noskimwords"><template> <div> <v-toolbar flat height=90> <v-spacer></v-spacer> <v-btn outline fab small color="light-blue" @click="stopTrack"> <v-icon>stop</v-icon> </v-btn> <v-btn outline fab color="light-blue" @click="playTrack()"> <v-icon large>play_arrow</v-icon> </v-btn> <v-btn outline fab small color="light-blue" @click="pauseTrack"> <v-icon>pause</v-icon> </v-btn> <v-spacer></v-spacer> </v-toolbar> </div> </template></pre> <p>Here, we use the Vuetify toolbar component.</p> <p>There are three buttons with registered click event listeners. Let’s create the methods for them: </p> <pre class="brush: javascript noskimlinks noskimwords">methods: { playTrack(index) { this.$emit('playtrack', index) }, pauseTrack() { this.$emit('pausetrack') }, stopTrack() { this.$emit('stoptrack') } }</pre> <p>Now, in the <strong>Player.vue</strong> file, import, register, and add the component in the template. Then, register the event listeners (<code class="inline">@playtrack="play"</code>, <code class="inline">@pausetrack="pause"</code>, <code class="inline">@stoptrack="stop"</code>).</p> <p>Next, create the <code class="inline">index: 0</code> data property, which will hold the index of the current track. Then, create a computed <code class="inline">currentTrack()</code>: </p> <pre class="brush: javascript noskimlinks noskimwords">computed: { currentTrack () { return this.playlist[this.index] } }</pre> <p>And now we can start to create the <code class="inline">play</code>, <code class="inline">pause</code>, and <code class="inline">stop</code> methods. We’ll start with the <code class="inline">play()</code> method, but before that we need to create the <code class="inline">playing: false</code> data property, which will indicate whether the track is playing or not. Add the following code for the <code class="inline">play()</code> method:</p> <pre class="brush: javascript noskimlinks noskimwords">play (index) { let selectedTrackIndex = this.playlist.findIndex(track => track === this.selectedTrack) if (typeof index === 'number') { index = index } else if (this.selectedTrack) { if (this.selectedTrack != this.currentTrack) { this.stop() } index = selectedTrackIndex } else { index = this.index } let track = this.playlist[index].howl if (track.playing()) { return } else { track.play() } this.selectedTrack = this.playlist[index] this.playing = true this.index = index }</pre> <p>The method takes an index as the parameter, which specifies the track to be played. First, we get the index of the selected track. Then, we make some checks to determine the value of the <code class="inline">index</code>. If an index is provided as an argument and it’s a number, then we use it. If a track is selected, we use the index of the selected track. If the selected track is different from the current one, we use the <code class="inline">stop()</code> method to stop the current one. Finally, if neither an index argument is passed nor a track is selected, we use the value of the <code class="inline">index</code> data property.</p> <p>Next, we get the howl (based on the index value) for the track and check whether it is playing. If it is, we return nothing; if it’s not, we play it. </p> <p>Finally, we update the <code class="inline">selectedTrack</code>, <code class="inline">playing</code> and <code class="inline">index</code> data properties.</p> <p>Let’s now create the <code class="inline">pause()</code> and <code class="inline">stop()</code> methods. </p> <pre class="brush: javascript noskimlinks noskimwords">pause () { this.currentTrack.howl.pause() this.playing = false }, stop () { this.currentTrack.howl.stop() this.playing = false }</pre> <p>Here, we just pause or stop the current track and update the <code class="inline">playing</code> data property.</p> <p>Let’s also make a track start playing on double click.</p> <p>Add <code class="inline">@dblclick="playTrack()"</code> to <code class="inline"><v-list-tile-content></code> in the <strong>PlayerPlaylistPanel.vue</strong> and create the <code class="inline">playTrack()</code> method:</p> <pre class="brush: javascript noskimlinks noskimwords">playTrack(index) { this.$emit('playtrack', index) }</pre> <p>Register the listener <code class="inline">@playtrack="play"</code> in the <strong>Player.vue</strong> file and voila.</p> <h3>Add the Previous and Next Buttons</h3> <p>Let’s now add the previous and next buttons.</p> <pre class="brush: html noskimlinks noskimwords"><v-btn outline fab small color="light-blue" @click="skipTrack('prev')"> <v-icon>skip_previous</v-icon> </v-btn> <!-- stop, play, and pause buttons are here --> <v-btn outline fab small color="light-blue" @click="skipTrack('next')"> <v-icon>skip_next</v-icon> </v-btn></pre> <p>Create the <code class="inline">skipTrack()</code> method:</p> <pre class="brush: javascript noskimlinks noskimwords">skipTrack (direction) { this.$emit('skiptrack', direction) }</pre> <p>Register the event listener (<code class="inline">@skiptrack="skip"</code>) in <strong>Player.vue</strong>.</p> <p>And create the <code class="inline">skip()</code> method:</p> <pre class="brush: javascript noskimlinks noskimwords">skip (direction) { let index = 0 if (direction === "next") { index = this.index + 1 if (index >= this.playlist.length) { index = 0 } } else { index = this.index - 1 if (index < 0) { index = this.playlist.length - 1 } } this.skipTo(index) }, skipTo (index) { if (this.currentTrack) { this.currentTrack.howl.stop() } this.play(index) }</pre> <p>We first check if the direction is <code class="inline">next</code>. If so, we increment the index by 1. And if the index gets bigger than the last index in the array, then we start again from zero. When the direction is <code class="inline">prev</code>, we decrement the index by 1. And if the index is less than zero, then we use the last index. At the end, we use the <code class="inline">index</code> as an argument for the <code class="inline">skipTo()</code> method. It stops the current track and plays the next or previous.</p> <p>Here is how the player looks with the buttons:</p> <figure class="post_image"><img alt="The player play buttons" data-src="https://cms-assets.tutsplus.com/uploads/users/2028/posts/31228/image/player_controls_play_buttons.png"></figure> <h3>Add the Volume Slider<br /></h3> <p>Add the following before all the buttons:</p> <pre class="brush: html noskimlinks noskimwords"><v-slider v-model="volume" @input="updateVolume(volume)" max="1" step="0.1"></v-slider></pre> <p>Here, we use the Vuetify slider component.</p> <p>Add the <code class="inline">volume: 0.5</code> data property, and then create the <code class="inline">updateVolume()</code> method:</p> <pre class="brush: javascript noskimlinks noskimwords">updateVolume (volume) { Howler.volume(volume) }</pre> <p>Here, we use the global Howler object to set the volume globally for all howls.</p> <p>Also, we need to sync the initial Howler volume, which by default is set to 1, to the <code class="inline">volume</code> property. If you don't do it, the volume will show 0.5 but will be 1 initially. To do that, we'll use the <code class="inline">created</code> hook again:</p> <pre class="brush: javascript noskimlinks noskimwords">created: function () { Howler.volume(this.volume) }</pre> <p>We want to see the volume level as a percentage on the right of the volume slider, so we add this in the template: <code class="inline">{{this.volume * 100 + '%'}}</code> </p> <h3>Add the Mute Button </h3> <p>Now, we add a volume icon before the slider. </p> <pre class="brush: html noskimlinks noskimwords"><v-btn flat icon @click="toggleMute"> <template v-if="!this.muted"> <v-icon v-if="this.volume >= 0.5">volume_up</v-icon> <v-icon v-else-if="this.volume > 0">volume_down</v-icon> <v-icon v-else>volume_mute</v-icon> </template> <v-icon v-show="this.muted">volume_off</v-icon> </v-btn></pre> <p>The icon will change according to the values of the <code class="inline">volume</code> and <code class="inline">muted</code> properties.</p> <p>Add the <code class="inline">muted: false</code> data property and create the <code class="inline">toggleMute()</code> method:</p> <pre class="brush: javascript noskimlinks noskimwords">toggleMute () { Howler.mute(!this.muted) this.muted = !this.muted }</pre> <p>We use the global Howler object again to set the mute globally, and then we toggle the <code class="inline">muted</code> value. </p> <p>In the screenshot below, you can see how the volume slider should look:</p> <figure class="post_image"><img alt="The player volume slider" data-src="https://cms-assets.tutsplus.com/uploads/users/2028/posts/31228/image/player_controls_volume_slider.png"></figure> <h3>Add the Repeat Button</h3> <p>Add the following after all the buttons:</p> <pre class="brush: html noskimlinks noskimwords"><v-btn flat icon @click="toggleLoop"> <v-icon color="light-blue" v-if="this.loop">repeat_one</v-icon> <v-icon color="blue-grey" v-else>repeat_one</v-icon> </v-btn></pre> <p>Add the <code class="inline">loop: false</code> property in <strong>Player.vue</strong>, bind it <code class="inline">:loop="loop"</code> and pass the prop (<code class="inline">loop: Boolean</code>) in <strong>PlayerControlsBars.vue</strong>. </p> <p>Now, let's create the <code class="inline">toggleLoop()</code> method:</p> <pre class="brush: javascript noskimlinks noskimwords">toggleLoop () { this.$emit('toggleloop', !this.loop) }</pre> <p>Now, back in <strong>Player.vue</strong>, register the event listener (<code class="inline">@toggleloop="toggleLoop"</code>) and create the <code class="inline">toggleLoop()</code> method:</p> <pre class="brush: javascript noskimlinks noskimwords">toggleLoop (value) { this.loop = value }</pre> <p>At this point, we face a small problem. When a track seeks the end, it just stops. The player doesn't move to the next track, nor does it repeat the current track. To fix that, we need to add the following to the <code class="inline">created</code> function after the <code class="inline">src</code> property:</p> <pre class="brush: javascript noskimlinks noskimwords">onend: () => { if (this.loop) { this.play(this.index) } else { this.skip('next') } }</pre> <p>Now, when the <code class="inline">loop</code> is on, the current track will be repeated. If it's off, the player will move on the next track.</p> <h3>Add the Shuffle Button</h3> <p>Add the following after the repeat button:</p> <pre class="brush: html noskimlinks noskimwords"><v-btn flat icon @click="toggleShuffle"> <v-icon color="light-blue" v-if="this.shuffle">shuffle</v-icon> <v-icon color="blue-grey" v-else>shuffle</v-icon> </v-btn></pre> <p>Add the <code class="inline">shuffle: false</code> property in <code class="inline">Player.vue</code>, bind it (<code class="inline">:shuffle="shuffle"</code>), and pass the prop (<code class="inline">shuffle: Boolean</code>) in <code class="inline">PlayerControlsBars.vue</code>. </p> <p>Now, let's create the <code class="inline">toggleShuffle()</code> method;</p> <pre class="brush: javascript noskimlinks noskimwords">toggleShuffle () { this.$emit('toggleshuffle', !this.shuffle) }</pre> <p>Now, back in <strong>Player.vue</strong>, register the event listener (<code class="inline">@toggleshuffle="toggleShuffle"</code>) and create the <code class="inline">toggleShuffle()</code> method:</p> <pre class="brush: javascript noskimlinks noskimwords">toggleShuffle (value) { this.shuffle = value }</pre> <p>Now, add the following to the <code class="inline">skip()</code> method after <code class="inline">index = 0</code>:</p> <pre class="brush: javascript noskimlinks noskimwords">lastIndex = this.playlist.length - 1 if (this.shuffle) { index = Math.round(Math.random() * lastIndex) while (index === this.index) { index = Math.round(Math.random() * lastIndex) } } else if (direction === "next") { ...</pre> <p>Here's how your app should look now:</p> <figure class="post_image"><img alt="The player repeat and shuffle buttons" data-src="https://cms-assets.tutsplus.com/uploads/users/2028/posts/31228/image/player_controls_repeat_shuffle_buttons.png"></figure> <h3>Add the Seek Bar</h3> <p>First, in <strong>Player.vue</strong>, create the <code class="inline">seek: 0</code> property. Then we'll need to watch the <code class="inline">playing</code> property in order to update the seek.</p> <pre class="brush: javascript noskimlinks noskimwords">watch: { playing(playing) { this.seek = this.currentTrack.howl.seek() let updateSeek if (playing) { updateSeek = setInterval(() => { this.seek = this.currentTrack.howl.seek() }, 250) } else { clearInterval(updateSeek) } }, }</pre> <p>This will update the seek value four times per second.</p> <p>Now, create a computed <code class="inline">progress()</code>:</p> <pre class="brush: javascript noskimlinks noskimwords">progress () { if (this.currentTrack.howl.duration() === 0) return 0 return this.seek / this.currentTrack.howl.duration() }</pre> <p>Bind it (<code class="inline">:progress="progress"</code>) in the template. </p> <p>Now, in <strong>PlayerControlsBars.vue</strong>, pass the <code class="inline">progress</code> prop (<code class="inline">progress: Number</code>) and add another toolbar below the one we've already created:</p> <pre class="brush: html noskimlinks noskimwords"><v-toolbar flat height="40"> <v-progress-linear height="40" v-model="trackProgress" @click="updateSeek($event)"></v-progress-linear> </v-toolbar></pre> <p>Here, we use the Vuetify progress component.</p> <p>Create a computed <code class="inline">trackProgress()</code>, which will get the track's progress as a percentage.</p> <pre class="brush: javascript noskimlinks noskimwords">computed: { trackProgress () { return this.progress * 100 }, }</pre> <p>And now, create the <code class="inline">updateSeek()</code> method: </p> <pre class="brush: javascript noskimlinks noskimwords">updateSeek (event) { let el = document.querySelector(".progress-linear__bar"), mousePos = event.offsetX, elWidth = el.clientWidth, percents = (mousePos / elWidth) * 100 this.$emit('updateseek', percents) } </pre> <p>Here, we get the progress bar element, which uses the <code class="inline">.progress-linear__bar</code> class. I found this with the Browser DevTools. Next, we get the mouse position and the width of the bar. Then, we get the mouse click position as a percentage.</p> <p>Back in <strong>Player.vue</strong>, add and register the event listener (<code class="inline">@updateseek="setSeek"</code>) and create the <code class="inline">setSeek()</code> method:</p> <pre class="brush: javascript noskimlinks noskimwords">setSeek (percents) { let track = this.currentTrack.howl if (track.playing()) { track.seek((track.duration() / 100) * percents) } }</pre> <p>And boom! You can use your mouse to change the position of the played track.</p> <h2>Build the Info Panel Component</h2> <p>Create the <strong>PlayerInfoPanel.vue</strong> file with the following content:</p> <pre class="brush: html noskimlinks noskimwords"><template> <v-card height="60"> <v-card-title> <h2>{{ trackInfo.artist }} - {{ trackInfo.title }}</h2> <v-spacer></v-spacer> <h3>{{trackInfo.seek | minutes}}/{{trackInfo.duration | minutes}}</h3> </v-card-title> </v-card> </template> </pre> <p>Here, we pass a prop <code class="inline">trackInfo</code>, which we use to populate the track information in our component.</p> <p>Now, back in <strong>Player.vue</strong>, import, register and add the component in the template. </p> <p>Then, create a computed <code class="inline">getTrackInfo()</code>: </p> <pre class="brush: javascript noskimlinks noskimwords">getTrackInfo () { let artist = this.currentTrack.artist, title = this.currentTrack.title, seek = this.seek, duration = this.currentTrack.howl.duration() return { artist, title, seek, duration, } }</pre> <p>Next, we bind it in the template (<code class="inline">:trackInfo="getTrackInfo"</code>) and voila. We get some basic info for the currently played track, as you can see in the screenshot below.</p> <figure class="post_image"><img alt="The player info panel" data-src="https://cms-assets.tutsplus.com/uploads/users/2028/posts/31228/image/player_info_panel.png"></figure> <h2>Build the Search Bar Component</h2> <p>Create the <strong>PlayerSearchBar.vue</strong> file with the following content: </p> <pre class="brush: html noskimlinks noskimwords"><template> <v-toolbar flat> <v-text-field clearable prepend-icon="search" placeholder="Quick search" v-model="searchString" @input="searchPlaylist"> </v-text-field> <v-spacer></v-spacer> </v-toolbar> </template> </pre> <p>We create a text field and add the <code class="inline">clearable</code> prop to show a clearing icon when we type something.</p> <p>By using <code class="inline">v-model</code>, we bind it to the <code class="inline">searchString</code>, which is an empty string initially. And we add an input event listener.</p> <p>We also pass the <code class="inline">playlist</code> prop, which we use in the <code class="inline">searchPlaylist()</code> method. In this method, we use the <code class="inline">display</code> property and turn it <code class="inline">off</code> for each track where the title or artist doesn't match the search string, and we keep it or turn it <code class="inline">on</code> for all matches. Finally, if the search string is empty or equal to <code class="inline">null</code>, which happens when we clear the field with the clear button, we turn <code class="inline">on</code> the <code class="inline">display</code> for all tracks.</p> <p>Now, back in <strong>Player.vue</strong>, import, register and add the component in the template. </p> <p>Bind the playlist property (<code class="inline">:playlist="playlist"</code>) and check the functionality. Here is how it should look in action:</p> <figure class="post_image"><img alt="The player search bar test" data-src="https://cms-assets.tutsplus.com/uploads/users/2028/posts/31228/image/player_search_bar_test.png"></figure> <h2>Some Improvement Ideas</h2> <p>As you can see, with a clear goal and proper planning, building a Vue/Vuetify app can be really easy and enjoyable. You now have a working music player which you can use during your relaxation or coding time. Of course, there is always room for further improvements and additions, so here are some ideas you can try out to make the player even more feature-rich: </p> <ul> <li>multiple playlist support</li> <li>ability to add or remove tracks from the playlist</li> <li>drag-and-drop support</li> <li>ability to sort the tracks</li> <li>audio visualization </li> </ul> <h2>Conclusion</h2> <p>In this tutorial, we saw how easy and enjoyable it can be to build an app with Vue.js, and with Vuetify.js in particular. I hope you enjoyed building this player as much as I did. I'll be glad to see your own improved version of the player. So if you create one, just drop a demo link in the comments!</p> <div class="mediafed_ad"><img border="0" height="1" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" width="1" data-lazy-src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/31228/sc/4/mf.gif"><noscript><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/31228/sc/4/mf.gif" width="1"></noscript><img border="0" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/31228/a2.img"><noscript><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/31228/a2.img"></noscript><img border="0" height="1" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" width="1" data-lazy-src="http://pi.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/31228/a2t.img"><noscript><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/31228/a2t.img" width="1"></noscript></div> </div> <p class="wpematico_credit"><small>Powered by <a href="http://www.wpematico.com" target="_blank">WPeMatico</a></small></p> <div data-animation="no-animation" data-icons-animation="no-animation" data-overlay="on" data-change-size="" data-button-size="1" style="font-size:1em!important;display:none;" class="supsystic-social-sharing supsystic-social-sharing-package-flat supsystic-social-sharing-hide-on-homepage supsystic-social-sharing-hide-on-mobile supsystic-social-sharing-spacing supsystic-social-sharing-content supsystic-social-sharing-content-align-left" data-text=""><a data-networks="[]" class="social-sharing-button sharer-flat sharer-flat-3 counter-standard without-counter facebook" target="_blank" title="Facebook" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.medianic.co.uk%2Fbuild-a-music-player-with-vuetify%2F" data-main-href="http://www.facebook.com/sharer.php?u={url}" data-nid="1" data-name="" data-pid="1" data-post-id="3560" data-url="http://www.medianic.co.uk/wp-admin/admin-ajax.php" data-description="Build a Music Player With Vuetify" rel="nofollow" data-mailto=""><i class="fa-ssbs fa-ssbs-fw fa-ssbs-facebook"></i><div class="counter-wrap standard"><span class="counter">0</span></div></a><a data-networks="[]" class="social-sharing-button sharer-flat sharer-flat-3 counter-standard without-counter twitter" target="_blank" title="Twitter" href="https://twitter.com/share?url=http%3A%2F%2Fwww.medianic.co.uk%2Fbuild-a-music-player-with-vuetify%2F&text=Build+a+Music+Player+With+Vuetify" data-main-href="https://twitter.com/share?url={url}&text={title}" data-nid="2" data-name="" data-pid="1" data-post-id="3560" data-url="http://www.medianic.co.uk/wp-admin/admin-ajax.php" data-description="Build a Music Player With Vuetify" rel="nofollow" data-mailto=""><i class="fa-ssbs fa-ssbs-fw fa-ssbs-twitter"></i><div class="counter-wrap standard"><span class="counter">0</span></div></a><a data-networks="[]" class="social-sharing-button sharer-flat sharer-flat-3 counter-standard without-counter googleplus" target="_blank" title="Google+" href="https://plus.google.com/share?url=http%3A%2F%2Fwww.medianic.co.uk%2Fbuild-a-music-player-with-vuetify%2F" data-main-href="https://plus.google.com/share?url={url}" data-nid="3" data-name="" data-pid="1" data-post-id="3560" data-url="http://www.medianic.co.uk/wp-admin/admin-ajax.php" data-description="Build a Music Player With Vuetify" rel="nofollow" data-mailto=""><i class="fa-ssbs fa-ssbs-fw fa-ssbs-google-plus"></i><div class="counter-wrap standard"><span class="counter">0</span></div></a><a data-networks="[]" class="social-sharing-button sharer-flat sharer-flat-3 counter-standard without-counter digg" target="_blank" title="Digg" href="http://digg.com/submit?url=http%3A%2F%2Fwww.medianic.co.uk%2Fbuild-a-music-player-with-vuetify%2F&title=Build+a+Music+Player+With+Vuetify" data-main-href="http://digg.com/submit?url={url}&title={title}" data-nid="8" data-name="" data-pid="1" data-post-id="3560" data-url="http://www.medianic.co.uk/wp-admin/admin-ajax.php" data-description="Build a Music Player With Vuetify" rel="nofollow" data-mailto=""><i class="fa-ssbs fa-ssbs-fw fa-ssbs-digg"></i><div class="counter-wrap standard"><span class="counter">0</span></div></a><a data-networks="[]" class="social-sharing-button sharer-flat sharer-flat-3 counter-standard without-counter linkedin" target="_blank" title="Linkedin" href="https://www.linkedin.com/shareArticle?mini=true&title=Build+a+Music+Player+With+Vuetify&url=http%3A%2F%2Fwww.medianic.co.uk%2Fbuild-a-music-player-with-vuetify%2F" data-main-href="https://www.linkedin.com/shareArticle?mini=true&title={title}&url={url}" data-nid="13" data-name="" data-pid="1" data-post-id="3560" data-url="http://www.medianic.co.uk/wp-admin/admin-ajax.php" data-description="Build a Music Player With Vuetify" rel="nofollow" data-mailto=""><i class="fa-ssbs fa-ssbs-fw fa-ssbs-linkedin"></i><div class="counter-wrap standard"><span class="counter">0</span></div></a><a data-networks="[]" class="social-sharing-button sharer-flat sharer-flat-3 counter-standard without-counter delicious" target="_blank" title="Delicious" href="https://del.icio.us/save?v=5&jump=close&url=http%3A%2F%2Fwww.medianic.co.uk%2Fbuild-a-music-player-with-vuetify%2F&title=Build+a+Music+Player+With+Vuetify" data-main-href="https://del.icio.us/save?v=5&jump=close&url={url}&title={title}" data-nid="10" data-name="" data-pid="1" data-post-id="3560" data-url="http://www.medianic.co.uk/wp-admin/admin-ajax.php" data-description="Build a Music Player With Vuetify" rel="nofollow" data-mailto=""><i class="fa-ssbs fa-ssbs-fw fa-ssbs-delicious"></i><div class="counter-wrap standard"><span class="counter">0</span></div></a></div><!-- AI CONTENT END 2 --> </div><!-- .entry-content .clear --> </div> </article><!-- #post-## --> <nav class="navigation post-navigation" role="navigation" aria-label="Posts"> <span class="screen-reader-text">Post navigation</span> <div class="nav-links"><div class="nav-previous"><a href="http://www.medianic.co.uk/20-best-bootstrap-4-plugins/" rel="prev"><span class="ast-left-arrow">←</span> Previous Post</a></div><div class="nav-next"><a href="http://www.medianic.co.uk/set-up-routing-in-php-applications-using-the-symfony-routing-component/" rel="next">Next Post <span class="ast-right-arrow">→</span></a></div></div> </nav> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a Comment <small><a rel="nofollow" id="cancel-comment-reply-link" href="/build-a-music-player-with-vuetify/#respond" style="display:none;">Cancel Reply</a></small></h3><p class="must-log-in">You must be <a href="http://www.medianic.co.uk/wp-login.php?redirect_to=http%3A%2F%2Fwww.medianic.co.uk%2Fbuild-a-music-player-with-vuetify%2F">logged in</a> to post a comment.</p> </div><!-- #respond --> </div><!-- #comments --> <div class='code-block code-block-2' style='margin: 8px 0; clear: both;'> <script type="rocketlazyloadscript" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0143475477975142" crossorigin="anonymous"></script> <!-- Medianic 2 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-0143475477975142" data-ad-slot="5286066963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script type="rocketlazyloadscript"> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> </main><!-- #main --> </div><!-- #primary --> <div class="widget-area secondary" id="secondary" itemtype="https://schema.org/WPSideBar" itemscope="itemscope"> <div class="sidebar-main" > <aside id="search-2" class="widget widget_search"><form role="search" method="get" class="search-form" action="http://www.medianic.co.uk/"> <label> <span class="screen-reader-text">Search for:</span> <input type="search" class="search-field" placeholder="Search …" value="" name="s" tabindex="-1"> </label> <input type="submit" class="search-submit" value="Search"> </form> </aside> <style> .rpwe-block ul { list-style: none !important; margin-left: 0 !important; padding-left: 0 !important; } .rpwe-block li { border-bottom: 1px solid #eee; margin-bottom: 10px; padding-bottom: 10px; list-style-type: none; } .rpwe-block a { display: inline !important; text-decoration: none; } .rpwe-block h3 { background: none !important; clear: none; margin-bottom: 0 !important; margin-top: 0 !important; font-weight: 400; font-size: 12px !important; line-height: 1.5em; } .rpwe-thumb { border: 1px solid #EEE !important; box-shadow: none !important; margin: 2px 10px 2px 0; padding: 3px !important; } .rpwe-summary { font-size: 12px; } .rpwe-time { color: #bbb; font-size: 11px; } .rpwe-comment { color: #bbb; font-size: 11px; padding-left: 5px; } .rpwe-alignleft { display: inline; float: left; } .rpwe-alignright { display: inline; float: right; } .rpwe-aligncenter { display: block; margin-left: auto; margin-right: auto; } .rpwe-clearfix:before, .rpwe-clearfix:after { content: ""; display: table !important; } .rpwe-clearfix:after { clear: both; } .rpwe-clearfix { zoom: 1; } </style> <aside id="rpwe_widget-2" class="widget rpwe_widget recent-posts-extended"><h2 class="widget-title">Recent Posts</h2><div class="rpwe-block "><ul class="rpwe-ul"><li class="rpwe-li rpwe-clearfix"><a class="rpwe-img" href="http://www.medianic.co.uk/top-15-wireframing-tools-for-web-designers/"><picture><source data-lazy-srcset="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/webp-express/webp-images/uploads/2021/11/Mockingbird-45x45.png.webp" type="image/webp"><img class="rpwe-alignleft rpwe-thumb webpexpress-processed" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2045%2045'%3E%3C/svg%3E" alt="Top 15 Wireframing Tools for Web Designers" height="45" width="45" data-lazy-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:45/h:45/q:90/rt:fill/g:ce/http://www.medianic.co.uk/wp-content/uploads/2021/11/Mockingbird.png"><noscript><img decoding=async class="rpwe-alignleft rpwe-thumb webpexpress-processed" src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:45/h:45/q:90/rt:fill/g:ce/http://www.medianic.co.uk/wp-content/uploads/2021/11/Mockingbird.png" alt="Top 15 Wireframing Tools for Web Designers" height="45" width="45"></noscript></picture></a><h3 class="rpwe-title"><a href="http://www.medianic.co.uk/top-15-wireframing-tools-for-web-designers/" title="Permalink to Top 15 Wireframing Tools for Web Designers" rel="bookmark">Top 15 Wireframing Tools for Web Designers</a></h3><time class="rpwe-time published" datetime="2021-11-26T16:00:12+00:00">26th November 2021</time></li><li class="rpwe-li rpwe-clearfix"><a class="rpwe-img" href="http://www.medianic.co.uk/where-to-find-the-best-avatar-graphics-or-simply-create-your-own/"><picture><source data-lazy-srcset="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/webp-express/webp-images/uploads/2021/11/Limitless-designs-45x45.png.webp" type="image/webp"><img class="rpwe-alignleft rpwe-thumb webpexpress-processed" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2045%2045'%3E%3C/svg%3E" alt="Where to Find the Best Avatar Graphics, Or Simply Create Your Own" height="45" width="45" data-lazy-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:45/h:45/q:90/rt:fill/g:ce/http://www.medianic.co.uk/wp-content/uploads/2021/11/Limitless-designs.png"><noscript><img decoding=async class="rpwe-alignleft rpwe-thumb webpexpress-processed" src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:45/h:45/q:90/rt:fill/g:ce/http://www.medianic.co.uk/wp-content/uploads/2021/11/Limitless-designs.png" alt="Where to Find the Best Avatar Graphics, Or Simply Create Your Own" height="45" width="45"></noscript></picture></a><h3 class="rpwe-title"><a href="http://www.medianic.co.uk/where-to-find-the-best-avatar-graphics-or-simply-create-your-own/" title="Permalink to Where to Find the Best Avatar Graphics, Or Simply Create Your Own" rel="bookmark">Where to Find the Best Avatar Graphics, Or Simply Create Your Own</a></h3><time class="rpwe-time published" datetime="2021-11-24T15:31:11+00:00">24th November 2021</time></li><li class="rpwe-li rpwe-clearfix"><a class="rpwe-img" href="http://www.medianic.co.uk/10-retro-website-designs-to-inspire-your-next-web-project/"><picture><source data-lazy-srcset="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/webp-express/webp-images/uploads/2021/11/Kalso-45x45.jpg.webp" type="image/webp"><img class="rpwe-alignleft rpwe-thumb webpexpress-processed" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2045%2045'%3E%3C/svg%3E" alt="10 Retro Website Designs to Inspire Your Next Web Project" height="45" width="45" data-lazy-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:45/h:45/q:90/rt:fill/g:ce/http://www.medianic.co.uk/wp-content/uploads/2021/11/Kalso.jpg"><noscript><img decoding=async class="rpwe-alignleft rpwe-thumb webpexpress-processed" src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:45/h:45/q:90/rt:fill/g:ce/http://www.medianic.co.uk/wp-content/uploads/2021/11/Kalso.jpg" alt="10 Retro Website Designs to Inspire Your Next Web Project" height="45" width="45"></noscript></picture></a><h3 class="rpwe-title"><a href="http://www.medianic.co.uk/10-retro-website-designs-to-inspire-your-next-web-project/" title="Permalink to 10 Retro Website Designs to Inspire Your Next Web Project" rel="bookmark">10 Retro Website Designs to Inspire Your Next Web Project</a></h3><time class="rpwe-time published" datetime="2021-11-22T16:00:14+00:00">22nd November 2021</time></li><li class="rpwe-li rpwe-clearfix"><a class="rpwe-img" href="http://www.medianic.co.uk/40-resources-for-getting-started-with-jquery-development/"><picture><source data-lazy-srcset="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/webp-express/webp-images/uploads/2021/11/jQuery-Basics-Selectors-45x45.png.webp" type="image/webp"><img class="rpwe-alignleft rpwe-thumb webpexpress-processed" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2045%2045'%3E%3C/svg%3E" alt="40 Resources for Getting Started with jQuery Development" height="45" width="45" data-lazy-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:45/h:45/q:90/rt:fill/g:ce/http://www.medianic.co.uk/wp-content/uploads/2021/11/jQuery-Basics-Selectors.png"><noscript><img decoding=async class="rpwe-alignleft rpwe-thumb webpexpress-processed" src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:45/h:45/q:90/rt:fill/g:ce/http://www.medianic.co.uk/wp-content/uploads/2021/11/jQuery-Basics-Selectors.png" alt="40 Resources for Getting Started with jQuery Development" height="45" width="45"></noscript></picture></a><h3 class="rpwe-title"><a href="http://www.medianic.co.uk/40-resources-for-getting-started-with-jquery-development/" title="Permalink to 40 Resources for Getting Started with jQuery Development" rel="bookmark">40 Resources for Getting Started with jQuery Development</a></h3><time class="rpwe-time published" datetime="2021-11-19T16:00:06+00:00">19th November 2021</time></li><li class="rpwe-li rpwe-clearfix"><a class="rpwe-img" href="http://www.medianic.co.uk/ux-friendly-faq-page-template-designs/"><picture><source data-lazy-srcset="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/webp-express/webp-images/uploads/2021/11/1-6-45x45.jpg.webp" type="image/webp"><img class="rpwe-alignleft rpwe-thumb webpexpress-processed" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2045%2045'%3E%3C/svg%3E" alt="UX-Friendly FAQ Page Template Designs" height="45" width="45" data-lazy-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:45/h:45/q:90/rt:fill/g:ce/http://www.medianic.co.uk/wp-content/uploads/2021/11/1-6.jpg"><noscript><img decoding=async class="rpwe-alignleft rpwe-thumb webpexpress-processed" src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:45/h:45/q:90/rt:fill/g:ce/http://www.medianic.co.uk/wp-content/uploads/2021/11/1-6.jpg" alt="UX-Friendly FAQ Page Template Designs" height="45" width="45"></noscript></picture></a><h3 class="rpwe-title"><a href="http://www.medianic.co.uk/ux-friendly-faq-page-template-designs/" title="Permalink to UX-Friendly FAQ Page Template Designs" rel="bookmark">UX-Friendly FAQ Page Template Designs</a></h3><time class="rpwe-time published" datetime="2021-11-18T16:00:12+00:00">18th November 2021</time></li></ul></div><!-- Generated by http://wordpress.org/plugins/recent-posts-widget-extended/ --><a href="https://www.medianic.co.uk/technical-news/">All News</a></aside><aside id="text-4" class="widget widget_text"><h2 class="widget-title">Subscribe to our Articles</h2> <div class="textwidget"><style type="text/css"> #mc_embed_signup{clear:left; font:14px Helvetica,Arial,sans-serif; } </style> <div id="mc_embed_signup"> <form id="mc-embedded-subscribe-form" class="validate" action="https://medianic.us19.list-manage.com/subscribe/post?u=ae2ef0f4629bbb4c0df68bef7&id=c260f14d5a" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank"> <div id="mc_embed_signup_scroll"> <div class="mc-field-group"><label for="mce-EMAIL">Email Address <span class="asterisk">*</span><br /> </label><br /> <input id="mce-EMAIL" class="required email" name="EMAIL" type="email" value="" /></div> <div class="mc-field-group input-group" style="display: none;"><strong>Newsletter </strong></p> <ul> <li><input id="mce-group[12716]-12716-0" checked="checked" name="group[12716][1]" type="checkbox" value="1" /><label for="mce-group[12716]-12716-0">News</label></li> </ul> </div> <div id="mce-responses" class="clear"> <div id="mce-error-response" class="response" style="display: none;"></div> <div id="mce-success-response" class="response" style="display: none;"></div> </div> <p><!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--></p> <div style="position: absolute; left: -5000px;" aria-hidden="true"><input tabindex="-1" name="b_ae2ef0f4629bbb4c0df68bef7_c260f14d5a" type="text" value="" /></div> <div class="clear"><input id="mc-embedded-subscribe" class="button" name="subscribe" type="submit" value="Subscribe" /></div> </div> </form> </div> <p><script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/cache/min/1/downloads.mailchimp.com/js/mc-validate.js?ver=1631910100' defer></script><script type="rocketlazyloadscript" data-rocket-type='text/javascript'>window.addEventListener('DOMContentLoaded', function() {(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);});</script><br /> <!--End mc_embed_signup--></p> </div> </aside><aside id="grw_widget-3" class="widget google-reviews-widget"> <div class="wp-gr wpac" data-id="grw_widget-3"><div class="wp-google-list wp-dark"><div class="wp-google-place"><div class="wp-google-left"><picture><source data-lazy-srcset="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/webp-express/webp-images/uploads/2015/07/cropped-medianiclogo.png.webp" type="image/webp"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2050%2050'%3E%3C/svg%3E" alt="Medianic Web Design" width="50" height="50" title="Medianic Web Design" class="webpexpress-processed" data-lazy-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/uploads/2015/07/cropped-medianiclogo.png"><noscript><img decoding=async src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:50/h:50/q:90/http://www.medianic.co.uk/wp-content/uploads/2015/07/cropped-medianiclogo.png" alt="Medianic Web Design" width="50" height="50" title="Medianic Web Design" class="webpexpress-processed"></noscript></picture></div><div class="wp-google-right"><div class="wp-google-name"><a href="https://maps.google.com/?cid=11678638714541381611" target="_blank" rel="nofollow noopener"><span>Medianic Web Design</span></a></div><div><span class="wp-google-rating">5.0</span><span class="wp-google-stars"><span class="wp-stars"><span class="wp-star"><svg width="17" height="17" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#e7711b"></path></svg></span><span class="wp-star"><svg width="17" height="17" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#e7711b"></path></svg></span><span class="wp-star"><svg width="17" height="17" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#e7711b"></path></svg></span><span class="wp-star"><svg width="17" height="17" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#e7711b"></path></svg></span><span class="wp-star"><svg width="17" height="17" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#e7711b"></path></svg></span></span></span></div><div class="wp-google-powered"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20144%2018'%3E%3C/svg%3E" alt="powered by Google" width="144" height="18" title="powered by Google" data-lazy-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/plugins/widget-google-reviews/assets/img/powered_by_google_on_non_white.png"><noscript><img decoding=async src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:144/h:18/q:90/http://www.medianic.co.uk/wp-content/plugins/widget-google-reviews/assets/img/powered_by_google_on_non_white.png" alt="powered by Google" width="144" height="18" title="powered by Google"></noscript></div></div></div><div class="wp-google-content-inner"><div class="wp-google-reviews"><div class="wp-google-review"><div class="wp-google-left"><img src="https://lh3.googleusercontent.com/-8hepWJzFXpE/AAAAAAAAAAI/AAAAAAAAAAA/I80WzYfIxCQ/s56-c/114307615494839964028.jpg" data-src="https://lh3.googleusercontent.com/a-/AOh14GjuZe0ESqEGbG0o_TOF9sKPYBmN05Z9Ic7uhJQAmQ=s56-c0x00000000-cc-rp-mo" class="rplg-review-avatar rplg-blazy" alt="John Fegan" width="50" height="50" title="John Fegan" onerror="if(this.src!='https://lh3.googleusercontent.com/-8hepWJzFXpE/AAAAAAAAAAI/AAAAAAAAAAA/I80WzYfIxCQ/s56-c/114307615494839964028.jpg')this.src='https://lh3.googleusercontent.com/-8hepWJzFXpE/AAAAAAAAAAI/AAAAAAAAAAA/I80WzYfIxCQ/s56-c/114307615494839964028.jpg';" ></div><div class="wp-google-right"><a href="https://www.google.com/maps/contrib/106918007433001339712/reviews" class="wp-google-name" target="_blank" rel="nofollow noopener">John Fegan</a><div class="wp-google-time" data-time="1626989111">21:25 22 Jul 21</div><div class="wp-google-feedback"><span class="wp-google-stars"><span class="wp-stars"><span class="wp-star"><svg width="17" height="17" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#e7711b"></path></svg></span><span class="wp-star"><svg width="17" height="17" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#e7711b"></path></svg></span><span class="wp-star"><svg width="17" height="17" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#e7711b"></path></svg></span><span class="wp-star"><svg width="17" height="17" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#e7711b"></path></svg></span><span class="wp-star"><svg width="17" height="17" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#e7711b"></path></svg></span></span></span><span class="wp-google-text">Professional and rapid support for the development and ongoing maintenance of our business website. Nothing too much<span>... </span><span class="wp-more"> trouble. Highly recommended.</span><span class="wp-more-toggle">read more</span></span></div></div></div><div class="wp-google-review"><div class="wp-google-left"><img src="https://lh3.googleusercontent.com/-8hepWJzFXpE/AAAAAAAAAAI/AAAAAAAAAAA/I80WzYfIxCQ/s56-c/114307615494839964028.jpg" data-src="https://lh3.googleusercontent.com/a-/AOh14Ghxsf0heaKG8nNEPSZc3gzI--QdAbxJGIGykphEtA=s56-c0x00000000-cc-rp-mo" class="rplg-review-avatar rplg-blazy" alt="Paul Jackson" width="50" height="50" title="Paul Jackson" onerror="if(this.src!='https://lh3.googleusercontent.com/-8hepWJzFXpE/AAAAAAAAAAI/AAAAAAAAAAA/I80WzYfIxCQ/s56-c/114307615494839964028.jpg')this.src='https://lh3.googleusercontent.com/-8hepWJzFXpE/AAAAAAAAAAI/AAAAAAAAAAA/I80WzYfIxCQ/s56-c/114307615494839964028.jpg';" ></div><div class="wp-google-right"><a href="https://www.google.com/maps/contrib/101042578538339892805/reviews" class="wp-google-name" target="_blank" rel="nofollow noopener">Paul Jackson</a><div class="wp-google-time" data-time="1624879496">11:24 28 Jun 21</div><div class="wp-google-feedback"><span class="wp-google-stars"><span class="wp-stars"><span class="wp-star"><svg width="17" height="17" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#e7711b"></path></svg></span><span class="wp-star"><svg width="17" height="17" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#e7711b"></path></svg></span><span class="wp-star"><svg width="17" height="17" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#e7711b"></path></svg></span><span class="wp-star"><svg width="17" height="17" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#e7711b"></path></svg></span><span class="wp-star"><svg width="17" height="17" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#e7711b"></path></svg></span></span></span><span class="wp-google-text">Superb service very professional and quickvery responsive i was kept informed and consulted throughout the entire<span>... </span><span class="wp-more"> process.</span><span class="wp-more-toggle">read more</span></span></div></div></div></div><a href="https://search.google.com/local/reviews?placeid=ChIJuRB6mGsFmkcR6xdd6AjcEqI" class="wp-google-url" target="_blank" rel="nofollow noopener">See All Reviews</a></div></div></div> </aside><aside id="fbrev_widget-2" class="widget fb-reviews-widget"> <div class="wp-fbrev wpac"> <div class="wp-facebook-list wp-dark"> <div class="wp-facebook-place"> <div class="wp-facebook-left"> <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2050%2050'%3E%3C/svg%3E" alt="Medianic" width="50" height="50" title="Medianic" data-lazy-src="https://graph.facebook.com/108449529205800/picture"><noscript><img src="https://graph.facebook.com/108449529205800/picture" alt="Medianic" width="50" height="50" title="Medianic"></noscript> </div> <div class="wp-facebook-right"> <div class="wp-facebook-name"> <a href="https://fb.com/108449529205800" target="_blank" rel="nofollow noopener"><span>Medianic</span></a> </div> <div> <span class="wp-facebook-rating">5.0</span> <span class="wp-facebook-stars"><span class="wp-stars"><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span></span></span> </div> <div class="wp-facebook-powered">powered by <span>Facebook</span></div> </div> </div> <div class="wp-facebook-content-inner"> <div class="wp-facebook-reviews"> <div class="wp-facebook-review"> <div class="wp-facebook-left"> <img decoding=async data-opt-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:120/h:120/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png" src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:120/h:120/q:eco/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png" data-src="https://platform-lookaside.fbsbx.com/platform/profilepic/?psid=2467572926681344&height=120&width=120&ext=1640775134&hash=AeTdUkmTnu_wK7ntwwU" class="rplg-review-avatar rplg-blazy" alt="Kate Smith" width="50" height="50" title="Kate Smith" onerror="if(this.src!='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png')this.src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png';" ><noscript><img decoding=async src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:120/h:120/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png" data-src="https://platform-lookaside.fbsbx.com/platform/profilepic/?psid=2467572926681344&height=120&width=120&ext=1640775134&hash=AeTdUkmTnu_wK7ntwwU" class="rplg-review-avatar rplg-blazy" alt="Kate Smith" width="50" height="50" title="Kate Smith" onerror="if(this.src!='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:120/h:120/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png')this.src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:120/h:120/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png';" ></noscript> </div> <div class="wp-facebook-right"> <a href="https://facebook.com/154601892603952" class="wp-facebook-name" target="_blank" rel="nofollow noopener">Kate Smith</a> <div class="wp-facebook-time" data-time="2019-11-17T18:27:18+0000">2019-11-17T18:27:18+0000</div> <div class="wp-facebook-feedback"> <span class="wp-facebook-stars"> <span class="wp-stars"><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span></span> </span> <span class="wp-facebook-text">Great and fast service. Recommended</span> </div> </div> </div> <div class="wp-facebook-review"> <div class="wp-facebook-left"> <img decoding=async data-opt-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:120/h:120/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png" src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:120/h:120/q:eco/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png" data-src="https://platform-lookaside.fbsbx.com/platform/profilepic/?psid=2157990504278296&height=120&width=120&ext=1640775134&hash=AeTpxk_f6W8sO55x-xY" class="rplg-review-avatar rplg-blazy" alt="Thomas George Paterson" width="50" height="50" title="Thomas George Paterson" onerror="if(this.src!='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png')this.src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png';" ><noscript><img decoding=async src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:120/h:120/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png" data-src="https://platform-lookaside.fbsbx.com/platform/profilepic/?psid=2157990504278296&height=120&width=120&ext=1640775134&hash=AeTpxk_f6W8sO55x-xY" class="rplg-review-avatar rplg-blazy" alt="Thomas George Paterson" width="50" height="50" title="Thomas George Paterson" onerror="if(this.src!='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:120/h:120/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png')this.src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:120/h:120/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png';" ></noscript> </div> <div class="wp-facebook-right"> <a href="https://facebook.com/2602777906402402" class="wp-facebook-name" target="_blank" rel="nofollow noopener">Thomas George Paterson</a> <div class="wp-facebook-time" data-time="2019-05-13T10:21:40+0000">2019-05-13T10:21:40+0000</div> <div class="wp-facebook-feedback"> <span class="wp-facebook-stars"> <span class="wp-stars"><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span></span> </span> <span class="wp-facebook-text">Absolute Class service from Start to finish, nothing is too much hassle for them and will recommend to everybody<span>... </span><span class="wp-more"> looking to update or have their website desgned by the Amazing Kate Langshaw 😃💯</span><span class="wp-more-toggle">read more</span></span> </div> </div> </div> <div class="wp-facebook-review"> <div class="wp-facebook-left"> <img decoding=async data-opt-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:120/h:120/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png" src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:120/h:120/q:eco/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png" data-src="https://platform-lookaside.fbsbx.com/platform/profilepic/?psid=2195338397196684&height=120&width=120&ext=1640775134&hash=AeSFFsVKx5y-sDCmSc4" class="rplg-review-avatar rplg-blazy" alt="Loraine Gostling" width="50" height="50" title="Loraine Gostling" onerror="if(this.src!='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png')this.src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png';" ><noscript><img decoding=async src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:120/h:120/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png" data-src="https://platform-lookaside.fbsbx.com/platform/profilepic/?psid=2195338397196684&height=120&width=120&ext=1640775134&hash=AeSFFsVKx5y-sDCmSc4" class="rplg-review-avatar rplg-blazy" alt="Loraine Gostling" width="50" height="50" title="Loraine Gostling" onerror="if(this.src!='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:120/h:120/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png')this.src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:120/h:120/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png';" ></noscript> </div> <div class="wp-facebook-right"> <a href="https://facebook.com/10158853934420903" class="wp-facebook-name" target="_blank" rel="nofollow noopener">Loraine Gostling</a> <div class="wp-facebook-time" data-time="2017-07-05T21:19:10+0000">2017-07-05T21:19:10+0000</div> <div class="wp-facebook-feedback"> <span class="wp-facebook-stars"> <span class="wp-stars"><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span></span> </span> <span class="wp-facebook-text">I cannot praise Medianic enough. They have built the Javea Conect website quickly and efficiently, taught and old dog<span>... </span><span class="wp-more"> new tricks and have been there for me, sometimes within minutes, when I needed help. Excellent service and very very competitively priced. Highly recommended for both website and design work. Kate is to be congratulated on such a high standard of work and customer loyalty.</span><span class="wp-more-toggle">read more</span></span> </div> </div> </div> <div class="wp-facebook-review wp-facebook-hide"> <div class="wp-facebook-left"> <img decoding=async data-opt-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:120/h:120/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png" src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:120/h:120/q:eco/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png" data-src="https://platform-lookaside.fbsbx.com/platform/profilepic/?psid=2095890383836133&height=120&width=120&ext=1640775134&hash=AeQnEztyhy8RCOctsu4" class="rplg-review-avatar rplg-blazy" alt="D.P. Gabbett" width="50" height="50" title="D.P. Gabbett" onerror="if(this.src!='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png')this.src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png';" ><noscript><img decoding=async src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:120/h:120/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png" data-src="https://platform-lookaside.fbsbx.com/platform/profilepic/?psid=2095890383836133&height=120&width=120&ext=1640775134&hash=AeQnEztyhy8RCOctsu4" class="rplg-review-avatar rplg-blazy" alt="D.P. Gabbett" width="50" height="50" title="D.P. Gabbett" onerror="if(this.src!='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:120/h:120/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png')this.src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:120/h:120/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png';" ></noscript> </div> <div class="wp-facebook-right"> <a href="https://facebook.com/3087508574676024" class="wp-facebook-name" target="_blank" rel="nofollow noopener">D.P. Gabbett</a> <div class="wp-facebook-time" data-time="2017-01-11T17:05:26+0000">2017-01-11T17:05:26+0000</div> <div class="wp-facebook-feedback"> <span class="wp-facebook-stars"> <span class="wp-stars"><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span></span> </span> <span class="wp-facebook-text">Medianic has done a outstanding job in creating our company website in such a short time at unbeatable prices, rovtec<span>... </span><span class="wp-more"> marine marine services recommended kate Langshaw and her company Medianic for her superior skill in Web design, thank you outstanding job kate!</span><span class="wp-more-toggle">read more</span></span> </div> </div> </div> <div class="wp-facebook-review wp-facebook-hide"> <div class="wp-facebook-left"> <img decoding=async data-opt-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:120/h:120/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png" src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:120/h:120/q:eco/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png" data-src="https://platform-lookaside.fbsbx.com/platform/profilepic/?psid=1850221621772972&height=120&width=120&ext=1640775134&hash=AeTkgWg2SfjV7p-vf2w" class="rplg-review-avatar rplg-blazy" alt="Satellite Centre" width="50" height="50" title="Satellite Centre" onerror="if(this.src!='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png')this.src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png';" ><noscript><img decoding=async src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:120/h:120/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png" data-src="https://platform-lookaside.fbsbx.com/platform/profilepic/?psid=1850221621772972&height=120&width=120&ext=1640775134&hash=AeTkgWg2SfjV7p-vf2w" class="rplg-review-avatar rplg-blazy" alt="Satellite Centre" width="50" height="50" title="Satellite Centre" onerror="if(this.src!='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:120/h:120/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png')this.src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:120/h:120/q:90/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/img/avatar.png';" ></noscript> </div> <div class="wp-facebook-right"> <a href="https://facebook.com/4086615881413147" class="wp-facebook-name" target="_blank" rel="nofollow noopener">Satellite Centre</a> <div class="wp-facebook-time" data-time="2016-04-22T13:27:00+0000">2016-04-22T13:27:00+0000</div> <div class="wp-facebook-feedback"> <span class="wp-facebook-stars"> <span class="wp-stars"><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span><span class="wp-star"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 1792 1792"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#4080ff"></path></svg></span></span> </span> <span class="wp-facebook-text">Always great service. Makes a difference having an experienced web designer</span> </div> </div> </div> </div> <a class="wp-facebook-url" href="#" onclick="return rplg_next_reviews.call(this, 'facebook', 3);"> Next Reviews </a> </div> </div> </div></aside><aside id="text-6" class="widget widget_text"> <div class="textwidget"><div class="trustpilot-widget" data-locale="en-GB" data-template-id="5419b6a8b0d04a076446a9ad" data-businessunit-id="5c11278e393a0100015d0c2e" data-style-height="24px" data-style-width="100%" data-theme="dark"><a href="https://uk.trustpilot.com/review/www.medianic.co.uk" target="_blank" rel="noopener">Trustpilot</a></div> <p><!-- End TrustBox widget --><br /> <!-- TrustBox script --><br /> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type="text/javascript" src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/cache/min/1/bootstrap/v5/tp.widget.bootstrap.min.js?ver=1631910100" async></script><br /> <!-- End TrustBox script --></p> </div> </aside><aside id="block-5" class="widget widget_block"><p><script type="rocketlazyloadscript" async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0143475477975142" crossorigin="anonymous"></script><br> <!-- Medianic news 1 --><br> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-0143475477975142" data-ad-slot="6221888689"></ins><br> <script type="rocketlazyloadscript"><br /> (adsbygoogle = window.adsbygoogle || []).push({});<br /> </script></p></aside> </div><!-- .sidebar-main --> </div><!-- #secondary --> </div> <!-- ast-container --> </div><!-- #content --> <div class="hfe-before-footer-wrap"> <div class='footer-width-fixer'> <div data-elementor-type="wp-post" data-elementor-id="223" class="elementor elementor-223" data-elementor-settings="[]"> <div class="elementor-inner"> <div class="elementor-section-wrap"> <section class="elementor-section elementor-top-section elementor-element elementor-element-5eb6ae3 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="5eb6ae3" data-element_type="section"> <div class="elementor-container elementor-column-gap-no"> <div class="elementor-row"> <div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-b90033e elementor-hidden-tablet elementor-hidden-phone" data-id="b90033e" data-element_type="column"> <div class="elementor-column-wrap"> <div class="elementor-widget-wrap"> </div> </div> </div> <div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-6c2f831" data-id="6c2f831" data-element_type="column"> <div class="elementor-column-wrap elementor-element-populated"> <div class="elementor-widget-wrap"> <section class="elementor-section elementor-inner-section elementor-element elementor-element-a0fb86e elementor-reverse-mobile elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="a0fb86e" data-element_type="section"> <div class="elementor-container elementor-column-gap-no"> <div class="elementor-row"> <div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-79b8cd6" data-id="79b8cd6" data-element_type="column"> <div class="elementor-column-wrap elementor-element-populated"> <div class="elementor-widget-wrap"> <div class="elementor-element elementor-element-12e63be elementor-testimonial--layout-image_stacked elementor-testimonial--skin-default elementor-testimonial--align-center elementor-arrows-yes elementor-pagination-type-bullets elementor-widget elementor-widget-testimonial-carousel" data-id="12e63be" data-element_type="widget" data-settings="{"show_arrows":"yes","pagination":"bullets","speed":500,"autoplay":"yes","autoplay_speed":5000,"loop":"yes","pause_on_hover":"yes","pause_on_interaction":"yes","space_between":{"unit":"px","size":10,"sizes":[]},"space_between_tablet":{"unit":"px","size":10,"sizes":[]},"space_between_mobile":{"unit":"px","size":10,"sizes":[]}}" data-widget_type="testimonial-carousel.default"> <div class="elementor-widget-container"> <div class="elementor-swiper"> <div class="elementor-main-swiper swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="elementor-testimonial"> <div class="elementor-testimonial__content"> <div class="elementor-testimonial__text"> Best Developer in Spain! Outstanding web services no matter where you are in the world. Great support and attention to detail. Kate is a real life developer. She can work across multiple platforms and understands the technology your company is using on a line to line basis. </div> </div> <div class="elementor-testimonial__footer"> <div class="elementor-testimonial__image"> <picture><source data-lazy-srcset="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/webp-express/webp-images/uploads/2020/11/favicon.png.webp" type="image/webp"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Pure Organic CBD" class="webpexpress-processed" data-lazy-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/uploads/2020/11/favicon.png"><noscript><img decoding=async src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/uploads/2020/11/favicon.png" alt="Pure Organic CBD" class="webpexpress-processed"></noscript></picture> </div> <cite class="elementor-testimonial__cite"><span class="elementor-testimonial__name">Pure Organic CBD</span><span class="elementor-testimonial__title">Web development and support</span></cite> </div> </div> </div> <div class="swiper-slide"> <div class="elementor-testimonial"> <div class="elementor-testimonial__content"> <div class="elementor-testimonial__text"> Professional and rapid support for the development and ongoing maintenance of our business website. Nothing too much trouble. Highly recommended. </div> </div> <div class="elementor-testimonial__footer"> <div class="elementor-testimonial__image"> <picture><source data-lazy-srcset="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/webp-express/webp-images/uploads/2020/11/cafeciclistalogo.jpg.webp" type="image/webp"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Cafe Ciclista" class="webpexpress-processed" data-lazy-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/uploads/2020/11/cafeciclistalogo.jpg"><noscript><img decoding=async src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/uploads/2020/11/cafeciclistalogo.jpg" alt="Cafe Ciclista" class="webpexpress-processed"></noscript></picture> </div> <cite class="elementor-testimonial__cite"><span class="elementor-testimonial__name">Cafe Ciclista</span><span class="elementor-testimonial__title">Web maintenance</span></cite> </div> </div> </div> <div class="swiper-slide"> <div class="elementor-testimonial"> <div class="elementor-testimonial__content"> <div class="elementor-testimonial__text"> Superb service very professional and quick very responsive I was kept informed and consulted throughout the entire process. </div> </div> <div class="elementor-testimonial__footer"> <div class="elementor-testimonial__image"> <picture><source data-lazy-srcset="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/webp-express/webp-images/uploads/2020/11/partnerchipz_black.jpg.webp" type="image/webp"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Paul Jackson" class="webpexpress-processed" data-lazy-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/uploads/2020/11/partnerchipz_black.jpg"><noscript><img decoding=async src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/uploads/2020/11/partnerchipz_black.jpg" alt="Paul Jackson" class="webpexpress-processed"></noscript></picture> </div> <cite class="elementor-testimonial__cite"><span class="elementor-testimonial__name">Paul Jackson</span><span class="elementor-testimonial__title">Web design & Development</span></cite> </div> </div> </div> <div class="swiper-slide"> <div class="elementor-testimonial"> <div class="elementor-testimonial__content"> <div class="elementor-testimonial__text"> Kate Langshaw of Medianic is awesomely recommended by us for all your website needs. Kate translated our story and brand into an elegant, transparent and to the point representation of CaffèMilano -The Italian Coffee House. </div> </div> <div class="elementor-testimonial__footer"> <div class="elementor-testimonial__image"> <picture><source data-lazy-srcset="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/webp-express/webp-images/uploads/2020/01/caffemilanologo.png.webp" type="image/webp"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="CaffèMilano" class="webpexpress-processed" data-lazy-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/uploads/2020/01/caffemilanologo.png"><noscript><img decoding=async src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/uploads/2020/01/caffemilanologo.png" alt="CaffèMilano" class="webpexpress-processed"></noscript></picture> </div> <cite class="elementor-testimonial__cite"><span class="elementor-testimonial__name">CaffèMilano</span><span class="elementor-testimonial__title">Web design and Development</span></cite> </div> </div> </div> <div class="swiper-slide"> <div class="elementor-testimonial"> <div class="elementor-testimonial__content"> <div class="elementor-testimonial__text"> Absolute Class service from Start to finish, nothing is too much hassle for them and will recommend to everybody looking to update or have their website designed by the Amazing Kate Langshaw </div> </div> <div class="elementor-testimonial__footer"> <div class="elementor-testimonial__image"> <picture><source data-lazy-srcset="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/webp-express/webp-images/uploads/2019/10/draoninsure.png.webp" type="image/webp"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Dragon Insure" class="webpexpress-processed" data-lazy-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/uploads/2019/10/draoninsure.png"><noscript><img decoding=async src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/uploads/2019/10/draoninsure.png" alt="Dragon Insure" class="webpexpress-processed"></noscript></picture> </div> <cite class="elementor-testimonial__cite"><span class="elementor-testimonial__name">Dragon Insure</span><span class="elementor-testimonial__title">Web design and Development</span></cite> </div> </div> </div> <div class="swiper-slide"> <div class="elementor-testimonial"> <div class="elementor-testimonial__content"> <div class="elementor-testimonial__text"> I have to say that my experience with Medianic has been different to any previous. I have been constantly kept up to date, communication has been fluid, and we had no down time at all. </div> </div> <div class="elementor-testimonial__footer"> <div class="elementor-testimonial__image"> <picture><source data-lazy-srcset="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/webp-express/webp-images/uploads/2019/07/banuls.png.webp" type="image/webp"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Dr Banuls" class="webpexpress-processed" data-lazy-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/uploads/2019/07/banuls.png"><noscript><img decoding=async src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/uploads/2019/07/banuls.png" alt="Dr Banuls" class="webpexpress-processed"></noscript></picture> </div> <cite class="elementor-testimonial__cite"><span class="elementor-testimonial__name">Dr Banuls</span><span class="elementor-testimonial__title">Web Hosting</span></cite> </div> </div> </div> <div class="swiper-slide"> <div class="elementor-testimonial"> <div class="elementor-testimonial__content"> <div class="elementor-testimonial__text"> I’m very happy about Kate’s work! Recommend her services to everybody. Looking for a good website builder/designer? Look no further and contact Medianic. </div> </div> <div class="elementor-testimonial__footer"> <div class="elementor-testimonial__image"> <picture><source data-lazy-srcset="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/webp-express/webp-images/uploads/2018/12/voiceprod.png.webp" type="image/webp"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Voice Productions" class="webpexpress-processed" data-lazy-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/uploads/2018/12/voiceprod.png"><noscript><img decoding=async src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/uploads/2018/12/voiceprod.png" alt="Voice Productions" class="webpexpress-processed"></noscript></picture> </div> <cite class="elementor-testimonial__cite"><span class="elementor-testimonial__name">Voice Productions</span><span class="elementor-testimonial__title">Web development</span></cite> </div> </div> </div> <div class="swiper-slide"> <div class="elementor-testimonial"> <div class="elementor-testimonial__content"> <div class="elementor-testimonial__text"> On Behalf of all at the Marina Alta Classic Car Club I would like to thank Kate for the wonderful work she did in Kick starting our Club website this year. I can highly recommend her. Thanks Kate </div> </div> <div class="elementor-testimonial__footer"> <div class="elementor-testimonial__image"> <picture><source data-lazy-srcset="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/webp-express/webp-images/uploads/2018/12/maccc.png.webp" type="image/webp"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Marina Alta Car Club" class="webpexpress-processed" data-lazy-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/uploads/2018/12/maccc.png"><noscript><img decoding=async src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/uploads/2018/12/maccc.png" alt="Marina Alta Car Club" class="webpexpress-processed"></noscript></picture> </div> <cite class="elementor-testimonial__cite"><span class="elementor-testimonial__name">Marina Alta Car Club</span><span class="elementor-testimonial__title">Web Design</span></cite> </div> </div> </div> <div class="swiper-slide"> <div class="elementor-testimonial"> <div class="elementor-testimonial__content"> <div class="elementor-testimonial__text"> Excellent knowledge and service, competitive pricing too. Definitely a solid go to company. Thanks for the great results we’ve had </div> </div> <div class="elementor-testimonial__footer"> <cite class="elementor-testimonial__cite"><span class="elementor-testimonial__name">Jim Jimney</span><span class="elementor-testimonial__title">Design and Branding</span></cite> </div> </div> </div> <div class="swiper-slide"> <div class="elementor-testimonial"> <div class="elementor-testimonial__content"> <div class="elementor-testimonial__text"> Totally reliable, totally capable and totally delivers. I’m loving working with Kate to help grow my business. I’m full of motivation because of you Kate </div> </div> <div class="elementor-testimonial__footer"> <div class="elementor-testimonial__image"> <picture><source data-lazy-srcset="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/webp-express/webp-images/uploads/2020/11/FB_profile.jpg.webp" type="image/webp"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Javea Blinds" class="webpexpress-processed" data-lazy-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/uploads/2020/11/FB_profile.jpg"><noscript><img decoding=async src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/uploads/2020/11/FB_profile.jpg" alt="Javea Blinds" class="webpexpress-processed"></noscript></picture> </div> <cite class="elementor-testimonial__cite"><span class="elementor-testimonial__name">Javea Blinds</span><span class="elementor-testimonial__title">Web Design</span></cite> </div> </div> </div> <div class="swiper-slide"> <div class="elementor-testimonial"> <div class="elementor-testimonial__content"> <div class="elementor-testimonial__text"> I cannot praise Medianic enough. They have built the Javea Connect website quickly and efficiently, taught and old dog new tricks and have been there for me, sometimes within minutes, when I needed help. Excellent service and very very competitively priced. Highly recommended for both website and design work. Kate is to be congratulated on such a high standard of work and customer loyalty. </div> </div> <div class="elementor-testimonial__footer"> <div class="elementor-testimonial__image"> <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Javea Connect" data-lazy-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/uploads/2021/02/javeaconnect-1.png"><noscript><img decoding=async src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/uploads/2021/02/javeaconnect-1.png" alt="Javea Connect"></noscript> </div> <cite class="elementor-testimonial__cite"><span class="elementor-testimonial__name">Javea Connect</span><span class="elementor-testimonial__title">Web Design & Development</span></cite> </div> </div> </div> <div class="swiper-slide"> <div class="elementor-testimonial"> <div class="elementor-testimonial__content"> <div class="elementor-testimonial__text"> Medianic has done a outstanding job in creating our company website in such a short time at unbeatable prices, rovtec marine services recommended Medianic for their superior skill in Web design, thank you outstanding job! </div> </div> <div class="elementor-testimonial__footer"> <div class="elementor-testimonial__image"> <picture><source data-lazy-srcset="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/webp-express/webp-images/uploads/2017/01/rovtecmain.jpg.webp" type="image/webp"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Rovtech" class="webpexpress-processed" data-lazy-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/uploads/2017/01/rovtecmain.jpg"><noscript><img decoding=async src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/uploads/2017/01/rovtecmain.jpg" alt="Rovtech" class="webpexpress-processed"></noscript></picture> </div> <cite class="elementor-testimonial__cite"><span class="elementor-testimonial__name">Rovtech</span><span class="elementor-testimonial__title">Web Design</span></cite> </div> </div> </div> <div class="swiper-slide"> <div class="elementor-testimonial"> <div class="elementor-testimonial__content"> <div class="elementor-testimonial__text"> The only thing that beat the quality of the work Medianic did for us was how quick and responsive they were whenever we had feedback or needed something extra. Would highly recommend. </div> </div> <div class="elementor-testimonial__footer"> <div class="elementor-testimonial__image"> <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Poker Encore" data-lazy-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/uploads/2015/07/pokerencore_thumb1.gif"><noscript><img decoding=async src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/uploads/2015/07/pokerencore_thumb1.gif" alt="Poker Encore"></noscript> </div> <cite class="elementor-testimonial__cite"><span class="elementor-testimonial__name">Poker Encore</span><span class="elementor-testimonial__title">Custom Programming</span></cite> </div> </div> </div> </div> <div class="swiper-pagination"></div> <div class="elementor-swiper-button elementor-swiper-button-prev"> <i aria-hidden="true" class="eicon-chevron-left"></i> <span class="elementor-screen-only">Previous</span> </div> <div class="elementor-swiper-button elementor-swiper-button-next"> <i aria-hidden="true" class="eicon-chevron-right"></i> <span class="elementor-screen-only">Next</span> </div> </div> </div> </div> </div> </div> </div> </div> <div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-3f972ed" data-id="3f972ed" data-element_type="column"> <div class="elementor-column-wrap elementor-element-populated"> <div class="elementor-widget-wrap"> <div class="elementor-element elementor-element-4d1de9e elementor-widget-mobile__width-inherit elementor-widget elementor-widget-heading" data-id="4d1de9e" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h3 class="elementor-heading-title elementor-size-default">Thank you!</h3> </div> </div> <div class="elementor-element elementor-element-cb007db elementor-widget-mobile__width-inherit elementor-widget elementor-widget-heading" data-id="cb007db" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h5 class="elementor-heading-title elementor-size-default">For your kind words...</h5> </div> </div> <div class="elementor-element elementor-element-6dcc44f elementor-view-framed elementor-shape-circle elementor-widget elementor-widget-icon" data-id="6dcc44f" data-element_type="widget" data-widget_type="icon.default"> <div class="elementor-widget-container"> <div class="elementor-icon-wrapper"> <div class="elementor-icon"> <i aria-hidden="true" class="fas fa-heart"></i> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section> </div> </div> </div> </div> </div> </section> <section class="elementor-section elementor-top-section elementor-element elementor-element-467c6a2 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="467c6a2" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-row"> <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-12fead1" data-id="12fead1" data-element_type="column"> <div class="elementor-column-wrap elementor-element-populated"> <div class="elementor-widget-wrap"> <div class="elementor-element elementor-element-bf080fd elementor-widget elementor-widget-html" data-id="bf080fd" data-element_type="widget" data-widget_type="html.default"> <div class="elementor-widget-container"> <!-- Global site tag (gtag.js) - Google Analytics --> <script type="rocketlazyloadscript" async src="https://www.googletagmanager.com/gtag/js?id=UA-17356469-1"></script> <script type="rocketlazyloadscript"> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-17356469-1'); </script> </div> </div> </div> </div> </div> </div> </div> </section> </div> </div> </div> </div> </div> <footer class="site-footer" id="colophon" itemtype="https://schema.org/WPFooter" itemscope="itemscope" itemid="#colophon" > <div class="footer-adv footer-adv-layout-3"> <div class="footer-adv-overlay"> <div class="ast-container"> <div class="ast-row"> <div class="ast-col-lg-4 ast-col-md-4 ast-col-sm-12 ast-col-xs-12 footer-adv-widget footer-adv-widget-1"> <div id="text-5" class="widget widget_text"> <div class="textwidget"><p><picture><source data-lazy-srcset="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/https://www.medianic.co.uk/wp-content/webp-express/webp-images/uploads/2015/07/cropped-medianiclogo.png.webp" type="image/webp"><img class="size-full wp-image-5842 alignnone webpexpress-processed" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" alt="" width="300" height="300" data-lazy-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/https://www.medianic.co.uk/wp-content/uploads/2015/07/cropped-medianiclogo.png"><noscript><img decoding=async class="size-full wp-image-5842 alignnone webpexpress-processed" src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:300/h:300/q:90/rt:fill/g:ce/https://www.medianic.co.uk/wp-content/uploads/2015/07/cropped-medianiclogo.png" alt="" width="300" height="300"></noscript></picture></p> </div> </div> </div> <div class="ast-col-lg-4 ast-col-md-4 ast-col-sm-12 ast-col-xs-12 footer-adv-widget footer-adv-widget-2"> <style> .rpwe-block ul { list-style: none !important; margin-left: 0 !important; padding-left: 0 !important; } .rpwe-block li { border-bottom: 1px solid #eee; margin-bottom: 10px; padding-bottom: 10px; list-style-type: none; } .rpwe-block a { display: inline !important; text-decoration: none; } .rpwe-block h3 { background: none !important; clear: none; margin-bottom: 0 !important; margin-top: 0 !important; font-weight: 400; font-size: 12px !important; line-height: 1.5em; } .rpwe-thumb { border: 1px solid #EEE !important; box-shadow: none !important; margin: 2px 10px 2px 0; padding: 3px !important; } .rpwe-summary { font-size: 12px; } .rpwe-time { color: #bbb; font-size: 11px; } .rpwe-comment { color: #bbb; font-size: 11px; padding-left: 5px; } .rpwe-alignleft { display: inline; float: left; } .rpwe-alignright { display: inline; float: right; } .rpwe-aligncenter { display: block; margin-left: auto; margin-right: auto; } .rpwe-clearfix:before, .rpwe-clearfix:after { content: ""; display: table !important; } .rpwe-clearfix:after { clear: both; } .rpwe-clearfix { zoom: 1; } </style> <div id="rpwe_widget-3" class="widget rpwe_widget recent-posts-extended"><h2 class="widget-title">Latest News</h2><div class="rpwe-block "><ul class="rpwe-ul"><li class="rpwe-li rpwe-clearfix"><a class="rpwe-img" href="http://www.medianic.co.uk/top-15-wireframing-tools-for-web-designers/"><picture><source data-lazy-srcset="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/webp-express/webp-images/uploads/2021/11/Mockingbird-45x45.png.webp" type="image/webp"><img class="rpwe-alignleft rpwe-thumb webpexpress-processed" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2045%2045'%3E%3C/svg%3E" alt="Top 15 Wireframing Tools for Web Designers" height="45" width="45" data-lazy-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:45/h:45/q:90/rt:fill/g:ce/http://www.medianic.co.uk/wp-content/uploads/2021/11/Mockingbird.png"><noscript><img decoding=async class="rpwe-alignleft rpwe-thumb webpexpress-processed" src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:45/h:45/q:90/rt:fill/g:ce/http://www.medianic.co.uk/wp-content/uploads/2021/11/Mockingbird.png" alt="Top 15 Wireframing Tools for Web Designers" height="45" width="45"></noscript></picture></a><h3 class="rpwe-title"><a href="http://www.medianic.co.uk/top-15-wireframing-tools-for-web-designers/" title="Permalink to Top 15 Wireframing Tools for Web Designers" rel="bookmark">Top 15 Wireframing Tools for Web Designers</a></h3><time class="rpwe-time published" datetime="2021-11-26T16:00:12+00:00">26th November 2021</time></li><li class="rpwe-li rpwe-clearfix"><a class="rpwe-img" href="http://www.medianic.co.uk/where-to-find-the-best-avatar-graphics-or-simply-create-your-own/"><picture><source data-lazy-srcset="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/webp-express/webp-images/uploads/2021/11/Limitless-designs-45x45.png.webp" type="image/webp"><img class="rpwe-alignleft rpwe-thumb webpexpress-processed" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2045%2045'%3E%3C/svg%3E" alt="Where to Find the Best Avatar Graphics, Or Simply Create Your Own" height="45" width="45" data-lazy-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:45/h:45/q:90/rt:fill/g:ce/http://www.medianic.co.uk/wp-content/uploads/2021/11/Limitless-designs.png"><noscript><img decoding=async class="rpwe-alignleft rpwe-thumb webpexpress-processed" src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:45/h:45/q:90/rt:fill/g:ce/http://www.medianic.co.uk/wp-content/uploads/2021/11/Limitless-designs.png" alt="Where to Find the Best Avatar Graphics, Or Simply Create Your Own" height="45" width="45"></noscript></picture></a><h3 class="rpwe-title"><a href="http://www.medianic.co.uk/where-to-find-the-best-avatar-graphics-or-simply-create-your-own/" title="Permalink to Where to Find the Best Avatar Graphics, Or Simply Create Your Own" rel="bookmark">Where to Find the Best Avatar Graphics, Or Simply Create Your Own</a></h3><time class="rpwe-time published" datetime="2021-11-24T15:31:11+00:00">24th November 2021</time></li><li class="rpwe-li rpwe-clearfix"><a class="rpwe-img" href="http://www.medianic.co.uk/10-retro-website-designs-to-inspire-your-next-web-project/"><picture><source data-lazy-srcset="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/http://www.medianic.co.uk/wp-content/webp-express/webp-images/uploads/2021/11/Kalso-45x45.jpg.webp" type="image/webp"><img class="rpwe-alignleft rpwe-thumb webpexpress-processed" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2045%2045'%3E%3C/svg%3E" alt="10 Retro Website Designs to Inspire Your Next Web Project" height="45" width="45" data-lazy-src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:45/h:45/q:90/rt:fill/g:ce/http://www.medianic.co.uk/wp-content/uploads/2021/11/Kalso.jpg"><noscript><img decoding=async class="rpwe-alignleft rpwe-thumb webpexpress-processed" src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:45/h:45/q:90/rt:fill/g:ce/http://www.medianic.co.uk/wp-content/uploads/2021/11/Kalso.jpg" alt="10 Retro Website Designs to Inspire Your Next Web Project" height="45" width="45"></noscript></picture></a><h3 class="rpwe-title"><a href="http://www.medianic.co.uk/10-retro-website-designs-to-inspire-your-next-web-project/" title="Permalink to 10 Retro Website Designs to Inspire Your Next Web Project" rel="bookmark">10 Retro Website Designs to Inspire Your Next Web Project</a></h3><time class="rpwe-time published" datetime="2021-11-22T16:00:14+00:00">22nd November 2021</time></li></ul></div><!-- Generated by http://wordpress.org/plugins/recent-posts-widget-extended/ --></div> </div> <div class="ast-col-lg-4 ast-col-md-4 ast-col-sm-12 ast-col-xs-12 footer-adv-widget footer-adv-widget-3"> <div id="astra-widget-address-2" class="widget astra-widget-address"><h2 class="widget-title">Find Medianic Web Design</h2> <div class="address clearfix"> <address class="widget-address widget-address-stack widget-address-icons-1"> <div class="widget-address-field"> <svg xmlns="http://www.w3.org/2000/svg" class="address-icons" width="15px" height="15px" viewBox="0 0 496 512"><path d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"></path> </svg> <span class="address-meta">Javea, Costa Blanca Alicante Spain, 03730</span> </div> <div class="widget-address-field"> <svg xmlns="http://www.w3.org/2000/svg" class="address-icons" width="15px" height="15px" viewBox="0 0 512 512"><path d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"></path> </svg> <span class="address-meta"> <a href="tel:34610151306" >+34 610 151 306</a> </span> </div> <div class="widget-address-field"> <svg xmlns="http://www.w3.org/2000/svg" class="address-icons" width="15px" height="15px" viewBox="0 0 512 512"><path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path> </svg> <span class="address-meta"> <a href="mailto:info@medianic.co.uk" >info@medianic.co.uk</a> </span> </div> </address> </div> </div><div id="astra-widget-social-profiles-2" class="widget astra-widget-social-profiles"><h2 class="widget-title">Follow Us</h2> <div class="astra-widget-social-profiles-inner clearfix inline square-outline icon-custom-color"> <ul> <li> <a href="https://www.facebook.com/medianicdesign/" target="_blank" rel="noopener nofollow" aria-label="facebook"> <span class="ast-widget-icon facebook"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width=20 height=20 ><path d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"></path></svg> </span> </a> </li> <li> <a href="https://twitter.com/medianicdesign" target="_blank" rel="noopener nofollow" aria-label="twitter-square"> <span class="ast-widget-icon twitter-square"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width=20 height=20 ><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"></path></svg> </span> </a> </li> <li> <a href="https://goo.gl/maps/sGcEcP3v9BFHG3EM8" target="_blank" rel="noopener nofollow" aria-label="google"> <span class="ast-widget-icon google"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512" width=20 height=20 ><path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"></path></svg> </span> </a> </li> <li> <a href="http://www.linkedin.com/in/medianic" target="_blank" rel="noopener nofollow" aria-label="linkedin"> <span class="ast-widget-icon linkedin"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width=20 height=20 ><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path></svg> </span> </a> </li> <li> <a href="https://www.youtube.com/channel/UCSGH4AtRbaLAdI1c1del7eQ" target="_blank" rel="noopener nofollow" aria-label="youtube"> <span class="ast-widget-icon youtube"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width=20 height=20 ><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path></svg> </span> </a> </li> <li> <a href="https://www.trustpilot.com/review/www.medianic.co.uk" target="_blank" rel="noopener nofollow" aria-label="star"> <span class="ast-widget-icon star"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width=20 height=20 ><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg> </span> </a> </li> </ul> </div> </div> </div> </div><!-- .ast-row --> </div><!-- .ast-container --> </div><!-- .footer-adv-overlay--> </div><!-- .ast-theme-footer .footer-adv-layout-3 --> <div class="ast-small-footer footer-sml-layout-2"> <div class="ast-footer-overlay"> <div class="ast-container"> <div class="ast-small-footer-wrap" > <div class="ast-row ast-flex"> <div class="ast-small-footer-section ast-small-footer-section-1 ast-small-footer-section-equally ast-col-md-6" > Copyright © 2021 <span class="ast-footer-site-title">Medianic</span> Web Design </div> <div class="ast-small-footer-section ast-small-footer-section-2 ast-small-footer-section-equally ast-col-md-6" > <div class="footer-primary-navigation"><ul id="menu-footer" class="nav-menu"><li id="menu-item-6104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-6104"><a href="http://www.medianic.co.uk/privacy-policy/" class="menu-link">Privacy Policy</a></li> <li id="menu-item-6216" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6216"><a href="http://medianic.co.uk/Medianic-T&C.pdf" class="menu-link">Terms & Conditions</a></li> <li id="menu-item-6105" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6105"><a href="http://www.medianic.co.uk/contact/" class="menu-link">Contact</a></li> </ul></div> </div> </div> <!-- .ast-row.ast-flex --> </div><!-- .ast-small-footer-wrap --> </div><!-- .ast-container --> </div><!-- .ast-footer-overlay --> </div><!-- .ast-small-footer--> </footer><!-- #colophon --> </div><!-- #page --> <div itemscope itemType="http://schema.org/BlogPosting"> <meta itemprop="inLanguage" content="en-GB"/> <meta itemprop="headline" content="Build a Music Player With Vuetify"> <meta itemprop="mainEntityOfPage" content="http://www.medianic.co.uk/build-a-music-player-with-vuetify/"/> <meta itemprop="datePublished" content="2018-07-12"> <meta itemprop="dateModified" content="2018-07-12"> <meta itemprop="articleBody" content="What You’ll Be Creating Building apps with Vue.js is easy, fun, and enjoyable. You can build a working app with minimum effort. To prove that, today … Build a Music Player With Vuetify Read More »"> <div itemprop="image" itemscope="" itemtype="https://schema.org/ImageObject"/> <meta itemprop="url" content="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:300/h:219/q:90/http://www.medianic.co.uk/wp-content/uploads/2018/07/player_final.png"> <meta itemprop="width" content="300"> <meta itemprop="height" content="300"> </div> <div itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <meta itemprop="name" content="Medianic"> </div> <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization"> <meta itemprop="name" content="Medianic"> <meta itemprop="url" href="http://www.medianic.co.uk"> <meta itemprop="description" content="Web Design in Javea – Established since 2006"> <span itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"> <meta itemprop="image" content="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/https://www.medianic.co.uk/wp-content/uploads/2015/07/logo.jpg"> <meta itemprop="url" content="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/w:auto/h:auto/q:90/https://www.medianic.co.uk/wp-content/uploads/2015/07/logo.jpg"> <meta itemprop="width" content="300"> <meta itemprop="height" content="300"> </span> </div> <!--googleoff: all--><div id="cookie-law-info-bar" data-nosnippet="true"><span>This website uses cookies to improve your experience. <a role='button' tabindex='0' data-cli_action="accept" id="cookie_action_close_header" class="medium cli-plugin-button cli-plugin-main-button cookie_action_close_header cli_action_button" style="display:inline-block; ">Accept</a> <a href="http://www.medianic.co.uk/privacy-policy/" id="CONSTANT_OPEN_URL" target="_blank" class="cli-plugin-main-link" style="display:inline-block;" >Read More</a></span></div><div id="cookie-law-info-again" style="display:none;" data-nosnippet="true"><span id="cookie_hdr_showagain">Privacy & Cookies Policy</span></div><div class="cli-modal" data-nosnippet="true" id="cliSettingsPopup" tabindex="-1" role="dialog" aria-labelledby="cliSettingsPopup" aria-hidden="true"> <div class="cli-modal-dialog" role="document"> <div class="cli-modal-content cli-bar-popup"> <button type="button" class="cli-modal-close" id="cliModalClose"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"></path><path d="M0 0h24v24h-24z" fill="none"></path></svg> <span class="wt-cli-sr-only">Close</span> </button> <div class="cli-modal-body"> <div class="cli-container-fluid cli-tab-container"> <div class="cli-row"> <div class="cli-col-12 cli-align-items-stretch cli-px-0"> <div class="cli-privacy-overview"> <h4>Privacy Overview</h4> <div class="cli-privacy-content"> <div class="cli-privacy-content-text">This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.</div> </div> <a class="cli-privacy-readmore" aria-label="Show more" tabindex="0" role="button" data-readmore-text="Show more" data-readless-text="Show less"></a> </div> </div> <div class="cli-col-12 cli-align-items-stretch cli-px-0 cli-tab-section-container"> <div class="cli-tab-section"> <div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="necessary" data-toggle="cli-toggle-tab"> Necessary </a> <div class="wt-cli-necessary-checkbox"> <input type="checkbox" class="cli-user-preference-checkbox" id="wt-cli-checkbox-necessary" data-id="checkbox-necessary" checked="checked" /> <label class="form-check-label" for="wt-cli-checkbox-necessary">Necessary</label> </div> <span class="cli-necessary-caption">Always Enabled</span> </div> <div class="cli-tab-content"> <div class="cli-tab-pane cli-fade" data-id="necessary"> <div class="wt-cli-cookie-description"> Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information. </div> </div> </div> </div> <div class="cli-tab-section"> <div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="non-necessary" data-toggle="cli-toggle-tab"> Non-necessary </a> <div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-non-necessary" class="cli-user-preference-checkbox" data-id="checkbox-non-necessary" checked='checked' /> <label for="wt-cli-checkbox-non-necessary" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Non-necessary</span></label> </div> </div> <div class="cli-tab-content"> <div class="cli-tab-pane cli-fade" data-id="non-necessary"> <div class="wt-cli-cookie-description"> Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website. </div> </div> </div> </div> </div> </div> </div> </div> <div class="cli-modal-footer"> <div class="wt-cli-element cli-container-fluid cli-tab-container"> <div class="cli-row"> <div class="cli-col-12 cli-align-items-stretch cli-px-0"> <div class="cli-tab-footer wt-cli-privacy-overview-actions"> <a id="wt-cli-privacy-save-btn" role="button" tabindex="0" data-cli-action="accept" class="wt-cli-privacy-btn cli_setting_save_button wt-cli-privacy-accept-btn cli-btn">SAVE & ACCEPT</a> </div> </div> </div> </div> </div> </div> </div> </div> <div class="cli-modal-backdrop cli-fade cli-settings-overlay"></div> <div class="cli-modal-backdrop cli-fade cli-popupbar-overlay"></div> <!--googleon: all--><div id="pum-4548" class="pum pum-overlay pum-theme-4544 pum-theme-enterprise-blue popmake-overlay pum-click-to-close auto_open click_open" data-popmake="{"id":4548,"slug":"newsletter","theme_id":4544,"cookies":[{"event":"on_popup_close","settings":{"name":"pum-4548","key":"","session":false,"path":"1","time":"1 month"}},{"event":"pum_sub_form_success","settings":{"name":"pum-4548","key":"","session":false,"path":true,"time":"1 year"}}],"triggers":[{"type":"auto_open","settings":{"cookie_name":["pum-4548"],"delay":"1500"}},{"type":"click_open","settings":{"extra_selectors":"","cookie_name":null}}],"mobile_disabled":null,"tablet_disabled":null,"meta":{"display":{"stackable":false,"overlay_disabled":false,"scrollable_content":false,"disable_reposition":false,"size":"medium","responsive_min_width":"0%","responsive_min_width_unit":false,"responsive_max_width":"100%","responsive_max_width_unit":false,"custom_width":"300px","custom_width_unit":false,"custom_height":"380px","custom_height_unit":false,"custom_height_auto":"1","location":"center","position_from_trigger":false,"position_top":"100","position_left":"0","position_bottom":"10","position_right":"10","position_fixed":false,"animation_type":"fade","animation_speed":"350","animation_origin":"bottom","overlay_zindex":false,"zindex":"1999999999"},"close":{"text":"X","button_delay":"100","overlay_click":"1","esc_press":false,"f4_press":false},"click_open":[]}}" role="dialog" aria-hidden="true" > <div id="popmake-4548" class="pum-container popmake theme-4544 pum-responsive pum-responsive-medium responsive size-medium"> <div class="pum-content popmake-content" tabindex="0"> <h2 style="text-align: center; color: #003344;">Get latest Tech News</h2> <p><!-- Begin Mailchimp Signup Form --> <style type="text/css"> #mc_embed_signup{ clear:left; font:14px Helvetica,Arial,sans-serif; } /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block. We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */ </style> <div id="mc_embed_signup"> <form action="https://medianic.us19.list-manage.com/subscribe/post?u=ae2ef0f4629bbb4c0df68bef7&id=c260f14d5a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div id="mc_embed_signup_scroll"> <div class="indicates-required"><span class="asterisk">*</span> indicates required</div> <div class="mc-field-group"> <label for="mce-EMAIL">Email Address <span class="asterisk">*</span><br /> </label><br /> <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL"> </div> <div class="mc-field-group input-group" style="display: none;"> <strong>Newsletter </strong></p> <ul> <li><input type="checkbox" value="1" checked="checked" name="group[12716][1]" id="mce-group[12716]-12716-0"><label for="mce-group[12716]-12716-0">News</label></li> </ul> </div> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </p></div> <p> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--></p> <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ae2ef0f4629bbb4c0df68bef7_c260f14d5a" tabindex="-1" value=""></div> <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> </p></div> </form> </div> <p><script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/cache/min/1/downloads.mailchimp.com/js/mc-validate.js?ver=1631910100' defer></script><script type="rocketlazyloadscript" data-rocket-type='text/javascript'>window.addEventListener('DOMContentLoaded', function() {(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);});</script><br /> <!--End mc_embed_signup--></p> </div> <button type="button" class="pum-close popmake-close" aria-label="Close"> X </button> </div> </div> <a id="ast-scroll-top" class="ast-scroll-top-icon ast-scroll-to-top-right" data-on-devices="both"> <span class="ast-icon icon-arrow"></span> <span class="screen-reader-text">Scroll to Top</span> </a> <script type="rocketlazyloadscript" data-rocket-type="text/javascript"> (function () { var c = document.body.className; c = c.replace(/woocommerce-no-js/, 'woocommerce-js'); document.body.className = c; })(); </script> <style id='astra-widgets-astra-widget-address-inline-css'> #astra-widget-address-2 .widget-address-field svg{fill:#006789;}#astra-widget-address-2 .widget-address .widget-address-field .address-meta{margin-left:10px;}#astra-widget-address-2 .widget-address.widget-address-stack .widget-address-field{padding-top:0;padding-bottom:12px;}#astra-widget-address-2 .widget-address.widget-address-inline .widget-address-field{padding-right:12px;}#astra-widget-address-2 .address .widget-address.widget-address-stack .widget-address-field:last-child{padding-bottom:0;}#astra-widget-address-2 .address .widget-address.widget-address-inline .widget-address-field:last-child{padding-right:0;} </style> <style id='astra-widgets-astra-widget-social-profiles-inline-css'> #astra-widget-social-profiles-2 .astra-widget-social-profiles-inner li .ast-widget-icon svg{fill:#ffffff;}#astra-widget-social-profiles-2 .astra-widget-social-profiles-inner li .ast-widget-icon:hover svg{fill:#006789;}#astra-widget-social-profiles-2 .astra-widget-social-profiles-inner.square-outline li .ast-widget-icon, #astra-widget-social-profiles-2 .astra-widget-social-profiles-inner.circle-outline li .ast-widget-icon{background:transparent;border-color:#006789;}#astra-widget-social-profiles-2 .astra-widget-social-profiles-inner.square-outline li .ast-widget-icon svg, #astra-widget-social-profiles-2 .astra-widget-social-profiles-inner.circle-outline li .ast-widget-icon svg{background:transparent;fill:#ffffff;}#astra-widget-social-profiles-2 .astra-widget-social-profiles-inner.square .ast-widget-icon, #astra-widget-social-profiles-2 .astra-widget-social-profiles-inner.circle .ast-widget-icon{background:#006789;border-color:#006789;}#astra-widget-social-profiles-2 .astra-widget-social-profiles-inner.square .ast-widget-icon svg, #astra-widget-social-profiles-2 .astra-widget-social-profiles-inner.circle .ast-widget-icon svg{fill:#ffffff;}#astra-widget-social-profiles-2 .astra-widget-social-profiles-inner.square .ast-widget-icon:hover svg, #astra-widget-social-profiles-2 .astra-widget-social-profiles-inner.circle .ast-widget-icon:hover svg{fill:#006789;}#astra-widget-social-profiles-2 .astra-widget-social-profiles-inner.square .ast-widget-icon:hover, #astra-widget-social-profiles-2 .astra-widget-social-profiles-inner.circle .ast-widget-icon:hover{background:#ffffff;border-color:#ffffff;}#astra-widget-social-profiles-2 .astra-widget-social-profiles-inner.square-outline li .ast-widget-icon:hover, #astra-widget-social-profiles-2 .astra-widget-social-profiles-inner.circle-outline li .ast-widget-icon:hover{background:transparent;border-color:#ffffff;}#astra-widget-social-profiles-2 .astra-widget-social-profiles-inner.square-outline li .ast-widget-icon:hover svg, #astra-widget-social-profiles-2 .astra-widget-social-profiles-inner.circle-outline li .ast-widget-icon:hover svg{fill:#006789;}#astra-widget-social-profiles-2 .astra-widget-social-profiles-inner .ast-widget-icon{font-size:20px;}#astra-widget-social-profiles-2 .astra-widget-social-profiles-inner.circle li .ast-widget-icon, #astra-widget-social-profiles-2 .astra-widget-social-profiles-inner.circle-outline li .ast-widget-icon{font-size:20px;}#astra-widget-social-profiles-2 .astra-widget-social-profiles-inner li > a .ast-widget-icon{margin-right:px;}#astra-widget-social-profiles-2 .astra-widget-social-profiles-inner.stack li > a {padding-bottom:5px;}#astra-widget-social-profiles-2 .astra-widget-social-profiles-inner.inline li > a {padding-right:5px;}#astra-widget-social-profiles-2 .astra-widget-social-profiles-inner.inline li:last-child a {padding-right:0;}#astra-widget-social-profiles-2 .astra-widget-social-profiles-inner li:last-child a{margin-right:0;padding-bottom:0;} </style> <script type="rocketlazyloadscript" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-includes/js/comment-reply.min.js?ver=5.8.2' id='comment-reply-js' defer></script> <script id='astra-theme-js-js-extra'> var astra = {"break_point":"921","isRtl":"","edit_post_url":"http:\/\/www.medianic.co.uk\/wp-admin\/post.php?post={{id}}&action=edit","ajax_url":"http:\/\/www.medianic.co.uk\/wp-admin\/admin-ajax.php","infinite_count":"2","infinite_total":"0","pagination":"infinite","infinite_scroll_event":"scroll","no_more_post_message":"No more posts to show.","grid_layout":"1","site_url":"http:\/\/www.medianic.co.uk","show_comments":"Show Comments","masonryEnabled":"","blogMasonryBreakPoint":"921","shop_infinite_count":"2","shop_infinite_total":"0","shop_pagination":"number","shop_infinite_scroll_event":"scroll","shop_no_more_post_message":"No more products to show.","checkout_prev_text":"Back to my details","checkout_next_text":"Proceed to payment","shop_quick_view_enable":"disabled","shop_quick_view_stick_cart":"","shop_quick_view_auto_height":"1","single_product_ajax_add_to_cart":"","is_cart":"","is_single_product":"","view_cart":"View cart","cart_url":"http:\/\/www.medianic.co.uk\/cart\/"}; </script> <script type="rocketlazyloadscript" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/themes/astra/assets/js/minified/style.min.js?ver=3.7.5' id='astra-theme-js-js' defer></script> <script type="rocketlazyloadscript" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/plugins/woocommerce/assets/js/jquery-blockui/jquery.blockUI.min.js?ver=2.7.0-wc.5.9.0' id='jquery-blockui-js' defer></script> <script id='wc-add-to-cart-js-extra'> var wc_add_to_cart_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%","i18n_view_cart":"View basket","cart_url":"http:\/\/www.medianic.co.uk\/cart\/","is_cart":"","cart_redirect_after_add":"no"}; </script> <script type="rocketlazyloadscript" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js?ver=5.9.0' id='wc-add-to-cart-js' defer></script> <script type="rocketlazyloadscript" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/plugins/woocommerce/assets/js/js-cookie/js.cookie.min.js?ver=2.1.4-wc.5.9.0' id='js-cookie-js' defer></script> <script id='woocommerce-js-extra'> var woocommerce_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%"}; </script> <script type="rocketlazyloadscript" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js?ver=5.9.0' id='woocommerce-js' defer></script> <script id='wc-cart-fragments-js-extra'> var wc_cart_fragments_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%","cart_hash_key":"wc_cart_hash_3223220aeeca31efe66ee13d0fc49e3a","fragment_name":"wc_fragments_3223220aeeca31efe66ee13d0fc49e3a","request_timeout":"5000"}; </script> <script type="rocketlazyloadscript" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js?ver=5.9.0' id='wc-cart-fragments-js' defer></script> <script type="rocketlazyloadscript" id='rocket-browser-checker-js-after'> "use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var RocketBrowserCompatibilityChecker=function(){function RocketBrowserCompatibilityChecker(options){_classCallCheck(this,RocketBrowserCompatibilityChecker),this.passiveSupported=!1,this._checkPassiveOption(this),this.options=!!this.passiveSupported&&options}return _createClass(RocketBrowserCompatibilityChecker,[{key:"_checkPassiveOption",value:function(self){try{var options={get passive(){return!(self.passiveSupported=!0)}};window.addEventListener("test",null,options),window.removeEventListener("test",null,options)}catch(err){self.passiveSupported=!1}}},{key:"initRequestIdleCallback",value:function(){!1 in window&&(window.requestIdleCallback=function(cb){var start=Date.now();return setTimeout(function(){cb({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-start))}})},1)}),!1 in window&&(window.cancelIdleCallback=function(id){return clearTimeout(id)})}},{key:"isDataSaverModeOn",value:function(){return"connection"in navigator&&!0===navigator.connection.saveData}},{key:"supportsLinkPrefetch",value:function(){var elem=document.createElement("link");return elem.relList&&elem.relList.supports&&elem.relList.supports("prefetch")&&window.IntersectionObserver&&"isIntersecting"in IntersectionObserverEntry.prototype}},{key:"isSlowConnection",value:function(){return"connection"in navigator&&"effectiveType"in navigator.connection&&("2g"===navigator.connection.effectiveType||"slow-2g"===navigator.connection.effectiveType)}}]),RocketBrowserCompatibilityChecker}(); </script> <script id='rocket-preload-links-js-extra'> var RocketPreloadLinksConfig = {"excludeUris":"\/card\/|\/cart\/|\/|\/seo-package-terms-conditions\/|\/(.+\/)?feed\/?.+\/?|\/(?:.+\/)?embed\/|\/card\/|\/cart\/|\/my-account\/|\/wc-api\/v(.*)|\/(index\\.php\/)?wp\\-json(\/.*|$)|\/wp-admin\/|\/logout\/|\/wp-login.php","usesTrailingSlash":"1","imageExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif","fileExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|php|pdf|html|htm","siteUrl":"http:\/\/www.medianic.co.uk","onHoverDelay":"100","rateThrottle":"3"}; </script> <script type="rocketlazyloadscript" id='rocket-preload-links-js-after'> (function() { "use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}();function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var t=function(){function n(e,t){i(this,n),this.browser=e,this.config=t,this.options=this.browser.options,this.prefetched=new Set,this.eventTime=null,this.threshold=1111,this.numOnHover=0}return e(n,[{key:"init",value:function(){!this.browser.supportsLinkPrefetch()||this.browser.isDataSaverModeOn()||this.browser.isSlowConnection()||(this.regex={excludeUris:RegExp(this.config.excludeUris,"i"),images:RegExp(".("+this.config.imageExt+")$","i"),fileExt:RegExp(".("+this.config.fileExt+")$","i")},this._initListeners(this))}},{key:"_initListeners",value:function(e){-1<this.config.onHoverDelay&&document.addEventListener("mouseover",e.listener.bind(e),e.listenerOptions),document.addEventListener("mousedown",e.listener.bind(e),e.listenerOptions),document.addEventListener("touchstart",e.listener.bind(e),e.listenerOptions)}},{key:"listener",value:function(e){var t=e.target.closest("a"),n=this._prepareUrl(t);if(null!==n)switch(e.type){case"mousedown":case"touchstart":this._addPrefetchLink(n);break;case"mouseover":this._earlyPrefetch(t,n,"mouseout")}}},{key:"_earlyPrefetch",value:function(t,e,n){var i=this,r=setTimeout(function(){if(r=null,0===i.numOnHover)setTimeout(function(){return i.numOnHover=0},1e3);else if(i.numOnHover>i.config.rateThrottle)return;i.numOnHover++,i._addPrefetchLink(e)},this.config.onHoverDelay);t.addEventListener(n,function e(){t.removeEventListener(n,e,{passive:!0}),null!==r&&(clearTimeout(r),r=null)},{passive:!0})}},{key:"_addPrefetchLink",value:function(i){return this.prefetched.add(i.href),new Promise(function(e,t){var n=document.createElement("link");n.rel="prefetch",n.href=i.href,n.onload=e,n.onerror=t,document.head.appendChild(n)}).catch(function(){})}},{key:"_prepareUrl",value:function(e){if(null===e||"object"!==(void 0===e?"undefined":r(e))||!1 in e||-1===["http:","https:"].indexOf(e.protocol))return null;var t=e.href.substring(0,this.config.siteUrl.length),n=this._getPathname(e.href,t),i={original:e.href,protocol:e.protocol,origin:t,pathname:n,href:t+n};return this._isLinkOk(i)?i:null}},{key:"_getPathname",value:function(e,t){var n=t?e.substring(this.config.siteUrl.length):e;return n.startsWith("/")||(n="/"+n),this._shouldAddTrailingSlash(n)?n+"/":n}},{key:"_shouldAddTrailingSlash",value:function(e){return this.config.usesTrailingSlash&&!e.endsWith("/")&&!this.regex.fileExt.test(e)}},{key:"_isLinkOk",value:function(e){return null!==e&&"object"===(void 0===e?"undefined":r(e))&&(!this.prefetched.has(e.href)&&e.origin===this.config.siteUrl&&-1===e.href.indexOf("?")&&-1===e.href.indexOf("#")&&!this.regex.excludeUris.test(e.href)&&!this.regex.images.test(e.href))}}],[{key:"run",value:function(){"undefined"!=typeof RocketPreloadLinksConfig&&new n(new RocketBrowserCompatibilityChecker({capture:!0,passive:!0}),RocketPreloadLinksConfig).init()}}]),n}();t.run(); }()); </script> <script type="rocketlazyloadscript" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-includes/js/imagesloaded.min.js?ver=4.1.4' id='imagesloaded-js' defer></script> <script id='astra-addon-js-js-extra'> var astraAddon = {"sticky_active":"","svgIconClose":"<span class=\"ast-icon icon-close\"><\/span>","header_main_stick":"0","header_above_stick":"0","header_below_stick":"0","stick_header_meta":"","header_main_stick_meta":"","header_above_stick_meta":"","header_below_stick_meta":"","sticky_header_on_devices":"desktop","sticky_header_style":"none","sticky_hide_on_scroll":"0","break_point":"921","tablet_break_point":"921","mobile_break_point":"544","header_main_shrink":"1","header_logo_width":"","responsive_header_logo_width":{"desktop":"","tablet":"","mobile":""},"stick_origin_position":"","site_layout":"ast-full-width-layout","site_content_width":"1180","site_layout_padded_width":"1200","site_layout_box_width":"1200","header_builder_active":"","component_limit":"10","product_plus_minus_text":{"plus_qty":"Plus Quantity","minus_qty":"Minus Quantity"},"is_header_builder_active":""}; </script> <script type="rocketlazyloadscript" data-minify="1" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/cache/min/1/wp-content/uploads/astra-addon/astra-addon-6181f7dac669d0-23136102.js?ver=1635907547' id='astra-addon-js-js' defer></script> <script type="rocketlazyloadscript" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/plugins/astra-addon/addons/woocommerce/assets/js/minified/single-product-ajax-cart.min.js?ver=3.6.3' id='astra-single-product-ajax-cart-js' defer></script> <script type="rocketlazyloadscript" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-includes/js/jquery/ui/core.min.js?ver=1.12.1' id='jquery-ui-core-js' defer></script> <script id='popup-maker-site-js-extra'> var pum_vars = {"version":"1.16.2","pm_dir_url":"http:\/\/www.medianic.co.uk\/wp-content\/plugins\/popup-maker\/","ajaxurl":"http:\/\/www.medianic.co.uk\/wp-admin\/admin-ajax.php","restapi":"http:\/\/www.medianic.co.uk\/wp-json\/pum\/v1","rest_nonce":null,"default_theme":"4542","debug_mode":"","disable_tracking":"","home_url":"\/","message_position":"top","core_sub_forms_enabled":"1","popups":[],"analytics_route":"analytics","analytics_api":"http:\/\/www.medianic.co.uk\/wp-json\/pum\/v1"}; var pum_sub_vars = {"ajaxurl":"http:\/\/www.medianic.co.uk\/wp-admin\/admin-ajax.php","message_position":"top"}; var pum_popups = {"pum-4548":{"triggers":[{"type":"auto_open","settings":{"cookie_name":["pum-4548"],"delay":"1500"}}],"cookies":[{"event":"on_popup_close","settings":{"name":"pum-4548","key":"","session":false,"path":"1","time":"1 month"}},{"event":"pum_sub_form_success","settings":{"name":"pum-4548","key":"","session":false,"path":true,"time":"1 year"}}],"disable_on_mobile":false,"disable_on_tablet":false,"atc_promotion":null,"explain":null,"type_section":null,"theme_id":"4544","size":"medium","responsive_min_width":"0%","responsive_max_width":"100%","custom_width":"300px","custom_height_auto":true,"custom_height":"380px","scrollable_content":false,"animation_type":"fade","animation_speed":"350","animation_origin":"bottom","open_sound":"none","custom_sound":"","location":"center","position_top":"100","position_bottom":"10","position_left":"0","position_right":"10","position_from_trigger":false,"position_fixed":false,"overlay_disabled":false,"stackable":false,"disable_reposition":false,"zindex":"1999999999","close_button_delay":"100","fi_promotion":null,"close_on_form_submission":true,"close_on_form_submission_delay":"500","close_on_overlay_click":true,"close_on_esc_press":false,"close_on_f4_press":false,"disable_form_reopen":false,"disable_accessibility":false,"theme_slug":"enterprise-blue","id":4548,"slug":"newsletter"}}; </script> <script type="rocketlazyloadscript" data-minify="1" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/cache/min/1/wp-content/uploads/pum/pum-site-scripts.js?ver=1631910100' id='popup-maker-site-js' defer></script> <script src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-includes/js/wp-embed.min.js?ver=5.8.2' id='wp-embed-js' defer></script> <script type="rocketlazyloadscript" data-minify="1" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/cache/min/1/wp-content/plugins/fb-reviews-widget/static/js/rplg.js?ver=1636253294' id='rplg_js-js' defer></script> <script type="rocketlazyloadscript" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/plugins/fb-reviews-widget/static/js/blazy.min.js?ver=5.8.2' id='rplg_blazy-js' defer></script> <script type="rocketlazyloadscript" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/plugins/elementor-pro/assets/js/webpack-pro.runtime.min.js?ver=3.4.1' id='elementor-pro-webpack-runtime-js' defer></script> <script type="rocketlazyloadscript" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=3.4.8' id='elementor-webpack-runtime-js' defer></script> <script type="rocketlazyloadscript" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=3.4.8' id='elementor-frontend-modules-js' defer></script> <script type="rocketlazyloadscript" id='elementor-pro-frontend-js-before'> var ElementorProFrontendConfig = {"ajaxurl":"http:\/\/www.medianic.co.uk\/wp-admin\/admin-ajax.php","nonce":"4e4a2ee83e","urls":{"assets":"http:\/\/www.medianic.co.uk\/wp-content\/plugins\/elementor-pro\/assets\/","rest":"http:\/\/www.medianic.co.uk\/wp-json\/"},"i18n":{"toc_no_headings_found":"No headings were found on this page."},"shareButtonsNetworks":{"facebook":{"title":"Facebook","has_counter":true},"twitter":{"title":"Twitter"},"google":{"title":"Google+","has_counter":true},"linkedin":{"title":"LinkedIn","has_counter":true},"pinterest":{"title":"Pinterest","has_counter":true},"reddit":{"title":"Reddit","has_counter":true},"vk":{"title":"VK","has_counter":true},"odnoklassniki":{"title":"OK","has_counter":true},"tumblr":{"title":"Tumblr"},"digg":{"title":"Digg"},"skype":{"title":"Skype"},"stumbleupon":{"title":"StumbleUpon","has_counter":true},"mix":{"title":"Mix"},"telegram":{"title":"Telegram"},"pocket":{"title":"Pocket","has_counter":true},"xing":{"title":"XING","has_counter":true},"whatsapp":{"title":"WhatsApp"},"email":{"title":"Email"},"print":{"title":"Print"}},"menu_cart":{"cart_page_url":"http:\/\/www.medianic.co.uk\/cart\/","checkout_page_url":"http:\/\/www.medianic.co.uk\/card\/"},"facebook_sdk":{"lang":"en_GB","app_id":""},"lottie":{"defaultAnimationUrl":"http:\/\/www.medianic.co.uk\/wp-content\/plugins\/elementor-pro\/modules\/lottie\/assets\/animations\/default.json"}}; </script> <script type="rocketlazyloadscript" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/plugins/elementor-pro/assets/js/frontend.min.js?ver=3.4.1' id='elementor-pro-frontend-js' defer></script> <script type="rocketlazyloadscript" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/plugins/elementor/assets/lib/waypoints/waypoints.min.js?ver=4.0.2' id='elementor-waypoints-js' defer></script> <script type="rocketlazyloadscript" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/plugins/elementor/assets/lib/swiper/swiper.min.js?ver=5.3.6' id='swiper-js' defer></script> <script type="rocketlazyloadscript" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/plugins/elementor/assets/lib/share-link/share-link.min.js?ver=3.4.8' id='share-link-js' defer></script> <script type="rocketlazyloadscript" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/plugins/elementor/assets/lib/dialog/dialog.min.js?ver=4.8.1' id='elementor-dialog-js' defer></script> <script type="rocketlazyloadscript" id='elementor-frontend-js-before'> var elementorFrontendConfig = {"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"Share on Facebook","shareOnTwitter":"Share on Twitter","pinIt":"Pin it","download":"Download","downloadImage":"Download image","fullscreen":"Fullscreen","zoom":"Zoom","share":"Share","playVideo":"Play Video","previous":"Previous","next":"Next","close":"Close"},"is_rtl":false,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"Mobile","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Extra","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablet","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablet Extra","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"Laptop","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"Widescreen","value":2400,"default_value":2400,"direction":"min","is_enabled":false}}},"version":"3.4.8","is_static":false,"experimentalFeatures":{"e_import_export":true,"landing-pages":true,"elements-color-picker":true,"admin-top-bar":true,"form-submissions":true},"urls":{"assets":"http:\/\/www.medianic.co.uk\/wp-content\/plugins\/elementor\/assets\/"},"settings":{"page":[],"editorPreferences":[]},"kit":{"active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes","lightbox_enable_counter":"yes","lightbox_enable_fullscreen":"yes","lightbox_enable_zoom":"yes","lightbox_enable_share":"yes","lightbox_title_src":"title","lightbox_description_src":"description"},"post":{"id":3560,"title":"Build%20a%20Music%20Player%20With%20Vuetify%20%E2%80%93%20Medianic","excerpt":"","featuredImage":"https:\/\/mlbfpno7sppo.i.optimole.com\/t5SD360.eoUz~13a3a\/w:auto\/h:auto\/q:90\/http:\/\/www.medianic.co.uk\/wp-content\/uploads\/2018\/07\/player_final.png"}}; </script> <script type="rocketlazyloadscript" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=3.4.8' id='elementor-frontend-js' defer></script> <script type="rocketlazyloadscript" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/plugins/elementor-pro/assets/js/preloaded-elements-handlers.min.js?ver=3.4.1' id='pro-preloaded-elements-handlers-js' defer></script> <script type="rocketlazyloadscript" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/plugins/elementor/assets/js/preloaded-modules.min.js?ver=3.4.8' id='preloaded-modules-js' defer></script> <script type="rocketlazyloadscript" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/plugins/elementor-pro/assets/lib/sticky/jquery.sticky.min.js?ver=3.4.1' id='e-sticky-js' defer></script> <script type="rocketlazyloadscript" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-includes/js/underscore.min.js?ver=1.13.1' id='underscore-js' defer></script> <script id='wp-util-js-extra'> var _wpUtilSettings = {"ajax":{"url":"\/wp-admin\/admin-ajax.php"}}; </script> <script type="rocketlazyloadscript" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-includes/js/wp-util.min.js?ver=5.8.2' id='wp-util-js' defer></script> <script id='wpforms-elementor-js-extra'> var wpformsElementorVars = {"captcha_provider":"recaptcha","recaptcha_type":"v3"}; </script> <script type="rocketlazyloadscript" src='https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/plugins/wpforms-lite/assets/js/integrations/elementor/frontend.min.js?ver=1.7.1.2' id='wpforms-elementor-js' defer></script> <script type="rocketlazyloadscript"> /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1); </script> <script>window.lazyLoadOptions={elements_selector:"img[data-lazy-src],.rocket-lazyload",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,callback_loaded:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible"){if(element.classList.contains("lazyloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}};window.addEventListener('LazyLoad::Initialized',function(e){var lazyLoadInstance=e.detail.instance;if(window.MutationObserver){var observer=new MutationObserver(function(mutations){var image_count=0;var iframe_count=0;var rocketlazy_count=0;mutations.forEach(function(mutation){for(i=0;i<mutation.addedNodes.length;i++){if(typeof mutation.addedNodes[i].getElementsByTagName!=='function'){continue} if(typeof mutation.addedNodes[i].getElementsByClassName!=='function'){continue} images=mutation.addedNodes[i].getElementsByTagName('img');is_image=mutation.addedNodes[i].tagName=="IMG";iframes=mutation.addedNodes[i].getElementsByTagName('iframe');is_iframe=mutation.addedNodes[i].tagName=="IFRAME";rocket_lazy=mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');image_count+=images.length;iframe_count+=iframes.length;rocketlazy_count+=rocket_lazy.length;if(is_image){image_count+=1} if(is_iframe){iframe_count+=1}}});if(image_count>0||iframe_count>0||rocketlazy_count>0){lazyLoadInstance.update()}});var b=document.getElementsByTagName("body")[0];var config={childList:!0,subtree:!0};observer.observe(b,config)}},!1)</script><script data-no-minify="1" async src="https://mlbfpno7sppo.i.optimole.com/t5SD360.eoUz~13a3a/f:js/q:90/m:0/http://www.medianic.co.uk/wp-content/plugins/wp-rocket/assets/js/lazyload/16.1/lazyload.min.js"></script> </body> </html> <!-- This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: https://wp-rocket.me --><script defer src="https://static.cloudflareinsights.com/beacon.min.js/v64f9daad31f64f81be21cbef6184a5e31634941392597" integrity="sha512-gV/bogrUTVP2N3IzTDKzgP0Js1gg4fbwtYB6ftgLbKQu/V8yH2+lrKCfKHelh4SO3DPzKj4/glTO+tNJGDnb0A==" data-cf-beacon='{"rayId":"6b5cf6a3286f7ff3","version":"2021.11.0","r":1,"token":"908c6ab9d51949ccbe2893a531439294","si":100}' crossorigin="anonymous"></script>