Skew list items

In this example below you will see how to do a Skew list items with some HTML / CSS and Javascript

Skew list items as seen on http://frontenddesignconference.com/

Thumbnail
This awesome code was written by -J0hn-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -J0hn- ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Skew list items</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">Schedule</a>
  <a href="#">Workshops</a>
  <a href="#">Speakers</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
  <a href="#">Register</a>
</div>


<div id="main">
  
  <span onclick="openNav()"> Menu</span>


<div class="container">
<!--   <img src="http://frontenddesignconference.com/img/svg/fedc2016logo.svg" alt="Front-End Design Conference Logo"> -->
  <h1 class="text-uppercase text-center">front-end design conference</h1>
  
  <ul class="list-unstyled list-inline text-center">
    <li>Schedule</li>
    <li>Workshops</li>
    <li>Speakers</li>
    <li>About</li>
    <li>Contact</li>
    <li>Register</li>
  </ul>
  <h1 class="text-center">A Conference for Web Professionals Who Love their Community, the Web, and Learning.</h1>
  <button class="btn btn-info">Register Now</button>
  <div class="row">
  <div class="col-sm-8">
    <form>
    <div class="input-group">
   <input type="text" class="form-control" placeholder="Your email...">
   <span class="input-group-btn">
        <button class="btn btn-primary" type="button">Sign Up</button>
   </span>
</div>
    </form>
  </div><!--col-sm-8-->
    <div class="col-sm-4">
      <div class="icons">
      <i class="fa fa-facebook-square" style="font-size:36px"></i>
      <i class="fa fa-twitter-square" style="font-size:36px"></i>
      <i class="fa fa-google-plus-square" style="font-size:36px"></i>
      </div>
    </div>
  </div><!--row-->
  
</div><!--container-->
  </div><!--#main-->
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/-J0hn-/skew-list-items-xEEzXA */
@import 'https://fonts.googleapis.com/css?family=Laila:700|Roboto+Condensed:700';
body{
  background-image:url("https://67.media.tumblr.com/c3959aaf01041ec89cd0a1786f99cdc6/tumblr_nlgog7Th8V1qdzkgio1_500.png");
  background-size:cover;
  background-reapeat:no-repeat;
  background-attachment:fixed;
}

img {
    width: 100%;
    display: block;
    padding: 0;
    margin: 0;
  margin-top:20px;
}
.container ul{
  margin-top:50px;
}
li:hover{
  cursor:pointer;
}
ul li:hover{
  background:#cc0000;
}
.container ul li{
  color:white;
  font-size:1em;
  letter-spacing:2px;
  padding:30px;
  margin:0 -2px;
}
.container h1{
  color:#fff;
  font-family: 'Laila', serif;
  margin-top:10%;
}
.btn-info{
  background-color:#0066ff;
  border-color:#0066ff;
  font-size:1.1em;
  display:block;
  margin-top:50px;
  margin-left:auto;
  margin-right:auto;
  padding:20px;
  transition-property:background-color, border-color;
  transition-duration:.4s;
}
.btn-info:hover{
  background-color:#cc0000;
  border-color:#cc0000;
}
.row{
  margin: 50px 0;
  border-top:dashed 2px rgba(153, 153, 153, .5);
  border-bottom:dashed 2px rgba(153, 153, 153, .5);
  padding: 25px 0;
}
form .btn-primary{
  background:#0066ff;
  border-color:#0066ff;
  transition-property:background, border-color;
  transition-duration:.4s;
}
form .btn-primary:hover{
  background:#cc0000;
  border-color:#cc0000;
}
.col-sm-4 i{
  color:#fff;
  margin:0 5px;
}
.col-sm-4 i:hover{
  cursor:pointer;
  color:#0066ff;
}
@media(min-width:768px){
  li:nth-of-type(odd){
  background:linear-gradient(to top,#0066ff,#8533ff);
  transform:skewY(-10deg);
}
li:nth-of-type(even){
  background:linear-gradient(to top,blue,#3399ff);
  transform:skewY(10deg);
}
}
@media (max-width:768px){
  .sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #0066ff;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
text-align:center;
    background:#2eb82e;
    padding: 8px 32px 8px 32px;
    margin:5px;
border-radius:5px;
    text-decoration: none;
    font-size: 25px;
    color: white;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
    background:#cc0000;
}
  #main span[onclick="openNav()"]{
    font-size:1.2em;
    cursor:pointer;
    background:#0066ff;
    color:#fff;
    padding:10px 15px;
    border-radius:5px;
    transition-property:background-color;
    transition-duration:.4s;
  }
  #main span[onclick="openNav()"]:hover{
    background:#cc0000;
  }
.sidenav .closebtn {
background:none;
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
.sidenav .closebtn:hover {
    background:none;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}
  
  
  ul{
    display:none;
  }
  .container img{
    border-bottom: dashed 8px rgba(153, 153, 153, .5);
    padding-bottom:30px;
    margin-top:30px;
  }
}

@media (min-width:769px){
  .sidenav,
  [onclick="openNav()"]{
    display:none;
  }
}
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/*Downloaded from https://www.codeseek.co/-J0hn-/skew-list-items-xEEzXA */
function openNav() {
    document.getElementById("mySidenav").style.width = "300px";
    document.getElementById("main").style.marginLeft = "350px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}

Comments