IPhone Ui - Content only

Developer
Daniel Gooß
Size
6,499 Kb
Views
16,192
  1. IPhone Ui - Content only Previews
  2. IPhone Ui - Content only HTML Codes
  3. IPhone Ui - Content only CSS Codes

How do I make an 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 10 November 2022, Thursday.

IPhone Ui - Content only Previews
IQ Test

IPhone Ui - Content only - Script Codes 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 - Script Codes 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);
}
IPhone Ui - Content only - Script Codes
IPhone Ui - Content only - Script Codes
Home Page Home
Developer Daniel Gooß
Username daniel_gooss
Uploaded November 10, 2022
Rating 3.5
Size 6,499 Kb
Views 16,192
Do you need developer help for IPhone Ui - Content only?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Daniel Gooß (daniel_gooss) Script Codes
Name
Revolver Slideshow with Touch
Dashboard
CSS Paperfold Effect
CSSConf EU
Mobile Navigation Pattern
Revolver Slideshow
Patternplate logo animation
CSS Tab-Nav
CSS Blur Effect
Base-Style
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!