<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="bigtext.js"></script>
<style>
html,body{
margin:0;
padding: 0;
box-sizing: border-box;
}
html{height: 100%;border-style: solid;
border-color: #58cdcd;
border-width: 1px;}
body{position: relative;
min-height: 100%;
border-style: solid;
border-color: #cd5858;
border-width: 1px;
}
.footer{
position: absolute;
bottom: 0;
width: 100%;
left: 0;
text-align: center;
/*background-color: rgba(180, 215, 255, 0.096);*/
height: 30px;
vertical-align: middle;
color: #383535;
font-family: 'Great Vibes', cursive;
/*color: rgb(233, 181, 38);*/
border-style: solid;
border-color: #cacd58;
border-width: 1px;
}
.footer a{
font-family: 'Great Vibes', cursive;
vertical-align: middle;
color: #383535;
/*color: rgb(233, 181, 38);*/
}
.footer a:hover{
/* color: rgba(6, 31, 100, 0.425);*/
color: rgba(68, 68, 68, 0.781);
/*color: rgba(233, 181, 38, 0.671);*/
}
#page {
margin: 36px auto;
width: 90%;
border-style: solid;
border-color: #58cd58;
border-width: 1px;
padding-bottom: 800px;
}
.blog {
margin: 0 auto 53px;
width: 93,75%; /* 900px / 960px */
border-style: solid;
border-color: #58bbcd;
border-width: 1px;
}
.blog .main {
float: left; width: 62.8888889%; /* 566px / 900px */
}
.blog .other {
float: right; width: 36.7777778%; /* 331px / 900px */
}
.lede {
padding: 0.8em 5.33333333%; /* 48px / 900px */
border-style: solid;
border-color: #080806;
border-width: 1px;
}
.recent-entries {
margin: 0 auto;
width: 69.7885196%; /* 231px / 331px */
border-style: solid;
border-color: #cd5858;
border-width: 1px;
}
.article {
padding: 0 8.48056537%;
/* 48px /
566px */}
.date {
float: left;
margin: 24px 0 0 -17.0886076%; /* 81px / 474px */
width: 14.556962%; /* 69px / 474px */
border-style: solid;
border-color: #e7e725;
border-width: 1px;
}
</style>
</head>
<body>
<div id="page">
<div class="blog section">
<h1 class="lede">Recently in <a href="#">The Bot Blog</a></h1>
<div class="main">
<div class="article">
<div class="date">
<h1>34</h1>
</div>
<a>fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf</a>
</div>
</div><!-- /end .main -->
<div class="other">
<div class="recent-entries">
<a>fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf fgggggggg
ggggggggh ffffffffhgf hfgggggg</a>
</div>
</div><!-- /end .other -->
</div><!-- /end .blog.section -->
<div class="footer"><a>fOOTER</a>
</div>
</div><!-- /end #page -->
</body>
</html>
-
float наверно для сетки забыть надо ..его применять только для обтекания, для построение сетки использовать flexbox или grid– Резидент Казахстана1 июл 2019 в 3:21
-
если нужен текст то есть lorem ipsum– Резидент Казахстана1 июл 2019 в 3:24
-
если хотите что бы подвал фиксировался то достаточно прописать position: sticky и bottom: 0– Резидент Казахстана1 июл 2019 в 3:31
-
codepen.io/topicstarter/pen/GbQwqm реализация фиксируемого подвала– Резидент Казахстана1 июл 2019 в 3:38
Добавить комментарий
|