css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!doctype html>
<head>
<title> WELCOME TO KD WORKS LIMITED </title>
</head>
<body><link rel="stylesheet" href="kdwel.css">

<div class="wrapper">
<div class="header" onmouseover="home()"><h1>WELCOME TO KD WORKS</h1></div>
<div class="menu">
    <ul>
    <li><a onclick="home()" href="#home.html">HOME</a></li>
    <li><a onclick="abtus()" href="#content.html">ABOUT US</a></li>
    <li><a onclick="wwdo()" href="#wwdo.html">WHAT WE DO</a></li>
    <li><a onclick="prod()" href="#products.html">PRODUCTS</a></li>
    <li><a onclick="terms()" href="#terms.html">TERMS</a></li>
    <li><a onclick="cntct()" href="#contactus.html">CONTACT US</a></li>
    </ul>
</div>
<div class="content">
    <p>I have always loved repairs and as a growing child, would disassemble gadgets & other devices I could find<br>
    just to tinker with them and get to learn how and what made them work.<br><br> 
    Back then, I failed a couple of times at putting them back together or getting them fixed, but eventually learnt the art of the fine trade through these failures. <br><br>
    Today, KD WORKS takes on both individual and corporate projects in repairs and can fix just<br> 
    about anything laptop, personal computer or smartphone. So do not hesitate to give us a try and contact us. We will definitely turn your dreams into reality.<br><br> 
    And remember, we complement our repairs with the sale of top-notch security software.<br><br><hr>
</p>
<h3><center><a href="https://www.facebook.com/kdworks">FB: KD WORKS;</a> <a href="https://www.instagram.com/kdworks/">IG: #KDWORKS;</a> <a href="https://twitter.com/kdworksgh/">TW: @KDWORKSGH</a></center></h3>
</div>

<div class="footer"><h5>@COPYRIGHT OF KD WORKS LIMITED 2019. All RIGHTS RESERVED!</h5></div>
</div>

<script src="kdwel.js"></script>
</body>
            
          
!
            
              .wrapper{
    display:grid;
    grid-template-columns:repeat(12, 2fr);
    grid-template-rows:75px 500px 80px;
    border-radius:0px 20px 0px 20px;
    border:2px solid whitesmoke;
    background-color:whitesmoke;
}

.header{
    grid-column:span 12;
    text-align:center;
    background-color:black;
    border-radius:0px 20px 0px 20px;
    border:2px solid white;
}

.header h1{
    color:rebeccapurple;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
    padding:0px;
}

.menu{
    grid-column:span 3;
    background-color:white;
    border: 2px solid white;
    border-radius:0px 20px 0px 20px;
}

.menu li{
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    text-align: right;
    border: 2px solid white;
    border-radius:0px 20px 0px 20px;
    padding:20px;
    margin:14px;
}

a{
    text-decoration:rosybrown;
    color:rebeccapurple;
}

a:hover{
    color:whitesmoke;
    font-family:inherit;
    font-size:35px;
    cursor:pointer;
}

.content{
    grid-column:span 9;
    background-color:rebeccapurple;
    border: 2px solid white;
    border-radius:30px 0px 30px 0px;
    margin:1px;
    padding:60px;
}

.content p{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    font-size:18px;
    color:white;
}

.content a{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align:center;
    color:black;
    /*font-size:18px;*/
}

.footer{
    grid-column:span 12;
    background-color:black;
    border-radius:20px 0px 20px 0px;
    border:2px solid white;
}

.footer h5{
    text-align:center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rebeccapurple;
    font-size: 17px;
}
            
          
!
            
              let x = document.querySelectorAll("li");

for (let i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "black";

function home() {
    alert("Hi there. Welcome to KD WORKS LIMITED. Browse the sections to learn more. Thank You!");
}

function abtus() {
    alert("Read about us in the contect section");
}

function wwdo(){
  alert("IMPORT & SALES: Laptops, Destop PCs, Mobile Phones, Televisions, Other Tech & Security Software | PROFESSIONAL REPAIRS (SOFTWARE & HARDWARE): Laptops, Desktop PCs & Mobile Phones | UPRADES: Operating Systems (OS), Hard Drives & RAM | MIGRATION & RECOVERY: Operating Systems (OS) & Personal Data | SALE & INSTALLATION OF PC & PHONE SECURITY SOFTWARE: Authorized Partner & Reseller of Avira AntiVirus in Ghana | GRAPHIC DESIGN - Logo Creation, Banners, Business Cards, Flyers & More.");
}

function prod(){
  alert("LENOVO, ASUS, DELL, HP, BLACKBERRY, APPLE, ANDROID");
}

function terms(){
  alert("KINDLY MAKE A DEPOSIT OF 80% OF THE TOTAL PRICE BEFORE ORDER IS MADE AND THE REST OF THE 20% WHEN GOODS ARRIVE. 1. ITEMS SOLD ARE NOT RETURNABLE NOR COVERED BY INTERNATIONAL WARRANTY, UNLESS FOUND DEFECTIVE UNDER WARANTY PERIOD AND ACCORDING TO COMPANY WARRANTY TERMS! 2. DEVICES SOLD HAVE A WARRANTY LIFE OF 3 MONTHS OR LESS, DEPENDING ON ITEM SOLD, AS WARRANTY GIVEN BY INTERNATIONAL OEMs AND SELLERS ON PRODUCTS, DOES NOT 'APPLY' ONCE SHIPPED OUTSIDE THE COUNTRY OF ORIGIN. 3. WARRANTY DOES NOT COVER DAMAGE TO EQUIPMENT DUE TO  POWER FLACTUATIONS AND SURGES OR ANY OTHER DAMAGES INTENTIONALLY OR ACCIDENTALLY CAUSED BY BUYER. 4. PRICES ARE VALID FOR 24 HOURS OR UNTIL DOLLAR RATE CHANGES");
}

function cntct(){
  alert("P.O.Box 86 Mamprobi Accra | Tel: 020 843 0359, 024 126 1354 | Email: dka.kdworks@outlook.com");
}
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console