Improve scripts
24
build.sh
Executable file
@ -0,0 +1,24 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
set -euxo pipefail
|
||||||
|
|
||||||
|
cd "${BASH_SOURCE[0]%/*}"
|
||||||
|
|
||||||
|
rm -rf build
|
||||||
|
mkdir build
|
||||||
|
|
||||||
|
(
|
||||||
|
echo "Building HTML"
|
||||||
|
shopt -s extglob
|
||||||
|
while IFS= read -r -d '' || [[ "${REPLY}" ]]; do
|
||||||
|
cat header.html "${REPLY}" footer.html >"./build/${REPLY}"
|
||||||
|
done < <(find . -maxdepth 1 -type f -name '*.html' -not -name 'header.html' -and -not -name 'footer.html' -print0)
|
||||||
|
)
|
||||||
|
|
||||||
|
cp -vr css/ images/ build/
|
||||||
|
|
||||||
|
# (
|
||||||
|
# echo "Building images"
|
||||||
|
# for i in ./assets/*.*; do
|
||||||
|
# if (($(stat -c %Y "${i}") > $(stat -c %Y "${i}"))); then
|
||||||
|
# fi
|
||||||
|
# )
|
Before Width: | Height: | Size: 327 B After Width: | Height: | Size: 327 B |
Before Width: | Height: | Size: 528 B After Width: | Height: | Size: 528 B |
Before Width: | Height: | Size: 804 B After Width: | Height: | Size: 804 B |
Before Width: | Height: | Size: 624 B After Width: | Height: | Size: 624 B |
238
build/index.html
Normal file
@ -0,0 +1,238 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<title>geocation.com</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="Description" lang="en" content="open source html and css template">
|
||||||
|
<meta name="author" content="mlp design">
|
||||||
|
<meta name="robots" content="index, follow">
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="menu">
|
||||||
|
<nav>
|
||||||
|
<label for="show-menu" class="responsive">☰</label>
|
||||||
|
<input type="checkbox" id="show-menu" role="button">
|
||||||
|
<ul id="topnav">
|
||||||
|
<li><span class="icon"><a href="#" title="Your Logo" class="logo">👽</a></span></li>
|
||||||
|
<li><a href="#">Profile</a></li>
|
||||||
|
<li><a href="#">Gallery</a></li>
|
||||||
|
<li><a href="#">Archive</a></li>
|
||||||
|
<li><a href="#">Links</a></li>
|
||||||
|
<li><a href="#">Help</a></li>
|
||||||
|
<li><span class="icon"><a href="#" class="search">🔍</a></span></li>
|
||||||
|
</ul>
|
||||||
|
<span class="hide"><a href="#" title="Your Logo" class="logo">👽</a></span>
|
||||||
|
<span class="hide"><a href="#" class="search">🔍</a></span>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="container">
|
||||||
|
<div id="pageheader">
|
||||||
|
<div class="col">
|
||||||
|
<h1>Lorem Ipsum</h1>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<ul id="sub">
|
||||||
|
<li><a href="#">some</a></li>
|
||||||
|
<li><a href="#">sub</a></li>
|
||||||
|
<li><a href="#">menu</a></li>
|
||||||
|
<li><a href="#">items</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="section">
|
||||||
|
<div class="pageitem">
|
||||||
|
<h2>Aenean at Ipsum</h2>
|
||||||
|
<p><em>Phasellus quis felis lacinia.</em></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pageitem">
|
||||||
|
<div class="col">
|
||||||
|
<img src="https://placeimg.com/200/200/animals">
|
||||||
|
<br>
|
||||||
|
Education
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<img src="https://placeimg.com/200/200/arch">
|
||||||
|
<br>
|
||||||
|
Outreach
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<img src="https://placeimg.com/200/200/nature">
|
||||||
|
<br>
|
||||||
|
Community Involvement
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pageitem">
|
||||||
|
<p>Phasellus ac leo eget felis egestas vestibulum nec at velit. Vivamus venenatis, nibh ut tempus viverra, tellus augue pulvinar sapien, at iaculis justo nisi non metus. Quisque quis malesuada arcu, sed ultricies nibh. Duis vehicula metus quis arcu rutrum faucibus eget ut ex. Curabitur lacus justo, iaculis congue suscipit quis, posuere at turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec in quam non urna volutpat consequat. Proin mollis ut mauris et venenatis. Vivamus dui nibh, blandit vitae pellentesque sed, finibus sit amet nulla.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="pageitem">
|
||||||
|
<h2>Nulla at Tempus</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pageitem">
|
||||||
|
<p>Morbi bibendum faucibus placerat. Morbi vulputate, nunc nec pretium condimentum, erat nunc tincidunt leo, scelerisque ullamcorper dui dolor porttitor neque. Donec ut faucibus erat, vel efficitur enim. Fusce sit amet ligula eu libero lacinia condimentum sed in turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus pulvinar metus vel neque sagittis, at pharetra tellus tincidunt. Sed semper euismod ipsum, feugiat consequat nisi eleifend et. Duis volutpat gravida efficitur. Nulla iaculis blandit semper. Maecenas eget aliquet libero. Donec sit amet sagittis erat. Sed elementum felis id interdum cursus. Phasellus ac urna feugiat, placerat massa et, vestibulum odio. Aenean eu nisl lobortis, tincidunt ligula rhoncus, convallis mi.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="pageitem">
|
||||||
|
<h2>Get Social</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pageitem">
|
||||||
|
<div class="col">
|
||||||
|
<a href="#">
|
||||||
|
<img src="images/fa.png">
|
||||||
|
<p>Visit</p>
|
||||||
|
We are on Facebook
|
||||||
|
<br>
|
||||||
|
facebook.com/foo-template
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<a href="#">
|
||||||
|
<img src="images/tw.png">
|
||||||
|
<p>Follow</p>
|
||||||
|
We are on Twitter
|
||||||
|
<br>
|
||||||
|
twitter.com/foo-template
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<a href="#">
|
||||||
|
<img src="images/in.png">
|
||||||
|
<p>Like</p>
|
||||||
|
We are on Instagram
|
||||||
|
<br>
|
||||||
|
instagram.com/foo-template
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<a href="#">
|
||||||
|
<img src="images/go.png">
|
||||||
|
<p>+1</p>
|
||||||
|
We are on Google+
|
||||||
|
<br>
|
||||||
|
plus.google.com/foo-template
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<div class="section">
|
||||||
|
<div id="footer">
|
||||||
|
|
||||||
|
<ul id="bottomnav">
|
||||||
|
<li>
|
||||||
|
Aliquam vitae
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Nunc</a></li>
|
||||||
|
<li><a href="#">Imperdiet</a></li>
|
||||||
|
<li><a href="#">Quis</a></li>
|
||||||
|
<li><a href="#">Interdum</a></li>
|
||||||
|
<li><a href="#">Fames</a></li>
|
||||||
|
<li><a href="#">Primis</a></li>
|
||||||
|
<li><a href="#">Maecenas</a></li>
|
||||||
|
<li><a href="#">Mivelit</a></li>
|
||||||
|
<li><a href="#">Volutpat</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Integer venenatis
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Mauris</a></li>
|
||||||
|
<li><a href="#">Exiaculis</a></li>
|
||||||
|
<li><a href="#">Fusce</a></li>
|
||||||
|
<li><a href="#">Ornare</a></li>
|
||||||
|
<li><a href="#">Nectortor</a></li>
|
||||||
|
<li><a href="#">Efficitur</a></li>
|
||||||
|
<li><a href="#">Nunc</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Pharetra
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Mortor</a></li>
|
||||||
|
<li><a href="#">Integer</a></li>
|
||||||
|
<li><a href="#">Namut</a></li>
|
||||||
|
<li><a href="#">Eegestas</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
Quisque magna
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Leo</a></li>
|
||||||
|
<li><a href="#">Venenatis</a></li>
|
||||||
|
<li><a href="#">Nullam</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
In elit vitae
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Luctus</a></li>
|
||||||
|
<li><a href="#">Nunc ac ipsum</a></li>
|
||||||
|
<li><a href="#">Aenean</a></li>
|
||||||
|
<li><a href="#">Condimentum</a></li>
|
||||||
|
<li><a href="#">Donec</a></li>
|
||||||
|
<li><a href="#">Nisinec</a></li>
|
||||||
|
<li><a href="#">Integer</a></li>
|
||||||
|
<li><a href="#">Posuere</a></li>
|
||||||
|
<li><a href="#">Vivamus</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Pellentesque
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Imperdiet</a></li>
|
||||||
|
<li><a href="#">Congue diam</a></li>
|
||||||
|
<li><a href="#">Mauris</a></li>
|
||||||
|
<li><a href="#">Eu magna</a></li>
|
||||||
|
<li><a href="#">Morbi et libero</a></li>
|
||||||
|
<li><a href="#">Nam ut justo</a></li>
|
||||||
|
<li><a href="#">Tortor</a></li>
|
||||||
|
<li><a href="#">Id efficitur</a></li>
|
||||||
|
<li><a href="#">Nunc rutrum</a></li>
|
||||||
|
<li><a href="#">Imperdiet</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Orci varius
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Penatibus</a></li>
|
||||||
|
<li><a href="#">Disparturient</a></li>
|
||||||
|
<li><a href="#">Montes</a></li>
|
||||||
|
<li><a href="#">Nascetur</a></li>
|
||||||
|
<li><a href="#">Ridiculus mus</a></li>
|
||||||
|
<li><a href="#">Vivamus</a></li>
|
||||||
|
<li><a href="#">Ultrices finibus</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
|
<div class="section">
|
||||||
|
<div id="credits">
|
||||||
|
<div class="col"><p>© Copyright 2017 Company Name.</p></div>
|
||||||
|
<div class="col"><p><a href="#">Privacy</a> | <a href="#">Terms of Use</a> | <a href="#">Support</a> | <a href="#">Site Map</a></p></div>
|
||||||
|
<div class="col"><p class="right"><a href="http://mlpdesign.net">HTML & CSS</a> by MLPdesign</p></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
297
build/template.html
Normal file
@ -0,0 +1,297 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<title>geocation.com</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="Description" lang="en" content="open source html and css template">
|
||||||
|
<meta name="author" content="mlp design">
|
||||||
|
<meta name="robots" content="index, follow">
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="menu">
|
||||||
|
<nav>
|
||||||
|
<label for="show-menu" class="responsive">☰</label>
|
||||||
|
<input type="checkbox" id="show-menu" role="button">
|
||||||
|
<ul id="topnav">
|
||||||
|
<li><span class="icon"><a href="#" title="Your Logo" class="logo">👽</a></span></li>
|
||||||
|
<li><a href="#">Profile</a></li>
|
||||||
|
<li><a href="#">Gallery</a></li>
|
||||||
|
<li><a href="#">Archive</a></li>
|
||||||
|
<li><a href="#">Links</a></li>
|
||||||
|
<li><a href="#">Help</a></li>
|
||||||
|
<li><span class="icon"><a href="#" class="search">🔍</a></span></li>
|
||||||
|
</ul>
|
||||||
|
<span class="hide"><a href="#" title="Your Logo" class="logo">👽</a></span>
|
||||||
|
<span class="hide"><a href="#" class="search">🔍</a></span>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="container">
|
||||||
|
<div id="pageheader">
|
||||||
|
<div class="col">
|
||||||
|
<h1>Lorem Ipsum</h1>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<ul id="sub">
|
||||||
|
<li><a href="#">some</a></li>
|
||||||
|
<li><a href="#">sub</a></li>
|
||||||
|
<li><a href="#">menu</a></li>
|
||||||
|
<li><a href="#">items</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<title>geocation.com</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="Description" lang="en" content="open source html and css template">
|
||||||
|
<meta name="author" content="mlp design">
|
||||||
|
<meta name="robots" content="index, follow">
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="menu">
|
||||||
|
<nav>
|
||||||
|
<label for="show-menu" class="responsive">☰</label>
|
||||||
|
<input type="checkbox" id="show-menu" role="button">
|
||||||
|
<ul id="topnav">
|
||||||
|
<li><span class="icon"><a href="#" title="Your Logo" class="logo">👽</a></span></li>
|
||||||
|
<li><a href="#">Profile</a></li>
|
||||||
|
<li><a href="#">Gallery</a></li>
|
||||||
|
<li><a href="#">Archive</a></li>
|
||||||
|
<li><a href="#">Links</a></li>
|
||||||
|
<li><a href="#">Help</a></li>
|
||||||
|
<li><span class="icon"><a href="#" class="search">🔍</a></span></li>
|
||||||
|
</ul>
|
||||||
|
<span class="hide"><a href="#" title="Your Logo" class="logo">👽</a></span>
|
||||||
|
<span class="hide"><a href="#" class="search">🔍</a></span>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="container">
|
||||||
|
<div id="pageheader">
|
||||||
|
<div class="col">
|
||||||
|
<h1>Geocation</h1>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<ul id="sub">
|
||||||
|
<li><a href="#">some</a></li>
|
||||||
|
<li><a href="#">sub</a></li>
|
||||||
|
<li><a href="#">menu</a></li>
|
||||||
|
<li><a href="#">items</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="pageitem">
|
||||||
|
<h2>Aenean at Ipsum</h2>
|
||||||
|
<p><em>Phasellus quis felis lacinia.</em></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pageitem">
|
||||||
|
<div class="col">
|
||||||
|
<img src="https://placeimg.com/200/200/animals"><br>Random Animals by PlaceIMG
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<img src="https://placeimg.com/200/200/arch"><br>Random Architecture by PlaceIMG
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<img src="https://placeimg.com/200/200/nature"><br>Random Nature by PlaceIMG
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pageitem">
|
||||||
|
<p>Phasellus ac leo eget felis egestas vestibulum nec at velit. Vivamus venenatis, nibh ut tempus viverra, tellus augue pulvinar sapien, at iaculis justo nisi non metus. Quisque quis malesuada arcu, sed ultricies nibh. Duis vehicula metus quis arcu rutrum faucibus eget ut ex. Curabitur lacus justo, iaculis congue suscipit quis, posuere at turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec in quam non urna volutpat consequat. Proin mollis ut mauris et venenatis. Vivamus dui nibh, blandit vitae pellentesque sed, finibus sit amet nulla.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="pageitem">
|
||||||
|
<h2>Nulla at Tempus</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pageitem">
|
||||||
|
<p>Morbi bibendum faucibus placerat. Morbi vulputate, nunc nec pretium condimentum, erat nunc tincidunt leo, scelerisque ullamcorper dui dolor porttitor neque. Donec ut faucibus erat, vel efficitur enim. Fusce sit amet ligula eu libero lacinia condimentum sed in turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus pulvinar metus vel neque sagittis, at pharetra tellus tincidunt. Sed semper euismod ipsum, feugiat consequat nisi eleifend et. Duis volutpat gravida efficitur. Nulla iaculis blandit semper. Maecenas eget aliquet libero. Donec sit amet sagittis erat. Sed elementum felis id interdum cursus. Phasellus ac urna feugiat, placerat massa et, vestibulum odio. Aenean eu nisl lobortis, tincidunt ligula rhoncus, convallis mi.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="pageitem">
|
||||||
|
<h2>Get Social</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pageitem">
|
||||||
|
<div class="col">
|
||||||
|
<a href="#">
|
||||||
|
<img src="fa.png">
|
||||||
|
<p>Visit</p>
|
||||||
|
We are on Facebook
|
||||||
|
<br>
|
||||||
|
facebook.com/foo-template
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<a href="#">
|
||||||
|
<img src="tw.png">
|
||||||
|
<p>Follow</p>
|
||||||
|
We are on Twitter
|
||||||
|
<br>
|
||||||
|
twitter.com/foo-template
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<a href="#">
|
||||||
|
<img src="in.png">
|
||||||
|
<p>Like</p>
|
||||||
|
We are on Instagram
|
||||||
|
<br>
|
||||||
|
instagram.com/foo-template
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<a href="#">
|
||||||
|
<img src="go.png">
|
||||||
|
<p>+1</p>
|
||||||
|
We are on Google+
|
||||||
|
<br>
|
||||||
|
plus.google.com/foo-template
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<div class="section">
|
||||||
|
<div id="footer">
|
||||||
|
|
||||||
|
<ul id="bottomnav">
|
||||||
|
<li>
|
||||||
|
Aliquam vitae
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Nunc</a></li>
|
||||||
|
<li><a href="#">Imperdiet</a></li>
|
||||||
|
<li><a href="#">Quis</a></li>
|
||||||
|
<li><a href="#">Interdum</a></li>
|
||||||
|
<li><a href="#">Fames</a></li>
|
||||||
|
<li><a href="#">Primis</a></li>
|
||||||
|
<li><a href="#">Maecenas</a></li>
|
||||||
|
<li><a href="#">Mivelit</a></li>
|
||||||
|
<li><a href="#">Volutpat</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Integer venenatis
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Mauris</a></li>
|
||||||
|
<li><a href="#">Exiaculis</a></li>
|
||||||
|
<li><a href="#">Fusce</a></li>
|
||||||
|
<li><a href="#">Ornare</a></li>
|
||||||
|
<li><a href="#">Nectortor</a></li>
|
||||||
|
<li><a href="#">Efficitur</a></li>
|
||||||
|
<li><a href="#">Nunc</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Pharetra
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Mortor</a></li>
|
||||||
|
<li><a href="#">Integer</a></li>
|
||||||
|
<li><a href="#">Namut</a></li>
|
||||||
|
<li><a href="#">Eegestas</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
Quisque magna
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Leo</a></li>
|
||||||
|
<li><a href="#">Venenatis</a></li>
|
||||||
|
<li><a href="#">Nullam</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
In elit vitae
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Luctus</a></li>
|
||||||
|
<li><a href="#">Nunc ac ipsum</a></li>
|
||||||
|
<li><a href="#">Aenean</a></li>
|
||||||
|
<li><a href="#">Condimentum</a></li>
|
||||||
|
<li><a href="#">Donec</a></li>
|
||||||
|
<li><a href="#">Nisinec</a></li>
|
||||||
|
<li><a href="#">Integer</a></li>
|
||||||
|
<li><a href="#">Posuere</a></li>
|
||||||
|
<li><a href="#">Vivamus</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Pellentesque
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Imperdiet</a></li>
|
||||||
|
<li><a href="#">Congue diam</a></li>
|
||||||
|
<li><a href="#">Mauris</a></li>
|
||||||
|
<li><a href="#">Eu magna</a></li>
|
||||||
|
<li><a href="#">Morbi et libero</a></li>
|
||||||
|
<li><a href="#">Nam ut justo</a></li>
|
||||||
|
<li><a href="#">Tortor</a></li>
|
||||||
|
<li><a href="#">Id efficitur</a></li>
|
||||||
|
<li><a href="#">Nunc rutrum</a></li>
|
||||||
|
<li><a href="#">Imperdiet</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Orci varius
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Penatibus</a></li>
|
||||||
|
<li><a href="#">Disparturient</a></li>
|
||||||
|
<li><a href="#">Montes</a></li>
|
||||||
|
<li><a href="#">Nascetur</a></li>
|
||||||
|
<li><a href="#">Ridiculus mus</a></li>
|
||||||
|
<li><a href="#">Vivamus</a></li>
|
||||||
|
<li><a href="#">Ultrices finibus</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div id="credits">
|
||||||
|
<!--
|
||||||
|
<div class="col">
|
||||||
|
<p>© Copyright 2017 Company Name.</p>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<p><a href="#">Privacy</a> | <a href="#">Terms of Use</a> | <a href="#">Support</a> | <a href="#">Site Map</a></p>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
|
<div class="col">
|
||||||
|
<p class="right"><a href="http://mlpdesign.net">HTML & CSS</a> by MLPdesign</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
<div class="section">
|
||||||
|
<div id="credits">
|
||||||
|
<div class="col"><p>© Copyright 2017 Company Name.</p></div>
|
||||||
|
<div class="col"><p><a href="#">Privacy</a> | <a href="#">Terms of Use</a> | <a href="#">Support</a> | <a href="#">Site Map</a></p></div>
|
||||||
|
<div class="col"><p class="right"><a href="http://mlpdesign.net">HTML & CSS</a> by MLPdesign</p></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
241
css/style.css
Normal file
@ -0,0 +1,241 @@
|
|||||||
|
@import url(http://fonts.googleapis.com/css?family=Abel);
|
||||||
|
|
||||||
|
body { background-color:#fefdfb; color: #555; font-family: 'Abel', sans-serif; font-size: 14px; font-weight:normal;margin: 0; }
|
||||||
|
a:link, a:visited, a:active{ color:inherit; text-decoration: none; }
|
||||||
|
a:hover {color: #FC436B; text-decoration:underline; }
|
||||||
|
img {padding:5px; border-radius: 50%;
|
||||||
|
-webkit-border-radius: 50%;
|
||||||
|
-moz-border-radius: 50%;}
|
||||||
|
|
||||||
|
.icon, .hide {font-size:20px;}
|
||||||
|
.right {text-align:right; }
|
||||||
|
.hide {display: none;}
|
||||||
|
|
||||||
|
#menu {
|
||||||
|
width:100%;
|
||||||
|
min-height:35px;
|
||||||
|
background-color: /*#01dddd #B61B82 #03D7CB*/ green;
|
||||||
|
position:fixed;
|
||||||
|
top:0; left:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu a {
|
||||||
|
background-color:inherit;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu a:hover {
|
||||||
|
background: inherit;
|
||||||
|
color: #ccc;
|
||||||
|
text-decoration:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: table;
|
||||||
|
table-layout: fixed;
|
||||||
|
width: 70%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul#topnav {
|
||||||
|
display: table-row;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
position:relative;
|
||||||
|
bottom:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul#topnav li {
|
||||||
|
list-style-type: none;
|
||||||
|
display: table-cell;
|
||||||
|
text-align:center;
|
||||||
|
vertical-align:middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
ul#topnav li a {
|
||||||
|
display:block;
|
||||||
|
padding:4px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
width:100%;
|
||||||
|
margin-top:48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pageheader {
|
||||||
|
display:table;
|
||||||
|
width:62.5%;
|
||||||
|
margin:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.section {
|
||||||
|
width:62.5%;
|
||||||
|
border-top:1px solid #eee;
|
||||||
|
padding:20px 0;
|
||||||
|
margin:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageitem {
|
||||||
|
display:table;
|
||||||
|
width:100%;
|
||||||
|
margin-bottom:15px;
|
||||||
|
padding-top:15px;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageitem h1 {
|
||||||
|
font-weight:normal;
|
||||||
|
color:#555;
|
||||||
|
margin:0;
|
||||||
|
text-align:left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageitem h2 {
|
||||||
|
font-size:32px;
|
||||||
|
background-color:inherit;
|
||||||
|
color:#444;
|
||||||
|
margin-top:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageitem p em {
|
||||||
|
background-color:inherit;
|
||||||
|
color:#444;
|
||||||
|
font-size:40px;
|
||||||
|
font-style:normal;
|
||||||
|
font-weight:100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageitem p {
|
||||||
|
padding:0 75px;
|
||||||
|
margin:0;
|
||||||
|
font-size:18px;
|
||||||
|
line-height:200%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.col {
|
||||||
|
display: table-cell;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.col ul#sub {
|
||||||
|
float:right;
|
||||||
|
padding:0;
|
||||||
|
margin:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col ul#sub li {
|
||||||
|
display:inline;
|
||||||
|
list-style-type: none;
|
||||||
|
text-align:right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col ul#sub li a {
|
||||||
|
padding:5px;
|
||||||
|
background-color:inherit;
|
||||||
|
color:#777;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col ul#sub li a:hover {
|
||||||
|
color:#FC436B;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer {
|
||||||
|
display:table;
|
||||||
|
width:100%;
|
||||||
|
margin-bottom:15px;
|
||||||
|
padding:15px 0;
|
||||||
|
text-align:left;
|
||||||
|
font-size:13px;
|
||||||
|
color:#999;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer p {
|
||||||
|
text-align:left;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul#bottomnav {
|
||||||
|
display: table-row;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul#bottomnav li {
|
||||||
|
list-style-type: none;
|
||||||
|
display: table-cell;
|
||||||
|
text-align:left;
|
||||||
|
font-weight:bold;
|
||||||
|
vertical-align:top;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul#bottomnav li ul {
|
||||||
|
padding:0;
|
||||||
|
padding-bottom:20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul#bottomnav li li {
|
||||||
|
display: list-item;
|
||||||
|
font-weight:100;
|
||||||
|
}
|
||||||
|
|
||||||
|
#credits {
|
||||||
|
display:table;
|
||||||
|
width:100%;
|
||||||
|
text-align:left;
|
||||||
|
font-size:12px;
|
||||||
|
color:#999;
|
||||||
|
line-height:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#show-menu {display: none;}
|
||||||
|
.responsive { background-color:inherit; color:#fff; text-align:left; font-weight:normal; font-size:1.5em; padding: 0; position:absolute; top:10%; left:5%; display:none; }
|
||||||
|
@media screen and (max-width : 700px){
|
||||||
|
|
||||||
|
/* menu */
|
||||||
|
|
||||||
|
ul#topnav {display:none;}
|
||||||
|
.hide, .responsive { display:block;}
|
||||||
|
.icon { display:none;}
|
||||||
|
.logo { position:absolute; top:10%; right:50%;}
|
||||||
|
.search {position:absolute; top:10%; right:5%; }
|
||||||
|
|
||||||
|
#show-menu:checked ~ ul#topnav {display: block; position: absolute; top:100%; width:100%; margin:0; overflow:visible; }
|
||||||
|
ul#topnav li { display: block; text-align:left; margin:0 0 1px -15%; background-color:#FC436B;}
|
||||||
|
ul#topnav li a { padding-left:20px;}
|
||||||
|
|
||||||
|
.pageitem p{
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col {
|
||||||
|
float:left;
|
||||||
|
margin:auto;
|
||||||
|
width:100%;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col ul#sub {
|
||||||
|
clear:both;
|
||||||
|
float:none;
|
||||||
|
margin:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col ul#sub li {
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul#bottomnav {
|
||||||
|
display: list-item;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul#bottomnav li {
|
||||||
|
display:block;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#credits p{
|
||||||
|
text-align:center;
|
||||||
|
}
|
10
footer.html
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<div class="section">
|
||||||
|
<div id="credits">
|
||||||
|
<div class="col"><p>© Copyright 2017 Company Name.</p></div>
|
||||||
|
<div class="col"><p><a href="#">Privacy</a> | <a href="#">Terms of Use</a> | <a href="#">Support</a> | <a href="#">Site Map</a></p></div>
|
||||||
|
<div class="col"><p class="right"><a href="http://mlpdesign.net">HTML & CSS</a> by MLPdesign</p></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
46
header.html
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<title>geocation.com</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="Description" lang="en" content="open source html and css template">
|
||||||
|
<meta name="author" content="mlp design">
|
||||||
|
<meta name="robots" content="index, follow">
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="menu">
|
||||||
|
<nav>
|
||||||
|
<label for="show-menu" class="responsive">☰</label>
|
||||||
|
<input type="checkbox" id="show-menu" role="button">
|
||||||
|
<ul id="topnav">
|
||||||
|
<li><span class="icon"><a href="#" title="Your Logo" class="logo">👽</a></span></li>
|
||||||
|
<li><a href="#">Profile</a></li>
|
||||||
|
<li><a href="#">Gallery</a></li>
|
||||||
|
<li><a href="#">Archive</a></li>
|
||||||
|
<li><a href="#">Links</a></li>
|
||||||
|
<li><a href="#">Help</a></li>
|
||||||
|
<li><span class="icon"><a href="#" class="search">🔍</a></span></li>
|
||||||
|
</ul>
|
||||||
|
<span class="hide"><a href="#" title="Your Logo" class="logo">👽</a></span>
|
||||||
|
<span class="hide"><a href="#" class="search">🔍</a></span>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="container">
|
||||||
|
<div id="pageheader">
|
||||||
|
<div class="col">
|
||||||
|
<h1>Lorem Ipsum</h1>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<ul id="sub">
|
||||||
|
<li><a href="#">some</a></li>
|
||||||
|
<li><a href="#">sub</a></li>
|
||||||
|
<li><a href="#">menu</a></li>
|
||||||
|
<li><a href="#">items</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
BIN
images/fa.png
Normal file
After Width: | Height: | Size: 327 B |
BIN
images/go.png
Normal file
After Width: | Height: | Size: 528 B |
BIN
images/in.png
Normal file
After Width: | Height: | Size: 804 B |
BIN
images/tw.png
Normal file
After Width: | Height: | Size: 624 B |
78
index.html
@ -1,50 +1,3 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<title>geocation.com</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="Description" lang="en" content="open source html and css template">
|
|
||||||
<meta name="author" content="mlp design">
|
|
||||||
<meta name="robots" content="index, follow">
|
|
||||||
<link rel="stylesheet" href="styles.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="menu">
|
|
||||||
<nav>
|
|
||||||
<label for="show-menu" class="responsive">☰</label>
|
|
||||||
<input type="checkbox" id="show-menu" role="button">
|
|
||||||
<ul id="topnav">
|
|
||||||
<li><span class="icon"><a href="#" title="Your Logo" class="logo">👽</a></span></li>
|
|
||||||
<li><a href="#">Profile</a></li>
|
|
||||||
<li><a href="#">Gallery</a></li>
|
|
||||||
<li><a href="#">Archive</a></li>
|
|
||||||
<li><a href="#">Links</a></li>
|
|
||||||
<li><a href="#">Help</a></li>
|
|
||||||
<li><span class="icon"><a href="#" class="search">🔍</a></span></li>
|
|
||||||
</ul>
|
|
||||||
<span class="hide"><a href="#" title="Your Logo" class="logo">👽</a></span>
|
|
||||||
<span class="hide"><a href="#" class="search">🔍</a></span>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="container">
|
|
||||||
<div id="pageheader">
|
|
||||||
<div class="col">
|
|
||||||
<h1>Lorem Ipsum</h1>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<ul id="sub">
|
|
||||||
<li><a href="#">some</a></li>
|
|
||||||
<li><a href="#">sub</a></li>
|
|
||||||
<li><a href="#">menu</a></li>
|
|
||||||
<li><a href="#">items</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="pageitem">
|
<div class="pageitem">
|
||||||
<h2>Aenean at Ipsum</h2>
|
<h2>Aenean at Ipsum</h2>
|
||||||
@ -53,13 +6,19 @@
|
|||||||
|
|
||||||
<div class="pageitem">
|
<div class="pageitem">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<img src="https://placeimg.com/200/200/animals"><br>Random Animals by PlaceIMG
|
<img src="https://placeimg.com/200/200/animals">
|
||||||
|
<br>
|
||||||
|
Education
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<img src="https://placeimg.com/200/200/arch"><br>Random Architecture by PlaceIMG
|
<img src="https://placeimg.com/200/200/arch">
|
||||||
|
<br>
|
||||||
|
Outreach
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<img src="https://placeimg.com/200/200/nature"><br>Random Nature by PlaceIMG
|
<img src="https://placeimg.com/200/200/nature">
|
||||||
|
<br>
|
||||||
|
Community Involvement
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -86,7 +45,7 @@
|
|||||||
<div class="pageitem">
|
<div class="pageitem">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<img src="fa.png">
|
<img src="images/fa.png">
|
||||||
<p>Visit</p>
|
<p>Visit</p>
|
||||||
We are on Facebook
|
We are on Facebook
|
||||||
<br>
|
<br>
|
||||||
@ -95,7 +54,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<img src="tw.png">
|
<img src="images/tw.png">
|
||||||
<p>Follow</p>
|
<p>Follow</p>
|
||||||
We are on Twitter
|
We are on Twitter
|
||||||
<br>
|
<br>
|
||||||
@ -104,7 +63,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<img src="in.png">
|
<img src="images/in.png">
|
||||||
<p>Like</p>
|
<p>Like</p>
|
||||||
We are on Instagram
|
We are on Instagram
|
||||||
<br>
|
<br>
|
||||||
@ -113,7 +72,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<img src="go.png">
|
<img src="images/go.png">
|
||||||
<p>+1</p>
|
<p>+1</p>
|
||||||
We are on Google+
|
We are on Google+
|
||||||
<br>
|
<br>
|
||||||
@ -221,14 +180,3 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<div class="section">
|
|
||||||
<div id="credits">
|
|
||||||
<div class="col"><p>© Copyright 2017 Company Name.</p></div>
|
|
||||||
<div class="col"><p><a href="#">Privacy</a> | <a href="#">Terms of Use</a> | <a href="#">Support</a> | <a href="#">Site Map</a></p></div>
|
|
||||||
<div class="col"><p class="right"><a href="http://mlpdesign.net">HTML & CSS</a> by MLPdesign</p></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
Before Width: | Height: | Size: 2.3 MiB After Width: | Height: | Size: 2.3 MiB |
Before Width: | Height: | Size: 2.4 MiB After Width: | Height: | Size: 2.4 MiB |
Before Width: | Height: | Size: 2.1 MiB After Width: | Height: | Size: 2.1 MiB |
Before Width: | Height: | Size: 2.2 MiB After Width: | Height: | Size: 2.2 MiB |
Before Width: | Height: | Size: 2.4 MiB After Width: | Height: | Size: 2.4 MiB |
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 1.8 MiB |
Before Width: | Height: | Size: 27 KiB |
Before Width: | Height: | Size: 358 KiB After Width: | Height: | Size: 358 KiB |
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 70 KiB |
Before Width: | Height: | Size: 225 KiB After Width: | Height: | Size: 225 KiB |
Before Width: | Height: | Size: 1.9 MiB After Width: | Height: | Size: 1.9 MiB |
Before Width: | Height: | Size: 561 KiB After Width: | Height: | Size: 561 KiB |
Before Width: | Height: | Size: 588 KiB After Width: | Height: | Size: 588 KiB |
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.6 MiB |
Before Width: | Height: | Size: 714 KiB After Width: | Height: | Size: 714 KiB |
Before Width: | Height: | Size: 582 KiB After Width: | Height: | Size: 582 KiB |
Before Width: | Height: | Size: 427 KiB After Width: | Height: | Size: 427 KiB |