Skip to content

Instantly share code, notes, and snippets.

@phinton2

phinton2/dabblet.css

Last active April 28, 2021 01:39
Show Gist options
  • Save phinton2/99d1f8b115548807aa0734fca2537321 to your computer and use it in GitHub Desktop.
Save phinton2/99d1f8b115548807aa0734fca2537321 to your computer and use it in GitHub Desktop.
Download ZIP
Tribute Page
Raw
dabblet.css
/** Tribute Page */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono&family=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Newsreader:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lily+Script+One&display=swap');
/*===========================================================
GENERAL DOCUMENT STYLING
↓ ↓ ↓
===========================================================*/
/* General document styling targets universal selector (*), html, and body tags only */
/* Universal selector */
* {/* It's quiet here... */}
/* Html document selector */
html {
scroll-behavior: smooth;
}
/* Body selector */
body {
margin: 0 auto; /* Change to 0 auto if problems occur */
}
*::-webkit-scrollbar {
width: 20px;
scrollbar-width: thin;
}
*::-webkit-scrollbar-track {
background:linear-gradient(rgb(20,20,20), rgb(70,70,70), rgb(70, 70, 70), rgb(20,20,20));
}
*::-webkit-scrollbar-thumb {
background: linear-gradient(rgba(20,20,20,1), rgba(40,40,40,.9),rgba(20,20,20,1));
border-radius: 5px;
}
/*===========================================================
HEAD STYLING (FIRST PAGE)
↓ ↓ ↓
===========================================================*/
/* Includes styling for all content readily seen on first page */
/* Heading box located at web page top; contains profile image */
.headBox {
width: 1900px;
height: 1281px;
background: radial-gradient(circle, rgb(25,25,25),rgb(10,10,10));
/*linear-gradient(to left, rgba(11, 11, 11, 1), rgba(9, 9, 9, .965), rgba(5, 5, 5, 1))*/;
position: absolute;
color: snow;
z-index: 5;
}
/* Light fixture above profile image */
/**/
/* Profile image found in div class "headBox" */
.profileImage {
transform: scaleX(-1.2) scaleY(1.1);
position: absolute;
border: 10px solid transparent;
border-image:linear-gradient(-90deg, rgb(28, 30, 34),rgb(42, 46, 51));
border-image-slice: 1;
top:75px; /* Top was 130px */
left:1100px; /* Left was 1100px */
height: 920px; /* Height was 800px */
width:670px; /* Width was 600px */
filter: contrast(100%) saturate(100%);
animation: flicker 0.5s linear 1;
animation-delay:0s;
}
/* h1 class specifies name of person in profile image */
.title {
font-family: 'Space Mono', Times;
color: rgb(200,200,200);
font-size: 52px;
position: absolute;
top: 140px;
left: 125px;
animation: dropdownFadeIn2 .95s ease-in 1;
}
/* Specifies a title of person in profile image */
.personTitle {
font-family: sans-serif;
color: rgb(161, 54, 54);
font-weight: 400;
position: absolute;
top: 240px;
left: 125px;
animation: dropdownFadeIn3 0.9s ease-in 1;
letter-spacing: 4px;
}
/* Contains quote shown at load up of web page */
.quote {
font-family:'Work Sans';
font-size:36px;
font-weight: 100;
text-indent: 35px;
line-height: 60px;
color: silver;
position: absolute;
top: 330px;
left: 125px;
width: 780px;
animation: dropdownFadeIn 0.8s ease-in 1;
}
/* Contains name of person responsible for quote */
.personQuote {
color: rgb(240, 106, 106);
}
/* First divide section can be found between first page and "Early Life" section */
.divide {
position: absolute;
left:0px;
bottom: -280px;
height: 80px;
width: 1900px;
z-index: 10;
background: rgb(30,10,20);
}
/* Decorative image divides pages */
.divideSymbol {
z-index:20;
background: none;
position: absolute;
left: 710px;
bottom: -500px;
}
/*===========================================================
BODY CONTENT STYLING (OUTSIDE FIRST PAGE)
↓ ↓ ↓
===========================================================*/
/* All information and sections outside of startup page (also referred to as "head" or "first page") */
/* Section located directly below div class "headBox" and contains biography information */
.biographyBox {
position: absolute;
top: 1359px;
width: 1900px;
height: 1661px;
background: radial-gradient(circle, rgb(25,25,25),rgb(10,10,10));
z-index: 10;
}
/* Heading which reads "Early Life" */
.bioHead {
font-family: 'Space Mono';
font-size: 36px;
color: rgb(124, 27, 27);
position: absolute;
top:140px;
left: 125px;
}
/* Third profile image; is seen after "childProfile" */
.profileImage3 {
/* Width x height ratio is 1900:1400; number of note is 1.357 */
width: 1085.6px; /* Original width was 1900px */
height: 800px; /* Original height was 1400px */
position: absolute;
bottom: -3200px;
left:0px;
z-index:11;
}
/* Profile image of individual as child */
.childProfile {
height: 600px;
position: absolute;
top: 800px;
right:140px;
}
/* Image of birthplace */
.birthplace {
position: absolute;
width: 600px;
right: 50px;
top: 270px;
}
/* First horizontal line; is found under string "Early Life" */
.hr {
position: absolute;
left: 125px;
top: 230px;
width: 830px;
}
/* Early life information */
.lifeInfo {
text-indent: 20px;
position: absolute;
left: 125px;
top: 270px;
color: silver;
font-size: 20px;
font-family: Newsreader, Raleway;
font-weight: 400;
width: 800px;
line-height: 30px;
}
sup {
color:rgb(240, 35, 35);
}
/* Second divide section shown */
.divide2 {
position: absolute;
top: 3018px;
height: 80px;
width: 1900px;
z-index: 10;
background: rgb(30,10,20);
}
/* Second divide symbol contained in second divide section */
.divideSymbol2 {
top: 2805px;
z-index:20;
background: none;
position: absolute;
left: 710px;
}
.temp {
position: absolute;
top: 3096px;
width: 1900px;
height: 1660px;
background: radial-gradient(circle, rgb(25,25,25),rgb(10,10,10));
z-index: 10;
}
/*===========================================================
ANIMATION STYLING
↓ ↓ ↓
===========================================================*/
/* Contains all animations shown on web page */
/* Shown for quote shown at load of web page */
@keyframes dropdownFadeIn {
0% {top:-25px; opacity: 0%;}
10% {top: 0px; opacity: 5%;}
20% {top: 40px; opacity: 15%;}
30% {top: 80px; opacity: 25%;}
40% {top: 120px; opacity: 35%;}
50% {top: 170px; opacity: 45%;}
60% {top: 220px; opacity: 60%}
70% {top: 250px; opacity: 70%;}
80% {top: 275px; opacity:80%;}
90% {top: 300px; opacity: 90%;}
100% {top: 330px; opacity: 100%;}
}
/* Variation of animation above for title heading only */
@keyframes dropdownFadeIn2 {
0% {top:-110px; opacity: 0%;}
10% {top: -85px; opacity: 5%;}
20% {top: -60px; opacity: 10%}
30% {top: -35px; opacity: 15%;}
40% {top: -10px; opacity: 20%;}
50% {top: 15px; opacity: 35%;}
60% {top: 40px; opacity: 50%}
70% {top: 65px; opacity: 60%;}
80% {top: 90px; opacity:75%;}
90% {top: 115px; opacity: 80%;}
100% {top:140px; opacity: 90%;}
}
@keyframes dropdownFadeIn3 {
0% {top:-40px; opacity: 0%;}
10% {top: -10px; opacity: 5%;}
20% {top: 20px; opacity: 10%}
30% {top: 50px; opacity: 15%;}
40% {top: 80px; opacity: 20%;}
50% {top: 110px; opacity: 35%;}
60% {top: 140px; opacity: 50%}
70% {top: 170px; opacity: 60%;}
80% {top: 200px; opacity:75%;}
90% {top: 230px; opacity: 80%;}
100% {top:240px; opacity: 90%;}
}
/* Flickering "light" */
@keyframes flicker {
0% {filter:brightness(0%) blur(5px);}
25% {filter:brightness(25%) blur(4px);}
50% {filter:brightness(50%) blur(3px);}
75% {filter:brightness(75%) blur(2px);}
100% {filter:brightness(100%) blur(1px);}
}
Raw
dabblet.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tribute Page - Albert Einstein</title>
<!-- CODE LIBRARIES -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-compat/3.0.0-alpha1/jquery.js"></script>
<!-- IMAGE LIBRARY -->
<!--
1. https://www.geneticsandsociety.org/sites/default/files/einstein.jpg
2. https://i.pinimg.com/originals/38/5d/6f/385d6f74ef9e0a7b1dba1d0f5318f9e1.jpg
3. https://interesnyefakty.org/wp-content/uploads/foto-ejnshtejna-v-detstve.jpg
4. ...
-->
<!-- BIO SOURCES -->
<!--
1. https://www.britannica.com/biography/Albert-Einstein
2. https://www.geni.com/people/Hermann-Einstein/6000000001396825580
3. https://www.history.com/topics/inventions/albert-einstein
4. https://www.washingtonpost.com/news/answer-sheet/wp/2016/02/11/
was-albert-einstein-really-a-bad-student-who-failed-math/
5. https://medium.com/@ArthurChung_/albert-einstein-his-struggles-his-failures-d7554f02b237
6. https://www.thejournal.ie/life-of-albert-einstein-2406681-Oct2015/
7. https://www.history.com/topics/inventions/einsteins-life-facts-and-fiction
8. https://kiddingtown.com/albert-einstein-at-school-patrick-pringle/
9. ...
-->
</head>
<body>
<!--===========================================================
BODY CONTENT STYLING - HEAD (FIRST PAGE)
↓ ↓ ↓
============================================================-->
<!-- Div class "headBox" is located in header and contains profile image and quote information -->
<!-- Div class "header" encapsulates all of first page -->
<header>
<div class="headBox">
<h1 class="title">Albert Einstein</h1>
<h3 class="personTitle">The Father of Modern Physics</h3>
<br><br><br>
<img src="https://www.geneticsandsociety.org/sites/default/files/einstein.jpg" class="profileImage" alt="Albert
Einstein's profile image">
<h4 class="quote"><span style="font-family:'Lily Script One'; font-size: 72px; color: rgb(60,30,30);"><div
style="transform: rotateY(180deg); position: absolute; top: 10px;">"</div></span>Everybody is a genius. But if you
judge a fish by its ability to climb a tree, it will live its whole life believing that it is stupid.<span
style="font-family:'Lily Script One'; font-size: 72px; color: rgb(60,30,30);">"</span>
<br><br>
— <span class="personQuote" style="color:silver !important;">Albert Einstein</span>
</h4>
</div>
</header>
<!-- Divider line below-->
<!--Div class "divide" is background styling of line divider; div class "divideSymbol" refers to line divider symbol -->
<div class="divide"></div>
<img src="https://i.pinimg.com/originals/5d/1a/a9/5d1aa9859f61252713395e36974ac588.png" class="divideSymbol">
<!--First page ends here; second section starts here -->
<div class="biographyBox">
<h3 class="bioHead">Early Life</h3>
<hr class="hr">
<figure>
<img src="https://66.media.tumblr.com/0ff5e752d78818cbe0923e9f80451732/tumblr_p6s2eo1wdQ1w97q2io1_640.jpg"
alt="skyline view of Ulm, Germany in 1928" class="birthplace">
<small>
<figcaption style="color: silver; font-family:sans-serif; position: absolute; top: 640px; right: 280px;
">Ulm, Germany in 1928</figcaption>
</small>
</figure>
<img src="https://interesnyefakty.org/wp-content/uploads/foto-ejnshtejna-v-detstve.jpg" class="childProfile">
<p class="lifeInfo">1879 - Albert Einstein was born in Ulm, Germany on March 14th, 1879, to Pauline Einstein (initially
Pauline Koch) and scientific utility salesman and electrician Hermann Einstein. Not long after his birth, his family
moved to Munich where Einstein would begin his academic life.
<sup>[1]</sup>
<br><br><br>
1884 - At the age of five, his father gifted him with a compass to which, the young lad took an immediate liking.
<br><br><br>
Sometime after
reaching age five, Albert Einstein began to attend school in Munich and during this time, he developed a somewhat
mediocre academic reputation as, despite receiving high marks in the majority of his courses (particularly those in
the math and science subjects), he would skip classes, not being fond of the strict teaching methods employed by the
schools he attended. Of this environment, Einstein dryly notes, "It is a miracle that curiosity survives formal
education".
<br><br><br><br>
And perhaps in this regard, Albert Einstein's comments held true, at least, for him. Despite the stifling conditions
of formal education, he did not allow this to discourage him from furthering his education and pursuing those things
which piqued his interest.
<br><br>
At the age of ...
</p>
</div>
<div class="divide2"></div>
<img src="https://i.pinimg.com/originals/5d/1a/a9/5d1aa9859f61252713395e36974ac588.png" class="divideSymbol2">
<div class="temp"></div>
<img src="https://i.pinimg.com/originals/38/5d/6f/385d6f74ef9e0a7b1dba1d0f5318f9e1.jpg" class="profileImage3">
</body>
</html>
Raw
dabblet.js
$(document).ready(function() {
$("").addClass("animated ");
});
Raw
settings.json
{"view":"split","fontsize":"120","seethrough":"1","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment