SHARE
TWEET

Etech-HTML

a guest Oct 23rd, 2019 103 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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.         <br>
  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. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top