├── .gitignore
├── index.html
├── package.json
└── index.css


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 | <link rel="stylesheet" href="index.css" />
2 | <div/>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "pure-css-site",
 3 |   "version": "0.0.1",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "http-server ."
 8 |   },
 9 |   "author": "Archie Wood",
10 |   "license": "MIT",
11 |   "devDependencies": {
12 |     "http-server": "^14.1.1"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/index.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     white-space: pre-wrap;
  3 |     font-family: var(--primary-font);
  4 |     font-size: normal;
  5 |     width: 100%;
  6 |     height: 100%;
  7 |     text-align: center;
  8 |     display: inline-block;
  9 |     margin: 0 0 0 0;
 10 |     padding: 0;
 11 |     border: 0;
 12 |     background: url("https://media.licdn.com/dms/image/C4D03AQFN1XgOiqKe0Q/profile-displayphoto-shrink_400_400/0/1614371608911?e=1684368000&v=beta&t=S8Sn3Sl27oxYrje5SrteR14GmBkcbo9JtH81cLxlBJo") top 5% left 5% / 100px, var(--bg-color);
 13 |     background-repeat: no-repeat;
 14 |     border-radius: 30%;
 15 | }
 16 | 
 17 | 
 18 | div {
 19 |     padding-top: 30vh;
 20 |     
 21 | }
 22 | 
 23 | div::before{
 24 |     animation: typewriter 30s;
 25 |     transition: 1s ease-in-out;
 26 | }
 27 | 
 28 | @keyframes typewriter {
 29 |     00.0% { content: "A" }
 30 |     00.4% { content: "A " }
 31 |     00.8% { content: "A W" }
 32 |     01.2% { content: "A We" }
 33 |     01.6% { content: "A Web" }
 34 |     02.0% { content: "A Webs" }
 35 |     02.4% { content: "A Websi" }
 36 |     02.8% { content: "A Websit" }
 37 |     03.2% { content: "A Website" }
 38 |     13.2% { content: "A Website," }
 39 |     13.6% { content: "A Website, " }
 40 |     14.0% { content: "A Website, i" }
 41 |     14.4% { content: "A Website, in" }
 42 |     14.8% { content: "A Website, in " }
 43 |     15.2% { content: "A Website, in P" }
 44 |     15.6% { content: "A Website, in Pu" }
 45 |     16.0% { content: "A Website, in Pur" }
 46 |     16.4% { content: "A Website, in Pure" }
 47 |     16.8% { content: "A Website, in Pure " }
 48 |     17.2% { content: "A Website, in Pure C" }
 49 |     17.6% { content: "A Website, in Pure CS" }
 50 |     18.0% { content: "A Website, in Pure CSS" }
 51 |     22.2% { content: "A Website, in Pure CSS." }
 52 | }
 53 | 
 54 | 
 55 | 
 56 | div::before {
 57 |     font-family: var(--primary-font);
 58 |     font-size: 2em;
 59 |     font-weight: bold;
 60 |     color: var(--grey-800);
 61 |     position: relative;
 62 |     top: -30px;
 63 |     border-right: .15em solid var(--grey-800);
 64 |     user-select: all;
 65 |     content: "A Website, in Pure CSS.";
 66 |     
 67 | }
 68 | 
 69 | div::after {
 70 |     font-family: var(--secondary-font);
 71 |     font-size: 1em;
 72 |     user-select: all;
 73 |     content: 
 74 |     " \A \
 75 | This website contains one <div> only. \A \
 76 | No JavaScript. \A \
 77 | The rest is pure CSS. \A \
 78 | \A \
 79 | The <div> is animated with CSS keyframes, \A \
 80 | styled with CSS variables, \A \
 81 | styled with CSS transitions, \A \
 82 | styled with CSS pseudo-elements, \A \
 83 | styled with CSS pseudo-classes. \A \
 84 | But that's it. \A \
 85 | ";
 86 | }
 87 | 
 88 | :root {
 89 |     --text-color: #222;
 90 |     --bg-color: linear-gradient(to bottom, #f2dfce, white);
 91 | 
 92 |     /* Fonts */
 93 |     --primary-font: 'Georgia', serif;
 94 |     --secondary-font: 'Helvetica Neue', sans-serif;
 95 | 
 96 |     /* Colors */
 97 |     --primary-color: #0077cc;
 98 |     --secondary-color: #00bfff;
 99 |     --accent-color: #ffa500;
100 |     --success-color: #008000;
101 |     --warning-color: #ff4500;
102 |     --error-color: #ff0000;
103 | 
104 |     /* Greys */
105 |     --grey-100: #f5f5f5;
106 |     --grey-200: #e0e0e0;
107 |     --grey-300: #c6c6c6;
108 |     --grey-400: #a7a7a7;
109 |     --grey-500: #8e8e8e;
110 |     --grey-600: #6e6e6e;
111 |     --grey-700: #4f4f4f;
112 |     --grey-800: #2f2f2f;
113 |     --grey-900: #1c1c1c;
114 |     --grey-999: #000000;
115 | }


--------------------------------------------------------------------------------