Television Portfolio Website | Unique Way of Creating Website

Hello internet people, Today in this blog I will show you how to create a television portfolio website using HTML, CSS, and Javascript. Earlier, you learned to Create a responsive blog website in HTML & CSS.

A portfolio is a collection of all the details of an individual or an organization. A portfolio plays a vital role in the smooth and effective operation of an organization and personal work. As a web developer, your portfolio needs to be awesome, unique and eye-catching so that the clients get impressed before offering you some projects/tasks.

3 Tips to make Portfolio Better

Make the UI completely unique using your own design skill.
Make your design simple & add animations to different objects and parts.
Use the visual storytelling method to show your works and details.

Today I’m here with the new and unique concept of creating a portfolio. I’m going to represent my portfolio as a television. All the details are shown on television. So, without talking furthermore let’s move towards designing.

At first, I created the switch for television. When you turn the switch on then only the television gets started with noise animation and starts showing contents. Then, I created a television structure by using pure CSS. I haven’t used even a single image for the television structure. All the parts and shapes are created by styling divs. As you can observe the antenna, the shape is pointed at the top which is created with the CSS clip-path property. Inset box shadow on the main screen of the television adds more real looks.

On the right side of the television, there are some buttons and social media links. The up and down button helps to scroll the screen up and down respectively and the video button redirects users to the next video page. On the video page, the videos have covered the full screen of the television. You can’t scroll the video down and up. In order to change the video you have to press the up and down keys. Down button for the next video and the up button for the previous video. The video-changing functionality is created with Javascript.

If you’re feeling difficult to understand what I am saying. You can watch a video preview of this program (Television Portfolio Website).

Video preview of Television Portfolio Website

All of this design is based on CSS and some functionality is based on Javascript. If you’re a beginner you can also create this type of portfolio website. If you like this program (Television Portfolio Website) and want to get source code. You can easily get the source code of this program. To get the source codes you just need to scroll down.

Television Portfolio Website [Source Codes]

To create this television portfolio website. First, you need to create five Files two HTML Files, two CSS Files, and one Javascript file. The folder structure is shown below. After creating these files just paste the following code into your file.

Folder Structure

First, create an HTML file with the name index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with a .html extension.

index.html

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <title>Rijan Neupane</title>
</head>

<body>
    <div class="mobo-view">
        <h2>Use Tablet or Desktop...</h2>
    </div>
    <div id="switch">
        <i class="fas fa-power-off" onclick="tvswitch()"></i>
        <h2>Switch On The T.V</h2>
    </div>
    <div class="container">
        <div class="inner-container">
            <div class="antena"></div>
            <div class="tv-head"></div>
            <div class="tv">
                <!-- main content to show in TV Screen starts here -->
                <div class="tv-container">
                    <div class="noise-overlay" id="noise"></div>
                    <div class="hero">
                        <div class="left-hero">
                            <h2>
                                Hi!<br>I'm Rij<span>an</span> Neup<span>ane</span>
                            </h2>
                            <button>Explore</button>
                        </div>
                        <div class="right-hero">
                            <img src="assets/images/hero.png" alt="" class="heroimg">
                        </div>
                    </div>
                    <div class="about">
                        <div class="image">
                            <img src="assets/images/hero.png" alt="">
                        </div>
                        <div class="text">
                            <h3>About</h3><br>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                Rerum magnam earum a aliquam voluptatem maiores unde sed sit voluptatibus
                                ,hic quod rem excepturi? Error, assumenda at neque nesciunt consectetur dolore.
                                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            </p>
                        </div>
                    </div>
                    <div class="contact">
                        <h2>Contact</h2>
                        <a href="mailto:mailme.abc@gmail.com">mailme.abc@gmail.com</a>
                    </div>
                    <div class="footer">
                        <p>Designed By <a href="http://www.facebook.com/itsrijan">Rijan Neupane</a></p>
                    </div>
                </div>
                <!-- main content to show in TV Screen ends here -->

                <!-- tv control buttons -->
                <div class="tv-buttons">
                    <div class="first-two">
                        <i class="fas fa-caret-left" id="left-btn"></i>
                        <i class="fas fa-caret-right" id="right-btn"></i>
                    </div>
                    <div class="second-two">
                        <i class="fas fa-caret-up" id="up-btn"></i>
                        <i class="fas fa-caret-down" id="down-btn"></i>
                    </div>
                    <div class="play-btn">
                        <a href="videos.html"><i class="fas fa-video"></i></a>
                    </div>
                    <div class="social-icons">
                        <div class="facebook">
                            <a href="http://www.facebook.com/itsrijan"><i class="fab fa-facebook-f"></i></a>
                        </div>
                        <div class="instagram">
                            <a href="http://www.instagram.com/rijan.neupane.184"><i class="fab fa-instagram"></i></a>
                        </div>
                        <div class="youtube">
                            <a href="https://www.youtube.com/channel/UCPEgH_EnysecB06Kaq83lag"><i
                                    class="fab fa-youtube"></i></a>
                        </div>
                    </div>
                    <div class="border-bottom"></div>
                </div>
            </div>
            <div class="foot">
                <div class="left-foot"></div>
                <div class="right-foot"></div>
            </div>
        </div>
    </div>
    <script src="app.js"></script>
