 iOS 7 Colour Pallette

Developer
Rıza Selçuk Saydam
Size
4,230 Kb
Views
64,768
  1.  iOS 7 Colour Pallette Previews
  2.  iOS 7 Colour Pallette HTML Codes
  3.  iOS 7 Colour Pallette CSS Codes
  4.  iOS 7 Colour Pallette JS Codes

How do I make an  ios 7 colour pallette?

What is a  ios 7 colour pallette? How do you make a  ios 7 colour pallette? This script and codes were developed by Rıza Selçuk Saydam on 02 August 2022, Tuesday.

 iOS 7 Colour Pallette Previews
IQ Test

 iOS 7 Colour Pallette - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title> iOS 7 Colour Pallette</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <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! */ /*------------------------------------*\ $VARIABLES
\*------------------------------------*/
/*------------------------------------*\ $Box
\*------------------------------------*/
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0;
}
/*------------------------------------*\ $REST
\*------------------------------------*/
body { font-size: 10px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light","Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; background-color: #fff; -webkit-font-smoothing: antialiased;
}
.wrapper { display: block; margin: 0 auto; padding: 1%;
}
.wrapper h1 { color: #393939; font-size: 4em; font-weight: 300; padding-left: 5%;
}
.wrapper h1 span { display: inline-block; height: 1.2em; width: 1.2em; text-indent: -9999px; background: url("https://devimages.apple.com.edgekey.net/assets/elements/header/developer_2x.png") no-repeat 0 0; background-size: 5.8em 1.2em; opacity: .8;
}
.wrapper ul { margin: 2% 0 0 0; padding: 0;
}
.wrapper li { width: 19%; display: inline-block; margin-bottom: 1%; text-align: center; color: #555; font-size: 2em;
}
.wrapper li span { width: 5em; height: 5em; border-radius: 5em; background-color: red; display: block; margin: 1em auto;
}
.wrapper ul li:nth-child(10n+1) span { background: #5856d6;
}
.wrapper ul li:nth-child(10n+2) span { background: #007aff;
}
.wrapper ul li:nth-child(10n+3) span { background: #34aadc;
}
.wrapper ul li:nth-child(10n+4) span { background: #5ac8fa;
}
.wrapper ul li:nth-child(10n+5) span { background: #4cd964;
}
.wrapper ul li:nth-child(10n+6) span { background: #ff2d55;
}
.wrapper ul li:nth-child(10n+7) span { background: #ff3b30;
}
.wrapper ul li:nth-child(10n+8) span { background: #ff9500;
}
.wrapper ul li:nth-child(10n+9) span { background: #ffcc00;
}
.wrapper ul li:nth-child(10n+10) span { background: #8e8e93;
}
/*------------------------------------*\ $RESPONSIVE
\*------------------------------------*/
@media only screen and (max-width: 600px) { body { font-size: 8px; }
}
@media only screen and (max-width: 450px) { body { font-size: 6px; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wrapper"> <h1><span>Apple</span> iOS 7 Colour Pallette</h1> <ul> <li><span></span>#5856d6</li> <li><span></span>#007aff</li> <li><span></span>#34aadc</li> <li><span></span>#5ac8fa</li> <li><span></span>#4cd964</li> <li><span></span>#ff2d55</li> <li><span></span>#ff3b30</li> <li><span></span>#ff9500</li> <li><span></span>#ffcc00</li> <li><span></span>#8e8e93</li> </ul>
</div><!-- ios7 --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

 iOS 7 Colour Pallette - Script Codes CSS Codes

/*------------------------------------*\ $VARIABLES
\*------------------------------------*/
/*------------------------------------*\ $Box
\*------------------------------------*/
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0;
}
/*------------------------------------*\ $REST
\*------------------------------------*/
body { font-size: 10px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light","Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; background-color: #fff; -webkit-font-smoothing: antialiased;
}
.wrapper { display: block; margin: 0 auto; padding: 1%;
}
.wrapper h1 { color: #393939; font-size: 4em; font-weight: 300; padding-left: 5%;
}
.wrapper h1 span { display: inline-block; height: 1.2em; width: 1.2em; text-indent: -9999px; background: url("https://devimages.apple.com.edgekey.net/assets/elements/header/developer_2x.png") no-repeat 0 0; background-size: 5.8em 1.2em; opacity: .8;
}
.wrapper ul { margin: 2% 0 0 0; padding: 0;
}
.wrapper li { width: 19%; display: inline-block; margin-bottom: 1%; text-align: center; color: #555; font-size: 2em;
}
.wrapper li span { width: 5em; height: 5em; border-radius: 5em; background-color: red; display: block; margin: 1em auto;
}
.wrapper ul li:nth-child(10n+1) span { background: #5856d6;
}
.wrapper ul li:nth-child(10n+2) span { background: #007aff;
}
.wrapper ul li:nth-child(10n+3) span { background: #34aadc;
}
.wrapper ul li:nth-child(10n+4) span { background: #5ac8fa;
}
.wrapper ul li:nth-child(10n+5) span { background: #4cd964;
}
.wrapper ul li:nth-child(10n+6) span { background: #ff2d55;
}
.wrapper ul li:nth-child(10n+7) span { background: #ff3b30;
}
.wrapper ul li:nth-child(10n+8) span { background: #ff9500;
}
.wrapper ul li:nth-child(10n+9) span { background: #ffcc00;
}
.wrapper ul li:nth-child(10n+10) span { background: #8e8e93;
}
/*------------------------------------*\ $RESPONSIVE
\*------------------------------------*/
@media only screen and (max-width: 600px) { body { font-size: 8px; }
}
@media only screen and (max-width: 450px) { body { font-size: 6px; }
}

 iOS 7 Colour Pallette - Script Codes JS Codes

/***
(Apple) iOS 7 Colour Pallette
Front-End: Rıza Selçuk Saydam http:/webmagazin.co
Design: Jordi Manuel http://drbl.in/jGvu
Inspiration https://www.apple.com/ios/
***/
 iOS 7 Colour Pallette - Script Codes
 iOS 7 Colour Pallette - Script Codes
Home Page Home
Developer Rıza Selçuk Saydam
Username rss
Uploaded August 02, 2022
Rating 4.5
Size 4,230 Kb
Views 64,768
Do you need developer help for  iOS 7 Colour Pallette?

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!

Rıza Selçuk Saydam (rss) Script Codes
Name
Pigecon
How a Text Gradient is Made
Flat iOS 7 Safari Icon
METU CSS3 Logo
CSS3 Loader Animation - Peeek
CSS3 Loading Animation
Button Switch
Little Boxes on an iPhone
SOCIAL BANG
Star Wars Toggle Icon Animation
Create amazing marketing copy 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!