Skip to content

Instantly share code, notes, and snippets.

@tungurlakachakcak

tungurlakachakcak/Task-3---News-Articles.markdown

Created June 29, 2014 20:36
Show Gist options
  • Save tungurlakachakcak/99e7bbaa7aeaa8c7b427 to your computer and use it in GitHub Desktop.
Save tungurlakachakcak/99e7bbaa7aeaa8c7b427 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Vallerious.
Raw
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>News</title>
<link rel="stylesheet" href="news.css">
</head>
<body>
<div id="main">
<header>
<h3>News</h3>
</header>
<section>
<article>
<header>
<h5>LEVEL #4 STARTS ON THE 5TH OF JULY</h5>
</header>
<time datetime="18.06.2014">18/06/2014</time>
<p class="author-info">Published by Alexandra Svilarova</p>
<hr />
<div class="image" id="apply"></div>
<p class="author-info info">The deadline has been extended to the 3rd of July</p>
<hr />
<p class="tags"><strong>Tags:</strong>software-university home-page softuni apply deadline application admission july</p>
</article>
<article>
<header>
<h5>SUMMER BREAK + SCHEDULE FOR LEVEL #1</h5>
</header>
<time datetime="13.06.2014">13/06/2014</time>
<p class="author-info">Published by Alexandra Svilarova</p>
<hr />
<div class="image" id="summer"></div>
<p class="author-info info">Summer break 2-10 august</p>
<hr />
<p class="tags"><strong>Tags:</strong>software-university home-page softuni summer vacation exams</p>
</article>
<article>
<header>
<h5>FEEDBACK FROM SOFTUNI CONF MAY 2014</h5>
</header>
<time datetime="13.06.2014">02/06/2014</time>
<p class="author-info">Published by Petya Grozdarska</p>
<hr />
<div class="image" id="conf"></div>
<p class="author-info info">Responses from the questionnarie about usifulness of the first SoftUni Conf</p>
<hr />
<p class="tags"><strong>Tags:</strong>software-university home-page softuni conference feedback</p>
</article>
</section>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">></a></li>
</ul>
</div>
</body>
</html>
<html></html>
Raw
style.css
* {
margin:0px;
padding:0px;
}
body {
font-family: Verdana;
}
div#main {
position: relative;
width:960px;
height: 510px;
background: #E8E8E8;
}
section {
position: absolute;
width:950px;
height: 340px;
top:0;
right: 0;
bottom: 0;
left: 0;
margin:auto;
margin-top:60px;
}
article {
display: inline-block;
width:260px;
height: 320px;
vertical-align: top;
padding:15px 15px 3px 15px;
margin-left: 19px;
background: white;
box-shadow: 10px 10px 5px black;
}
time {
display: block;
font-size:12px;
text-align: right;
}
.author-info, .tags {
display: inline-block;
margin-bottom: 20px;
font-size: 12px;
color:#B0B0B0;
}
div.image {
width:240px;
height: 100px;
margin-top:10px;
}
div#apply {
background-image: url('https://softuni.bg/Files/Publications/2014/06/3-of-july-calendar-icon-Download-Royalty-free-Vector-File-EPS-14332_17222654.jpg');
}
div#summer {
background-image: url('https://softuni.bg/Files/Publications/2014/06/images_154549699.jpg');
}
div#conf {
background-image: url('https://softuni.bg/Files/Publications/2014/06/softuni-conf-news_164223324.jpg');
}
p.info {
display: block;
height:40px;
margin-top:15px;
}
div#main ul {
position: absolute;
bottom: 25px;
left:25px;
}
div#main ul li {
display: inline-block;
margin-right: -5px;
}
div#main ul li a {
position: relative;
display:block;
width:40px;
height: 40px;
text-decoration: none;
text-align: center;
line-height: 40px;
color:white;
background-color: #0099CC;
}
div#main ul li a:hover {
background: #FF9900;
}
header > h3 {
position: absolute;
top:22px;
left: 22px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment