<!--views/partials/header.php-->
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title><?php echo $appName." - ".$title; ?></title>
        <script src="<?php echo $BASE ?>/public/scripts/jQuery.js"></script>
        <link href="<?php echo $BASE ?>/public/fonts/setup.css" rel="stylesheet" ></link>
        <link href="<?php echo $BASE ?>/public/images/site_logo.png" rel="icon" ></link>
        <link href="<?php echo $BASE ?>/public/styles/global.css" rel="stylesheet"></link>
        <link href="<?php echo $BASE ?>/public/styles/partials/header.css" rel="stylesheet"></link>
    </head>
    <body>
    <div class='site'>
    
    <div class='Header'>
        <div class='wrapper region'>
            <div class='datetime'>
                <div class='date'><?php echo $date ?></div>
                <div class='time' id='kh-clock'></div>
                <script src="<?php echo $BASE ?>/public/scripts/clock.js"></script>
            </div>

            <div class='titles'>
                <div class='title'><a href='<?php echo $BASE ?>/'><?php echo $appName ?></a></div>
                <div class='description'><?php echo $description ?></div>
            </div>

            <form action='<?php echo $BASE ?>/search' method='post'>
                <input type='text' name='q' required />
                <input type='submit' value='ស្វែង​រក' />
            </form>
        </div>
    </div>

 

.Header{
    background: var(--background);
    color: white;
    padding: 10px 0;
    border-top: 10px solid var(--background-dark);
}

.Header .wrapper{
    display: grid;
    grid-template-columns: 25% auto 25%;
    align-items: center;
    text-align: center;
}

.Header .wrapper .date{
    font: 20px/1.5 Oswald, Bayon;
    padding-bottom: 5px;
}

.Header .wrapper .title{
    font: 50px/1.5 StardosStencil, Limonf3;
}

.Header .wrapper .title a{
    color: white;
}

.Header .wrapper .description{
    font: 18px/1.5 HandWriting;
}

.Header .wrapper form{
    display: grid;
    grid-template-columns: 65% 25%;
    text-align: right;
}

.Header .wrapper form input{
    font: var(--body-font);
    padding: 0 10px;
}


@media only screen and (max-width: 800px){
    .Header .wrapper{
        grid-template-columns: 100%;
    }

    .Header .wrapper form{
        grid-template-columns: 75% 25%;
        padding: 10px;
    }
}

 

GitHub: https://github.com/Sokhavuth/multimedia_

Heroku: https://khmerweb-multimedia1.herokuapp.com/