Galaxy S3 CSS Template

Developer
Charlie Volpe
Size
2,704 Kb
Views
16,192
  1. Galaxy S3 CSS Template Previews
  2. Galaxy S3 CSS Template HTML Codes
  3. Galaxy S3 CSS Template CSS Codes
  4. Galaxy S3 CSS Template JS Codes

How do I make an galaxy s3 css template?

This is a fork of my iPhone5 template. Galaxy S3 is pretty similar to iPhone5 with size differences and movements of buttons.. What is a galaxy s3 css template? How do you make a galaxy s3 css template? This script and codes were developed by Charlie Volpe on 08 November 2022, Tuesday.

Galaxy S3 CSS Template Previews
IQ Test

Galaxy S3 CSS Template - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Galaxy S3 CSS Template</title> <meta name="viewport" content="device-width"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="s3"> <div class="power"></div> <div class="volume"></div> <div class="parif one"></div> <div class="parif two"></div> <div class="parif big"></div> <div class="speaker"></div> <div class="screen"> <!-- Put screen stuff in here --> <div class="sicon"> <img src="http://www.iphonbuzz.com/wp-content/uploads/2013/05/Samsung-Galaxy-S4-Mini.png" /> </div> <div class="text"> This is a free template! Have fun! </div> </div> <div class="button"></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Galaxy S3 CSS Template - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
* { margin: 0; padding: 0; box-sizing: border-box;
}
body { background: #34abfa; padding-top: 5%; font-size: 14px; font-family: 'Open Sans', sans-serif;
}
.wrapper { max-width: 800px; margin: 0 auto;
}
.s3 { position: relative; background: #f7f7f7; width: 50%; height: 0; padding-top: 95%; margin: 0 auto; border-radius: 3em;
}
.power { position: absolute; background: #c7c7c7; width: 1%; height: 8%; top: 20%; right: -1%; border-top-right-radius: .5em; border-bottom-right-radius: .5em;
}
.volume { position: absolute; background: #c7c7c7; width: 1%; height: 15%; top: 23%; left: -1%; border-top-left-radius: .5em; border-bottom-left-radius: .5em;
}
.volume.down{ top: 31%; }
.parif { position: absolute; top: 3.5%; background: #3f3f3f; width: 3%; height: 0; padding-top: 3%; border-radius: 50%;
}
.one { left: 67.5%;
}
.two { left: 72%;
}
.big { top: 2.8%; left: 78%; width: 5%; padding-top: 5%;
}
.speaker { position: absolute; top: 3%; left: 37.5%; background: #c7c7c7; width: 25%; height: 0; padding-top: 2%; border-radius: 1em;
}
.sicon { padding-top: 25%; opacity: 0; width: 90%; margin: 0 auto; -webkit-animation: unhide 5s infinite alternate; animation: unhide 5s infinite alternate;
}
.sicon img{ width: 100%; height: 100%;
}
.text { opacity: 0; font-size: 1.25rem; text-align: center; -webkit-animation: unhide 5s infinite alternate; animation: unhide 5s infinite alternate;
}
.screen { background: #2f2f2f; width: 90%; height: 82%; position: absolute; top: 8%; left: 5%; border: 2px solid #2f2f2f; -webkit-animation: lighten 5s infinite alternate; animation: lighten 5s infinite alternate;
}
.button { position: absolute; bottom: 2.75%; left: 37.5%; background: #f7f7f7; /* border: 1px solid #3f3f3f; */ width: 25%; height: 0; padding-top: 5.5%; border: 2px solid #c7c7c7; border-top-left-radius: .25em; border-top-right-radius: .25em; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em;
}
@media screen and (min-width: 28em ) { body{ font-size: 16px; }
}
@media screen and (min-width: 34em ) { body{ font-size: 18px; }
}
@media screen and (min-width: 48em ) { body{ font-size: 22px; }
}
@-webkit-keyframes lighten { 0%, 45% { background: #2f2f2f; } 65%, 100% { background: #fff; }
}
@keyframes lighten { 0%, 45% { background: #2f2f2f; } 65%, 100% { background: #fff; }
}
@-webkit-keyframes unhide { 0%, 55% { opacity: 0 } 75%, 100% { opacity: 1 }
}
@keyframes unhide { 0%, 55% { opacity: 0 } 75%, 100% { opacity: 1 }
}

Galaxy S3 CSS Template - Script Codes JS Codes

//Forked from: https://codepen.io/charlie-volpe/pen/xvcnE
//View iPad fork here: https://codepen.io/charlie-volpe/pen/yvAwm
Galaxy S3 CSS Template - Script Codes
Galaxy S3 CSS Template - Script Codes
Home Page Home
Developer Charlie Volpe
Username charlie-volpe
Uploaded November 08, 2022
Rating 3
Size 2,704 Kb
Views 16,192
Do you need developer help for Galaxy S3 CSS Template?

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!

Charlie Volpe (charlie-volpe) Script Codes
Name
Switch with Indicator Light
Simple Blackjack Game
Simple Battle Game
Block Puzzle Game
Draggable Finder Window Visualization
Draggable Node Based VPL Test
Header Line Issue
Bouncing Ball
Layout Resolutions
IPad CSS Template
Create amazing captions 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!