</body>

</html>

Create another file with the name videos.html and paste the given code into your HTML file. Remember, you’ve to create a file with a .html extension.

videos.html

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="assets/css/videos.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <title>Rijan Neupane-Watch Videos</title>
</head>

<body>
    <div class="mobo-view">
        <h2>Use Tablet or Desktop...</h2>
    </div>
    <div class="container">
        <div class="inner-container">
            <div class="antena"></div>
            <div class="tv-head"></div>
            <div class="tv">
                <!-- main content to show in TV Screen starts here -->
                <div class="tv-container" id="video-container" style="overflow-y: hidden;">
                    <div class="one" id="videos"><iframe width="560" height="315"
                            src="https://www.youtube.com/embed/LunO46ereTM" title="YouTube video player" frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                            allowfullscreen></iframe></div>
                    <div class="two" id="videos"><iframe width="560" height="315"
                            src="https://www.youtube.com/embed/B39qOu5OJCg" title="YouTube video player" frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                            allowfullscreen></iframe></div>
                    <div class="three" id="videos"><iframe width="560" height="315"
                            src="https://www.youtube.com/embed/fzeVBs0vE98" title="YouTube video player" frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                            allowfullscreen></iframe></div>
                </div>
                <!-- main content to show in TV Screen ends here -->

                <!-- tv control buttons -->
                <div class="tv-buttons">
                    <div class="first-two">
                        <i class="fas fa-caret-left" id="left-btn"></i>
                        <i class="fas fa-caret-right" id="right-btn"></i>
                    </div>
                    <div class="second-two">
                        <i class="fas fa-caret-up" id="up-btn"></i>
                        <i class="fas fa-caret-down" id="down-btn"></i>
                    </div>
                    <div class="play-btn">
                        <a href="../../index.html"><i class="fas fa-home"></i></a>
                    </div>
                    <div class="social-icons">
                        <div class="facebook">
                            <a href="http://www.facebook.com/itsrijan"><i class="fab fa-facebook-f"></i></a>
                        </div>
                        <div class="instagram">
                            <a href="http://www.instagram.com/rijan.neupane.184"><i class="fab fa-instagram"></i></a>
                        </div>
                        <div class="youtube">
                            <a href="https://www.youtube.com/channel/UCPEgH_EnysecB06Kaq83lag"><i
                                    class="fab fa-youtube"></i></a>
                        </div>
                    </div>
                    <div class="border-bottom"></div>
                </div>
            </div>
            <div class="foot">
                <div class="left-foot"></div>
                <div class="right-foot"></div>
            </div>
        </div>
    </div>
    <script src="app.js"></script>
</body>

</html>

Now, create CSS files and paste the given code into your files. Remember, you’ve to create files with the .css extension.

style.css

    @import url("https://fonts.googleapis.com/css2?family=Pangolin&display=swap");
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  overflow: hidden;
}

body .mobo-view {
  display: none;
}

#switch {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #181818;
}

#switch i {
  font-size: 90px;
  margin-top: -100px;
  color: #bfe8eb;
  text-shadow: 0px 0px 10px #26e5f7,
               0px 0px 20px #26e5f7, 
               0px 0px 30px #26e5f7, 
               0px 0px 40px #26e5f7, 
               0px 0px #26e5f7;
  margin-top: 80px;
  cursor: pointer;
}

#switch h2 {
  font-family: 'Pangolin', cursive;
  font-size: 50px;
  margin-top: 50px;
  color: #fff;
  color: #bfe8eb;
  text-shadow: 0px 0px 10px #26e5f7,
               0px 0px 20px #26e5f7,
               0px 0px 30px #26e5f7,
               0px 0px 40px #26e5f7,
               0px 0px #26e5f7;
}

