pure-css-site/index.css at master · archiewood/pure-css-site · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
body {
    white-space: pre-wrap;
    font-family: var(--primary-font);
    font-size: normal;
    width: 100%;
    height: 100%;
    text-align: center;
    display: inline-block;
    margin: 0 0 0 0;
    padding: 0;
    border: 0;
    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);
    background-repeat: no-repeat;
    border-radius: 30%;
}


div {
    padding-top: 30vh;

}

div::before{
    animation: typewriter 30s;
    transition: 1s ease-in-out;
}

@keyframes typewriter {
    00.0% { content: "A" }
    00.4% { content: "A " }
    00.8% { content: "A W" }
    01.2% { content: "A We" }
    01.6% { content: "A Web" }
    02.0% { content: "A Webs" }
    02.4% { content: "A Websi" }
    02.8% { content: "A Websit" }
    03.2% { content: "A Website" }
    13.2% { content: "A Website," }
    13.6% { content: "A Website, " }
    14.0% { content: "A Website, i" }
    14.4% { content: "A Website, in" }
    14.8% { content: "A Website, in " }
    15.2% { content: "A Website, in P" }
    15.6% { content: "A Website, in Pu" }
    16.0% { content: "A Website, in Pur" }
    16.4% { content: "A Website, in Pure" }
    16.8% { content: "A Website, in Pure " }
    17.2% { content: "A Website, in Pure C" }
    17.6% { content: "A Website, in Pure CS" }
    18.0% { content: "A Website, in Pure CSS" }
    22.2% { content: "A Website, in Pure CSS." }
}


div::before {
    font-family: var(--primary-font);
    font-size: 2em;
    font-weight: bold;
    color: var(--grey-800);
    position: relative;
    top: -30px;
    border-right: .15em solid var(--grey-800);
    user-select: all;
    content: "A Website, in Pure CSS.";

}

div::after {
    font-family: var(--secondary-font);
    font-size: 1em;
    user-select: all;
    content:
    " \A \
This website contains one <div> only. \A \
No JavaScript. \A \
The rest is pure CSS. \A \
\A \
The <div> is animated with CSS keyframes, \A \
styled with CSS variables, \A \
styled with CSS transitions, \A \
styled with CSS pseudo-elements, \A \
styled with CSS pseudo-classes. \A \
But that's it. \A \
";
}

:root {
    --text-color: #222;
    --bg-color: linear-gradient(to bottom, #f2dfce, white);

    /* Fonts */
    --primary-font: 'Georgia', serif;
    --secondary-font: 'Helvetica Neue', sans-serif;

    /* Colors */
    --primary-color: #0077cc;
    --secondary-color: #00bfff;
    --accent-color: #ffa500;
    --success-color: #008000;
    --warning-color: #ff4500;
    --error-color: #ff0000;

    /* Greys */
    --grey-100: #f5f5f5;
    --grey-200: #e0e0e0;
    --grey-300: #c6c6c6;
    --grey-400: #a7a7a7;
    --grey-500: #8e8e8e;
    --grey-600: #6e6e6e;
    --grey-700: #4f4f4f;
    --grey-800: #2f2f2f;
    --grey-900: #1c1c1c;
    --grey-999: #000000;
}