I have a project and use more than 1 template I have problems with 2 css links from 2 different templates, I want the css link from templates to only affect a single html card without affecting the rest in file .cshtml . Please give me a solution.
I have the layout.cshtml file as follows and the css link in my 2nd templates in the last line
<head>
<title>POU Education Category Bootstrap Responsive website Template | Home :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="POU Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola web design" />
<script>
addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<!-- Custom Theme files -->
<link href="~/home/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<!-- shop css -->
<link href="~/home/css/shop.css" type="text/css" rel="stylesheet" media="all">
<link href="~/home/css/style.css" type="text/css" rel="stylesheet" media="all">
<!-- font-awesome icons -->
<link href="~/home/css/font-awesome.css" rel="stylesheet">
<!-- //Custom Theme files -->
<!-- online-fonts -->
<!-- logo -->
<link href="//fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">
<!-- titles -->
<link href="//fonts.googleapis.com/css?family=Merriweather+Sans:300,300i,400,400i,700,700i,800,800i" rel="stylesheet">
<!-- body -->
<link href="//fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
<!-- //online-fonts -->
<link href="//fonts.googleapis.com/css2?family=Hind:wght#300;400;500;600&display=swap" rel="stylesheet">
<link href="//fonts.googleapis.com/css2?family=Libre+Baskerville:wght#400;700&display=swap" rel="stylesheet">
<link href="~/css/style-starter.css" type="text/css" rel="stylesheet">
</head>
This is an index.cshtml file code that uses the layout above
<!--end post-->
<div class="w3l-homeblock2 py-5">
<div class="container py-lg-5 py-md-4">
<!-- block -->
<div class="row">
<div class="col-lg-12">
<h3 class="section-title-left mb-4"> Editor's Pick </h3>
<div class="row">
<div class="col-lg-6 col-md-6 item">
<div class="card">
<div class="card-header p-0 position-relative">
<a href="#blog-single.html">
<img class="card-img-bottom d-block radius-image-full"
src="assets/images/image1.jpg" alt="Card image cap">
</a>
</div>
<div class="card-body blog-details">
<span class="label-blue">Beauty</span>
<a href="#blog-single.html" class="blog-desc">The 3 Eyeshadow palettes I own & How to
downsize your stash
</a>
<p>Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis
vitae sit.</p>
<div class="author align-items-center mt-3 mb-1">
<img src="assets/images/a1.jpg" alt="" class="img-fluid rounded-circle" />
<ul class="blog-meta">
<li>
Isabella ava </a>
</li>
<li class="meta-item blog-lesson">
<span class="meta-value"> July 13, 2020 </span>. <span
class="meta-value ml-2"><span class="fa fa-clock-o"></span> 1 min</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 mt-md-0 mt-sm-5 mt-4">
<div class="card">
<div class="card-header p-0 position-relative">
<a href="#blog-single.html">
<img class="card-img-bottom d-block radius-image-full"
src="assets/images/image2.jpg" alt="Card image cap">
</a>
</div>
<div class="card-body blog-details">
<span class="label-blue">Fashion</span>
<a href="#blog-single.html" class="blog-desc">2 New outfit formulas to add to your
Capsule Wardrobe
</a>
<p>Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis
vitae sit.</p>
<div class="author align-items-center mt-3 mb-1">
<img src="assets/images/a2.jpg" alt="" class="img-fluid rounded-circle" />
<ul class="blog-meta">
<li>
Charlotte mia </a>
</li>
<li class="meta-item blog-lesson">
<span class="meta-value"> July 13, 2020 </span>. <span
class="meta-value ml-2"><span class="fa fa-clock-o"></span> 1 min</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I would like to take the path css at the bottom of the layout.cshtml file (<link href="~/css/style-starter.css" type="text/css" rel="stylesheet">) only affects the card // in the first line (//) but other card components will not be usable in the index file.cshtml
What I understand is that you got 2-cards in 2-separate-html-files, now you want some global-css to be applied on one, but not in the other html-file or some card contained there.
Solution-1:
Add an extra class like .special-card and use this class in 1st-file to add CSS to the card selectively, based on this class. Now, when you don't have attach this class in the 2nd card, CSS will NOT be automatically applied there.
Solution-2:
In card, where you don't want the CSS to be applied, use Inline-CSS adding styles in the html-element directly to override CSS coming from global-CSS file.
Solution-3:
Keep the CSS that you want to partially apply in some separate test.css file, and attach it to only the card (externally), where you want to apply this. Just don't just attach this external .CSS file in your 2nd html file, so it won't take affect.
Related
This question already has an answer here:
Bootstrap 5 - Card Element Alignment on the Bottom
(1 answer)
Closed last year.
Okay so I'm trying to align the last two elements in the card so that the first one (button) can be on the left, and another element (Div with multiple social icon images) on the right side. How can I achieve that?
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="/bootstrap-icons-1.7.2/*">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="card col-8 position-absolute top-50 start-50 translate-middle">
<div class="row g-0">
<div class="col-md-4">
<img src="Logo.png" class="img-fluid rounded-start" alt="Logo">
</div>
<div class="col-md-8">
<div class="card-body position-relative">
<h2 class="card-title" style="font-weight: bold;">John Doe</h5>
<h6 class="card-subtitle pb-3">Developer</h5>
<p class="card-text pb-3">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="row justify-content-between">
Portfolio
<div class="col-10">
<img src="/bootstrap-icons-1.7.2/facebook.svg" alt="Facebook Icon" width="32" height="32">
<img src="/bootstrap-icons-1.7.2/instagram.svg" alt="Instagram Icon" width="32" height="32">
<img src="/bootstrap-icons-1.7.2/linkedin.svg" alt="Linkedin Icon" width="32" height="32">
<img src="/bootstrap-icons-1.7.2/twitter.svg" alt="Twitter Icon" width="32" height="32">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.js"></script>
</body>
</html>
This is will work for your images also, but I imported font-awesome icons for your social media, as your images were not rendering. Essentially, all I added was a div col-4 for your a tag and used col-8 for your social media icons. Then I used text-end on your social icons to align them to the right. I also added align-items-center so they are in line.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="/bootstrap-icons-1.7.2/*">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Document</title>
</head>
<body>
<div class="card col-8">
<div class="row g-0">
<div class="col-md-4">
<img src="Logo.png" class="img-fluid rounded-start" alt="Logo">
</div>
<div class="col-md-8">
<div class="card-body position-relative">
<h2 class="card-title" style="font-weight: bold;">John Doe</h5>
<h6 class="card-subtitle pb-3">Developer</h5>
<p class="card-text pb-3">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="row align-items-center justify-content-between">
<div class="col-4">
Portfolio
</div>
<div class="col-8 text-end">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.js"></script>
</body>
</html>
I am trying to get my navbar buttons to line up on the right side.
I have tried:
class="pull-right" && "text-right"
I have also tried:
.btn-talent{
align-items: right
}
I am struggling. Any help would be greatly appreciated
I also put this in a codepen:
https://codepen.io/rob-connolly/pen/yLaGMyW[enter image description here]1
.btn-investors {
background: #029D89;
color: white;
margin-right: 4vw;
border-radius: 4px;
}
.btn-talent {
background: #029D89;
color: white;
margin-right: 4vw;
border-radius: 4px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>meetlete: meet your favorite athletes!</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Paytone+One&family=Questrial&display=swap" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="./assets/images/favicon.png" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<link rel="stylesheet" href="./assets/style.css">
</head>
<body>
<!-- --- Navbar Issue -- -->
<nav class="navbar navbar-light">
<a class="navbar-brand" href="https://meetlete.com">
<img src="./assets/images/meetlete-logo.png" width="200px" alt="Meetlete Logo">
</a>
<!-- btn one issue -->
<button class="btn btn-talent" type="button">Talent</button>
<!-- btn two issue -->
<button class="btn btn-investors" type="button">Investors</button>
</nav>
<!-- Content -->
<!-- Footer -->
<!-- Footer -->
<footer class="container-flex bg-footerTop text-center text-lg-start">
<!-- Grid container -->
<div class="p-4">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">About Us</h5>
<p>
Meetlete wants to give you the once in a lifetime opportunity to meet one of your favorite athletes. We are the first platform that allows fans to have personal one on one video calls with the biggest stars in sports. With every meetlete video call, we
donate a portion of the proceeds to the foundation of the athlete's choice. What makes this possible is the Meetlete secure and private platform. <br><br>Launching 2/14/21! <i class="far fa-heart"></i>
</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Address:</h5>
<span>Meetlete, Inc.<br>
Po Box 294<br>
La Mesa, CA 91944
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase mb-0">Links</h5>
<ul class="list-unstyled">
<li>
Talent Sign Up
</li>
<li>
Fans Sign Up
</li>
<li>
Investor Info
</li>
<li>
Press
</li>
</ul>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="text-center p-3 copyright" style="background-color: rgba(0, 0, 0, 0.2)">
© 2020 Copyright:
<a class="text-dark" href="https://meetlete.com">Meetlete.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!-- bootstrap js file-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous">
</script>
<script src="script.js"></script>
</body>
</html>
.
You should wrap your buttons with div. .navbar is a flexbox and uses justify: space-between rule. Here the buttons are flexbox items that's why they are spread inside nav.
<nav class="navbar navbar-light">
<a class="navbar-brand" href="https://meetlete.com">
<img src="./assets/images/meetlete-logo.png" width="200px" alt="Meetlete Logo">
</a>
<div>
<button class="btn btn-talent" type="button">Talent</button>
<button class="btn btn-investors" type="button">Investors</button>
</div>
</nav>
Website structure currently looks like this:
index.html:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<!-- Own styles -->
<link rel="stylesheet" href="css/styles.css">
<title>My website</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-4 sidebar d-flex flex-column align-items-center justify-content-center text-center fixed-top">
<img src="images/avatar.jpg" class="rounded-circle">
<h3 class="text-light">John Doe</h3>
<h5 class="text-light">programmer</h5>
<p class="text-muted mt-5 mb-0">123 456 789</p>
<p class="text-muted">test#test.com</p>
<p class="mt-5 text-white">
Language 1
|
Language 2
</p>
<p class="social">
<i class="fab fa-facebook-f"></i></i>
<i class="fab fa-twitter"></i></i>
</p>
<p class="text-muted">© Someone | 2015 - 2019</p>
</div>
<div class="col-12 col-md-8 offset-md-4 d-flex flex-column mt-5 content">
<p>Content</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
styles.css:
#media (max-width: 767.98px) {
.sidebar {
height: auto !important;
padding-top: 10px;
padding-bottom: 10px;
position: static;
}
}
.sidebar {
background-color: #9DB9E8;
height: 100vh;
}
On devices with class md and less I want to split sidebar on the left into two parts. First part should be on the top of the page only with following lines of code:
<img src="images/avatar.jpg" class="rounded-circle">
<h3 class="text-light">John Doe</h3>
<h5 class="text-light">programmer</h5>
Second part should be at the bottom of the page (under div with class content) and contain all the remaining lines of code from sidebar. Both parts should have same styles as sidebar.
How do I achieve this in Bootstrap 4?
To do this, you should split them into two divs.
<div id="section1">
(what ever you want in 1st section.)
</div>
<div id="section2">
(whatever you want in 2nd section.)
</div>
My school offers a free website space for each student. I created a website with the following structure
- index.html
- main-site/
- css/
- bootstrap.css
- style.css
- img/
- js/
- help-docs/
- template/
When I visit the site on my home machine, everything loads fine and the css is applied to the pages.
I then upload the folder to the root of my website for the school. I replace the default index.html with mine and place the folders in the same structure as before. But the problem is that when I open the page from the new endpoint, the css is not applied. None of the images are loaded and the website just looks bare.
I've tried changing the permissions of the folders and files to make them accessible but this does not seem to work. I even changed everything to 777 and it does not make a difference.
I got one of my friends to try my website on his page and everything seems to be working well for him. So at this point I'm not sure what the problem is.
I should also add that the webserver is apache
So far, in my .htaccess file, I have the following:
DirectoryIndex website.html
I have also changed index.html to website.html and now accessing the website by using website.html rather than index.html still works fine apart from the inability to load css or js files.
Is this something that can be solved using a .htaccess file? If so, what could I add to it to make this work? Other solutions are welcome, although it should be noted that I do not have root access
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<title>Light Wave Template | DesignBootstrap</title>
<!-- BOOTSTRAP CORE CSS -->
<link href="main-site/css/bootstrap.css" rel="stylesheet" />
<!-- CUSTOM CSS -->
<link href="main-site/css/style.css" rel="stylesheet" />
<!-- HTML5 Shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- HEADER SECTION START-->
<section id="header">
<div class="container">
<div class="row text-center">
<div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-12">
<h1>Light Wave Template </h1>
<p>
<strong>6 Style </strong> Versions
</p>
<h4>Click on the image to see demos</h4>
</div>
</div>
</div>
</section>
<!-- HEADER SECTION END-->
<!-- PREVIEW SECTION START-->
<section id="preview">
<div class="container">
<div class="row text-center">
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 ">
<h1>SEE DEMOS</h1>
<h3> See Document</h3>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="preview-wrapper">
<a href="template/blue.html" target="_blank">
<img src="main-site/img/previews/1.png" class="img-responsive" alt="" />
<hr />
<p>
Blue Color Version ( With slider background )
</p>
</a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="preview-wrapper">
<a href="template/green.html" target="_blank">
<img src="main-site/img/previews/2.png" class="img-responsive" alt="" />
<hr />
<p>
Green Color Version ( With slider background )
</p>
</a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="preview-wrapper">
<a href="template/red.html" target="_blank">
<img src="main-site/img/previews/3.png" class="img-responsive" alt="" />
<hr />
<p>
Red Color Version ( With slider background )
</p>
</a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="preview-wrapper">
<a href="template/yellow.html" target="_blank">
<img src="main-site/img/previews/4.png" class="img-responsive" alt="" />
<hr />
<p>
Yellow Color Version ( With slider background )
</p>
</a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="preview-wrapper">
<a href="template/solid-black.html" target="_blank">
<img src="main-site/img/previews/5.png" class="img-responsive" alt="" />
<hr />
<p>
Black Background Version ( With solid background )
</p>
</a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="preview-wrapper">
<a href="template/solid-red.html" target="_blank">
<img src="main-site/img/previews/6.png" class="img-responsive" alt="" />
<hr />
<p>
Green Background Version ( With solid background )
</p>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- PREVIEW SECTION END-->
<!-- YES SECTION START-->
<section id="yes">
<div class="overlay">
<div class="container">
<div class="row text-center">
<div class="col-lg-12 col-md-12">
<span class="text-yes">Yes , You heard right !
<br />
its'free and with documentation</span>
</div>
</div>
</div>
</div>
</section>
<!-- YES SECTION END-->
<!-- BOTTOM SECTION START-->
<section id="bottom">
<div class="container">
<div class="row text-center">
<div class="col-md-12">
<h3>Want Some More ?</h3>
<h4>EXPLORE : DesignBootstrap.com</h4>
</div>
</div>
<div class="row text-center">
<div class="col-md-12 ">
</div>
</div>
</div>
</section>
<!-- BOTTOM SECTION END-->
<!-- FOOTER SECTION START-->
<footer>
<div class="container">
<div class="row text-center">
<div class="col-md-12">
© 2015 DesignBootstrap.com
</div>
</div>
</div>
</footer>
<!-- FOOTER SECTION END-->
<!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME -->
<!-- CORE JQUERY SCRIPTS -->
<script src="main-site/js/jquery-1.11.1.js"></script>
<!-- BOOTSTRAP SCRIPTS -->
<script src="main-site/js/bootstrap.js"></script>
</body>
</html>
Try creating a new directory outside of main-site and moving the files to that directory. This may fix the problem that you are experiencing.
Sounds like there may be a problem with file or directory ownership, but without being able to see it, I'm not exactly sure.
In addition to Brandon's answer, I found that the actual issue was that the directories I had copied over did not have the right permissions associated with them. After creating a temporary directory, I noticed that the folder had the permission 755
ls -ld tempdir
drwxr-xr-x 2 aaa111 student 4096 Feb 21 18:34 tempdir
Whereas the other folders had only permission 700
To fix, this I ran this command:
find main-site template help-docs -type d | xargs chmod 755
And now everything works well
Im working on a simple project and i am new to this(as the title says).
So what i want to happend is: When you tap a link(ommig) i want the unit to vibrate a bit.
I tried to use Hammer.js lib but failed, I dont really mind using the html5 way, so im not all locked in to just be using hammer.js.
So when I click the #ommig ID/class i want the unit to vibrate.
Please help a newbie in distress (and thanks for all the answers)
HTML (i deleted all my bad js code):
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Start</title>
<link rel="shortcut icon" href="img/icon.jpg">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="hammer.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="index.html"> <div class="container">
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="img/logo.png" alt="image">
</div>
<div class="item">
<img src="img/logo2.png" alt="image">
<div class="carousel-caption">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
<a href="ommig.html"> <div id="ommig"> <p>Om mig </p>
</div> </a>
<a href="cv.html"> <div id="cv"> <p> CV </p>
</div> </a>
<a href="portfolio.html"><div id="portfolio" >
<p> Portfolio </p>
</div></a>
<a href="kontakt.html"><div id="Kontakt" >
<div id="kontakt" >
<p> Kontakt </p>
</div></a>
</body>
</html>
There is a new HTML Vibrate API, but it is not very widely supported.
//Check if Vibrator is available, use custom browser prefix if needed
navigator.vibrate = navigator.vibrate ||
navigator.webkitVibrate ||
navigator.mozVibrate ||
navigator.msVibrate;
if (navigator.vibrate) {
console.log('vibration supported');
navigator.vibrate(500);
} else {
console.log('vibration not supported');
}
Read more here: http://shapeshed.com/html5-vibrate-api/