Scribd Logo
Upload

Welcome to Scribd!

  • Home

    Uploaded by

    Vivek Ram Prakhash S
    8 views3 pages
    This document is a HTML page about communication technology. It contains a header with navigation links, a scrolling welcome message, and a rotating slideshow of three images related to communication. The header includes the title "Tech Insider in the field of Communication" and links to different pages. Below the header is a scrolling welcome message. The main content contains a container with three images that rotate on a 16 second cycle using CSS animations and delays.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document is a HTML page about communication technology. It contains a header with navigation links, a scrolling welcome message, and a rotating slideshow of three images related to communication. The header includes the title "Tech Insider in the field of Communication" and links to different pages. Below the header is a scrolling welcome message. The main content contains a container with three images that rotate on a 16 second cycle using CSS animations and delays.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    8 views3 pages

    Home

    Uploaded by

    Vivek Ram Prakhash S
    This document is a HTML page about communication technology. It contains a header with navigation links, a scrolling welcome message, and a rotating slideshow of three images related to communication. The header includes the title "Tech Insider in the field of Communication" and links to different pages. Below the header is a scrolling welcome message. The main content contains a container with three images that rotate on a 16 second cycle using CSS animations and delays.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    <!

    DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {box-sizing: border-box;}

    body {
    margin: 0;
    font-family: Comic Sans MS;
    background-image:linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(https://
    ak.picdn.net/shutterstock/videos/33601270/thumb/8.jpg);
    }

    .header {
    overflow: hidden;
    background-color: #f1f1f1;
    padding: 20px 10px;
    }

    .header a {
    float: left;
    color: black;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 18px;
    line-height: 25px;
    border-radius: 4px;
    }

    .header h1{
    font-size: 25px;
    }

    .header a:hover {
    background-color: #ddd;
    color: black;
    }

    .header a.active {
    background-color: dodgerblue;
    color: white;
    }

    .header-right {
    float: right;
    }

    @media screen and (max-width: 500px) {


    .header a {
    float: none;
    display: block;
    text-align: left;
    }

    .header-right {
    float: none;
    }
    }
    .container {
    margin: 50px auto;
    width: 500px;
    height: 300px;
    overflow: hidden;
    border: 10px solid;
    border-top-color: #856036;
    border-left-color: #5d4426;
    border-bottom-color: #856036;
    border-right-color: #5d4426;
    position: relative;
    }
    .photo {
    position: absolute;
    animation: round 16s infinite;
    opacity: 0;
    }
    @keyframes round {
    25% {
    opacity: 1;
    }
    40% {
    opacity: 0;
    }
    }
    -webkit-@keyframes round {
    25% {
    opacity: 1;
    -webkit-opacity: 1;
    }
    40% {
    opacity: 0;
    -webkit-opacity: 0;
    }
    }
    img:nth-child(1) {
    animation-delay: 12s;
    }

    img:nth-child(2) {
    animation-delay: 8s;
    }

    img:nth-child(3) {
    animation-delay: 4s;
    }

    </style>
    </head>
    <body>

    <div class="header">
    <h1>Tech Insider in the field of Communication</h1>
    <div class="header-right">
    <a class="active" href="Home.html">Home</a>
    <a href="Previously...html">Previously..</a>
    <a href="Education.html">Education</a>
    <a href="Influence.html">Influence</a>
    <a href="Business.html">Business</a>
    </div>
    </div>
    <marquee>
    <p style="font-family:Comic Sans MS;font-style:italic;font-
    size:50px;color:white;">Welcome to the WEBSITE!</p></marquee>
    <div class="container">
    <img class='photo'
    src="https://telecoms.adaptit.tech/wp-content/uploads/2021/02/human-to-machine-v1-
    scaled-e1612149056607-2048x1223.jpg" style="width:500px;height:300px;">
    <img class='photo' src="https://thumbs.dreamstime.com/b/two-businessman-talking-
    cup-telephone-computer-via-inter-cartoon-business-idea-concept-47222197.jpg"
    style="width:500px;height:300px;">
    <img class='photo'
    src="https://www.kathreinusa.com/wp-content/uploads/2021/08/Communication-
    Technology.jpg" style="width:500px;height:300px;">
    </div>
    </body>
    </html>

    You might also like