IPhone Ui - Content only

I built this pen after a great dribbble shot by Ionut Zamfir. This is the content only Version. Click here for a version integrated in my little iOS7 mockup. What is a iphone ui - content only How do you make a iphone ui - content only? This script and codes were developed by Daniel Gooß on 14 January 2022, Friday.

How do I make an iphone ui - content only?
  1. IPhone Ui - Content only Previews
  2. IPhone Ui - Content only HTML Codes
  3. IPhone Ui - Content only CSS Codes
IPhone Ui - Content only Previews

IPhone Ui - Content only HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>iPhone Ui - Content only</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      @import url(https://fonts.googleapis.com/css?family=Raleway:200,300);
body {
  max-width: 640px;
  padding: 133px 0 0 0;
  margin: 0;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  background: #35373F;
}
.content {
  height: 100%;
  box-sizing: border-box;
  padding-top: 16px;
}
header,
section {
  margin-bottom: 16px;
}
h1 {
  margin: 0;
  font-size: 38px;
  font-weight: 200;
  text-align: center;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 42px;
  background: linear-gradient(0deg, #f14959 0%, #f16149 100%);
  color: #fff;
  z-index: 3;
  font-size: 0;
  line-height: 0;
  line-height: 88px;
}
header h1 {
  display: inline-block;
  width: 460px;
  vertical-align: middle;
}
header .menubutton {
  display: inline-block;
  width: 30px;
  height: 40px;
  margin: 0 35px 0 25px;
  vertical-align: middle;
}
header .menubutton .menuicon {
  display: block;
  height: 2px;
  width: 100%;
  margin-top: 4px;
  box-shadow: 0 15px 0 #fff, 0 30px 0 #fff;
  background-color: #fff;
}
header .dropdown {
  display: inline-block;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  padding: 9px 0;
  margin: 0 25px;
  vertical-align: middle;
}
header .dropdown .dropdownicon {
  display: block;
  position: relative;
  height: 22px;
  transition: -webkit-transform 0.25s ease-in-out;
}
header .dropdown .dropdownicon:before,
header .dropdown .dropdownicon:after {
  content: '';
  position: absolute;
  width: 29px;
  height: 2px;
  border-radius: 2px;
  background-color: #fff;
}
header .dropdown .dropdownicon:before {
  top: 0;
  left: 0;
  transform-origin: 0% 50%;
  transform: rotateZ(45deg);
}
header .dropdown .dropdownicon:after {
  top: 0;
  right: 0;
  transform-origin: 100% 50%;
  transform: rotateZ(-45deg);
}
header .dropdown.active .dropdownicon {
  transform: rotateZ(180deg);
}
section {
  width: 100%;
  height: 162px;
  box-sizing: border-box;
  padding: 16px 0 16px 16px;
  border-radius: 5px;
  background-color: #eff1f8;
  font-size: 0;
  line-height: 0;
}
section > ul {
  display: inline-block;
  list-style-type: none;
  width: 477px;
  padding: 0;
  margin: 0;
  vertical-align: top;
}
section > ul li {
  display: inline-block;
  overflow: hidden;
}
section > ul li:first-child {
  border-right: 1px solid #c8cbd4;
}
section > ul li:first-child,
section > ul li:nth-child(2) {
  height: 71px;
  border-bottom: 2px solid #c8cbd4;
  vertical-align: top;
}
section > ul li:nth-child(3),
section > ul li:nth-child(4) {
  width: 50%;
  height: 58px;
  color: #3f454c;
  vertical-align: bottom;
}
section > ul li:nth-child(4) {
  text-align: right;
}
section > ul li h2 {
  width: 393px;
  margin: 19px 0;
  font-weight: 300;
  color: #272930;
  font-size: 22px;
  line-height: 1;
  font-size: 38px;
}
section > ul li p {
  margin: 18px 16px 18px 8px;
  display: inline-block;
  vertical-align: middle;
  font-size: 22px;
  line-height: 1;
}
section > ul li span {
  font-size: 22px;
  line-height: 1;
}
section img {
  display: inline-block;
  width: 130px;
  height: 130px;
  margin-right: 16px;
  border-radius: 5px;
  background-color: #666;
  vertical-align: top;
}
.hearticon {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  margin: 32px;
  border: 2px solid #666b72;
  border-top-width: 0;
  border-right-width: 0;
  transform: rotateZ(-45deg);
}
.hearticon:before,
.hearticon:after {
  content: '';
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #666b72;
  border-radius: 2em;
}
.hearticon:before {
  width: 18px;
  height: 21.6px;
  top: -10.8px;
  left: -2px;
  clip: rect(0, 18px, 12.8px, 0);
}
.hearticon:after {
  width: 21.6px;
  height: 18px;
  bottom: -2px;
  right: -10.8px;
  clip: rect(0, 21.6px, 18px, 8.8px);
}
.hearticon.liked {
  border: none;
  background-color: #f15252;
}
.hearticon.liked:before,
.hearticon.liked:after {
  border: none;
  background-color: #f15252;
}
.hearticon.liked:before {
  left: 0;
}
.hearticon.liked:after {
  bottom: 0;
}
.dateicon {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  border: 2px solid #666b72;
  border-radius: 50%;
  vertical-align: middle;
}
.dateicon:before,
.dateicon:after {
  content: '';
  position: absolute;
  height: 2px;
  top: 11px;
  left: 10px;
  background-color: #666b72;
}
.dateicon:before {
  width: 8px;
}
.dateicon:after {
  width: 10px;
  transform-origin: 1px 50%;
  transform: rotateZ(-90deg);
}
.reviewsicon {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 23px;
  box-sizing: border-box;
  margin: 2px 3px;
  border: 2px solid #666b72;
  border-radius: 3px;
  border-bottom-width: 0;
  vertical-align: middle;
}
.reviewsicon:before,
.reviewsicon:after {
  content: '';
  position: absolute;
}
.reviewsicon:before {
  width: 3px;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #666b72;
  box-shadow: 3px 0 0 #666b72, 6px 0 0 #666b72, 8px 0 0 #666b72, 19px 0 0 #666b72, 4px -14px 0 #666b72, 6px -14px 0 #666b72, 9px -14px 0 #666b72, 12px -14px 0 #666b72, 15px -14px 0 #666b72, 15px -9px 0 #666b72, 12px -9px 0 #666b72, 9px -9px 0 #666b72, 8px -9px 0 #666b72;
}
.reviewsicon:after {
  height: 4px;
  width: 4px;
  bottom: -2px;
  left: 11px;
  border: 2px solid #666b72;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotateZ(45deg);
}

    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <header>
          <div class="menubutton">
            <span class="menuicon"></span>
          </div>
          <h1>Screen Title</h1>
          <div class="dropdown">
            <span class="dropdownicon"></span>
          </div>
        </header> 
        <div class="content">
          <section>
            <img src="https://www.freeimages.co.uk/galleries/nature/environment/thumbs/clean_beach6085.jpg" alt=""/>
            <ul>
              <li><h2>Palm Beach</h2></li>
              <li>
                <span class="hearticon"></span>
              </li>
              <li>
                <span class="dateicon"></span>
                <p>Today</p>
              </li>
              <li>
                <span class="reviewsicon"></span>
                <p>3 reviews</p>
              </li>
            </ul>
          </section>

          <section>
            <img src="http://processing.org/tutorials/pixels/imgs/tint1.jpg" alt=""/>
            <ul>
              <li><h2>Sunny Flower</h2></li>
              <li>
                <span class="hearticon liked"></span>
              </li>
              <li>
                <span class="dateicon"></span>
                <p>Today</p>
              </li>
              <li>
                <span class="reviewsicon"></span>
                <p>6 reviews</p>
              </li>
            </ul>
          </section>

          <section>
            <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRe_BwdsxYNlzUsSjF2x0C5qAvrnVxKcMu-CWSgzBiKjqog_oPY" alt=""/>
            <ul>
              <li><h2>Ford Mustang</h2></li>
              <li>
                <span class="hearticon liked"></span>
              </li>
              <li>
                <span class="dateicon"></span>
                <p>Today</p>
              </li>
              <li>
                <span class="reviewsicon"></span>
                <p>12 reviews</p>
              </li>
            </ul>
          </section>

          <section>
            <img src="http://static.dtuts.com/3d/articles/winter-renderings/header.jpg" alt=""/>
            <ul>
              <li><h2>X-Mas Tree</h2></li>
              <li>
                <span class="hearticon"></span>
              </li>
              <li>
                <span class="dateicon"></span>
                <p>Yesterday</p>
              </li>
              <li>
                <span class="reviewsicon"></span>
                <p>46 reviews</p>
              </li>
            </ul>
          </section>

          <section>
            <img src="http://static.dtuts.com/3d/tuts/3dsmax/ambient-occlusion/header.jpg" alt=""/>
            <ul>
              <li><h2>Interior</h2></li>
              <li>
                <span class="hearticon"></span>
              </li>
              <li>
                <span class="dateicon"></span>
                <p>Yesterday</p>
              </li>
              <li>
                <span class="reviewsicon"></span>
                <p>36 reviews</p>
              </li>
            </ul>
          </section>

          <section>
            <img src="http://static.dtuts.com/3d/tuts/3dsmax/victorian-street/header.jpg" alt=""/>
            <ul>
              <li><h2>In the old days</h2></li>
              <li>
                <span class="hearticon liked"></span>
              </li>
              <li>
                <span class="dateicon"></span>
                <p>Yesterday</p>
              </li>
              <li>
                <span class="reviewsicon"></span>
                <p>22 reviews</p>
              </li>
            </ul>
          </section>

          <section>
            <img src="http://static.dtuts.com/3d/tuts/3dsmax/daytime-rendering/header.jpg" alt=""/>
            <ul>
              <li><h2>Skyline</h2></li>
              <li>
                <span class="hearticon"></span>
              </li>
              <li>
                <span class="dateicon"></span>
                <p>2 days ago</p>
              </li>
              <li>
                <span class="reviewsicon"></span>
                <p>53 reviews</p>
              </li>
            </ul>
          </section>
        </div>
  
  
</body>
</html>

IPhone Ui - Content only CSS Codes

@import url(https://fonts.googleapis.com/css?family=Raleway:200,300);
body {
  max-width: 640px;
  padding: 133px 0 0 0;
  margin: 0;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  background: #35373F;
}
.content {
  height: 100%;
  box-sizing: border-box;
  padding-top: 16px;
}
header,
section {
  margin-bottom: 16px;
}
h1 {
  margin: 0;
  font-size: 38px;
  font-weight: 200;
  text-align: center;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 42px;
  background: linear-gradient(0deg, #f14959 0%, #f16149 100%);
  color: #fff;
  z-index: 3;
  font-size: 0;
  line-height: 0;
  line-height: 88px;
}
header h1 {
  display: inline-block;
  width: 460px;
  vertical-align: middle;
}
header .menubutton {
  display: inline-block;
  width: 30px;
  height: 40px;
  margin: 0 35px 0 25px;
  vertical-align: middle;
}
header .menubutton .menuicon {
  display: block;
  height: 2px;
  width: 100%;
  margin-top: 4px;
  box-shadow: 0 15px 0 #fff, 0 30px 0 #fff;
  background-color: #fff;
}
header .dropdown {
  display: inline-block;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  padding: 9px 0;
  margin: 0 25px;
  vertical-align: middle;
}
header .dropdown .dropdownicon {
  display: block;
  position: relative;
  height: 22px;
  transition: -webkit-transform 0.25s ease-in-out;
}
header .dropdown .dropdownicon:before,
header .dropdown .dropdownicon:after {
  content: '';
  position: absolute;
  width: 29px;
  height: 2px;
  border-radius: 2px;
  background-color: #fff;
}
header .dropdown .dropdownicon:before {
  top: 0;
  left: 0;
  transform-origin: 0% 50%;
  transform: rotateZ(45deg);
}
header .dropdown .dropdownicon:after {
  top: 0;
  right: 0;
  transform-origin: 100% 50%;
  transform: rotateZ(-45deg);
}
header .dropdown.active .dropdownicon {
  transform: rotateZ(180deg);
}
section {
  width: 100%;
  height: 162px;
  box-sizing: border-box;
  padding: 16px 0 16px 16px;
  border-radius: 5px;
  background-color: #eff1f8;
  font-size: 0;
  line-height: 0;
}
section > ul {
  display: inline-block;
  list-style-type: none;
  width: 477px;
  padding: 0;
  margin: 0;
  vertical-align: top;
}
section > ul li {
  display: inline-block;
  overflow: hidden;
}
section > ul li:first-child {
  border-right: 1px solid #c8cbd4;
}
section > ul li:first-child,
section > ul li:nth-child(2) {
  height: 71px;
  border-bottom: 2px solid #c8cbd4;
  vertical-align: top;
}
section > ul li:nth-child(3),
section > ul li:nth-child(4) {
  width: 50%;
  height: 58px;
  color: #3f454c;
  vertical-align: bottom;
}
section > ul li:nth-child(4) {
  text-align: right;
}
section > ul li h2 {
  width: 393px;
  margin: 19px 0;
  font-weight: 300;
  color: #272930;
  font-size: 22px;
  line-height: 1;
  font-size: 38px;
}
section > ul li p {
  margin: 18px 16px 18px 8px;
  display: inline-block;
  vertical-align: middle;
  font-size: 22px;
  line-height: 1;
}
section > ul li span {
  font-size: 22px;
  line-height: 1;
}
section img {
  display: inline-block;
  width: 130px;
  height: 130px;
  margin-right: 16px;
  border-radius: 5px;
  background-color: #666;
  vertical-align: top;
}
.hearticon {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  margin: 32px;
  border: 2px solid #666b72;
  border-top-width: 0;
  border-right-width: 0;
  transform: rotateZ(-45deg);
}
.hearticon:before,
.hearticon:after {
  content: '';
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #666b72;
  border-radius: 2em;
}
.hearticon:before {
  width: 18px;
  height: 21.6px;
  top: -10.8px;
  left: -2px;
  clip: rect(0, 18px, 12.8px, 0);
}
.hearticon:after {
  width: 21.6px;
  height: 18px;
  bottom: -2px;
  right: -10.8px;
  clip: rect(0, 21.6px, 18px, 8.8px);
}
.hearticon.liked {
  border: none;
  background-color: #f15252;
}
.hearticon.liked:before,
.hearticon.liked:after {
  border: none;
  background-color: #f15252;
}
.hearticon.liked:before {
  left: 0;
}
.hearticon.liked:after {
  bottom: 0;
}
.dateicon {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  border: 2px solid #666b72;
  border-radius: 50%;
  vertical-align: middle;
}
.dateicon:before,
.dateicon:after {
  content: '';
  position: absolute;
  height: 2px;
  top: 11px;
  left: 10px;
  background-color: #666b72;
}
.dateicon:before {
  width: 8px;
}
.dateicon:after {
  width: 10px;
  transform-origin: 1px 50%;
  transform: rotateZ(-90deg);
}
.reviewsicon {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 23px;
  box-sizing: border-box;
  margin: 2px 3px;
  border: 2px solid #666b72;
  border-radius: 3px;
  border-bottom-width: 0;
  vertical-align: middle;
}
.reviewsicon:before,
.reviewsicon:after {
  content: '';
  position: absolute;
}
.reviewsicon:before {
  width: 3px;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #666b72;
  box-shadow: 3px 0 0 #666b72, 6px 0 0 #666b72, 8px 0 0 #666b72, 19px 0 0 #666b72, 4px -14px 0 #666b72, 6px -14px 0 #666b72, 9px -14px 0 #666b72, 12px -14px 0 #666b72, 15px -14px 0 #666b72, 15px -9px 0 #666b72, 12px -9px 0 #666b72, 9px -9px 0 #666b72, 8px -9px 0 #666b72;
}
.reviewsicon:after {
  height: 4px;
  width: 4px;
  bottom: -2px;
  left: 11px;
  border: 2px solid #666b72;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotateZ(45deg);
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.