-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
67 lines (63 loc) · 3.4 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./dist/main.css" />
<title>Minimalist CSS Demos</title>
<meta
name="Minimalist CSS Demos"
content="Minimalist CSS Demos by Catherine Vidos"
/>
<meta property="og:title" content="Minimalist CSS Demos" />
<meta property="og:image" content="./src/images/home.png" />
<meta property="og:description" content="Minimalist button, text, & image effects using CSS and JS" />
<meta property="og:url" content="https://catherinevidos.github.io/css-demo-project/" />
<link rel="apple-touch-icon" sizes="180x180" href="./src/images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./src/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./src/images/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
</head>
<body>
<div id='top-div'>
<header id="intro-text">Minimalist CSS Demos by Catherine Vidos</header>
</div>
<div id='body-wrapper'>
<div id='x-button'>X</div>
<nav id='navbar'>
<div id='navbar-text'>
Minimalist CSS Demos by Catherine Vidos
</div>
<div class='left-nav-links'>
<a class='nav-links' href="https://github.com/catherinevidos" target="_blank">Github</a>
<a class='nav-links' href="https://www.linkedin.com/in/catherine-vidos-03163684/" target="_blank">LinkedIn</a>
</div>
</nav>
<div id='main'>
<p class='button-demos-about'><span>about this site</span></p>
<p id='about-site'>I have a passion for minimalism and have enjoyed comimg up with creative button, text, and image animations using CSS and Javascript. Everything below has a hover effect. Images can also be clicked to dislpay them zoomed-in--click between images to swap views or click away to restore them to their normal size. Tooltip demos are coming soon! Thank you for visiting.</p>
<p class='button-demos'><span>button demos</span></p>
<div class='demo'>
<button id='button1'>clicked</button>
<button class='button2'><span class='button-text'>framed</span></button>
<button id='button3'>arrow</button>
<button id='button4'>go up</button>
</div>
<p class='button-demos'><span>text demos</span></p>
<div class="demo-text">
<div class='text-container'><span id='hello-world'>hover to start</span></div>
<div class='text-container'><p id='fade-demo'>hello squish</p></div>
<div class=-text-container><div id='highlight'><span id='span-text'>highlight text</span></div></div>
<div class='text-container'><p id='text-fourth-demo'>hello world</p></div>
</div>
<p class='button-demos'><span>image demos</span></p>
<div class='demo-images'>
<div id='container1'><img id='plant2-img' src='./src/images/italy.jpg' alt='Boat'><span id='image1-span'>Hover Over or Click on Me</span></img></div>
<div id='container2'><img id='subway-img' src='./src/images/subway.jpg' alt='Subway'><span id='image2-span'>Hover Over or Click on Me</span></img></div>
<div id='container3'><img id='arch-img' src='./src/images/architecture.jpg' alt='Architecture'><span id='image3-span'>Hover Over or Click on Me</span></img></div>
</div>
</div>
</div>
<script src="./dist/main.js"></script>
</body>
</html>