html

<!DOCTYPE html>
<html>
<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title> NewNews</title>
    <link rel="stylesheet" href="styles.css" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Caveat+Brush" rel="stylesheet">
</head>
<body>

<template id="sign-in-form">
    <form style="margin: auto; background-color: white;" name="signIn">
        <input type="text" name="login" placeholder="Login"> </input>
        <input type="password" name="password" placeholder="Password"> </input>
        <button type="submit" onclick="ui.closeSignInForm();" class="pink btn">Login</button>
    </form>
</template>

<template id="edit-new-form">
    <form style="margin: auto; background-color: white;" name="edit" onsubmit="return false;">
        <textarea type="text" name="title" placeholder="Title"> </textarea>
        <textarea type="text" name="summary" placeholder="Summary"> </textarea>
        <textarea type="text" name="content" placeholder="Content"> </textarea>
        <button type="submit" onclick="ui.closeEditForm();" class="pink btn">Change</button>
    </form>
</template>

<template id="add-new-form">
    <form style="margin: auto; background-color: white;" name="add" onsubmit="return false;">
        <textarea type="text" name="title" placeholder="Title"> </textarea>
        <textarea type="text" name="summary" placeholder="Summary"> </textarea>
        <textarea type="text" name="content" placeholder="Content"> </textarea>
        <button type="submit" onclick="ui.closeAddForm();" class="pink btn">Post</button>
    </form>
</template>

<template id="read-more-form">
    <form style="margin: auto; background-color: white;" name="read" onsubmit="return false;">
        <img src="230840.jpg" width="235" height="200" align="left" hspace="10px">
        <h1 type="text" name="title"> </h1>
        <h3 type="text" name="summary"> </h3>
        <p type="text" name="content"> </p>

    </form>
</template>


<div id="overlay" style="display: none;">

</div>


<header>
    <div class="left-header">
        <h1>NewNews</h1>
    </div>
    <div class="right-header">
        <div id="user">
            <div style="display: flex; flex-direction: column">
            <div style="display: flex">
            <div id="USERNAME"></div>
            <button class="pink btn" onclick="ui.openSignInForm()">Sign in</button>
            <button class="exit"> <img src="logOut.png" width="15" height="18"></button>
            </div></div>
        <div class="add">
            <button class="add-news btn" onclick="ui.openAddForm()">Add news</button>
        </div></div>
    </div>
</header>
<div class="filter">
    <input class="menu" type="date" name="bday" style="display: inline-block;">
    <span class="menu">
				<select>
					<option selected>Select categories</option>
					<option value="art">art</option>
					<option value="sport">sport</option>
					<option value="politics">politics</option>
				</select>
			</span>
    <span class="menu">
				<select id="by-author">
					<option selected>Select author</option>

				</select>
			</span>
    <button class="apply btn"> Apply</button>
</div>
<div class="main-part">
    <button id="show-prev" class="more prev" onclick="functionsService.show('prev');"><img src="right.png" width="35"
                                                                                           height="35"></button>
    <div class="news">
    </div>


    <button id="show-more" class="more" onclick="functionsService.show('next');"><img src="right.png" width="35"
                                                                                      height="35"></button>
</div>
<div style="height: 32px;">
    <div class="footer">
        <div class="newnews"> NewNews</div>
        <div class="information"> Ambrozhevich Tatsiana, 2 course, 8 group</div>
        <div class="email"> tambrojevich@gmail.ru</div>
        <div class="date"> 18.02.2017</div>
    </div>
</div>
<script src="script.js"></script>
<script>
    functionsService.show();
    functionsService.sign();
</script>
</body>
</html>