Electronics

In this example below you will see how to do a Electronics with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Raymond7in, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Raymond7in ©

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Electronics</title>
  
  
  
  
  
</head>

<body>

  
<head>
  <!-- Theme Made By Raymond M - Copyright -->
  <!-- Contact raymond7in@gmail.com for code reuse -->
  <title>RayBuy.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Unica+One">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Vollkorn">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
  <style>
.animation-class,
body img + p,
.hop a,
.footer-sticky ul li a,
.navbar .navbar-list li a,#top-fixed a
{
    transition-timing-function: linear; 
    transition-duration: .5s;
}

#test
{
    border: 1px solid white;
  
}

#top-fixed
{
  float:right;
  font-size:1.9rem;
  font-family:'Unica One', helvetica;
  color:#eceff1;
}

#top-fixed a
{
  color:#eceff1;
  text-decoration:none;
}

#top-fixed a:hover
{
  color: #b71c1c;
}

#footer-placeholder
{
    height: 75px;
}


body .col-md-6 img
{
    width: 80%;
    height: auto;
    margin-left: 10%;
    padding: 70px; 

    /*transform: rotate(90deg);*/
    /*border:3px solid rgba($secondary-color,0.5);*/

    background: rgba(0, 0, 0, .03);
}
body img + p
{
    font-family: 'Unica One', helvetica;
    font-size: 1.7rem;

    padding: 15px; 

    text-align: center;
    letter-spacing: 10px;

    color: #eceff1;
    background: rgba(0, 0, 0, .03);
}
body img + p:hover
{
    color: #b71c1c;
}

.footer-sticky
{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 75px;
    margin-top: 20px;
    padding-right: 25px;
    padding-bottom: 25px;
    padding-left: 25px;

    background: rgba(0, 0, 0, .1);
}
.footer-sticky ul
{
    padding-bottom: 20px; 

    list-style: none;
}
.footer-sticky ul li
{
    display: inline-block;
    float: left;

    margin-top: 30px; 
    margin-left: 30px;
}
.footer-sticky ul li a
{
    color: #eceff1;
}
.footer-sticky ul li a:hover
{
    color: #b71c1c;
}
.footer-sticky ul #footer-copyright
{
    font-family: 'Vollkorn', helvetica;
    font-size: 1.6rem; 
    float: right;

    color: #eceff1;
}

.footer-sticky ul #footer-copyright1
{
    font-family: 'Vollkorn', helvetica;
    font-size: 1.6rem; 
    float: left;

    color: #eceff1;
}

.main-text,
.quote-text
{
    font-family:'Vollkorn',helvetica;
    font-size: 1.8rem;

    margin-top: 10px;
    padding-top: 25px; 

    color: #eceff1;
}

.quote-text
{
    font-size: 1.6rem;
    font-style: italic;

    margin-left: 30px;
    padding: 25px;
    padding-bottom: 35px;

    border-left: 3px solid rgba(255, 255, 255, .3); 
    background: rgba(0, 0, 0, .05);
}

.navbar
{
    margin-top: 10px;
    padding: 40px;

    border: none;
    border-right: 3px solid #37474f; 
    background-color: #263238;
}
.navbar i
{
    margin-bottom: 10px;

    color: #eceff1;
}
.navbar .navbar-list
{
    list-style: none;
}
.navbar .navbar-list li
{
    font-family: 'Unica One', helvetica;
    font-size: 2.4rem;

    margin-top: 10px;
    margin-right: 10px;
}
.navbar .navbar-list .hop li a h3
{
    text-decoration: none; 

    color: #cfd8dc;
}
.navbar .navbar-list li a:hover,
.navbar .navbar-list .hop li a h3:active
{
    color: #b71c1c;
}

.block-saying
{
    margin-top: 30%;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;

    color: #eceff1; 
    border: 3px solid #37474f;
}


.block-saying p,.block-saying h3
{
    font-family: 'Vollkorn', helvetica;
    font-size:1.9rem;
  
    text-align: center;
}