.container {
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #333;
  padding-bottom: 50px;
}

.container .inner-container {
  width: 90%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.container .inner-container .antena {
  width: 200px;
  height: 150px;
  background-color: #ffee00;
  -webkit-clip-path: polygon(15% 40%, 15% 40%, 33% 71%, 51% 100%, 74% 62%, 95% 20%, 95% 19%, 51% 89%);
          clip-path: polygon(15% 40%, 15% 40%, 33% 71%, 51% 100%, 74% 62%, 95% 20%, 95% 19%, 51% 89%);
}

.container .inner-container .tv-head {
  width: 200px;
  height: 50px;
  border-radius: 30px;
  background-color: #ffee00;
  margin-top: -30px;
}

.container .inner-container .tv {
  width: 80%;
  height: 70vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #d17906;
  border-radius: 30px;
  margin-top: -20px;
  padding: 0px 0px 0px 20px;
  z-index: 1;
}

.container .inner-container .tv .tv-container {
  width: 80%;
  height: 90%;
  background-color: #fff;
  border-radius: 30px;
  -webkit-box-shadow: 0px -4px 21px 0px rgba(0, 0, 0, 0.75) inset;
          box-shadow: 0px -4px 21px 0px rgba(0, 0, 0, 0.75) inset;
  overflow-y: auto;
  overflow-x: hidden;
}

.container .inner-container .tv .tv-container .noise-overlay {
  width: 100%;
  height: 100%;
  background: url(../images/noise.jpg);
  -webkit-animation: noise .1s linear infinite;
          animation: noise .1s linear infinite;
}

@-webkit-keyframes noise {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

@keyframes noise {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

.container .inner-container .tv .tv-container #videos {
  width: 100%;
  height: 100%;
}

.container .inner-container .tv .tv-container::-webkit-scrollbar {
  display: none;
}

.container .inner-container .tv .tv-container {
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  scrollbar-width: none;
  /* Firefox */
}

.container .inner-container .tv .tv-container .hero {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.container .inner-container .tv .tv-container .left-hero {
  width: 50%;
  padding-left: 8%;
}

.container .inner-container .tv .tv-container .left-hero h2 {
  font-size: 30px;
}

.container .inner-container .tv .tv-container .left-hero h2 span {
  color: rgba(31, 99, 226, 0.912);
}

.container .inner-container .tv .tv-container .left-hero button {
  border: none;
  padding: 8px 20px;
  background-color: rgba(31, 99, 226, 0.611);
  color: #fff;
  font-weight: 600;
  margin-top: 10px;
  border-radius: 5px;
  -webkit-transition: .2s all ease-in-out;
  transition: .2s all ease-in-out;
  cursor: pointer;
}

.container .inner-container .tv .tv-container .left-hero button:hover {
  background-color: rgba(20, 75, 177, 0.611);
}

.container .inner-container .tv .tv-container .right-hero {
  width: 50%;
}

.container .inner-container .tv .tv-container .right-hero img {
  height: 350px;
}

.container .inner-container .tv .tv-container .about {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.container .inner-container .tv .tv-container .about .image {
  width: 50%;
  text-align: right;
  padding-right: 30px;
}

.container .inner-container .tv .tv-container .about .image img {
  height: 300px;
}

.container .inner-container .tv .tv-container .about .text {
  width: 50%;
}

.container .inner-container .tv .tv-container .about .text h3 {
  font-size: 23px;
}

.container .inner-container .tv .tv-container .about .text p {
  width: 95%;
}

.container .inner-container .tv .tv-container .contact {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.container .inner-container .tv .tv-container .contact h2 {
  font-size: 35px;
}

.container .inner-container .tv .tv-container .contact a {
  text-decoration: none;
  font-size: 25px;
  margin-top: 30px;
  color: rgba(31, 99, 226, 0.912);
  -webkit-transition: .2s all ease-in-out;
  transition: .2s all ease-in-out;
}

.container .inner-container .tv .tv-container .contact a:hover {
  color: rgba(20, 71, 167, 0.912);
}

.container .inner-container .tv .tv-container .footer {
  width: 100%;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(31, 99, 226, 0.912);
}

.container .inner-container .tv .tv-container .footer p {
  color: #fff;
  font-size: 20px;
}

.container .inner-container .tv .tv-container .footer p a {
  text-decoration: none;
  color: #e7f212;
  -webkit-transition: .2s all ease-in-out;
  transition: .2s all ease-in-out;
}

.container .inner-container .tv .tv-container .footer p a:hover {
  color: #b6be0d;
}

.container .inner-container .tv .tv-buttons {
  width: 18%;
  height: 90%;
  margin-left: 2%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.container .inner-container .tv .tv-buttons .first-two {
  margin-top: 50px;
  margin-left: 10px;
}

.container .inner-container .tv .tv-buttons .first-two i {
  text-align: center;
  padding: 5px;
  border-radius: 30%;
  background-color: #cacaca;
  color: #000;
  font-size: 30px;
  width: 50px;
}

.container .inner-container .tv .tv-buttons .first-two i:hover {
  background-color: #dadada;
  color: #333;
}

.container .inner-container .tv .tv-buttons .second-two {
  margin-top: 10px;
  margin-left: 10px;
}

.container .inner-container .tv .tv-buttons .second-two i {
  text-align: center;
  padding: 5px;
  border-radius: 30%;
  background-color: #cacaca;
  color: #000;
  font-size: 30px;
  width: 50px;
}

.container .inner-container .tv .tv-buttons .second-two i:hover {
  background-color: #dadada;
  color: #333;
}

.container .inner-container .tv .tv-buttons .play-btn {
  margin-top: 30px;
  margin-left: 30px;
}

.container .inner-container .tv .tv-buttons .play-btn a {
  text-decoration: none;
  text-align: center;
}

.container .inner-container .tv .tv-buttons .play-btn a i {
  font-size: 30px;
  padding: 20px;
  border-radius: 50%;
  background-color: #cacaca;
  color: #000;
  -webkit-transition: .2s all ease-in-out;
  transition: .2s all ease-in-out;
}

.container .inner-container .tv .tv-buttons .play-btn a i:hover {
  background-color: #dadada;
  color: #333;
}

.container .inner-container .tv .tv-buttons .social-icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-top: 20px;
  margin-left: 17px;
}

.container .inner-container .tv .tv-buttons .social-icons a {
  font-size: 18px;
}

.container .inner-container .tv .tv-buttons .social-icons a i {
  margin-left: 5px;
  padding: 8px;
  border-radius: 50%;
  background-color: #cacaca;
}

.container .inner-container .tv .tv-buttons .social-icons .facebook a i {
  color: #3b5998;
  -webkit-transition: .2s all ease-in-out;
  transition: .2s all ease-in-out;
}

.container .inner-container .tv .tv-buttons .social-icons .instagram a i {
  color: #f800db;
  -webkit-transition: .2s all ease-in-out;
  transition: .2s all ease-in-out;
}

.container .inner-container .tv .tv-buttons .social-icons .youtube a i {
  color: #ff0000;
  -webkit-transition: .2s all ease-in-out;
  transition: .2s all ease-in-out;
}

.container .inner-container .tv .tv-buttons .facebook:hover a i {
  background-color: #3b5998;
  color: #fff;
}

.container .inner-container .tv .tv-buttons .instagram:hover a i {
  background-color: #f800db;
  color: #fff;
}

.container .inner-container .tv .tv-buttons .youtube:hover a i {
  background-color: #ff0000;
  color: #fff;
}

.container .inner-container .tv .tv-buttons .border-bottom {
  width: 90%;
  height: 10px;
  margin-top: 30px;
  border-top: 1px solid #dfdddd;
  border-bottom: 1px solid #dfdddd;
}

.container .inner-container .foot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 60%;
}

.container .inner-container .foot .left-foot {
  width: 10px;
  height: 90px;
  margin-top: -20px;
  background-color: yellow;
  -webkit-transform: rotate(20deg);
          transform: rotate(20deg);
}

.container .inner-container .foot .right-foot {
  width: 10px;
  height: 90px;
  margin-top: -20px;
  background-color: yellow;
  margin-left: 95%;
  -webkit-transform: rotate(340deg);
          transform: rotate(340deg);
}

@media (min-width: 900px) and (max-width: 1200px) {
  .container .inner-container .tv .tv-container .hero .left-hero {
    padding-left: 5%;
  }
  .container .inner-container .tv .tv-container .hero .left-hero h2 {
    font-size: 28px;
  }
  .container .inner-container .tv .tv-container .hero .right-hero {
    width: 40%;
  }
  .container .inner-container .tv .tv-container .hero .right-hero img {
    height: 300px;
  }
  .container .inner-container .tv .tv-buttons .first-two {
    margin-top: 50px;
  }
  .container .inner-container .tv .tv-buttons .first-two i {
    width: 40px;
    font-size: 20px;
  }
  .container .inner-container .tv .tv-buttons .second-two i {
    width: 40px;
    font-size: 20px;
  }
  .container .inner-container .tv .tv-buttons .play-btn {
    margin-top: 30px;
  }
  .container .inner-container .tv .tv-buttons .play-btn a i {
    padding: 10px;
    font-size: 20px;
  }
  .container .inner-container .tv .tv-buttons .social-icons {
    margin-top: 30px;
  }
  .container .inner-container .tv .tv-buttons .social-icons a i {
    font-size: 14px;
    padding: 5px;
  }
}

@media (min-width: 600px) and (max-width: 900px) {
  .container .inner-container {
    width: 100%;
  }
  .container .inner-container .antena {
    height: 120px;
  }
  .container .inner-container .tv-head {
    width: 120px;
  }
  .container .inner-container .tv {
    padding: 0px 0px 0px 5px;
  }
  .container .inner-container .tv .tv-container .hero .left-hero {
    padding-left: 5%;
  }
  .container .inner-container .tv .tv-container .hero .left-hero h2 {
    font-size: 21px;
  }
  .container .inner-container .tv .tv-container .hero .left-hero button {
    padding: 5px 10px;
  }
  .container .inner-container .tv .tv-container .hero .right-hero img {
    height: 200px;
    margin-left: 20px;
  }
  .container .inner-container .tv .tv-container .about .image img {
    height: 200px;
  }
  .container .inner-container .tv .tv-buttons .first-two {
    margin-top: 25px;
  }
  .container .inner-container .tv .tv-buttons .first-two i {
    width: 20px;
    font-size: 20px;
  }
  .container .inner-container .tv .tv-buttons .second-two i {
    width: 20px;
    font-size: 20px;
  }
  .container .inner-container .tv .tv-buttons .play-btn {
    margin-top: 10px;
    margin-left: 15px;
  }
  .container .inner-container .tv .tv-buttons .play-btn a i {
    padding: 10px;
    font-size: 16px;
  }
  .container .inner-container .tv .tv-buttons .social-icons {
    margin-top: 30px;
    margin-left: -5px;
  }
  .container .inner-container .tv .tv-buttons .social-icons a i {
    font-size: 14px;
    padding: 5px;
  }
}

@media (min-width: 0px) and (max-width: 600px) {
  #switch {
    display: none;
  }
  .container {
    display: none;
  }
  body .mobo-view {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100vh;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #292929;
  }
  body .mobo-view h2 {
    color: #bfe8eb;
    text-shadow: 0px 0px 10px #26e5f7,
                 0px 0px 20px #26e5f7,
                 0px 0px 30px #26e5f7, 
                 0px 0px 40px #26e5f7, 
                 0px 0px #26e5f7;
  }
}

videos.css

    .container .inner-container .tv #videos {
  margin-bottom: 10px;
}

.container .inner-container .tv #videos iframe {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}

Now, create a Javascript file with the name app.js and paste the given code into your Javascript file. Remember, you’ve to create a file with a .js extension.

app.js

    const hero = document.querySelector(".tv-container");
const dwn_btn = document.getElementById("down-btn");
const up_btn = document.getElementById("up-btn");
const videos = document.querySelector("#video-container");

// T.V Switch On Animation
function tvswitch() {
  setTimeout(function () {
      document.getElementById('switch').style.display = 'none'}, 100);
  setTimeout(function () {
      document.getElementById('noise').style.display = 'none' }, 600);
  return false;
}

// home page scroll down btn 
dwn_btn.addEventListener("click", scrldown);
function scrldown() {
    hero.scrollBy(0, 40);
}
// home page scroll up btn 
up_btn.addEventListener("click", scrlup);
function scrlup() {
    hero.scrollBy(0, -40);
}


// Video next and previous script
dwn_btn.addEventListener("click", nextVdo);
function nextVdo() {
    videos.scrollBy(0, 335);
}

up_btn.addEventListener("click", preVdo);
function preVdo() {
    videos.scrollBy(0, -335);
}

That’s all, now you’ve successfully created your own unique television portfolio website using HTML, CSS & Javascript. If your code does not work or you’ve faced any errors/problems then please comment down your queries. If you feel this article had helped you, please share it with your friends. If you have any suggestions for me please mention them in the comment below.

3 Tips to make Portfolio Better

You Might Also Like

Video preview of Television Portfolio Website

Television Portfolio Website [Source Codes]

Folder Structure

index.html

videos.html

style.css

videos.css

app.js

Thank You 😊

Post a Comment

Post a Comment

About Us

Contact Form