IPhone 6s using HTML and CSS

IPhone 6s using HTML and CSS

Share your love

Are you a fan of Apple’s iPhone design? Why not create your own version of the iconic “iPhone 6s” using only HTML and CSS? In this tutorial, we’ll show you step-by-step how to create a realistic and visually stunning model of the “iPhone 6s” using these two languages. You’ll learn how to use HTML to create the structure of the phone and style it with CSS to give it a modern and professional appearance. Plus, you’ll gain valuable experience in using CSS to create dynamic and responsive designs. By the end of this tutorial, you’ll have a functional and visually appealing “iPhone 6s” that you can use to showcase your skills and engage your website visitors. So, let’s get started on creating a beautiful and unique “iPhone 6s” using HTML and CSS!

Before we start here are 50 projects to create using HTML CSS and JavaScript –

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

Demo

IPhone 6s using HTML and CSS

HTML Code 

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>IPhone 6s using HTML and CSS - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->
</body>

</html>

Paste the below code in your <body> tag.

<div class="iphone">
    <div class="border">
        <div class="top-left"></div>
        <div class="top-right"></div>
        <div class="bottom-left"></div>
        <div class="bottom-right"></div>
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="mute aside-btn"></div>
    <div class="volume-plus aside-btn"></div>
    <div class="volume-minus aside-btn"></div>
    <div class="block-button aside-btn"></div>
    <div class="front-body">
        <div class="front-cam"></div>
        <div class="speaker"></div>
        <div class="home-button"></div>
        <div class="screen">
            <div class="content">
                <div class="operator">
                    <div class="level">
                        <div class="level-item"></div>
                        <div class="level-item"></div>
                        <div class="level-item"></div>
                        <div class="level-item"></div>
                        <div class="level-item"></div>
                    </div>
                    <div class="name">T-Mobile</div>
                </div>
                <div class="battery">
                    <div class="percentage">58%</div>
                    <div class="level"></div>
                </div>
                <div class="time">17:57</div>
                <div class="date">Thursday, August 25</div>
                <div class="slideToUnlock">slide to unlock
                    <div class="arrow"></div>
                </div>
                <div class="showBottomPanel"></div>
                <div class="camera"></div>
            </div>
        </div>
    </div>
</div>

CSS Code 

Create a file style.css and paste the code below.

