A Pen by Jos

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Jos</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

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

  
</head>

<body>

  <div id="main-container">
  <!-- Left Menu -->
  <div class="dark-menu">
    <a id="search-btn" href="#"><i class="fa fa-search" aria-hidden="true"></i></a>
    <a href="#"></span><i class="fa fa-folder-o" aria-hidden="true"></i></a>
    <a class="active" href="#"><i class="active-icon fa fa-file-text-o" aria-hidden="true"></i></a>
    <a href="#"><i class="fa fa-bar-chart" aria-hidden="true"></i></a>
    <a href="#"><i class="fa fa-sliders" aria-hidden="true"></i></a>
  </div>  

   <!-- Top Menu -->
  <div class="top-menu">
    <div class="logo"><img src="http://assets.stickpng.com/thumbs/580b57fcd9996e24bc43c51a.png" style=" width:70px;"></div>
    <div class="topbar-text">{Lekker-losjes}</div>

  </div>

<div id="content">    
  <div id="table-content">Welkom,</br>Dit is onze clansite van de vetste clan van de wereld! Helemaal knettahh maar wel lekker losjes</div>
  </div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/koradhil/a-pen-by-jos-rpoeWd */
@import 'https://fonts.googleapis.com/css?family=Bungee';

html{
    background: #222428;
    font-family: Bungee;
}

#main-container {
  background: #eaedf2;
  width: 1000px;
  height: 600px;
margin: 50px auto;
  border-radius: 4px 2px 2px 4px;
  
}

.dark-menu {
  background: #33353c;
  width: 70px;
  height: 100%;
  border-radius: 2px 0 0 2px;
  text-align: center;
  float: left;
}

.dark-menu a {
  color: #76838c;
  display: block;
  padding: 17px;
  text-decoration: none;
}

.dark-menu a:hover {
  color: #fff;
}

.dark-menu a.active {
  color: white;
  border-left: solid #5e9cf7 3px;
}



.top-menu {
  background: #fff;
  width: 930px;
  height: 200px;
  max-height: 56px;
  margin-left: 0px;
  
  border-radius: 0px 3px 0px 0px;
  
  overflow: hidden;
}

.logo{
  float: left;
}

.topbar-text{
line-height: 50px;
  
  font-size:30px;
	font-family: "bungee",sans-serif;
  font-style: normal;
  font-weight: 400;
	color:white;
	text-shadow: -1px 0 1px #582E00, 
             	1px 0 1px #582E00,
             	0 -1px 1px #582E00,
             	0 4px 1px #582E00,
             	-2px 4px 1px #582E00,
             	2px 3px 2px #582E00;
  
  margin-left:80px;
}

#content {
  background: #eaedf2;
  width: 811px;
  height: 544px;
  float: left;
  margin-left: 7px;
  position: relative;
  z-index: 10;
}

#table-content {
  background: #fff;
  width: 97.5%;
  height: 93.1%;
  margin-top: 20px;
  box-shadow: #dcdee3 0px 0px 10px;
  margin-left: 5px;
}

Comments