Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add the flag of People's Republic of China #37

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Add the flag of People's Republic of China #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9a3bbfd
Add the flag of People's Republic of China
angusjune Jun 21, 2016
db2c6c3
Add iTunes Store
angusjune Jun 21, 2016
ed4657f
Fixed a stupid error...
angusjune Jun 21, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions Designs/iTunes Store.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<html>
<head>
<title>iTunes Store | Designs</title>
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
}

body {
display: flex;
justify-content: center;
align-items: center;
}

#itunes-store{
position: relative;
width: 300px;
height: 300px;
background: linear-gradient(180deg, #ED52B6, #C54CFA);
border-radius: 40px;
box-shadow: 0px 10px 30px #e5e5e5;
transition: 0.5s;
}

#itunes-store:before, #itunes-store:after {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

#itunes-store:before{
content: '♫'; /* Shame, not the exact music note */
font-size: 200px;
text-align: center;
color: #fff;
margin-left: -15px;
margin-top: -5px;
}

#itunes-store:after{
box-sizing: border-box;
content: '';
width: 270px;
height: 270px;
border: 8px solid #fff;
border-radius: 50%;
}

#itunes-store:hover{
transform: scale(1.1);
}
</style>
</head>
<body>
<div id="itunes-store"></div>
</body>
</html>
73 changes: 73 additions & 0 deletions Flags/China.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html>
<head>
<title>People's Republic of China | Flags</title>
<meta charset="utf-8"/>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
#china {
width: 180px;
height: 120px;
background: #DE2910;
position: relative;
transition: box-shadow ease-out 0.2s;
will-change: box-shadow;
}

#china:hover {
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
}

#china:before, #china:after {
position: absolute;
display: block;
top: 0;
left: 0;
box-sizing: border-box;
color: #FFDE00;
}

/*
* The proportion follows
* https://www.wikiwand.com/en/Flag_of_China#/Construction_details.2C_sizes_and_colours
* The flag is divided into 30x10 grids,
* which means each grid is 6px in this case (180px / 30)
*/
#china:before {
content: "★";
width: 100%;
font-size: calc(6px * 6);
padding-top: calc(6px * 2);
padding-left: calc(6px * 2);
}
#china:after {
/*
* This is far from perfect, because I have no idea how to rotate the stars.
* Notice: there are 2 line breaks between star #2 and star #3
* Turn on Show Invisibles in you text editor to get a better look
*/
content: "      ★               ★                 ★       ★     ";
font-size: calc(6px * 2);
font-family: 'DejaVu Sans', sans-serif;
line-height: 0.5;
text-align: center;
word-wrap: normal;
padding-top: calc(6px * 1);
padding-left: calc(6px * 9);
width: 0;
}
</style>
</head>
<body>
<div id="china"></div>
</body>
</html>