@import "https://fonts.googleapis.com/css?family=Roboto:100";
html,
body {
  width: 100%;
  height: 100%;
}
body {
  background-image: url("https://wallpaperaccess.com/full/91412.jpg");
  background-size: cover;
  font-size: 118px;
}
.iphone {
  transition: transform 0.5s;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 3.16em;
  height: 6.32em;
  box-sizing: border-box;
  box-shadow: -0.3em 0.1em 0.4em 0.05em rgba(0, 0, 0, 0.75);
  border-radius: 0.4em;
}
.iphone .front-body {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000;
  background-image: linear-gradient(top, #080808 0%, #000 100%);
  width: 3.06em;
  height: 6.22em;
  border-radius: 0.36em;
  overflow: hidden;
}
.iphone .front-body:after {
  content: "";
  position: absolute;
  margin: auto;
  top: -1em;
  left: 1.83em;
  width: 5em;
  height: 4em;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(-17deg);
}
.iphone .border {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 3.16em;
  height: 6.32em;
  border-radius: 0.4em;
}
.iphone .border .top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 2.35em;
  height: 0.1em;
  background-image: linear-gradient(
    to top,
    #a1a2a8 0%,
    #a1a2a8 50%,
    #6e6f75 100%
  );
}
.iphone .border .bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 2.35em;
  height: 0.1em;
  background-image: linear-gradient(
    to bottom,
    #a1a2a8 0%,
    #a1a2a8 50%,
    #6e6f75 100%
  );
}
.iphone .border .left {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 0.1em;
  height: 5.5em;
  background-image: linear-gradient(
    to left,
    #a1a2a8 0%,
    #a1a2a8 50%,
    #6e6f75 100%
  );
}
.iphone .border .right {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 0.1em;
  height: 5.5em;
  background-image: linear-gradient(
    to right,
    #a1a2a8 0%,
    #a1a2a8 50%,
    #6e6f75 100%
  );
}
.iphone .border .top-left,
.iphone .border .top-right,
.iphone .border .bottom-left,
.iphone .border .bottom-right {
  position: absolute;
  border-radius: 50%;
  width: 0.76em;
  height: 0.76em;
  background: radial-gradient(
    ellipse at center,
    #a7a9af 0%,
    #a7a9af 62%,
    #66676e 70%,
    #66676e 100%
  );
}
.iphone .border .top-left {
  top: 0;
  left: 0;
}
.iphone .border .top-right {
  top: 0;
  right: 0;
}
.iphone .border .bottom-left {
  bottom: 0;
  left: 0;
}
.iphone .border .bottom-right {
  bottom: 0;
  right: 0;
}
.iphone .speaker {
  background-color: #3f3f40;
  width: 0.43em;
  height: 0.05em;
  border-radius: 0.025em;
  position: absolute;
  left: 0;
  right: 0;
  top: 0.35em;
  margin: auto;
  z-index: 1;
}
.iphone .speaker:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #3f3f40;
  box-shadow: 0 -0.003em 0.005em 0.005em rgba(0, 0, 0, 0.25);
  width: 0.3em;
  height: 0;
}
.iphone .front-cam {
  width: 0.12em;
  height: 0.12em;
  background-image: linear-gradient(right bottom, #767676 0%, #222 100%);
  border-radius: 50%;
  position: absolute;
  top: 0.31em;
  left: 1em;
  margin: auto;
}
.iphone .front-cam:before,
.iphone .front-cam:after {
  content: "";
  border-radius: 50%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 50%;
}
.iphone .front-cam:before {
  width: 0.06em;
  height: 0.06em;
  background-image: linear-gradient(right bottom, #0d1b40 0%, #1b3267 100%);
  box-shadow: 0.01em 0.01em 0.005em rgba(0, 0, 0, 0.3);
}
.iphone .front-cam:after {
  width: 0.03em;
  height: 0.03em;
  opacity: 0.3;
  border-color: transparent;
  border-top: 1px solid #fff;
}
.iphone .screen {
  position: absolute;
  width: 2.7em;
  height: 4.8em;
  background-image: url("https://wallpaperaccess.com/full/91412.jpg");
  background-size: cover;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  font-family: "Roboto", sans-serif;
  color: #fff;
}
.iphone .screen .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.iphone .screen .content .operator,
.iphone .screen .content .battery {
  font-size: 0.12em;
}
.iphone .screen .content .operator {
  margin-top: 0.2em;
  margin-left: 0.4em;
  float: left;
}
.iphone .screen .content .operator .name {
  vertical-align: middle;
  position: relative;
  display: inline-block;
}
.iphone .screen .content .operator .level {
  vertical-align: middle;
  position: relative;
  display: inline-block;
}
.iphone .screen .content .operator .level-item {
  width: 0.4em;
  height: 0.4em;
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid #fff;
}
.iphone .screen .content .operator .level-item:nth-child(3),
.iphone .screen .content .operator .level-item:nth-child(4),
.iphone .screen .content .operator .level-item:nth-child(5) {
  background-color: transparent;
}
.iphone .screen .content .battery {
  margin-top: 0.2em;
  margin-right: 0.5em;
  float: right;
}
.iphone .screen .content .battery .percentage,
.iphone .screen .content .battery .level {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  height: 12px;
}
.iphone .screen .content .battery .level {
  width: 1.6em;
  height: 0.74em;
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 0.15em;
  margin-left: 0.1em;
}
.iphone .screen .content .battery .level:before,
.iphone .screen .content .battery .level:after {
  content: "";
  background-color: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.iphone .screen .content .battery .level:before {
  width: 0.68em;
  height: 0.66em;
  left: 0.06em;
  border-top-left-radius: 0.1em;
  border-bottom-left-radius: 0.1em;
}
.iphone .screen .content .battery .level:after {
  width: 0.1em;
  height: 0.35em;
  right: -0.2em;
  border-top-right-radius: 0.4em;
  border-bottom-right-radius: 0.4em;
}
.iphone .screen .content .time {
  text-align: center;
  font-size: 0.6em;
  margin-top: 0.8em;
}
.iphone .screen .content .date {
  text-align: center;
  font-size: 0.15em;
  margin-top: 0;
}
.iphone .screen .content .slideToUnlock {
  position: absolute;
  left: 53%;
  transform: translateX(-50%);
  margin: auto;
  font-size: 0.15em;
  text-align: center;
  bottom: 2em;
}
.iphone .screen .content .slideToUnlock .arrow {
  position: absolute;
  left: -1.6em;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 1.4em;
  animation: slideToUnlock-arrow 1s linear infinite;
}
.iphone .screen .content .slideToUnlock .arrow:before,
.iphone .screen .content .slideToUnlock .arrow:after {
  content: "";
  background-color: #fff;
  width: 0.1em;
  height: 0.81em;
  position: absolute;
  right: 0;
}
.iphone .screen .content .slideToUnlock .arrow:before {
  top: 0;
  transform: rotate(-40deg);
}
.iphone .screen .content .slideToUnlock .arrow:after {
  bottom: 0;
  transform: rotate(40deg);
}
.iphone .home-button {
  position: absolute;
  width: 0.44em;
  height: 0.44em;
  background-image: linear-gradient(
    bottom,
    #303030 0%,
    #303030 10%,
    #7a7a7a 30%,
    #7a7a7a 40%,
    #303030 50%,
    #303030 100%
  );
  border-radius: 50%;
  left: 0;
  right: 0;
  bottom: 0.14em;
  margin: auto;
}
.iphone .home-button:before {
  content: "";
  position: absolute;
  top: 0.02em;
  left: 0.02em;
  border-radius: 50%;
  width: 0.4em;
  height: 0.4em;
  background-color: #000;
}
.iphone .aside-btn {
  position: absolute;
  height: 0.5em;
  width: 0.03em;
  background-image: linear-gradient(
    to left,
    #66656f 0%,
    #66656f 30%,
    #c5c8cc 60%
  );
}
.iphone .block-button {
  top: 1.4em;
  right: -0.03em;
  border-top-right-radius: 0.8em;
  border-bottom-right-radius: 0.8em;
  background-image: linear-gradient(
    to right,
    #66656f 0%,
    #66656f 30%,
    #c5c8cc 60%
  );
}
.iphone .mute {
  top: 0.73em;
  left: -0.03em;
  height: 0.25em;
  border-top-left-radius: 0.8em;
  border-bottom-left-radius: 0.8em;
}
.iphone .volume-plus,
.iphone .volume-minus {
  top: 1.4em;
  left: -0.03em;
  border-top-left-radius: 0.8em;
  border-bottom-left-radius: 0.8em;
}
.iphone .volume-minus {
  top: 2.1em;
}
@keyframes slideToUnlock-arrow {
  0% {
    transform: translateX(-0.2em);
  }
  50% {
    transform: translateX(0.2em);
  }
  100% {
    transform: translateX(-0.2em);
  }
}

Final Output

IPhone 6s using HTML and CSS

Written by: Piyush Patil

Code Credits: @ZyrianovViacheslav

If you found any mistakes or have any doubts please feel free to Contact Us

Hope you find this post helpful💖

Share your love

Related Posts