EU Referendum Ballot Paper

Developer
Kenan Yusuf
Size
4,023 Kb
Views
6,072
  1. EU Referendum Ballot Paper Previews
  2. EU Referendum Ballot Paper HTML Codes
  3. EU Referendum Ballot Paper CSS Codes

How do I make an eu referendum ballot paper?

What is a eu referendum ballot paper? How do you make a eu referendum ballot paper? This script and codes were developed by Kenan Yusuf on 06 December 2022, Tuesday.

EU Referendum Ballot Paper Previews
IQ Test

EU Referendum Ballot Paper - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>EU Referendum Ballot Paper</title> <link href='https://fonts.googleapis.com/css?family=Permanent+Marker|Source+Sans+Pro:400,600,700' rel='stylesheet' type='text/css'> <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="vote"> <label class="submit" for="submit">Submit vote</label> <input class="control" type="checkbox" id="submit"/> <div class="card"> <div class="card__content"> <div class="card__item"><em>Referendum on the United Kingdom's membership of the European Union</em></div> <div class="card__item"><em>Vote only once</em> by putting a cross <span class="cross">X</span> in the box next to your choice</div> <div class="card__item">Should the United Kingdom remain a member of the European Union or leave the European Union?</div> <label class="card__item card__item--option"><em>Remain a member of the European Union</em> <input class="control" type="radio" name="vote"/> <div class="cross cross--option">X</div> </label> <label class="card__item card__item--option"><em>Leave the European Union</em> <input class="control" type="radio" name="vote"/> <div class="cross cross--option">X</div> </label> </div> </div>
</div>
<div class="submitted"> <div class="box">Ballot<br/>box <div class="small">(Don't forget to vote on the 23rd of June!)</div> </div>
</div>
</body>
</html>

EU Referendum Ballot Paper - Script Codes CSS Codes

* { box-sizing: border-box;
}
html,
body { height: 100%;
}
body { position: relative; width: 100%; height: 100%; background: #e6e6e6; font-family: 'Source Sans Pro', sans-serif;
}
em { font-style: normal; font-weight: 600;
}
.box { display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; width: 400px; height: 200px; background: #131313; perspective: 400px; font-size: 40px; font-weight: bold; line-height: 1; text-transform: uppercase; text-align: center; color: #fff; transform: translate(-50%, -50%);
}
.box:before { content: ''; position: absolute; width: 400px; height: 50px; top: -25px; left: 0; background: #2b2b2b; transform: rotateX(45deg) translateY(-50%);
}
.box:after { content: ''; position: absolute; width: 100px; height: 10px; top: -17px; left: 50%; background: #131313; transform: rotateX(45deg) translate(-50%);
}
.vote { display: flex; flex-direction: column-reverse; position: absolute; z-index: 1; top: 50%; left: 50%; width: 100%; max-width: 800px; transform: translate(-50%, -50%); overflow: hidden;
}
.submit { padding: 20px; text-align: center; color: #0e647d; cursor: pointer;
}
.submit:hover { text-decoration: underline;
}
.card { padding: 20px; background: #fff; transition: all 0.6s;
}
.control:checked ~ .card { transform: translateY(100%); opacity: 0;
}
.card__content { display: flex; flex-direction: column; border: 1px solid #131313;
}
.card__item { flex: 1; padding: 20px; border: 1px solid #131313; font-size: 20px;
}
@media (min-width: 600px) { .card__item { font-size: 30px; line-height: 1.1; }
}
.card__item--option { display: flex; justify-content: flex-end; cursor: pointer;
}
.control { position: absolute; z-index: -1; opacity: 0;
}
.cross { display: inline-block; vertical-align: middle; width: 30px; height: 30px; border: 2px solid #131313; text-align: center; font-family: 'Permanent Marker'; font-size: 18px;
}
@media (min-width: 600px) { .cross { font-size: 24px; }
}
.cross--option { display: flex; flex: 0 0 40px; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 10px; color: #fff; transition: all 0.2s; margin-left: 20px;
}
.control:checked ~ .cross--option { font-size: 30px; color: #131313;
}
.small { margin-top: 20px; font-size: 14px;
}
EU Referendum Ballot Paper - Script Codes
EU Referendum Ballot Paper - Script Codes
Home Page Home
Developer Kenan Yusuf
Username KenanYusuf
Uploaded December 06, 2022
Rating 3
Size 4,023 Kb
Views 6,072
Do you need developer help for EU Referendum Ballot Paper?

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!

Kenan Yusuf (KenanYusuf) Script Codes
Name
Scalable Text Stylus Mixin
Styling unvisited links
A Pen by Kenan Yusuf
Slick vs Flickity
Scrollable Navigation
Expanding box and fading content
Kyusuf.com layout
Page layout experiment
Styling visited links
Material Weather Widget with Moment.js
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!