Skip to content

Instantly share code, notes, and snippets.

@svale
Last active February 7, 2018 09:39
Show Gist options
  • Save svale/a03219545d3b292594ccedbf95c1fad9 to your computer and use it in GitHub Desktop.
Save svale/a03219545d3b292594ccedbf95c1fad9 to your computer and use it in GitHub Desktop.
Responsive CSS Grid Layout
license: gpl-3.0
width: 599
border: yes
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--
<meta property="og:title" content="Trender i norsk bistand">
<meta property="og:description" content="Prioriteringer i bistanden på 2000-tallet">
<meta property="og:image" content="http://kartoteket.as/notes/bistand/raw/preview.png">
<meta property="og:url" content="http://kartoteket.as/notes/bistand/raw/index.html">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@Fossesvale">
<link rel="canonical" href="http://kartoteket.as/notes/bistand/raw/index.html">
<link href="https://fonts.googleapis.com/css?family=Vollkorn|Vollkorn+SC" rel="stylesheet">
<link rel="stylesheet" id="pageStyle" href="style-extended.css">
-->
<style type="text/css" media="screen">
html, body {
height: 100%;
}
.container {
display: grid;
width: 100%;
height: 100%;
color: #777;
grid-gap: 1rem;
align-items: strech;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 100px;
grid-template-areas:
"panel-1 panel-1"
"panel-2 panel-3"
"footer footer";
}
@media screen and (min-width: 1200px) {
.container {
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr 100px;
grid-template-areas:
"panel-1 panel-2"
"panel-3 panel-2"
"footer footer";
}
}
@media screen and (max-width: 600px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr 100px;
grid-template-areas:
"panel-1"
"panel-2"
"panel-3"
"footer";
}
}
.item {
position: relative;
overflow: hidden;
/*padding: 2rem;*/
}
.panel-1 {
grid-area: panel-1;
align-self: center;
/*background-color: #58BBC3;*/
}
.panel-2 {
grid-area: panel-2;
/* background-color: #F7CA2E;*/
}
.panel-3 {
grid-area: panel-3;
/* background-color: #FD6C6E;
*/}
.footer {
display: none !important;
color: #fff !important;
grid-area: footer;
}
img {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="item panel-1">
<img src="map.png" alt="Panel 1: map">
</div>
<div class="item panel-2">
<h1>Country By Country Reporting</h1>
<h2>What is being measured?</h2>
<p> KFSI 6 measures whether the companies listed on the stock exchanges or incorporated in a given jurisdiction are required to publish worldwide financial reporting data on a country-bycountry reporting (CBCR) basis, and if the data is accessible to the public. A full credit is awarded when country-by-country reporting1 is required by all companies (which is not yet the case). A 25% credit is awarded if a country requires limited, but periodic worldwide country-by-country reporting for specific economic sectors, namely banking or extractive industries. </p> <p> In principle, any jurisdiction could require all companies incorporated under its laws (including subsidiaries and holding companies) to publish in their accounts financial information on their global activity on a country-by-country basis. In practice, however, no jurisdiction does this today. Appropriate reporting requirements can be implemented either through regulations issued by the stock exchange or by a legal or regulatory provision enacted by the competent regulatory or legislative body. </p> <p> Country-by-country reporting for financial institutions was adopted by EU member states in 20152 . The EU-CBCR rules for banks include annual disclosure of turnover, number of employees, profit or loss before tax, tax on profit or loss, and public subsidies received. On this ground, a quarter of a transparency credit (0.25 credits) has been awarded to all EU member states. </p>
</div>
<div class="item panel-3">
<img src="chart.png" alt="Panel 2: chart">
</div>
<div class="item footer">footer</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment