Skip to content

Instantly share code, notes, and snippets.

@5aurabh
Created November 7, 2015 07:11

Revisions

  1. 5aurabh created this gist Nov 7, 2015.
    22 changes: 22 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>PressPlay TV</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/grid.css">
    <link rel="stylesheet" href="css/main.css">

    </head>
    <body>
    <div class="header white-bg">
    <div class="logo"><img class="logo-image" style="height:35px;width: 150px;"></div>
    </div>
    <div class="wrapper">
    </div>
    <div class="footer white-bg center f0"> Press Play Pvt Limited</div>
    </body>

    </html>
    192 changes: 192 additions & 0 deletions main.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,192 @@
    /*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

    /* load google fonts */
    @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600|Roboto:400,100);
    @import url(http://fonts.googleapis.com/css?family=Archivo+Narrow|Pathway+Gothic+One|Oswald:400,300,700);
    /* font aswesome */
    @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css);
    @import url(http://fonts.googleapis.com/css?family=Roboto:400,700,500,900,300,100,100italic,300italic,400italic,500italic,700italic,900italic);
    @font-face {
    font-family: Antartida;
    src: url("Antartida/Antartida_Light.otf") format("opentype");
    }

    /* ==========================================================================
    Base styles: opinionated defaults
    ========================================================================== */

    html,
    button,
    input,
    select,
    textarea {
    color: #444;
    }

    html {
    font-size: 1em;
    line-height: 1.4;
    font-family: "Open Sans", "Roboto";

    }

    /* assigning body 100% height */
    html,body {
    height: 100%;
    }
    body{
    overflow-x: hidden;
    }
    img{
    width: 100%;
    height: 100%;
    }

    /*
    * Remove text-shadow in selection highlight: h5bp.com/i
    * These selection rule sets have to be separate.
    * Customize the background color to match your design.
    */

    ::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
    }

    ::selection {
    background: #b3d4fc;
    text-shadow: none;
    }

    /*
    * A better looking default horizontal rule
    */

    hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
    }

    /*
    * Remove the gap between images, videos, audio and canvas and the bottom of
    * their containers: h5bp.com/i/440
    */

    audio,
    canvas,
    img,
    video {
    vertical-align: middle;
    }

    /*
    * Remove default fieldset styles.
    */

    fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    }

    /*
    * Allow only vertical resizing of textareas.
    */

    textarea {
    resize: vertical;
    }

    /* ==========================================================================
    Browse Happy prompt
    ========================================================================== */

    .browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
    }

    /* custom styling */
    .wrapper {
    /* height : 100%; */
    }
    .full-height {
    height: 100%;
    }
    .min-full-height {
    min-height: 100%;
    }

    /*colors*/
    .red{
    color: #D14747;
    }
    .red-bg{
    background-color: #D14747;
    }
    .red1{
    color: #Ea5252;
    }
    .red1-bg{
    background-color: #Ea5252;
    }
    .white{
    color:#F1F1F1;
    }
    .white-bg{
    background-color: #F1F1F1;
    }

    /*
    font sizes
    */
    .f1{
    font-size: 1em;
    }
    .f0{
    font-size: 0.9em;
    }
    .header{
    height: 60px;
    }
    .footer{
    height: 40px;
    margin-bottom: -40px;
    line-height: 40px;
    }
    .wrapper{
    min-height: calc(100% - 100px);
    }
    .center{
    text-align: center;
    }
    .logo{
    height: 60px;
    width: 185px;
    line-height: 60px;
    text-align: center;
    }
    .logo-image{
    background: url("../PressPlay_R.png");
    background-size: contain;
    background-repeat: no-repeat;
    height: 35px;
    width: 150px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 150px
    }

    @media only screen and (max-width: 45em){
    .logo-image{
    background: url("../logo_circle.png");
    background-size: contain;
    background-repeat: no-repeat;
    }
    }