Time Zone Mock Up - WIP

Developer

Size

4,386 Kb

Views

6,072

Time Zone Mock Up - WIP Previews
Time Zone Mock Up - WIP HTML Codes
Time Zone Mock Up - WIP CSS Codes

How do I make an time zone mock up - wip?

What is a time zone mock up - wip? How do you make a time zone mock up - wip? This script and codes were developed by Chung Man Chau on 15 January 2023, Sunday.

Time Zone Mock Up - WIP Previews

Time Zone Mock Up - WIP - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Time Zone Mock Up - WIP</title> <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="header">	<div class="refresh"><i class="fa fa-refresh" aria-hidden="true"></i></div>	<div class="logo">Timezone</div>	<div class="add"><i class="fa fa-plus" aria-hidden="true"></i></div>	</div>	<div class="content-wrapper grid-view">	<div class="timezone-container">	<div class="timezone-item">	<div class="timezone-side"></div>	<div class="timezone">	<div class="time"><span>5:50</span><span class="period">AM</span></div>	<div class="location"><span class="capital">Paris</span><span class="country">France</span></div>	<div class="date">Tuesday, 07 May 2017</div>	<div class="gmt">GTM -05:00</div>	</div>	</div>	</div>	<div class="timezone-container">	<div class="timezone-item">	<div class="timezone">	<div class="time"><span>6:50</span><span class="period">AM</span></div>	<div class="location"><span class="capital">Paris</span><span class="country">France</span></div>	<div class="date">Tuesday, 07 May 2017</div>	<div class="gmt">GTM -05:00</div>	</div>	<div class="timezone-side"></div>	</div>	</div>	<div class="timezone-container">	<div class="timezone-item">	<div class="timezone-side"></div>	<div class="timezone">	<div class="time"><span>7:50</span><span class="period">AM</span></div>	<div class="location"><span class="capital">Paris</span><span class="country">France</span></div>	<div class="date">Tuesday, 07 May 2017</div>	<div class="gmt">GTM -05:00</div>	</div>	</div>	</div>	<div class="timezone-container">	<div class="timezone-item">	<div class="timezone">	<div class="time"><span>8:50</span><span class="period">PM</span></div>	<div class="location"><span class="capital">Paris</span><span class="country">France</span></div>	<div class="date">Tuesday, 07 May 2017</div>	<div class="gmt">GTM -05:00</div>	</div>	<div class="timezone-side"></div>	</div>	</div>	<div class="timezone-container">	<div class="timezone-item">	<div class="timezone-side"></div>	<div class="timezone">	<div class="time"><span>9:50</span><span class="period">PM</span></div>	<div class="location"><span class="capital">Paris</span><span class="country">France</span></div>	<div class="date">Tuesday, 07 May 2017</div>	<div class="gmt">GTM -05:00</div>	</div>	</div>	</div>	<div class="timezone-container">	<div class="timezone-item">	<div class="timezone">	<div class="time"><span>10:50</span><span class="period">PM</span></div>	<div class="location"><span class="capital">Paris</span><span class="country">France</span></div>	<div class="date">Tuesday, 07 May 2017</div>	<div class="gmt">GTM -05:00</div>	</div>	<div class="timezone-side"></div>	</div>	</div>	</div>	<div class="options">	<span>switch to list view</span>	</div>	</div>
</body>
</html>

