How To Create Television Using HTML & CSS

Create Television using HTML and CSS
Source minningtech.in

Introduction

Today in this post we are going to create amazing Television by using HTML & CSS. This is just for Education Purpose only. And this Television is the great combination of HTML and CSS Language.

After that we also provide the source code to explore it better and also you can modify this codes according to your self.

Is Demo Available

No there is no Demo we create because this is not a tool or any other important script. But this is important for those who want to learn CSS and HTML.

After we provide the whole source code you may try yourself.

Source

The whole source is the mixing of HTML, CSS and Java Script. So you have to copy the code carefully and paste your Code editor.

<style>
body {
  width: 100%;
  margin: 32px auto;
  text-align: center;
}
iframe {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 10px solid;
  border-radius: 32px;
}

.television {
  width: 450px;
  margin: 0 auto;
}

.television__top {
  width: 40%;
  margin: auto;
  position: relative;
}

.television__antenna {
  width: 5px;
  height: 100px;
  background-color: #3b3733;
  margin-bottom: -10px;
}

.television__antenna--left {
  transform: rotate(-30deg);
  float: left;
}

.television__antenna--right {
  transform: rotate(30deg);
  float: right;
}

.television__antenna__base {
  height: 20px;
  background-color: black;
  border-top-left-radius: 48px;
  border-top-right-radius: 48px;
  margin-bottom: 10px;
  clear: both;
  position: relative;
  z-index: 2;
}

.television__center {
   position: relative;
   z-index: 2;
   width: 350px;
   height: 200px;
   background-color: #58b465;
   border: solid 3px black;
   box-shadow: -10px -10px red;
   border-radius: 48px;
   margin: 0 auto;
   padding: 10px 15px;
}

.television__screen {
   width: 270px;
   height: 190px;
   background-color: #eed5b6;
   border-radius: 48px;
   float: left;
}

.television__channels-wrapper {
   width: 70px;
   height: 190px;
   background-color: #efd6b7;
   border-radius: 48px;
   float: right;
}

.television__channels {
   padding: 0;
}

.television__channel {
   list-style-type: none;
   background-color: #7f4b23;
   width: 25px;
   height: 25px;
   border-radius: 50%;
   margin: 5px;
   float: left;
   position: relative;
}

.television__channel a {
   display: block;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: #e6a146;
   width: 12px;
   height: 12px;
   border-radius: 50%;
}

.television__channel a:active {
   box-shadow: inset rgba(255,255,255,0.6) 0 2px 2px,
               inset rgba(0,0,0,0.15) 0 -2px 5px, /* inner shadow */
          rgba(100,100,100,0.6) 0 2px 1px,
               rgba(100,100,100,0.6) 0 2px 1px; /* color border */
}

.television__base {
   width: 60%;
   margin: auto;
}

.television__base:after {
   clear: both;
   content: "";
   display: table;
}

.television__foot {
   width: 20px;
   height: 70px;
  margin-top: -20px;
   background-color: dodgerblue;
   border: solid 3px black;
   border-radius: 48px;
}

.television__foot--left {
   transform: rotate(30deg);
   float: left;
}

.television__foot--right {
   transform: rotate(-30deg);
   float: right;
}


</style>
 <div class="television">
  <div class="television__top">
    <div class="television__antenna television__antenna--left"></div>
    <div class="television__antenna television__antenna--right"></div>
    <div class="television__antenna__base"></div>
  </div><!-- television__top -->
  <div class="television__center">
    <div class="television__screen">
      <iframe src="https://www.youtube.com/embed/sIRjcQXgEO0" frameborder="0" allowfullscreen></iframe>
    </div><!-- television__screen -->
    <div class="television__channels-wrapper">
      <ul class="television__channels">
        <li class="television__channel"><a href="https://www.youtube.com/embed/ZWdWZFJgehg" title="Channel 1"></a></li>
        <li class="television__channel"><a href="https://www.youtube.com/embed/hM_4-Q7LKkw" title="Channel 2"></a></li>
        <li class="television__channel"><a href="https://www.youtube.com/embed/k13o_KA5Drw" title="Channel 3"></a></li>
        <li class="television__channel"><a href="https://www.youtube.com/embed/HrI0X3Pj91E" title="Channel 4"></a></li>
      </ul>
      Tap this button to change channel
    </div><!-- television__channels-wrapper -->
  </div><!-- television__center -->
  <div class="television__base">
    <div class="television__foot television__foot--left"></div>
    <div class="television__foot television__foot--right"></div>
  </div><!-- television__base -->
</div><!-- .television -->

<script>
  var buttons = document.querySelectorAll('.television__channel a');

for(var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function(e) {
    document.querySelector('.television__screen iframe').src = this.href;
    e.preventDefault();
  });
}
</script>

So This is the whole code and after placing the code in your code editor and run you see the beautiful Television appear. And when you click the switch the video will automatically change , it is the same like when you change the television channel in your remote.

Wants to know the Latest information of Blogs Checkout here.

So Today topic is now end. See you another interesting Topic. If you face any doubt or have any question then please drop your comment.
Show comments
Hide comments

5 Comments

Cancel