<?php
?>
<!DOCTYPE html>
<html>
<head>
<title>Новости обо всем</title>
<?php
require_once"blocks/head.php";
?>
</head>
<body>
<style>
body {
background: #52b801 url(img/backgound_2.jpg); /* Цвет фона и путь к файлу */
background-size: 100%;
}
</style>
<?php require_once"blocks/header.php"?>
<div id="wrapper">
<div id="leftCol">
<div id="bigArticle">
<img src="/img/articles/article_1.jpg" alt="Статья 1" title="Статья 1">
<h2>Статья 1</h2>
<p>Один из самых авторитетных тренеров в России продолжает описывать свой путь в американском футболе. Сегодня — о поездках в Штаты, детском футболе, гостеприимстве американцев и записке для родителей.
</p>
<a href="/article.php"><div class="more">Далее</div></a>
</div>
<div class="clear"><br>
</div>
<div class="article">
<img src="/img/articles/article_2.jpg" alt="Статья 1" title="Статья 1">
<h2>Статья 1</h2>
<p>Ну и немного воспоминаний о прошлом сезоне...В июле 2015 годы мы проводили выставочный матч с командой Рэйдерс 52 на фестивале Alfa Future People - теперь же фото с нашего матча украшают главную страницу предстоящего фестиваля.В этом сезоне мы тоже надеемся получить приглашение на мероприятие.
</p>
<a href="/article.php"><div class="more">Далее</div></a>
</div>
<div class="article">
<img src="/img/articles/article_3.jpg" alt="Статья 1" title="Статья 1">
<h2>Статья 1</h2>
<p>«Грустно, когда понимаешь, что в России такого никогда не будет». Как прошел тренировочный лагерь в Екатеринбурге.Участники тренировочного лагеря в Екатеринбурге – о мероприятии, на котором побывали экс-звезда НФЛ Майкл Хэйнс и известный тренер Билли Элмор.
</p>
<a href="/article.php"><div class="more">Далее</div></a>
</div>
</div>
</div>
<?php require_once"blocks/footer.php"?>
</body>
</html>
@charset "utf-8";
* {
margin: 0;
padding: 0;
outline: none;
}
html{height: 100%}
body{
width: 100%;
height: 100%;
background: #939393 ;
font-family: "Segoe UI",Arial,sans-serif;
font-size: 1em;
line-height: 135%;
}
img{
max-width: 100%;
height: auto;
}
a{color: #616161;
text-decoration: none;
-webkit-transition: all.6s ease;
-moz-transition: all.6s ease;
-o-transition: all.6s ease;
-ms-transition: all.6s ease;
transition: all.6s ease;
}
a:hover{
color: #fb6a6a;
}
a,a:hover{
-webkit-transition: all.6s ease;
-moz-transition: all.6s ease;
-o-transition: all.6s ease;
-ms-transition: all.6s ease;
transition: all.6s ease;
}
.clear{
clear: both;
}
/*стили для шапки*/
header{
width: 98%;
float: left;
padding: 1%;
background-color: #ececec;
border-bottom: 2px solid silver;
margin-bottom: 20px;
}
header #logo{
width: 40%;
float: left;
}
header #logo a {
color: #000;
font-size: 2em;
font-family: 'Times New Roman',sans-serif;
}
header #logo span{
color: #2b8f13;
}
header #menuHead{
width: 24%;
float: left;
}
header #menuHead div{
float: left;
padding: 5px;
background-color: #4abf53;
border-radius: 5px;
color: #000;
}
header #menuHead div:hover {
background-color: #a1d681;
color: #4c4646;
}
header #regAuth{
width: 30%;
float: right;
text-align: right;
font-size: 1.3em;
}
header #regAuth a{
color: #000;
}
/*Стили для всего документа*/
#wrapper{
width: 80%;
float: left;
margin-left: 10%;
}
/*Стили для правой колонки*/
#wrapper #rightCol {
width: 20%;
float: left;
}
/*Стили для левой колонки*/
#wrapper #leftCol{
margin-right: 10%;
width: 70%;
float: left;
}
#wrapper #leftCol #bigArticle {
width: 80%;
margin-left: 10%;
background-color: #ececec;
padding: 1%;
border-radius: 10px;
}
#wrapper #leftCol #bigArticle img,#wrapper #leftCol .article img {
width: 100%;
float: left;
margin-bottom:10px;
}
#wrapper #leftCol #bigArticle h2,#wrapper #leftCol .article h2 {
font-weight: normal;
font-size: 1.3em;
color: #000;
font-family: 'Comic Sans MS',sans-serif;
}
#wrapper #leftCol #bigArticle p,#wrapper #leftCol .article p{
width: 90%;
margin-left: 5%;
}
#wrapper #leftCol #bigArticle div.more,#wrapper #leftCol .article div.more{
padding: 5px;
border-radius: 5px;
background-color: #4abf53;
color: #000;
width: 20%;
text-align: center;
}
#wrapper #leftCol #bigArticle div.more:hover,#wrapper #leftCol .article div.more:hover{
background-color: silver;
}
#wrapper #leftCol .article {
width: 40%;
margin-left: 5%;
background-color: #ececec;
padding: 1%;
float: left;
border-radius: 5px;
}
#wrapper #rightCol .banner{
width: 100%;
float: left;
margin-bottom: 20px;
}
/*Стили для Footer*/
footer{
width: 98%;
float: left;
padding: 1%;
background-color: #ececec;
border-top: 2px solid silver;
margin-top: 10px;
}
footer #social {
float: left;
width: 50%;
}
footer #social img{
width:30px;
height: 30px;
float: left;
margin-right: 5px;
}
footer #rights {
float: right;
width: 50%;
text-align: right;
font-size: 1.1em;
}
