<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Tech Toolbox</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <div class="wrapper">
  
    <div class="slider">
      <img src="https://images.unsplash.com/photo-1510519138101-570d1dca3d66?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MjQ5NTM3Mjd8&ixlib=rb-4.0.3&q=80&w=400">
    </div>

    <nav class="slider-nav">
      <ul>
        
        <li class="arrow">
          <a href="#"><span>←</span></a>
        </li>
        
        <li>
          <a href="#"><span>Why Flexbox is My Go-To for Layouts</span></a>
        </li>
        
        <li>
          <a href="#"><span>JavaScript Libraries I Can’t Live Without</span></a>
        </li>
        
        <li>
          <a href="#"><span>Mastering CSS Grid for Responsive Design</span></a>
        </li>
        
        <li>
          <a href="#"><span>Exploring Advanced CSS Techniques</span></a>
        </li>
        
        <li class="arrow">
          <a href="#"><span>→</span></a>
        </li>

      </ul>
    </nav>
  
  </div>
</body>
</html>
/* Some CSS Setup - nothing to do with flexbox */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: sans-serif;
  margin: 0;
  background-image: linear-gradient(260deg, #1e3a5f 0%, #5ca9d6 100%);

}

.wrapper {
  max-width: 1000px;
  margin: 0 auto;
  padding:50px;
}

img {
  width:100%;
}

a {
  color:white;
  text-decoration: none;
  font-size: 15px;
  background:rgba(0,0,0,0.2);
}
a:hover {
  background:rgba(0,0,0,0.4);
}


.slider-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display:flex;
}

.slider-nav li {
  display:flex;
  flex:2;
}

.slider-nav .arrow {
  flex:1;
}
.slider-nav .arrow a {
  font-size: 40px;
}

.slider-nav a {
  align-items:center;
  flex:1;
  display:flex;
  padding:20px 5px;
}

.slider-nav span {
  display: block;
  flex:1;
  text-align: center;
}


/*.slider-nav ul * {
  border:1px solid red;
  margin:10px;
}*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.