Untitled

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/media.css">

    <title>Future site fucked up</title>
  </head>
  <body>
    <header class = "fuckheader">
        <div class = "container1">
            <div class="row">
                <div class="col-md-3">
                    <div class="fucklogo">
                        <img src="img/ETS.png">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class = "fuckmenue">
                        <button class = "pirozhok"><img src = "img/if_th-menu-outline_216423.png"></button>
                        <ul>
                            <li><a href="#">Portfolio</a></li>
                            <li><a href="#">Services</a></li>
                            <li><a href="#">Contacts</a></li>
                        </ul>
                    </div>
                </div>
            </div>

<script src="libs/jquery-3.3.1.min.js"></script>
     <script src="js/common.js"></script>

/*==========  Desktop First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {


}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    .fuckmenue ul {
        position:absolute;
        display: none;
        width:100%
    }
    .fuckmenue ul li {
        display:block;
    }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {

}


/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .pirozhok {
    display: none;

}
.fuckmenue ul {
    display: inline-block !important;
}
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    .pirozhok {
    display: none;
}
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
.pirozhok {
    display: none;
}
}

$(document).ready(function() {

    $(".pirozhok").click(function() {
        $(this).next().slideToggle();
    });