Overhauled Certificates
This commit is contained in:
Jonathan
committed by
theflametrooper
theflametrooper
parent
dee0f3f5df
commit
f08bbda621
@ -1,6 +1,36 @@
|
||||
include font
|
||||
#name.cert-name= name
|
||||
img#cert.img-abs(src='//i.imgur.com/yBKoMVP.jpg')
|
||||
.cert-date= date
|
||||
.cert-link verify this certification at: http://freecodecamp.com/#{username}/back-end-certification
|
||||
include script
|
||||
meta(name='viewport', content='width=device-width, initial-scale=1')
|
||||
link(rel='stylesheet', href='/bower_components/bootstrap/dist/css/bootstrap.min.css')
|
||||
include styles
|
||||
|
||||
.certificate-wrapper.container
|
||||
.row
|
||||
header
|
||||
.col-md-5.col-sm-12
|
||||
.logo
|
||||
img(class='img-responsive', src='https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg', alt="Free Code Camp's Logo")
|
||||
.col-md-7.col-sm-12
|
||||
.issue-date Issued
|
||||
strong #{date}
|
||||
|
||||
section.information
|
||||
.information-container
|
||||
h3 This certifies that
|
||||
h1
|
||||
strong= name
|
||||
h3 has successfully completed the
|
||||
h1
|
||||
strong Back End Development Projects
|
||||
h4 (400 hours of coursework & 1 of 3 Free Code Camp certificates)
|
||||
|
||||
footer
|
||||
.row.signatures
|
||||
.col-md-6
|
||||
img(class='img-responsive', src='https://i.imgur.com/OJFVJKg.png', alt="Quincy Larson's Signature")
|
||||
p
|
||||
strong Quincy Larson
|
||||
.col-md-6
|
||||
img(class='img-responsive', src='https://i.imgur.com/b0YdXS4.png', alt="Michael D. Johnson's Signature")
|
||||
p
|
||||
strong Michael D. Johnson
|
||||
.row
|
||||
p.verify Verify this certificate at: https://www.freecodecamp.com/#{username}/back-end-certification
|
||||
|
||||
@ -1,6 +1,36 @@
|
||||
include font
|
||||
#name.cert-name= name
|
||||
img#cert.img-abs(src='//i.imgur.com/l7tIptn.jpg')
|
||||
.cert-date= date
|
||||
.cert-link verify this certification at: http://freecodecamp.com/#{username}/data-visualization-certification
|
||||
include script
|
||||
meta(name='viewport', content='width=device-width, initial-scale=1')
|
||||
link(rel='stylesheet', href='/bower_components/bootstrap/dist/css/bootstrap.min.css')
|
||||
include styles
|
||||
|
||||
.certificate-wrapper.container
|
||||
.row
|
||||
header
|
||||
.col-md-5.col-sm-12
|
||||
.logo
|
||||
img(class='img-responsive', src='https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg', alt="Free Code Camp's Logo")
|
||||
.col-md-7.col-sm-12
|
||||
.issue-date Issued
|
||||
strong #{date}
|
||||
|
||||
section.information
|
||||
.information-container
|
||||
h3 This certifies that
|
||||
h1
|
||||
strong= name
|
||||
h3 has successfully completed the
|
||||
h1
|
||||
strong Data Visualization Projects
|
||||
h4 (400 hours of coursework & 1 of 3 Free Code Camp certificates)
|
||||
|
||||
footer
|
||||
.row.signatures
|
||||
.col-md-6
|
||||
img(class='img-responsive', src='https://i.imgur.com/OJFVJKg.png', alt="Quincy Larson's Signature")
|
||||
p
|
||||
strong Quincy Larson
|
||||
.col-md-6
|
||||
img(class='img-responsive', src='https://i.imgur.com/b0YdXS4.png', alt="Michael D. Johnson's Signature")
|
||||
p
|
||||
strong Michael D. Johnson
|
||||
.row
|
||||
p.verify Verify this certificate at: https://www.freecodecamp.com/#{username}/data-visualization-certification
|
||||
|
||||
@ -1,45 +0,0 @@
|
||||
style.
|
||||
@font-face {
|
||||
font-family: "Sax Mono";
|
||||
src: url("/fonts/saxmono.ttf") format("truetype");
|
||||
}
|
||||
|
||||
body {
|
||||
display: inline-block;
|
||||
font-family: "Sax Mono", monospace;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.img-abs {
|
||||
left 0;
|
||||
position: relative;
|
||||
top: 0;
|
||||
width: 2000px
|
||||
}
|
||||
|
||||
.cert-name {
|
||||
font-size: 64px;
|
||||
left: 1000px;
|
||||
position: absolute;
|
||||
top: 704px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.cert-date {
|
||||
font-size: 60px;
|
||||
left: 760px;
|
||||
position: absolute;
|
||||
top: 1004.8px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.cert-link {
|
||||
font-size: 22px;
|
||||
left: 120px;
|
||||
position: absolute;
|
||||
top: 1488px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
@ -1,6 +1,36 @@
|
||||
include font
|
||||
#name.cert-name= name
|
||||
img#cert.img-abs(src='//i.imgur.com/ToFZKBd.jpg')
|
||||
.cert-date= date
|
||||
.cert-link verify this certification at: http://freecodecamp.com/#{username}/front-end-certification
|
||||
include script
|
||||
meta(name='viewport', content='width=device-width, initial-scale=1')
|
||||
link(rel='stylesheet', href='/bower_components/bootstrap/dist/css/bootstrap.min.css')
|
||||
include styles
|
||||
|
||||
.certificate-wrapper.container
|
||||
.row
|
||||
header
|
||||
.col-md-5.col-sm-12
|
||||
.logo
|
||||
img(class='img-responsive', src='https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg', alt="Free Code Camp's Logo")
|
||||
.col-md-7.col-sm-12
|
||||
.issue-date Issued
|
||||
strong #{date}
|
||||
|
||||
section.information
|
||||
.information-container
|
||||
h3 This certifies that
|
||||
h1
|
||||
strong= name
|
||||
h3 has successfully completed the
|
||||
h1
|
||||
strong Front End Development Projects
|
||||
h4 (400 hours of coursework & 1 of 3 Free Code Camp certificates)
|
||||
|
||||
footer
|
||||
.row.signatures
|
||||
.col-md-6
|
||||
img(class='img-responsive', src='https://i.imgur.com/OJFVJKg.png', alt="Quincy Larson's Signature")
|
||||
p
|
||||
strong Quincy Larson
|
||||
.col-md-6
|
||||
img(class='img-responsive', src='https://i.imgur.com/b0YdXS4.png', alt="Michael D. Johnson's Signature")
|
||||
p
|
||||
strong Michael D. Johnson
|
||||
.row
|
||||
p.verify Verify this certificate at: https://www.freecodecamp.com/#{username}/front-end-certification
|
||||
|
||||
@ -1,6 +1,36 @@
|
||||
include font
|
||||
#name.cert-name= name
|
||||
img#cert.img-abs(src='//i.imgur.com/Z4PgjBQ.jpg')
|
||||
.cert-date= date
|
||||
.cert-link verify this certification at: http://freecodecamp.com/#{username}/full-stack-certification
|
||||
include script
|
||||
meta(name='viewport', content='width=device-width, initial-scale=1')
|
||||
link(rel='stylesheet', href='/bower_components/bootstrap/dist/css/bootstrap.min.css')
|
||||
include styles
|
||||
|
||||
.certificate-wrapper.container
|
||||
.row
|
||||
header
|
||||
.col-md-5.col-sm-12
|
||||
.logo
|
||||
img(class='img-responsive', src='https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg', alt="Free Code Camp's Logo")
|
||||
.col-md-7.col-sm-12
|
||||
.issue-date Issued
|
||||
strong #{date}
|
||||
|
||||
section.information
|
||||
.information-container
|
||||
h3 This certifies that
|
||||
h1
|
||||
strong= name
|
||||
h3 has successfully completed the
|
||||
h1
|
||||
strong Full Stack Development Projects
|
||||
h4 (400 hours of coursework & 1 of 3 Free Code Camp certificates)
|
||||
|
||||
footer
|
||||
.row.signatures
|
||||
.col-md-6
|
||||
img(class='img-responsive', src='https://i.imgur.com/OJFVJKg.png', alt="Quincy Larson's Signature")
|
||||
p
|
||||
strong Quincy Larson
|
||||
.col-md-6
|
||||
img(class='img-responsive', src='https://i.imgur.com/b0YdXS4.png', alt="Michael D. Johnson's Signature")
|
||||
p
|
||||
strong Michael D. Johnson
|
||||
.row
|
||||
p.verify Verify this certificate at: https://www.freecodecamp.com/#{username}/full-stack-certification
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
extends ../layout
|
||||
block content
|
||||
.panel.panel-info
|
||||
.panel-heading.text-center
|
||||
h1 Certificate
|
||||
.panel-body
|
||||
p foo
|
||||
@ -1,8 +0,0 @@
|
||||
script.
|
||||
(function() {
|
||||
var containerWidth = document.getElementById('cert').offsetWidth;
|
||||
var nameDiv = document.getElementById('name');
|
||||
var nameWidth = nameDiv.offsetWidth;
|
||||
console.log(containerWidth, nameWidth);
|
||||
nameDiv.style.left = ((containerWidth - nameWidth) / 2) + 15;
|
||||
})();
|
||||
208
server/views/certificate/styles.jade
Normal file
208
server/views/certificate/styles.jade
Normal file
@ -0,0 +1,208 @@
|
||||
style.
|
||||
@media print {
|
||||
* {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Sax Mono";
|
||||
src: url("/fonts/saxmono.ttf") format("truetype");
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1500px;
|
||||
width: 100%;
|
||||
padding: 30px;
|
||||
border: darkgreen 15px solid;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.col-sm-12 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.certificate-wrapper {
|
||||
top: 0;
|
||||
position: relative;
|
||||
font-family: "Sax Mono", monospace;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
/*background-image: url('https://i.imgur.com/1FK6aaN.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
background-size: cover;*/
|
||||
background-color: darkgreen;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 140px;
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.issue-date {
|
||||
line-height: 140px;
|
||||
font-size: 20px;
|
||||
text-align: right;
|
||||
margin-right: 100px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.information {
|
||||
margin-top: -20px;
|
||||
height: 380px;
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
.information-container {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin: 0px 100px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 25px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
color: #006400;
|
||||
}
|
||||
|
||||
.signatures .col-md-6 {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
.signatures img {
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.signatures p {
|
||||
font-size: 18px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.verify {
|
||||
padding: 30px 0;
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
word-wrap: break-word;
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
/*adds vertical alignment when the height is bigger than required to display everything*/
|
||||
@media screen and (min-height: 700px) {
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
/*mobile media queries*/
|
||||
@media screen and (max-width: 992px) {
|
||||
header {
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-left: 0;
|
||||
padding: 20px;
|
||||
justify-content: center;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.issue-date {
|
||||
margin-top: 10px;
|
||||
margin-right: 0;
|
||||
text-align: center;
|
||||
line-height: 0px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.issue-date strong {
|
||||
display: block;
|
||||
margin-top: 15px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.information {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.information-container {
|
||||
margin: 0px 15px;
|
||||
text-align: center;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 350px) {
|
||||
.container {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
height: 190px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 15px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user