LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


  
    
    Amsterdam UI by secretpixels.com
    
    
  


  
XXX

The Amsterdam User Interface

by secretpixels.com

Amsterdam

Amsterdam

Amsterdam is the capital city of and the most populous within the Kingdom of the Netherlands. Amsterdam's name derives from Amstelredamme. Amsterdam is located in the western... Netherlands

12°

Saturday 13 January

Geef mij maar Amsterdam

Johnny Jordaan

1:45
CSS
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
input {
  outline: none;
}

body aside .address, body aside .calendar, body main .menu, body main .video-player, body main .weather, body main .info-box, body main .audio-player, body main .search {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
}

body aside .address button, body main .search button {
  height: 40px;
  line-height: 40px;
  color: #fff;
  background: #dd5555;
  padding: 0 45px;
  border-radius: 3px;
  border: none;
  outline: none;
}
body aside .address button:hover, body main .search button:hover {
  background: #882222;
}

body {
  min-width: 1130px;
  background: #ebebeb;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  margin: 0 100px 100px 100px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
}
body .wrapper {
  width: 1130px;
  margin: 0 auto;
}
body .wrapper:after {
  content: " ";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
body > header {
  text-align: center;
  padding: 45px 0;
}
body > header h2 {
  font-size: 18px;
  color: #a1a0a0;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  margin-top: 15px;
}
body > header p {
  color: #a1a1a1;
}
body aside {
  width: 260px;
  float: left;
}
body aside .address {
  height: 400px;
  background: #fff;
  text-align: center;
  margin-bottom: 51px;
}
body aside .address img {
  width: 200px;
  border-radius: 50%;
  margin-top: 30px;
  margin-bottom: 30px;
}
body aside .address h3 {
  font-size: 18px;
  color: #dd5555;
  margin-bottom: 15px;
}
body aside .address p {
  color: #7d7d7d;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 28px;
}
body aside .calendar {
  height: 250px;
  background: #dd5555;
  border-top: 1px solid #fff;
}
body aside .calendar header {
  height: 80px;
  background: #fff;
  border-radius: 4px 4px 0 0;
  margin-top: -1px;
  text-align: center;
}
body aside .calendar header h3 {
  margin: 0;
  padding-top: 20px;
  color: #dd5555;
}
body aside .calendar header p {
  margin-top: 10px;
  font-size: 13px;
  color: #7d7d7d;
  display: inline-block;
  font-weight: normal;
}
body aside .calendar header a {
  width: 7px;
  height: 11px;
  display: inline-block;
  background: url(//i1284.photobucket.com/albums/a574/meecrobe/arrows_zps7863336b.png) no-repeat;
  position: relative;
  top: 1px;
}
body aside .calendar header .l-arr {
  background-position: 0 center;
  right: 8px;
}
body aside .calendar header .r-arr {
  background-position: 100% center;
  left: 8px;
}
body aside .calendar .date {
  margin: 32px;
}
body aside .calendar .date table {
  width: 100%;
  margin: 0 auto;
}
body aside .calendar .date table td {
  text-align: center;
  color: #fff;
  padding-bottom: 5px;
}
body aside .calendar .date table td.alt {
  color: #882222;
}
body aside .calendar .date table td.today {
  text-decoration: underline;
}
body main {
  width: 820px;
  float: left;
}
body main .menu {
  width: 670px;
  height: 50px;
  margin-left: 50px;
  padding: 20px 50px 10px;
  text-align: center;
}
body main .menu nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: justify;
  height: 40px;
}
body main .menu nav ul:after {
  content: "";
  display: inline-block;
  width: 100%;
}
body main .menu nav li {
  height: 100%;
  display: inline-block;
  margin: 0;
  padding: 0;
}
body main .menu nav li a:hover {
  color: #dd5555;
}
body main .menu nav li a:hover .i-home {
  background-position: -0px -30px;
}
body main .menu nav li a .i-home {
  background-position: -0px 0;
}
body main .menu nav li a:hover {
  color: #dd5555;
}
body main .menu nav li a:hover .i-gallery {
  background-position: -30px -30px;
}
body main .menu nav li a .i-gallery {
  background-position: -30px 0;
}
body main .menu nav li a:hover {
  color: #dd5555;
}
body main .menu nav li a:hover .i-message {
  background-position: -60px -30px;
}
body main .menu nav li a .i-message {
  background-position: -60px 0;
}
body main .menu nav li a:hover {
  color: #dd5555;
}
body main .menu nav li a:hover .i-music {
  background-position: -90px -30px;
}
body main .menu nav li a .i-music {
  background-position: -90px 0;
}
body main .menu nav li a:hover {
  color: #dd5555;
}
body main .menu nav li a:hover .i-search {
  background-position: -120px -30px;
}
body main .menu nav li a .i-search {
  background-position: -120px 0;
}
body main .menu nav li a:hover {
  color: #dd5555;
}
body main .menu nav li a:hover .i-settings {
  background-position: -150px -30px;
}
body main .menu nav li a .i-settings {
  background-position: -150px 0;
}
body main .menu nav li a:hover {
  color: #dd5555;
}
body main .menu nav li a:hover .i-location {
  background-position: -180px -30px;
}
body main .menu nav li a .i-location {
  background-position: -180px 0;
}
body main .menu nav li a {
  height: 100%;
  text-decoration: none;
  color: #ccc;
}
body main .menu nav li a i {
  display: block;
  width: 30px;
  height: 30px;
  position: relative;
  left: 50%;
  margin-left: -15px;
  background: url(//i1284.photobucket.com/albums/a574/meecrobe/menu-ico_zps088a6ff8.png) no-repeat;
}
body main .video-player, body main .weather {
  width: 260px;
  height: 175px;
  margin: 50px 0 0 50px;
  text-align: center;
  position: relative;
  background: url(//i1284.photobucket.com/albums/a574/meecrobe/video_zps5bab07fb.jpg) center center no-repeat;
  background-size: cover;
  float: left;
}
body main .video-player button, body main .weather button {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.5);
  border: 3px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
  outline: none;
}
body main .video-player button:before, body main .weather button:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #fff;
  position: relative;
  left: 9px;
}
body main .weather {
  background: #dd5555;
  text-align: center;
  overflow: hidden;
  float: left;
}
body main .weather .temp {
  height: 125px;
}
body main .weather h3 {
  background: #fff;
  line-height: 50px;
  margin-top: 0;
  font-size: 14px;
  color: #dd5555;
  display: block;
}
body main .weather p {
  font-size: 60px;
  line-height: 125px;
  margin: 0;
  color: #fff;
}
body main .weather p span {
  width: 55px;
  height: 55px;
  display: inline-block;
  background: url(//i1284.photobucket.com/albums/a574/meecrobe/weather-icon_zps4655642d.png) center 7px no-repeat;
  margin-left: 10px;
}
body main .info-box {
  width: 460px;
  height: 400px;
  float: right;
  margin: 50px 0 0 50px;
  overflow: hidden;
}
body main .info-box .hero {
  width: 460px;
  height: 270px;
  overflow: hidden;
}
body main .info-box .hero img {
  width: 460px;
}
body main .info-box h3 {
  margin: 15px 25px 15px 25px;
  padding: 0;
  color: #dd5555;
}
body main .info-box p {
  margin: 0 25px;
  font-size: 13px;
  color: #7d7d7d;
  padding: 0;
}
body main .audio-player {
  width: 440px;
  height: 120px;
  display: inline-block;
  margin: 50px 0 0 50px;
  float: left;
  overflow: hidden;
  padding-right: 20px;
}
body main .audio-player .cover {
  width: 120px;
  height: 120px;
  background: url(//i1284.photobucket.com/albums/a574/meecrobe/cover_zpsb58f3a53.jpg) center center no-repeat;
  background-size: cover;
  float: left;
  margin-right: 20px;
}
body main .audio-player h3 {
  color: #dd5555;
  margin: 20px 0 8px 0;
}
body main .audio-player p {
  color: #7d7d7d;
  margin: 0 0 5px 0;
}
body main .audio-player .controls button {
  width: 30px;
  height: 30px;
  border-radius: 2px;
  background: #cbcbcb url(//i1284.photobucket.com/albums/a574/meecrobe/player-btn_zps4004039f.png) center center no-repeat;
  border: none;
  float: left;
  display: inline-block;
  outline: none;
  margin-right: 0;
  position: relative;
}
body main .audio-player .controls button:hover {
  background-color: #dd5555;
}
body main .audio-player .controls .next {
  left: 40px;
  background-position: center -46px;
}
body main .audio-player .controls .prev {
  left: 20px;
  background-position: center 10px;
}
body main .audio-player .controls .play {
  left: 30px;
  background-color: #dd5555;
}
body main .audio-player .controls .popup {
  color: #fff;
  border-radius: 2px;
  background: #dd5555;
  font-size: 13px;
  padding: 3px 5px;
  position: relative;
  bottom: 2px;
  left: -192px;
  display: inline-block;
}
body main .audio-player .controls .popup:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 3px 0px 3px;
  border-color: #dd5555 transparent transparent transparent;
  left: 13px;
}
body main .audio-player .controls .progress {
  width: 170px;
  height: 4px;
  border-radius: 2px;
  background: #cbcbcb;
  float: left;
  margin-top: 25px;
  overflow: hidden;
}
body main .audio-player .controls .progress:after {
  content: "";
  display: block;
  width: 50%;
  height: 4px;
  background: #dd5555;
  border-radius: 2px;
}
body main .search {
  width: 220px;
  height: 80px;
  display: inline-block;
  margin: 50px 0 0 50px;
  text-align: center;
  padding: 20px;
}
body main .search form {
  height: 80px;
}
body main .search input[type="search"] {
  width: 210px;
  height: 30px;
  background: #ebebeb;
  border: 1px solid #cfcfcf;
  border-radius: 2px;
  padding-left: 9px;
  font-size: 12px;
  color: #7b7b7b;
}
body main .search input[type="checkbox"] {
  display: none;
}
body main .search button {
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  float: right;
  margin-top: 20px;
  margin-right: -1px;
}
body main .search label {
  font-size: 11px;
  color: #ccc;
  position: relative;
  border-radius: 3px;
  left: 5px;
  top: 21px;
  float: left;
}
body main .search label span {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  background: #ebebeb;
  border: 1px solid #cfcfcf;
  position: relative;
  top: 5px;
  right: 6px;
}
body main .search label span.checked {
  background: #ebebeb url(//i1284.photobucket.com/albums/a574/meecrobe/check_zpsf8f08915.png) center center no-repeat;
}
JS
$(document).ready(function(){
  $(".search label").on("click", function(){
    $(this).children("span").toggleClass("checked");
  });
});
Host Instantly Drag and Drop Website Builder

 

Description

Design by Hugo @ secretpixels.com
Term
Mon, 11/27/2017 - 21:50

Related Codes

Pen ID
Pen ID
Pen ID