We Keep Coding

Same class but only trigger function for the one selected

Hello everyone I'm having a hard time trying to understand how to make this work.
I have 8 different divs, each one with an img used as button and same class (tm-img) and hidden divs with additional info. What I want is to have displayed only the img at the beginnig and when the user clicks one of the 8 images depending on the one they clicked the hidden divs from that image show. (Whats happening now is tha if I click on one image all hidden divs from all images show not just the one I clicked)
<div class="tm-full-container">
<div class="team-member card-container blue-card">
<img class='tm-img' onclick='run()' src="/team_1.png" alt="">
<h5 class="tm-title">Chef</h6>
<div class="tm-info">
<p class="tm-name">Rick Jones</p>
<p class="tm-position">Chef</p>
</div>
</div>
<div class="tm-full-info">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at
ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia
tempora temporibus perspiciatis? Assumenda?</p>
</div>
</div>
<script>
function run(){
$('.tm-info').toggle();
$('.tm-full-info').toggle();
$('.tm-title').toggle();
}</script>
All other 7 divs look the same with different image and name (Rick).
Thanks in advance.
Example

Consider the following.
$(function() {
function revealFullInfo(event) {
var self = $(event.target);
var parent = self.closest(".tm-full-container");
$('.tm-info, .tm-full-info, .tm-title', parent).toggle();
}
$(".tm-img").click(revealFullInfo);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tm-full-container">
<div class="team-member card-container blue-card">
<img class='tm-img' src="https://dummyimage.com/100x150/000/fff.png" alt="">
<h5 class="tm-title">Chef</h6>
<div class="tm-info">
<p class="tm-name">Rick Jones</p>
<p class="tm-position">Chef</p>
</div>
</div>
<div class="tm-full-info">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</p>
</div>
</div>
It's all a matter of using the correct selector and scope.
$('.tm-info, .tm-full-info, .tm-title', parent).toggle();
This is the same as:
parent.find('.tm-info, .tm-full-info, .tm-title').toggle();

This could be done using the keyword this: https://www.yogihosting.com/jquery-this/
.tm-info, .tm-full-info, .tm-title {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tm-full-container">
<div class="team-member card-container blue-card">
<img class='tm-img' src="https://via.placeholder.com/150" alt="">
<h5 class="tm-title">Chef</h6>
<div class="tm-info">
<p class="tm-name">Rick Jones</p>
<p class="tm-position">Chef</p>
</div>
</div>
<div class="tm-full-info">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at
ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia
tempora temporibus perspiciatis? Assumenda?</p>
</div>
</div>
<div class="tm-full-container">
<div class="team-member card-container blue-card">
<img class='tm-img' src="https://via.placeholder.com/150" alt="">
<h5 class="tm-title">Chef</h6>
<div class="tm-info">
<p class="tm-name">Rick Jones</p>
<p class="tm-position">Chef</p>
</div>
</div>
<div class="tm-full-info">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at
ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia
tempora temporibus perspiciatis? Assumenda?</p>
</div>
</div>
<script>
$('.tm-img').click(function(){
$(this).parent().parent().find('.tm-info').toggle();
$(this).parent().parent().closest('.tm-full-info').toggle();
$(this).parent().parent().closest('.tm-title').toggle();
});
</script>

You can do something like in below snippet . Use the this keyword so that the clicked element is triggered not all .
You can also for loop to run through all tags and trigger(toggle) clicked event
function funcRun(show) {
var showInfo = show.querySelector(".tm-tag-Info");
showInfo.classList.toggle("tm-tag-Info-Show")
}
.tm-tag-Info {
display: none
}
.tm-tag-Info-Show {
display: block
}
.tm-tag {
border: 2px solid red;
margin: 10px;
padding: 10px;
}
.imageFun {
width: 100px;
height: 100px
}
<div class="tm-tag" onclick="funcRun(this)">
<h4 class="tm-tag-Hed">CV for BV</h4>
<span class="tm-tag-Info"><img alt="imageFun" src="https://www.hdnicewallpapers.com/Walls/Big/Rainbow/Rainbow_on_Mountain_HD_Image.jpg" class="imageFun"><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</span>
</div>
<div class="tm-tag" onclick="funcRun(this)">
<h4 class="tm-tag-Hed">CV for BV</h4>
<span class="tm-tag-Info"><img alt="imageFun" src="https://www.hdnicewallpapers.com/Walls/Big/Rainbow/Rainbow_on_Mountain_HD_Image.jpg" class="imageFun"><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</span>
</div>
<div class="tm-tag" onclick="funcRun(this)">
<h4 class="tm-tag-Hed">CV for BV</h4>
<span class="tm-tag-Info"><img alt="imageFun" src="https://www.hdnicewallpapers.com/Walls/Big/Rainbow/Rainbow_on_Mountain_HD_Image.jpg" class="imageFun"><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</span>
</div>

creating a star rating system based of an API

I have an api that will give a number of either 1-5 under "ratings" , i also have a list of 5 stars, depending on the rating these stars will either turn red or black on click of the button, red will be for each number in the Ratings . i.e a rating of 4 would turn 4 of the stars red and 1 black. so far i have the html and css created but when the button is pressed i recieve no data at all to test the button I added a basic alert and that worked. So far I have this:
DEMO:
$("#viewreview").click(function(){
$.ajax("api link").done(function(data){
$(".reviewblk").html('');
var htmlstr = '';
for(var i=0; i<data.length; i++){
var rating = parseInt(data[i]["rating"]);
var chk = ['', '', '', '', ''];
for(var j=0; j<rating && j<5;j++){
chk[j] = 'checked';
}
htmlstr += '<div class="preview"><img src="reviewicon1.jpg" alt="reviewpic" class="revImg" /><div class="stars"><p class="checked '+chk[0]+'"></p><p class="checked '+chk[1]+'"></p><p class="checked '+chk[2]+'"></p><p class="checked '+chk[3]+'"></p><p class="checked '+chk[4]+'"></p></div><h3 class="personName">'+data[i]["nickname"]+'</h3><div class="revtext"><p>'+data[i]["review"]+'</p></div></div><hr />';
}
$(".reviewblk").html(htmlstr);
});
})
.productreviews{ /*sets font*/
font-family: 'Roboto Condensed', sans-serif;
}
.preview{ /*sets padding for how the div is displayed*/
padding-left: 60px;
padding-top: 30px;
padding-bottom: 30px;
display: block;
position: relative;
}
.revImg{ /*gives images curved edges*/
border-radius: 10px;
display: inline;
}
.personName{ /*sets the person name so that it is to the right of the image and just below the stars*/
display: inline;
position: absolute;
padding-left: 30px;
padding-top: 20px;
width: 150px;
}
.stars{ /*sets stars elements to above name and to the right of the image*/
position: absolute;
width: 100px;
top: 30px;
left: 180px;
}
.revtext{ /* displays the text div so that it is to the right side of the preview box*/
display: inline;
width: 550px;
position: absolute;
right: 0;
font-size: 15px;
font-weight: 600;
top: 10px;
}
.revtext p{ /*i used word wrap to wrap the word onto the next line then used overflow to contain the overflowing text and then used text overflow so that any overflowing text would be shown as an ellipsis*/
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
}
.btnreview{ /* setting the padding for the buton aswell as the color so that the text is white and the button itself is red, aswell as giving it curved edges.*/
padding: 10px 25px;
background-color: #F0191C;
color: white;
border: none;
border-radius: 10px;
}
.btnreview:hover{ /*changing the button when hovering and changing the cursor to a pointer*/
background-color: #8a130b;
cursor: pointer;
}
.btnblk{/* padding the button inside its div*/
padding: 25px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="productreviews"> <!--list of product reviews-->
<hr />
<h1 id = "productreviewheader">Product Reviews <span class="checked">*****</span></h1>
<hr />
<div class="reviewblk">
<div class="preview">
<img src="images/robot-juice-images/reviewicon1.jpg" alt="reviewpic" class="revImg" />
<div class="stars">
<p class = "checked">*****</p>
</div>
<h3 class="personName">Great Greace!!</h3>
<div class="revtext">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
</p>
</div>
</div>
<hr />
<div class="preview">
<img src="images/robot-juice-images/reviewicon1.jpg" alt="reviewpic" class="revImg" />
<div class="stars">
<p class = "checked">***<span class="unchecked">**</span></p>
</div>
<h3 class="personName">Great Greace!!</h3>
<div class="revtext">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
</p>
</div>
</div>
<hr class = "separation line"/>
<div class="preview">
<img src="images/robot-juice-images/reviewicon1.jpg" alt="reviewpic" class="revImg" />
<div class="stars">
<p class = "checked">****<span class="unchecked">*</span></p>
</div>
<h3 class="personName">Great Greace!!</h3>
<div class="revtext">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
</p>
</div>
</div>
<hr class = "separation line"/>
<div class="preview">
<img src="images/robot-juice-images/reviewicon2.jpg" alt="reviewpic" class="revImg" />
<div class="stars">
<p class = "checked">*****</p>
</div>
<h3 class="personName">This juice just keeps me going..</h3>
<div class="revtext">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
</p>
</div>
</div>
<hr class = "separation line"/>
</div>
<div class="reviewblk">
<div class="preview">
<img src="images/robot-juice-images/reviewicon1.jpg" alt="reviewpic" class="revImg" />
<div class="stars">
<p class = "checked">*****</p>
</div>
<h3 class="personName">Great Greace!!</h3>
<div class="revtext">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
</p>
</div>
</div>
<hr class = "separation line"/>
</div>
<div class="btnblk">
<button class="btnreview" id="viewreview">READ ALL REVIEWS</button>
</div>
</article>

Please consider the following.
$("#viewreview").click(function() {
$.ajax("api link").done(function(data) {
$(".reviewblk").html('');
var rating, preview, stars;
$.each(data, function(i, el) {
preview = $("<div>", {
class: "preview"
}).appendTo(".reviewblk");
$("<img>", {
src: "reviewicon1.jpg",
alt: "Review Icon",
class: "revImg"
}).appendTo(preview);
stars = $("<div>", {
class: "stars"
}).appendTo(preview);
rating = parseInt(el.rating);
for (var i = 1; i <= 5; i++) {
$("<p>", {
class: (i <= rating ? "checked" : "unchecked")
}).appendTo(stars);
}
$("<h3>", {
class: "personName"
}).html(el.nickname).appendTo(preview);
$("<div>", {
class: "revText"
}).html("<p>" + el.review + "</p>").appendTo(preview);
$("<hr>").appendTo(preview);
});
});
});
We can use jQuery to create the elements and append them as they are created. Using $.each(), we can itereate each of the items in data. WE also know there will be 5 'check' items, so we can simply create a small loop to create them. A number of them, equal to the rating will be "checked", so we can add a condition to check each one and mark it as needed.
For example, if the rating was 3, we would see:
<p class="checked"></p>
<p class="checked"></p>
<p class="checked"></p>
<p class="unchecked"></p>
<p class="unchecked"></p>
i will be 1 on the first iteration, and 1 is less than 3. On the 3rd loop, i will be 3 and will still meet the condition. When i is 4 or 5, it is no longer true so unchecked is supplied.

Trouble with slider arrows

I have a lot of trouble with my slider arrows as I am following along with a tutorial on youtube. Instead of going next to the picture and testimonial, it goes on the top. It didn't happen this way at first, but then I had a problem with glider.js, so I rewrote the code, and then the flaw appeared
HTML Code
<section class="testimonials-section">
<div class="wrapper">
<h2>Testimonials</h2>
<div class="testimonials container">
<div class="testimonials">
<div class="testimonial">
<div class="slide-container">
<div class="content">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga.
Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a.
Quidem, deleniti provident.
</p>
<div class="name">
<strong>Darlene Richards,</strong> Amazon
</div>
</div>
<img src="images/testimonial1.png" alt="">
</div>
</div>
<div class="testimonial">
<div class="slide-container">
<div class="content">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga.
Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a.
Quidem, deleniti provident.
</p>
<div class="name">
<strong>Peter Williams,</strong> Louis Vuitton
</div>
</div>
<img src="images/testimonial3.png" alt="">
</div>
</div>
<div class="testimonial">
<div class="slide-container">
<div class="content">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga.
Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a.
Quidem, deleniti provident.
</p>
<div class="name">
<strong>Tara Green,</strong> Ferrari
</div>
</div>
<img src="images/testimonial2.png" alt="">
</div>
</div>
</div>
<span class="slider-prev">
<img src="images/left-arrow.svg" alt="">
</span>
<span class="slider-next">
<img src="images/right-arrow.svg" alt="">
</span>
</div>
</div>
</section>
CSS Code
.slider-prev,
.slider-next {
position: absolute;
top: 68px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.06);
border-radius: 50%;
cursor: pointer;
}
.slider-next {
right: 0;
}

This is because of how the css position property works more info
Try add this line and see if it helps:
edit use .testimonials.container selector not .testimonials
.testimonials.container {
position: relative;
}

Touch-action movement from last to first in html/css

I am using touch-action property in my carousel, it auto slides too and there is no problem in it. What i am trying to do is, when i am scrolling slider using touch-action, it slides but when it comes on last slide it stops. I just want that, it doesn't stop and came to first slide.
Here is my HTML :
<div id="testimonial-slider" class="owl-carousel">
<div class="testimonial">
<div class="pic">
<img src="image/pay.png">
</div>
<h3 class="title">Williamson</h3>
<span class="post">Web Developer</span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium ad asperiores at atque culpa dolores eaque fugiat hic illo ipsam ipsum minima modi necessitatibus nemo officia, omnis perferendis placeat sit vitae, consectetur adipisicing elit ipsam.
</p>
</div>
<div class="testimonial">
<div class="pic">
<img src="image/pay.png">
</div>
<h3 class="title">Kristina</h3>
<span class="post">Web Designer</span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium ad asperiores at atque culpa dolores eaque fugiat hic illo ipsam ipsum minima modi necessitatibus nemo officia, omnis perferendis placeat sit vitae, consectetur adipisicing elit ipsam.
</p>
</div>
</div>
Here is my css :
.owl-carousel .owl-wrapper:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.owl-carousel{display:none;position:relative;width:100%;touch-action:default;}
.owl-carousel .owl-wrapper{display:none;position:relative;-webkit-transform:translate3d(0,0,0)}
.owl-carousel .owl-wrapper-outer{overflow:hidden;position:relative;width:100%}
.owl-carousel .owl-wrapper-outer.autoHeight{-webkit-transition:height 500ms ease-in-out;-moz-transition:height 500ms ease-in-out;-ms-transition:height 500ms ease-in-out;-o-transition:height 500ms ease-in-out;transition:height 500ms ease-in-out}
.owl-carousel .owl-item{float:left}.owl-controls .owl-page,.owl-controls .owl-buttons div{cursor:pointer}.owl-controls{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.grabbing{cursor:url(grabbing.png) 8 8,move}
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}
Here is my script :
$(document).ready(function(){
$("#testimonial-slider").owlCarousel({
items:1,
itemsDesktop:[1000,1],
itemsDesktopSmall:[979,1],
itemsTablet:[768,1],
transitionStyle:"backSlide",
autoPlay:true
});
});

Owl Carousel had a built in loop option just use the loop:true Refer documentation : https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
$(document).ready(function(){
$("#testimonial-slider").owlCarousel({
items:1,
itemsDesktop:[1000,1],
itemsDesktopSmall:[979,1],
itemsTablet:[768,1],
transitionStyle:"backSlide",
autoplay:true,
loop:true // for looping ref https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
});
});
JS Fiddle Preview : https://jsfiddle.net/itsselvam/eaq0978s/

Swap content using a fade out/fade in effect HTML

I was wondering if there is a way to swap the content of a html page with a nice fade in fade out effect using JS or jQuery.
In the HTML code I have below I cant to be able to swap out the section class="inner-wrapper" for some new content.
Would be great if you could help me out. :)
<div class="meny">
<a href="#">
<section class="one-fourth" id="html">
<i class="fa fa-shopping-cart"><h3>Beställ</h3></i>
</section>
</a>
<a href="#">
<section class="one-fourth" id="social">
<i class="fa fa-list-ul"><h3>Recept</h3></i>
</section>
</a>
</div>
<!--övre delen slut-->
<!-- mitten-->
<section class="inner-wrapper">
<article id="one-two">
<h2>Målet med vagnen</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis repellat, distinctio alias expedita exercitationem maxime, dolores cumque rem beatae laudantium sint! Exercitationem perferendis, illum suscipit, cupiditate sit facere ullam harum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum aliquam explicabo beatae quam. Officia adipisci voluptatibus explicabo corrupti quaerat, non, voluptatem consequatur repellat in sequi. Odit adipisci dolore, deserunt labore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eaque deleniti debitis inventore unde aliquid nemo, optio ipsam voluptatum, a, libero laborum? Dolore eaque quod ratione optio voluptatum omnis reiciendis.</p>
</article>
<aside id="tablet2">
<hr>
<h2>Senaste nytt från vagnen</h2>
<a class="twitter-timeline" data-width="500" data-height="600" href="https://twitter.com/ViktorParment">Tweets by ViktorParment</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</aside>
</section>
Edit:
sorry for the bad post :P
This is what I would like to swap it for when i CLICK on one of the one-fourth divs
<a href="#">
<section class="one-fourth" id="html">
<i class="fa fa-shopping-cart"><h3>Beställ</h3></i>
</section>
</a>
<a href="#">
<section class="one-fourth" id="social">
<i class="fa fa-list-ul"><h3>Recept</h3></i>
</section>
</a>
</div>
<!--övre delen slut-->
<!-- mitten-->
<section class="inner-wrapper2">
<article id="one-two">
<h2>Recept</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi sit quas quam accusamus, quia facilis illo omnis repudiandae distinctio architecto sed, deleniti ducimus mollitia sequi repellendus. Distinctio rerum maiores rem.</p>
</article>
<aside id="tablet2">
<hr>
<img src="img/pannkakor.jpg" alt="">
</aside>
</section>

You can use fadeOut and fadein for this. fadeout/fadeIn also provide a callback function which will be fired once action is completed.
Read here
http://api.jquery.com/fadein/
and
http://api.jquery.com/fadeout/
$(".inner-wrapper").fadeOut( 3000, function() {
$(this).html("<div>Hello</div>");
$(".inner-wrapper").fadeIn(3000)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="meny">
<a href="#">
<section class="one-fourth" id="html">
<i class="fa fa-shopping-cart"><h3>Beställ</h3></i>
</section>
</a>
<a href="#">
<section class="one-fourth" id="social">
<i class="fa fa-list-ul"><h3>Recept</h3></i>
</section>
</a>
</div>
<!--övre delen slut-->
<!-- mitten-->
<section class="inner-wrapper">
<article id="one-two">
<h2>Målet med vagnen</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis repellat, distinctio alias expedita exercitationem maxime, dolores cumque rem beatae laudantium sint! Exercitationem perferendis, illum suscipit, cupiditate sit facere ullam harum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum aliquam explicabo beatae quam. Officia adipisci voluptatibus explicabo corrupti quaerat, non, voluptatem consequatur repellat in sequi. Odit adipisci dolore, deserunt labore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eaque deleniti debitis inventore unde aliquid nemo, optio ipsam voluptatum, a, libero laborum? Dolore eaque quod ratione optio voluptatum omnis reiciendis.</p>
</article>
<aside id="tablet2">
<hr>
<h2>Senaste nytt från vagnen</h2>
<a class="twitter-timeline" data-width="500" data-height="600" href="https://twitter.com/ViktorParment">Tweets by ViktorParment</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</aside>
</section>