HTML5   19

homepage.html

Guest on 18th May 2022 12:29:22 AM

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.    <head>
  4.      
  5.       <title>HS Laptops homepage</title>
  6.       <link href="https://fonts.googleapis.com/css?family=Lato: 100,300,400,700|Luckiest+Guy|Oxygen:300,400"
  7.        rel="stylesheet">
  8.       <link href="style.css" type="text/css" rel="stylesheet">
  9.       <script src="productlist.js"> </script>
  10.     </head>
  11.      
  12.     <body bgcolor="#e5e5ea">
  13.       <div class="header">
  14.         <h1> HS Laptops</h1>
  15.       </div>
  16.      
  17.      
  18.       <ul class="navigation">
  19.         <center>
  20.           <!-- butting the logo on the left side so the nav bar -->
  21.           <img src="logo.png" style="float: left;" height="75px;"> </img>
  22.           <style>
  23.             .button {
  24.                background-color: #27ae60;
  25.                border: none;
  26.                color: white;
  27.                position: absolute; left:680px;
  28.                padding: 0px;
  29.                text-align: center;
  30.                text-decoration: none;
  31.                display: inline-block;
  32.                font-size: 16px;
  33.                margin: 4px 2px;
  34.                cursor: pointer;
  35.             }
  36.          </style>
  37.          <!-- Creating a button that links to products page -->
  38.          <a href="product.html" class="button">Avalible Products</a>
  39.    
  40.         </center>
  41.       </ul>
  42. <!-- Making an About us heading -->
  43.       <div class="tag"> About us </div>
  44.       <div>
  45.         <!-- First Employee name -->
  46.          <h2> Harsh P</h2>
  47.          <br>
  48.          <!-- Adding employee picture -->
  49.          <img style ='height: 450px; width: 450px; float: left; padding: 10px;'src="office man.png">
  50.          <!-- adding info about the employee and centering it  -->
  51.          <p style="font-family: Lato; text-align: center; font-size: larger;"> The Chief Executive Officer (CEO) is the highest-ranking executive of any company. Mr. Patel fulfils that role in our  respected encorperation. They are responsible for ensuring that the business operates at a profit and meets its goals. They need to know how best to approach new opportunities, including delegating tasks or directing agendas to drive profitability by managing organizational structure.</p>
  52.         <br>
  53.         <br>
  54.         <br>
  55.         <br>
  56.         <br>
  57.         <br>
  58.         <br>
  59.         <br>
  60.         <br>
  61.         <br>
  62.         <br>
  63.         <br>
  64.         <br>
  65.         <br>
  66.         <br>
  67.         <br>
  68.         <br>
  69.         <br>
  70.         <br>
  71. <!-- Second Employee name -->
  72.          <h2> Harraj S</h2>
  73.          <br>
  74.          <!-- Adding employee picture -->
  75.          <img style ='height: 450px; width: 450px; float: left; padding: 10px;'src="officeman2.jpg">
  76.          <!-- adding info about the employee and centering it  -->
  77.          <p style="font-family: Lato; text-align: center; font-size: larger;"> Mr. Singh is the leader or head of our reputable business and works with a board of executives to provide strong leadership for the company. Also known as a Chief Executive Officer (CEO), the President establishes short and long-term goals, plans, and strategies for the company and ensures the company complies with them.</p>
  78.          <br>
  79.          <br>
  80.          <br>
  81.          <br>
  82.          <br>
  83.          <br>
  84.          <br>
  85.          <br>
  86.          <br>
  87.          <br>
  88.          <br>
  89.          <br>
  90.          <br>
  91.          <br>
  92.          <br>
  93.          <br>
  94.          <br>
  95.          <br>
  96.          <br>
  97.          <br>
  98.          <!-- Third Employee name -->
  99.          <h2> Bill G  </h2>
  100.          <br>
  101.          <!-- Adding employee picture -->
  102.          <img style ='height: 450px; width: 450px; float: left; padding: 10px;'src="billyg.jpeg">
  103.           <!-- adding info about the employee and centering it  -->
  104.          <p style="font-family: Lato; text-align: center; font-size: larger;"> The vice president in our company is Mr. Gates, whose responsibilities include overseeing internal operations, helping to build strong customer relationships, maximizing the company's operating performance, and helping to achieve the company's financial goals. The vice president supports the company's president and is able to step in when the president is away from the office or otherwise unavailable.</p>
  105.          <br>
  106.          <br>
  107.          <br>
  108.          <br>
  109.          <br>
  110.          <br>
  111.          <br>
  112.          <br>
  113.          <br>
  114.          <br>
  115.          <br>
  116.          <br>
  117.          <br>
  118.          <br>
  119.          <br>
  120.          <br>
  121.          <br>
  122.          <br>
  123.          <br>
  124.             <!-- Fourth Employee name -->
  125.          <h2> Warren B  </h2>
  126.          <br>
  127.          <!-- Adding employee picture -->
  128.          <img style ='height: 450px; width: 450px; float: left; padding: 10px;'src="warryb.jpg">
  129.          <!-- adding info about the employee and centering it  -->
  130.          <p style="font-family: Lato; text-align: center; font-size: larger;"> The vice president's assistant in our company is Mr. Buffet, whose responsibilities include Managing the day-to-day operational and administrative activities of the Vice-President by setting and monitoring his schedule, organizing the incoming flow of work, prioritizing requests, maintaining a monitoring system, and following-up to ensure timely responses; preparing  for meetings and arranging teleconferences often over different time zones.</p>
  131.         </div>
  132.      
  133.     </body>
  134.      
  135.     </html>
  136.     <style>
  137.     body {
  138.       background: #E5E5EA;
  139.       margin: 0;
  140.       padding: 0;
  141.     }
  142.    
  143.     /* Navigation */
  144.    
  145.     .navigation {
  146.       box-sizing: border-box;
  147.       background-color: #ABA9C3;
  148.       overflow: auto;
  149.       padding: 18px 50px;
  150.       position: relative;
  151.       top: 0;
  152.       width: 100%;
  153.       z-index: 999;
  154.     }
  155.    
  156.     h1 {
  157.       color: rgb(255, 255, 255);
  158.       display: inline-block;
  159.       font-family: 'Oxygen', sans-serif;
  160.       font-weight: 800;
  161.       letter-spacing: 2px;
  162.       margin: 0;
  163.       padding: 10px 9px 5px 9px;
  164.       text-transform: uppercase;
  165.     }
  166.     h2 {
  167.       color: rgb(0, 0, 0);
  168.       display: inline-block;
  169.       font-family: 'Oxygen', sans-serif;
  170.       font-weight: 800;
  171.       letter-spacing: 2px;
  172.       margin: 0;
  173.       padding: 10px 9px 5px 9px;
  174.       text-transform: uppercase;
  175.       text-align: center;
  176.     }
  177.    
  178.    
  179.     .header {
  180.       text-align: center;
  181.       background-color: #838597;
  182.       overflow: auto;
  183.       padding-top: 25px;
  184.       padding-bottom: 25px;
  185.       top: 0;
  186.       width: 100%;
  187.       z-index: 999;
  188.     }
  189.    
  190.    
  191.     a:link{
  192.       color: white;
  193.     }
  194.     a:visited{
  195.       color: white;
  196.     }
  197.     a:hover{
  198.       color: hotpink;
  199.     }
  200.     a:active{
  201.       color: white;
  202.     }
  203.    
  204.    
  205.     .active {
  206.       color: #a1f591;
  207.     }
  208.     .link {
  209.       color: #ffffff;
  210.     }
  211.    
  212.     /* Table */
  213.    
  214.     table {
  215.       height: 40%;
  216.       left: 10%;
  217.       margin: 20px auto;
  218.       overflow-y: scroll;
  219.       position: static;
  220.       width: 80%;
  221.     }
  222.    
  223.     thead th {
  224.       background: #275DAD;
  225.       color: #FFF;
  226.       font-family: 'Lato', sans-serif;
  227.       font-size: 16px;
  228.       font-weight: 100;
  229.       letter-spacing: 2px;
  230.       text-transform: uppercase;
  231.     }
  232.    
  233.     tr {
  234.       background: #5B616A;
  235.       border-bottom: 1px solid #FFF;
  236.       margin-bottom: 5px;
  237.       color: white;
  238.     }
  239.    
  240.     th, td {
  241.       font-family: 'Lato', sans-serif;
  242.       font-weight: 400;
  243.       padding: 20px;
  244.       text-align: left;
  245.       width: 33.3333%;
  246.       font-size: 18px;
  247.     }
  248.    
  249.     .tag {
  250.       background-color: #CED3DC;
  251.       border: 1px solid #DDD;
  252.       border-radius: 3px;
  253.       color: rgb(90, 90, 90);
  254.       font-family: 'Lato', sans-serif;
  255.       font-size: 24px;
  256.       font-weight: 600;
  257.       letter-spacing: 2px;
  258.       text-align: center;
  259.       padding: 20px;
  260.       margin: 50px auto 0px auto;
  261.       width: 77%;
  262.     }
  263.    
  264.     .body77 {
  265.       padding: 20px;
  266.       margin: 50px auto 0px auto;
  267.       width: 77%;
  268.     }
  269.    
  270.     .video{
  271.       text-align: center;
  272.       padding: 20px;
  273.     }
  274.    
  275.     .statement {
  276.       font-family: 'Lato', sans-serif;
  277.       font-size: 14px;
  278.       font-weight: 600;
  279.       letter-spacing: 2px;
  280.       text-align: center;
  281.       width: 50%;
  282.       margin: 10px auto 0px auto;
  283.     }
  284.    
  285.     .container {
  286.       display: block;
  287.       position: relative;
  288.       padding-left: 35px;
  289.       margin-bottom: 12px;
  290.       cursor: pointer;
  291.       font-size: 22px;
  292.       -webkit-user-select: none;
  293.       -moz-user-select: none;
  294.       -ms-user-select: none;
  295.       user-select: none;
  296.     }
  297.    
  298.     .container input {
  299.       position: absolute;
  300.       opacity: 0;
  301.       cursor: pointer;
  302.       height: 0;
  303.       width: 0;
  304.     }
  305.    
  306.     .checkmark {
  307.       position: absolute;
  308.       top: 0;
  309.       left: 0;
  310.       height: 25px;
  311.       width: 25px;
  312.       background-color: #eee;
  313.     }
  314.    
  315.     .container:hover input ~ .checkmark {
  316.       background-color: #ccc;
  317.     }
  318.    
  319.     .container input:checked ~ .checkmark {
  320.       background-color: #2196F3;
  321.     }
  322.    
  323.     .checkmark:after {
  324.       content: "";
  325.       position: absolute;
  326.       display: none;
  327.     }
  328.    
  329.     .container input:checked ~ .checkmark:after {
  330.       display: block;
  331.     }
  332.    
  333.     .container .checkmark:after {
  334.       left: 9px;
  335.       top: 5px;
  336.       width: 5px;
  337.       height: 10px;
  338.       border: solid white;
  339.       border-width: 0 3px 3px 0;
  340.       -webkit-transform: rotate(45deg);
  341.       -ms-transform: rotate(45deg);
  342.       transform: rotate(45deg);
  343.     }
  344.    
  345.     .button {
  346.       background-color: #4CAF50;
  347.       border: none;
  348.       color: white;
  349.       padding: 15px 32px;
  350.       text-align: center;
  351.       text-decoration: none;
  352.       display: inline-block;
  353.       font-size: 16px;
  354.       margin: 4px 2px;
  355.       cursor: pointer;
  356.     }
  357.     </style>

Raw Paste


Login or Register to edit or fork this paste. It's free.