SHOW:
|
|
- or go back to the newest paste.
1 | <!DOCTYPE html> | |
2 | <html lang="en"> | |
3 | <head> | |
4 | <!-- index.html --> | |
5 | <meta charset="UTF-8"> | |
6 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
7 | <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
8 | <title>Document</title> | |
9 | <link rel="stylesheet" href="style.css"> | |
10 | </head> | |
11 | <body> | |
12 | <div class="custom-padding"> | |
13 | <nav> | |
14 | <div class="logo">Profile</div> | |
15 | ||
16 | <ul class="menu-area"> | |
17 | <li><a href="index.html">Profile</a></li> | |
18 | <li><a href="eronh.html">Eronh</a></li> | |
19 | <li><a href="hans.html">Tobi</a></li> | |
20 | </ul> | |
21 | </nav> | |
22 | </div> | |
23 | <div class="backalax"> | |
24 | <h1 id="wel">Welcome</h1> | |
25 | </div> | |
26 | <div class="profile1"> | |
27 | <h1>Francis Eronh Ong</h1> | |
28 | <br> | |
29 | <p>Francis Eronh is a 17 year old student at University of the East Manila Campus</p> | |
30 | <br> | |
31 | <p>He currently lives in Manila with his family and has 2 siblings</p> | |
32 | <br> | |
33 | <a href="eronh.html" class="profilebtn">Portfolio</a> | |
34 | <img src="img/eronh.jpg" alt=""> | |
35 | </div> | |
36 | ||
37 | <div class="backalax2"></div> | |
38 | <div class="profile2"> | |
39 | <h1>Hans Tobi Regoniel</h1> | |
40 | <br> | |
41 | <p>Hans Tobi is a 17 year old student at University of the East Manila Campus</p> | |
42 | <br> | |
43 | <p>He is a Freshman in university of the East</p> | |
44 | - | <p>He is a martial artist with great talent</p> |
44 | + | |
45 | <a href="hans.html" class="profilebtn">Portfolio</a> | |
46 | <img src="img/hans.jpg" alt=""> | |
47 | </div> | |
48 | <footer>All rights reserved Eronh, 2019</footer> | |
49 | <script src="index.js"></script> | |
50 | </body> | |
51 | </html> | |
52 | ||
53 | ||
54 | ||
55 | <!DOCTYPE html> | |
56 | <html lang="en"> | |
57 | <head> | |
58 | <!-- eronh.html --> | |
59 | <meta charset="UTF-8"> | |
60 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
61 | <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
62 | <title>Document</title> | |
63 | <link rel="stylesheet" href="styles.css"> | |
64 | </head> | |
65 | <body> | |
66 | <div class="custom-padding"> | |
67 | <nav> | |
68 | <div class="logo">Profile</div> | |
69 | ||
70 | <ul class="menu-area"> | |
71 | <li><a href="index.html">Profile</a></li> | |
72 | <li><a href="eronh.html">Eronh</a></li> | |
73 | <li><a href="hans.html">Tobi</a></li> | |
74 | </ul> | |
75 | </nav> | |
76 | </div> | |
77 | <embed class="pdff" src="pdff/Eronh1.pdf" type="application/pdf" height="700px" width="500px"> | |
78 | <embed src="pdff/Eronh2.pdf" type="application/pdf" height="700px" width="500px"> | |
79 | <script src="index.js"></script> | |
80 | </body> | |
81 | </html> | |
82 | ||
83 | ||
84 | <!DOCTYPE html> | |
85 | <html lang="en"> | |
86 | <head> | |
87 | <!-- hans.html --> | |
88 | <meta charset="UTF-8"> | |
89 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
90 | <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
91 | <title>Document</title> | |
92 | <link rel="stylesheet" href="styles.css"> | |
93 | </head> | |
94 | <body> | |
95 | <div class="custom-padding"> | |
96 | <nav> | |
97 | <div class="logo">Profile</div> | |
98 | ||
99 | <ul class="menu-area"> | |
100 | <li><a href="index.html">Profile</a></li> | |
101 | <li><a href="eronh.html">Eronh</a></li> | |
102 | <li><a href="hans.html">Tobi</a></li> | |
103 | </ul> | |
104 | </nav> | |
105 | </div> | |
106 | <embed class="pdff" src="pdff/hans1.pdf" type="application/pdf" height="700px" width="500px"> | |
107 | <embed src="pdff/hans2.pdf" type="application/pdf" height="700px" width="500px"> | |
108 | <script src="index.js"></script> | |
109 | </body> | |
110 | </html> | |
111 | ||
112 | ||
113 | ||
114 | ||
115 | // style.css | |
116 | ||
117 | * { | |
118 | margin: 0; | |
119 | padding: 0; | |
120 | outline: 0; | |
121 | box-sizing: border-box; | |
122 | font-family: sans-serif; | |
123 | } | |
124 | ||
125 | body{ | |
126 | background-image: url(img/1.jpg); | |
127 | -webkit-background-size:cover; | |
128 | background-attachment: fixed; | |
129 | background-size:cover; | |
130 | background-repeat: no-repeat; | |
131 | background-position: center; | |
132 | height: 100vh; | |
133 | } | |
134 | .menu-area li a { | |
135 | text-decoration: none; | |
136 | } | |
137 | ||
138 | .menu-area li { | |
139 | list-style-type: none; | |
140 | } | |
141 | ||
142 | .custom-padding{ | |
143 | padding-top: 25px; | |
144 | } | |
145 | ||
146 | nav { | |
147 | position: relative; | |
148 | width: calc(100% - 60px); | |
149 | margin: 0 auto; | |
150 | padding: 10px 0; | |
151 | background: #4F6367; | |
152 | z-index: 1; | |
153 | text-align: right; | |
154 | padding-right: 2%; | |
155 | } | |
156 | ||
157 | .logo { | |
158 | width: 15%; | |
159 | float: left; | |
160 | text-transform: uppercase; | |
161 | color: #fff; | |
162 | font-size: 25px; | |
163 | text-align: left; | |
164 | padding-left: 2%; | |
165 | } | |
166 | ||
167 | .menu-area li { | |
168 | display: inline-block; | |
169 | } | |
170 | ||
171 | .menu-area a { | |
172 | color: #fff; | |
173 | font-weight: 300; | |
174 | letter-spacing: 1px; | |
175 | text-transform: uppercase; | |
176 | display: block; | |
177 | padding: 0 25px; | |
178 | font-size: 14px; | |
179 | line-height: 30px; | |
180 | position: relative; | |
181 | z-index: 1; | |
182 | } | |
183 | .menu-area a:hover { | |
184 | background: #B8D8D8; | |
185 | color: black; | |
186 | } | |
187 | ||
188 | .menu-area a:hover:after { | |
189 | transform: translateY(-50%) rotate(-35deg); | |
190 | } | |
191 | ||
192 | nav:before { | |
193 | position: absolute; | |
194 | content: ''; | |
195 | border-top: 10px solid rgb(46, 56, 58); | |
196 | border-right: 10px solid rgb(46, 56, 58); | |
197 | border-left: 10px solid transparent; | |
198 | border-bottom: 10px solid transparent; | |
199 | top: 100%; | |
200 | left: 0; | |
201 | } | |
202 | ||
203 | nav:after { | |
204 | position: absolute; | |
205 | content: ''; | |
206 | border-top: 10px solid rgb(46, 56, 58); | |
207 | border-left: 10px solid rgb(46, 56, 58); | |
208 | border-right: 10px solid transparent; | |
209 | border-bottom: 10px solid transparent; | |
210 | top: 100%; | |
211 | right: 0; | |
212 | } | |
213 | ||
214 | .pdff{ | |
215 | margin-left: 200px; | |
216 | } |