Skip to content

Commit 344983e

Browse files
solygambassolygambas
committed
add terminal css
1 parent 8f271ae commit 344983e

File tree

4 files changed

+155
-0
lines changed

4 files changed

+155
-0
lines changed

‎97-terminal style landing page/index.html

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!-- Based on Terminal Style Landing Page | WinBox.js by Brad Traversy (2021)
2+
see: https://www.youtube.com/watch?v=jQCk2yo10YY -->
3+
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<meta charset="UTF-8" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<link
10+
rel="stylesheet"
11+
href="https://rawcdn.githack.com/nextapps-de/winbox/0.2.0/dist/css/winbox.min.css"
12+
/>
13+
<link rel="stylesheet" href="style.css" />
14+
<title>Terminal</title>
15+
</head>
16+
<body>
17+
<div class="container">
18+
<nav>
19+
<ul>
20+
<li id="about">/about</li>
21+
<li id="contact">/contact</li>
22+
</ul>
23+
</nav>
24+
<main>
25+
<h1>dtaggart:$<span class="cursor">|</span></h1>
26+
<h3>Find me online:</h3>
27+
<ul>
28+
<li>
29+
<a href="#">YouTube</a>
30+
</li>
31+
<li>
32+
<a href="#">Twitter</a>
33+
</li>
34+
<li>
35+
<a href="#">GitHub</a>
36+
</li>
37+
<li>
38+
<a href="#">CodePen</a>
39+
</li>
40+
</ul>
41+
</main>
42+
</div>
43+
<div class="hidden">
44+
<div id="about-content">
45+
<h2>about-me:$</h2>
46+
<p>
47+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, soluta?
48+
</p>
49+
<p>
50+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, soluta?
51+
</p>
52+
</div>
53+
<div id="contact-content">
54+
<h2>contact-me:$</h2>
55+
<p>
56+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, soluta?
57+
</p>
58+
<ul>
59+
<li>Phone: 555-555-5555</li>
60+
<li>Email: brad@email.com</li>
61+
</ul>
62+
</div>
63+
</div>
64+
<script src="https://rawcdn.githack.com/nextapps-de/winbox/0.2.0/dist/js/winbox.min.js"></script>
65+
<script src="script.js"></script>
66+
</body>
67+
</html>

‎97-terminal style landing page/script.js

Whitespace-only changes.

‎97-terminal style landing page/style.css

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;700&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
padding: 0;
6+
margin: 0;
7+
}
8+
9+
:root {
10+
--text-color: #00aa00;
11+
}
12+
13+
body {
14+
font-family: "Roboto Mono", sans-serif;
15+
background-color: #333;
16+
color: #ccc;
17+
font-size: 18px;
18+
line-height: 1.6;
19+
}
20+
21+
.container {
22+
max-width: 600px;
23+
margin: auto;
24+
display: flex;
25+
flex-direction: column;
26+
justify-content: center;
27+
align-items: center;
28+
min-height: 70vh;
29+
}
30+
31+
ul {
32+
list-style-type: none;
33+
}
34+
35+
nav {
36+
width: 40%;
37+
}
38+
39+
nav ul {
40+
display: flex;
41+
justify-content: space-around;
42+
align-items: center;
43+
}
44+
45+
nav ul li {
46+
color: var(--text-color);
47+
cursor: pointer;
48+
}
49+
50+
h1 {
51+
color: var(--text-color);
52+
font-size: 50px;
53+
letter-spacing: -5px;
54+
margin-bottom: 20px;
55+
}
56+
57+
h2 {
58+
color: var(--text-color);
59+
}
60+
61+
h3 {
62+
margin-bottom: 10px;
63+
}
64+
65+
a {
66+
color: var(--text-color);
67+
text-decoration: none;
68+
}
69+
70+
.hidden {
71+
display: none;
72+
}
73+
74+
.cursor {
75+
font-weight: 700;
76+
animation: 1s blink step-end infinite;
77+
}
78+
79+
@keyframes blink {
80+
from,
81+
to {
82+
color: transparent;
83+
}
84+
50% {
85+
color: var(--text-color);
86+
}
87+
}

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@
102102
| 94 | [Laptop UI](https://github.com/solygambas/html-css-fifty-projects/tree/master/94-laptop%20UI) | [Live Demo](https://codepen.io/solygambas/full/eYgoxMo) |
103103
| 95 | [Headphones Product Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/95-headphones%20product%20page) | [Live Demo](https://codepen.io/solygambas/full/KKaLmEr) |
104104
| 96 | [Cloud Hosting Service](https://github.com/solygambas/html-css-fifty-projects/tree/master/96-cloud%20hosting%20service) | [Live Demo](https://codepen.io/solygambas/full/oNBrXYr) |
105+
| 97 | [Terminal Style Landing Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/97-terminal%20style%20landing%20page) | [Live Demo](#) |
105106

106107
This repository is mostly based on 2 courses by Brad Traversy (2020):
107108

0 commit comments

Comments
 (0)