/
petrelynn.html
114 lines (94 loc) · 2.46 KB
/
petrelynn.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
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
<!--Name: Peter Lin--><!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<div class="topnav">
<a class="active" href="#products">PRODUCTS</a>
<a href="#blog">BLOG</a>
<a href="#pages">PAGES</a>
<a href="#home">HOME</a>
<header class="header">
<button onclick="alert('You clicked me!');" id="myButton"></button>
</header>
</div>
</head>
<body>
<style>
.header {
background-image: url('https://codeinthedark.hackillinois.org/submissions/images/CAT-Logo-small.png');
width: 200px;
height: 36px;
text-align: center;
}
.header button {
position: relative;
top: 50%;
transform: translateY(-50%);
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #FFFFFFF;
overflow: hidden;
font-family: Verdana;
}
/* Style the links inside the navigation bar */
.topnav a {
float: right;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: white;
}
h1.ex1 {
padding: 40px;
padding-bottom: 0px;
font-family: Helvetica;
}
p.ex1 {
padding: 40px;
padding-top: 0px;
font-family: Helvetica;
}
.code {
text-decoration: line-through;
}
.info {width:100px;
height: 100px;
object-fit:scale-down;}
.info img {float:left;}
.info p {margin-right:10px;}
.parent {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
top: 0;
left: 0;
border: 1px red solid;
}
.image2 {
position: absolute;
top: 50px;
left: 30px;
border: 1px green solid;
}
</style>
<h1 class="ex1">Code in the Dark</h1>
<p class="ex1">Coding here and there! Try your best to recreate this responsive site <strong>under 25 mins...</strong> Take a look to the details, <em>each of them count!.</em> Do your best to recreate them and be the CAT ninja n!nj@ c0dEr!.
</p>
<div class="parent">
<img class="image1" src="https://www.plantmachineryvehicles.com/cloud/2021/07/08/WOTRdKCT-CM20180502-83106-42754-1200x914.jpg" />
<img class="image2" src="https://codeinthedark.hackillinois.org/submissions/images/home/slider/birds1.png" />
<img class="image2" src="https://codeinthedark.hackillinois.org/submissions/images/home/slider/birds2.png" />
<img class="image2" src="https://codeinthedark.hackillinois.org/submissions/images/home/slider/sun.png" />
</div>
</body>
</html>