.block-saying .fa-quote-right
{
    float: right;
}
.block-saying p
{
    padding: 10px;
}



  body {
      
      line-height: 1.8;
      color: #818181;
  }
  h2 {
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
    
      text-transform: uppercase;
      color: #303030;
      font-weight: 600;
      margin-bottom: 30px;
  }
  h4 {
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
    
      line-height: 1.375em;
      color: #303030;
      font-weight: 400;
      margin-bottom: 30px;
  }  
  .jumbotron {
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
    background: rgba(255, 51, 255, 0.6);
      color: #fff;
      padding: 100px 25px;
     }
  .container-fluid {
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 

  }
  .bg-grey {
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
    background-color: #f6f6f6;
  }
  .logo-small {
    color: #f4511e;
      font-size: 50px;
  }
  .logo {
    color: #f4511e;
      font-size: 200px;
  }
  .thumbnail {
    padding: 0 0 15px 0;
      border: none;
      border-radius: 0;
  }
  .thumbnail img {
      width: 100%;
      height: 100%;
    margin-bottom: 10px;
  }
  .carousel-control.right, .carousel-control.left {
      background-image: none;
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
      color: #f4511e;
  }
  .carousel-indicators li {
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
      border-color: #f4511e;
  }
  .carousel-indicators li.active {
      background-color: #f4511e;
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
  }
  .item h4 {
     font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
      line-height: 1.375em;
      font-weight: 400;
      font-style: italic;
      margin: 70px 0;
  }
  .item span {
   font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
    
  }
  .panel {
      border: 1px solid #f4511e; 
      border-radius:0 !important;
      transition: box-shadow 0.5s;
  font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
    }
  .panel:hover {
      box-shadow: 5px 0px 40px rgba(0,0,0, .2);
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
  }
  .panel-footer .btn:hover {
      border: 1px solid #f4511e;
      background-color: #fff !important;
      color: #f4511e;
  font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
    }
  .panel-heading {
      color: #fff !important;
      background-color: #f4511e !important;
      padding: 25px;
      border-bottom: 1px solid transparent;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
  font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
    }
  .panel-footer {
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem;   
    background-color: white !important;
  }
  .panel-footer h3 {
      font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
  }
  .panel-footer h4 {
      color: #aaa;
      font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
  }
  .panel-footer .btn {
      margin: 15px 0;
      background-color: #f4511e;
      color: #fff;
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
  }
  .navbar {
      margin-bottom: 0;
   background: rgba(153, 0, 153, 0.8);
      z-index: 9999;
      border: 0;
      font-size: 12px !important;
      line-height: 1.42857143 !important;
      letter-spacing: 4px;
      border-radius: 0;
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
  }
  .navbar li a, .navbar .navbar-brand {
      color: #fff !important;
    font-family: 'Vollkorn', helvetica;
    font-size: 1.7rem; 
  }
  .navbar-nav li a:hover, .navbar-nav li.active a {
      color: #f4511e !important;
      background-color: #fff !important;
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
  }
  .navbar-default .navbar-toggle {
      border-color: transparent;
      color: #fff !important;
    font-family: 'Vollkorn', helvetica;
    font-size: 2.0rem; 
  }
  footer .glyphicon {
      margin-bottom: 20px;
      color: #f4511e;
  }
  .slideanim {visibility:hidden;}
  .slide {
      animation-name: slide;
      -webkit-animation-name: slide;
      animation-duration: 1s;
      -webkit-animation-duration: 1s;
      visibility: visible;
  }
  @keyframes slide {
    0% {
      opacity: 0;
      transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  @-webkit-keyframes slide {
    0% {
      opacity: 0;
      -webkit-transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      -webkit-transform: translateY(0%);
    }
  }
  @media screen and (max-width: 768px) {
    .col-sm-4 {
      text-align: center;
      margin: 25px 0;
    }
    .btn-lg {
        width: 100%;
        margin-bottom: 35px;
    }
  }
  @media screen and (max-width: 480px) {
    .logo {
        font-size: 150px;
    }
  }
  </style>
</head>

<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#myPage">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="Electronics">ELECTRONICS</a></li>
        <li><a href="Services">HOME APPLIANCES</a></li>
        <li><a href="Fashion">FASHION</a></li>
        <li><a href="Sports">SPORTS</a></li>
        <li>
          <a href="Outfits">OUTFITS</a></li>
        
      </ul>
    </div>
  </div>
</nav>

<br/><br/><br/><br/><br/><br/>
<!-- Container (About Section) -->
  
<div class="container-fluid">
 <h2 class="text-center">ELECTRONICS</h2> 
  <p><center>Welcome to E-World of RayBuy.com</center></p>
  
<div class="container text-center">    
 
  <div class="row">
    <div class="col-sm-4">
      <img src="C:\Users\Jeshwin Rodriques\Desktop\Home\Images\Samsung-3840x2160-004.jpg" alt="Mountain View" style="width:100%;height:228px;">
      <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-danger"><b>Buy Now</b></button>
      </div>  <div class="input-group-btn">
      <button type="button" class="btn btn-danger"><b>Add to cart</b></button>
      </div>
    </div>
    </div>
    <div class="col-sm-4">
      <img src="C:\Users\Jeshwin Rodriques\Desktop\Home\Images\xiaomi-mi-note.jpg" alt="Mountain View" style="width:100%;height:228px;">
      <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-danger"><b>Buy Now</b></button>
      </div>  <div class="input-group-btn">
      <button type="button" class="btn btn-danger"><b>Add to cart</b></button>
      </div>
    </div>
    </div>
    <div class="col-sm-4">
      <img src="C:\Users\Jeshwin Rodriques\Desktop\Home\Images\iphone-7-images-HD1.jpg" alt="Mountain View" style="width:100%;height:228px;">
      <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-danger"><b>Buy Now</b></button>
      </div>  <div class="input-group-btn">
      <button type="button" class="btn btn-danger"><b>Add to cart</b></button>
      </div>
    </div>
    </div>
</div>
  </div>
<br/>


  <div class="container-fluid">
<div class="container text-center">    
 
  <div class="row">
    <div class="col-sm-4">
      <img src="C:\Users\Jeshwin Rodriques\Desktop\Home\Images\Samsung-3840x2160-004.jpg" alt="Mountain View" style="width:100%;height:228px;">
      <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-danger"><b>Buy Now</b></button>
      </div>  <div class="input-group-btn">
      <button type="button" class="btn btn-danger"><b>Add to cart</b></button>
      </div>
    </div>
    </div>
    <div class="col-sm-4">
      <img src="C:\Users\Jeshwin Rodriques\Desktop\Home\Images\xiaomi-mi-note.jpg" alt="Mountain View" style="width:100%;height:228px;">
      <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-danger"><b>Buy Now</b></button>
      </div>  <div class="input-group-btn">
      <button type="button" class="btn btn-danger"><b>Add to cart</b></button>
      </div>
    </div>
    </div>
    <div class="col-sm-4">
      <img src="C:\Users\Jeshwin Rodriques\Desktop\Home\Images\iphone-7-images-HD1.jpg" alt="Mountain View" style="width:100%;height:228px;">
      <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-danger"><b>Buy Now</b></button>
      </div>  <div class="input-group-btn">
      <button type="button" class="btn btn-danger"><b>Add to cart</b></button>
      </div>
    </div>
    </div>
</div>
</div>
<br/>
 <div class="container-fluid">
  
<div class="container text-center">    
 
  <div class="row">
    <div class="col-sm-4">
      <img src="C:\Users\Jeshwin Rodriques\Desktop\Home\Images\Samsung-3840x2160-004.jpg" alt="Mountain View" style="width:100%;height:228px;">
      <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-danger"><b>Buy Now</b></button>
      </div>  <div class="input-group-btn">
      <button type="button" class="btn btn-danger"><b>Add to cart</b></button>
      </div>
    </div>
    </div>
    <div class="col-sm-4">
      <img src="C:\Users\Jeshwin Rodriques\Desktop\Home\Images\xiaomi-mi-note.jpg" alt="Mountain View" style="width:100%;height:228px;">
      <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-danger"><b>Buy Now</b></button>
      </div>  <div class="input-group-btn">
      <button type="button" class="btn btn-danger"><b>Add to cart</b></button>
      </div>
    </div>
    </div>
    <div class="col-sm-4">
      <img src="C:\Users\Jeshwin Rodriques\Desktop\Home\Images\iphone-7-images-HD1.jpg" alt="Mountain View" style="width:100%;height:228px;">
      <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-danger"><b>Buy Now</b></button>
      </div>  <div class="input-group-btn">
      <button type="button" class="btn btn-danger"><b>Add to cart</b></button>
      </div>
    </div></div>
    </div>
</div>

<br/>
<div class="container-fluid">
<div class="container text-center">    

  <div class="row">
    <div class="col-sm-4">
      <img src="C:\Users\Jeshwin Rodriques\Desktop\Home\Images\iphone_4_iphone_phone_apple_mobile_icon_92315_3840x1200" alt="Mountain View" style="width:100%;height:228px;">
      <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-danger"><b>Buy Now</b></button>
      </div>  <div class="input-group-btn">
      <button type="button" class="btn btn-danger"><b>Add to cart</b></button>
      </div>
    </div>
    </div>
    <div class="col-sm-4">
      <img src="C:\Users\Jeshwin Rodriques\Desktop\Home\Images\iphone_4_iphone_phone_apple_mobile_icon_92315_3840x1200" alt="Mountain View" style="width:100%;height:228px;">
      <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-danger"><b>Buy Now</b></button>
      </div>  <div class="input-group-btn">
      <button type="button" class="btn btn-danger"><b>Add to cart</b></button>
      </div>
    </div>
    </div>
    <div class="col-sm-4">
      <img src="C:\Users\Jeshwin Rodriques\Desktop\Home\Images\iphone_4_iphone_phone_apple_mobile_icon_92315_3840x1200" alt="Mountain View" style="width:100%;height:228px;">
      <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-danger"><b>Buy Now</b></button>
      </div>  <div class="input-group-btn">
      <button type="button" class="btn btn-danger"><b>Add to cart</b></button>
      </div>
    </div>
    </div>
</div></div>
<br/>  <div class="container-fluid">
<div class="container text-center">    

  <div class="row">
    <div class="col-sm-4">
      <img src="C:\Users\Jeshwin Rodriques\Desktop\Home\Images\iphone_4_iphone_phone_apple_mobile_icon_92315_3840x1200" alt="Mountain View" style="width:100%;height:228px;">
      <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-danger"><b>Buy Now</b></button>
      </div>  <div class="input-group-btn">
      <button type="button" class="btn btn-danger"><b>Add to cart</b></button>
      </div>
    </div>
    </div>
    <div class="col-sm-4">
      <img src="C:\Users\Jeshwin Rodriques\Desktop\Home\Images\iphone_4_iphone_phone_apple_mobile_icon_92315_3840x1200" alt="Mountain View" style="width:100%;height:228px;">
      <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-danger"><b>Buy Now</b></button>
      </div>  <div class="input-group-btn">
      <button type="button" class="btn btn-danger"><b>Add to cart</b></button>
      </div>
    </div>
    </div>
    <div class="col-sm-4">
      <img src="C:\Users\Jeshwin Rodriques\Desktop\Home\Images\iphone_4_iphone_phone_apple_mobile_icon_92315_3840x1200" alt="Mountain View" style="width:100%;height:228px;">
      <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-danger"><b>Buy Now</b></button>
      </div>  <div class="input-group-btn">
      <button type="button" class="btn btn-danger"><b>Add to cart</b></button>
      </div>
    </div>
    </div>
</div></div>


<footer class="container-fluid text-center">
  <a href="#myPage" title="To Top">
    <span class="glyphicon glyphicon-chevron-up"></span>
  </a>
 <br> 
  			<p>
          Follow us on<p>
  <p> <i class="fa fa-facebook fa-2x "></i></p>
 <p><i class="fa fa-twitter fa-2x"></i></p>
<p><i class="fa fa-github fa-2x"></i></p>
<h><b>
  &copy; Raymond M    |    raymond7in@gmail.com </b></h>
</footer>

<!-- Contact Raymond M for copyrights -->


</body>
  
  

</body>

</html>

Comments