Time Zone Mock Up - WIP - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,600,700);
html { height: 100%;
}
body { font-family: 'Roboto', sans-serif; height: 100%; padding: 100px 0; text-transform: uppercase; color: #fff; background: #373643;
}
.wrapper { width: 25rem; margin: 0 auto; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5);
}
.wrapper .header { font-size: 1.3rem; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: row; background: #f2f2f7; -webkit-flex-direction: row; -ms-flex-direction: row;
}
.wrapper .header div { line-height: 3.5rem; text-align: center; color: #9e9bad; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1;
}
.wrapper .header .refresh { width: 4rem; cursor: pointer;
}
.wrapper .header .logo { font-size: 1.8rem; -webkit-flex-grow: 10; -ms-flex-positive: 10; flex-grow: 10;
}
.wrapper .header .add { width: 4rem; cursor: pointer;
}
.wrapper .content-wrapper { position: relative; z-index: 1; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap;
}
.wrapper .content-wrapper .timezone-container { position: relative; z-index: 0; transition: 0s z-index ease .5s; -webkit-perspective: 1200px; perspective: 1200px; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%;
}
.wrapper .content-wrapper .timezone-container:nth-child(1) .timezone { background: #eeb934;
}
.wrapper .content-wrapper .timezone-container:nth-child(2) .timezone { background: #e7a235;
}
.wrapper .content-wrapper .timezone-container:nth-child(3) .timezone { background: #dd7a32;
}
.wrapper .content-wrapper .timezone-container:nth-child(4) .timezone { background: #6f64bf;
}
.wrapper .content-wrapper .timezone-container:nth-child(5) .timezone { background: #5b52aa;
}
.wrapper .content-wrapper .timezone-container:nth-child(6) .timezone { background: #413d93;
}
.wrapper .content-wrapper .timezone-container:hover { z-index: 2; transition: 0s all ease;
}
.wrapper .content-wrapper .timezone-container:nth-child(odd) .timezone-item { -webkit-transform-origin: right center; transform-origin: right center;
}
.wrapper .content-wrapper .timezone-container:nth-child(odd) .timezone-item:hover { -webkit-transform: rotateY(50deg); transform: rotateY(50deg);
}
.wrapper .content-wrapper .timezone-container:nth-child(odd) .timezone-item .timezone-side { -webkit-transform: rotateY(90deg) translateZ(0em); transform: rotateY(90deg) translateZ(0em); -webkit-transform-origin: left center; transform-origin: left center; background: linear-gradient(to right, #1e1d25 0%, #59566d 100%);
}
.wrapper .content-wrapper .timezone-container:nth-child(even) .timezone-item { -webkit-transform-origin: left center; transform-origin: left center;
}
.wrapper .content-wrapper .timezone-container:nth-child(even) .timezone-item:hover { -webkit-transform: rotateY(-50deg); transform: rotateY(-50deg);
}
.wrapper .content-wrapper .timezone-container:nth-child(even) .timezone-item .timezone-side { -webkit-transform: rotateY(-90deg) translateZ(0em); transform: rotateY(-90deg) translateZ(0em); -webkit-transform-origin: right center; transform-origin: right center; background: linear-gradient(to left, #1e1d25 0%, #59566d 100%);
}
.wrapper .content-wrapper .timezone-container .timezone-item { transition: .5s all ease; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.wrapper .content-wrapper .timezone-container .timezone-side { position: absolute; top: 0; left: 0; width: 100%;
}
.wrapper .content-wrapper .timezone-container .timezone { position: relative; padding: 1rem;
}
.wrapper .content-wrapper .timezone-container .timezone .location .capital { font-weight: bold;
}
.wrapper .content-wrapper .timezone-container .timezone .location .country { margin-left: .3rem; opacity: .8;
}
.wrapper .content-wrapper .timezone-container .timezone .date { font-size: .7rem; font-weight: 100; opacity: .8;
}
.wrapper .content-wrapper .timezone-container .timezone .gmt { font-size: .7rem; font-weight: 100; opacity: 8;
}
.wrapper .content-wrapper .timezone-container .timezone .time { font-size: 3.7rem; font-weight: 100; line-height: 3.6rem;
}
.wrapper .content-wrapper .timezone-container .timezone .time .period { font-size: .6rem; font-weight: 300; opacity: .8;
}
.wrapper .content-wrapper.grid-view .timezone-container { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%;
}
.wrapper .content-wrapper.grid-view .timezone-container .timezone-side { height: 100%;
}
.wrapper .content-wrapper.grid-view .timezone-container .timezone .location { margin-bottom: .2rem; text-align: center;
}
.wrapper .content-wrapper.grid-view .timezone-container .timezone .date { text-align: center;
}
.wrapper .content-wrapper.grid-view .timezone-container .timezone .gmt { display: none;
}
.wrapper .content-wrapper.grid-view .timezone-container .timezone .time { padding-top: .8rem; text-align: center;
}
.wrapper .content-wrapper.list-view .timezone-container { -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%;
}
.wrapper .content-wrapper.list-view .timezone-container .timezone-item { -webkit-transform-origin: center center -7.8rem; transform-origin: center center -7.8rem;
}
.wrapper .content-wrapper.list-view .timezone-container .timezone-side { height: 5.3rem;
}
.wrapper .content-wrapper.list-view .timezone-container .timezone .location { display: inline-block; margin-bottom: .3rem;
}
.wrapper .content-wrapper.list-view .timezone-container .timezone .location .country { margin-left: .3rem;
}
.wrapper .content-wrapper.list-view .timezone-container .timezone .date { margin-bottom: .1rem;
}
.wrapper .content-wrapper.list-view .timezone-container .timezone .time { float: right;
}
.wrapper .content-wrapper.list-view .timezone-container .timezone .time .period { float: right; margin-left: .2rem;
}
.wrapper .options { font-size: 1rem; line-height: 4rem; cursor: pointer; text-align: center; background: #1d1c24;
}
.wrapper .options span { color: #a7a4b4;
}

Home Page	Home
Developer	Chung Man Chau
Username	chungman93
Uploaded	January 15, 2023
Rating	3
Size	4,386 Kb
Views	6,072

Do you need developer help for Time Zone Mock Up - WIP?

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!

Chung Man Chau (chungman93) Script Codes

Name	Size
CSS Masking Button Hovers	1,173 Kb
Target Last Row - CSS Only	1,568 Kb
Rolling Word Hover	2,541 Kb
Burger To Close	2,491 Kb
Bray Wealth - Mock up - Responsive	4,796 Kb
Fixed Background Image - No Repaint	2,637 Kb
Responsive CSS Grid	3,175 Kb
Delete Hover	2,557 Kb
Expanding Tiles	3,932 Kb
Morphing Iphone	3,862 Kb

Create amazing love letters 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!

Similar Scripts & Codes

Name	Username	Size
Static Image to Video Block	Grayghostvisuals	4,864 Kb
Scarlett Johansson Tribute Page	Diomed	3,233 Kb
Christ the Redeemer	Prashantsani	2,208 Kb
Wikipedia Viewer	Odylic	2,333 Kb
Angular Sandbox	Alexgurrola	1,616 Kb
A Pen by Final Boss tommyb9	FBtommyb9	55,354 Kb
SVG Animation	Pollardld	3,133 Kb
Zip Button test	Lje7462	1,932 Kb
We Simplify animation	Meodai	48,169 Kb
Lightrays v2	Sinthetyc	2,903 Kb

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. Hide Your IP Now!