Skip to content
Snippets Groups Projects
Commit 2c7db6cf authored by vand's avatar vand
Browse files

Initial commit

parent 58fa8522
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 1337 additions and 0 deletions
.gitignore 0 → 100644
+ 2
− 0
View file @ 2c7db6cf
**/.DS_Store
about.html 0 → 100644
+ 105
− 0
View file @ 2c7db6cf
<!DOCTYPE html>
<html>
<title>QIM Data Repository</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</style>
<link rel="shortcut icon" href="favicon.ico">
<body class="w3-light-grey w3-content" style="max-width:1600px">
<!-- Sidebar/menu and -->
<!-- Overlay effect when opening sidebar on small screens -->
<script src='sidebar.js'></script>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px">
<!-- Header -->
<script src='header.js'></script>
<!-- START OF INDIVIDUAL PAGE CONTENT -->
<!-- Images -->
<div class="w3-row-padding w3-padding-16">
<div class="w3-container w3-padding-large" style="margin-bottom:32px">
<h4><b>About</b></h4>
<p>The 3D Data repository contains...</p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
<p>Link to <a href="http://qim.dk/">QIM, the Center for quantification of Imaging Data from MAX IV</a>.
<p>Also link to <a href="https://imaging.dtu.dk/">3DIM, the 3D Imaging Center</a> at DTU.
<hr>
<h4><b>Use</b></h4>
<p>When you use the data from the 3D Data repository...</p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
<hr>
<h4><b>People</b></h4>
<p>QIM 3D data repository is a joint effort. Most QIM people also contribute to repository, and a lot of our data comes from 3DIM. Here we list those directly involved in preparing the data and maintaining the page.</p>
<hr>
<div class="w3-row-padding">
<div class="w3-col m2 w3-container w3-margin-bottom">
<img src="about/portrait.png" style="width:100%">
<div class="w3-container w3-white">
<p><b>Vedrana</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum.</p>
</div>
</div>
<div class="w3-col m2 w3-container w3-margin-bottom">
<img src="about/portrait.png" style="width:100%">
<div class="w3-container w3-white">
<p><b>Anders</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum.</p>
</div>
</div>
<div class="w3-col m2 w3-container w3-margin-bottom">
<img src="about/portrait.png" style="width:100%">
<div class="w3-container w3-white">
<p><b>Rasmus</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum.</p>
</div>
</div>
<div class="w3-col m2 w3-container w3-margin-bottom">
<img src="about/portrait.png" style="width:100%">
<div class="w3-container w3-white">
<p><b>Dirk</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum.</p>
</div>
</div>
<div class="w3-col m2 w3-container w3-margin-bottom">
<img src="about/portrait.png" style="width:100%">
<div class="w3-container w3-white">
<p><b>Martin</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum.</p>
</div>
</div>
<div class="w3-col m2 w3-container w3-margin-bottom">
<img src="about/portrait.png" style="width:100%">
<div class="w3-container w3-white">
<p><b>Carsten</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum.</p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<script src='footer.js'></script>
<!-- End page content -->
</div>
</body>
</html>
about/portrait.png 0 → 100644
+ 0
− 0
View file @ 2c7db6cf
about/portrait.png

28.4 KiB

common/logo_name.png 0 → 100644
+ 0
− 0
View file @ 2c7db6cf
common/logo_name.png

40.9 KiB

common/logo_square.png 0 → 100644
+ 0
− 0
View file @ 2c7db6cf
common/logo_square.png

18.4 KiB

example1.html 0 → 100644
+ 98
− 0
View file @ 2c7db6cf
<!DOCTYPE html>
<html>
<title>QIM Data Repository</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</style>
<link rel="shortcut icon" href="favicon.ico">
<body class="w3-light-grey w3-content" style="max-width:1600px">
<!-- Sidebar/menu and -->
<!-- Overlay effect when opening sidebar on small screens -->
<script src='sidebar.js'></script>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px">
<!-- Header -->
<script src='header.js'></script>
<!-- START OF INDIVIDUAL PAGE CONTENT -->
<!-- Images -->
<div class="w3-row-padding w3-padding-16">
<div class="w3-half w3-container w3-margin-bottom">
<img src="examples/placeholder_color.png" style="width:100%">
<div class="w3-container w3-white">
<p>Placeholder color</p>
</div>
</div>
<div class="w3-half w3-container w3-margin-bottom">
<img src="examples/placeholder_gray.png" style="width:100%">
<div class="w3-container w3-white">
<p>Placeholder gray</p>
</div>
</div>
</div>
<div class="w3-container w3-padding-large" style="margin-bottom:32px">
<h4><b>Description</b></h4>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
<hr>
<h4>Versions</h4>
<!-- Details Tables -->
<div class="w3-row-padding" style="margin:0 -16px">
<div class="w3-third w3-margin-bottom">
<ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
<li class="w3-black w3-xlarge w3-padding-32">Full</li>
<li class="w3-padding-16">16-bit tiff</li>
<li class="w3-padding-16">Dimensions: 2048x2048x2048</li>
<li class="w3-padding-16">File size: 4GB</li>
<li class="w3-light-grey w3-padding-24">
<button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
</li>
</ul>
</div>
<div class="w3-third w3-margin-bottom">
<ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
<li class="w3-orange w3-xlarge w3-padding-32">Cropped</li>
<li class="w3-padding-16">8-bit tiff</li>
<li class="w3-padding-16">800x800x800</li>
<li class="w3-padding-16">File size: 1GB</li>
<li class="w3-light-grey w3-padding-24">
<button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
</li>
</ul>
</div>
<div class="w3-third">
<ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
<li class="w3-black w3-xlarge w3-padding-32">Cropped and resized</li>
<li class="w3-padding-16">8-bit tiff</li>
<li class="w3-padding-16">200x200x200</li>
<li class="w3-padding-16">File size: 200MB</li>
<li class="w3-light-grey w3-padding-24">
<button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
</li>
</ul>
</div>
</div>
<!-- End of tables -->
</div>
<!-- Footer -->
<script src='footer.js'></script>
<!-- End page content -->
</div>
</body>
</html>
example2.html 0 → 100644
+ 80
− 0
View file @ 2c7db6cf
<!DOCTYPE html>
<html>
<title>QIM Data Repository</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</style>
<link rel="shortcut icon" href="favicon.ico">
<body class="w3-light-grey w3-content" style="max-width:1600px">
<!-- Sidebar/menu and -->
<!-- Overlay effect when opening sidebar on small screens -->
<script src='sidebar.js'></script>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px">
<!-- Header -->
<script src='header.js'></script>
<!-- START OF INDIVIDUAL PAGE CONTENT -->
<!-- Images -->
<div class="w3-row-padding w3-padding-16">
<div class="w3-quarter w3-container w3-margin-bottom">
<img src="examples/placeholder_color.png" style="width:100%">
<div class="w3-container w3-white">
<p>Placeholder color</p>
</div>
</div>
<div class="w3-quarter w3-container w3-margin-bottom">
<img src="examples/placeholder_gray.png" style="width:100%">
<div class="w3-container w3-white">
<p>Placeholder gray</p>
</div>
</div>
<div class="w3-quarter w3-container w3-margin-bottom">
<img src="examples/placeholder_slice.png" style="width:100%">
<div class="w3-container w3-white">
<p>Placeholder slice</p>
</div>
</div>
<div class="w3-quarter w3-container w3-margin-bottom">
<img src="examples/placeholder_slice.png" style="width:100%">
<div class="w3-container w3-white">
<p>Placeholder slice</p>
</div>
</div>
</div>
<div class="w3-container w3-padding-large" style="margin-bottom:32px">
<h4><b>Description</b></h4>
<p>This is a data of something. Obtained somewhere. Using some settings. </p>
<hr>
<h4><b>Versions</b></h4>
<ul class="w3-ul w3-border">
<li><b>Full.</b> Just as we got it from the scanner.</li>
<li><b>Smaller.</b> Processing (from full): bit depth from 16 to 8-bit, cropping to keep only region of interest.</li>
<li><b>Tiny.</b> Smaller, but downscaled 4 times.</li>
</ul>
<p> </p>
<hr>
</div>
<!-- Footer -->
<script src='footer.js'></script>
<!-- End page content -->
</div>
</body>
</html>
example3.html 0 → 100644
+ 83
− 0
View file @ 2c7db6cf
<!DOCTYPE html>
<html>
<title>QIM Data Repository</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</style>
<link rel="shortcut icon" href="favicon.ico">
<body class="w3-light-grey w3-content" style="max-width:1600px">
<!-- Sidebar/menu and -->
<!-- Overlay effect when opening sidebar on small screens -->
<script src='sidebar.js'></script>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px">
<!-- Header -->
<script src='header.js'></script>
<!-- START OF INDIVIDUAL PAGE CONTENT -->
<!-- Images -->
<div class="w3-row-padding w3-padding-16">
<div class="w3-col m2 w3-container w3-margin-bottom">
<img src="examples/placeholder_color.png" style="width:100%">
<div class="w3-container w3-white">
<p>Placeholder color</p>
</div>
</div>
<div class="w3-col m2 w3-container w3-margin-bottom">
<img src="examples/placeholder_gray.png" style="width:100%">
<div class="w3-container w3-white">
<p>Placeholder gray</p>
</div>
</div>
<div class="w3-col m2 w3-container w3-margin-bottom">
<img src="examples/placeholder_slice.png" style="width:100%">
<div class="w3-container w3-white">
<p>Placeholder slice</p>
</div>
</div>
<div class="w3-col m2 w3-container w3-margin-bottom">
<img src="examples/placeholder_gray.png" style="width:100%">
<div class="w3-container w3-white">
<p>Placeholder gray</p>
</div>
</div>
<div class="w3-col m2 w3-container w3-margin-bottom">
<img src="examples/placeholder_slice.png" style="width:100%">
<div class="w3-container w3-white">
<p>Placeholder slice</p>
</div>
</div>
<div class="w3-col m2 w3-container w3-margin-bottom">
<img src="examples/placeholder_gray.png" style="width:100%">
<div class="w3-container w3-white">
<p>Placeholder gray</p>
</div>
</div>
</div>
<div class="w3-container w3-padding-large" style="margin-bottom:32px">
<h4><b>Description</b></h4>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
<hr>
</div>
<!-- Footer -->
<script src='footer.js'></script>
<!-- End page content -->
</div>
</body>
</html>
examples/placeholder_color.png 0 → 100644
+ 0
− 0
View file @ 2c7db6cf
examples/placeholder_color.png

1.13 MiB

examples/placeholder_gray.png 0 → 100644
+ 0
− 0
View file @ 2c7db6cf
examples/placeholder_gray.png

1.01 MiB

examples/placeholder_slice.png 0 → 100644
+ 0
− 0
View file @ 2c7db6cf
examples/placeholder_slice.png

346 KiB

favicon.ico 0 → 100644
+ 0
− 0
View file @ 2c7db6cf
favicon.ico

66.1 KiB

footer.js 0 → 100644
+ 35
− 0
View file @ 2c7db6cf
document.write('\
<footer class="w3-container w3-padding-32 w3-dark-grey">\
<div class="w3-row-padding">\
\
<div class="w3-third">\
<h3>3D DATA REPOSITORY</h3>\
<p>QIM, October 2020.<br>\
Powered by <a href="https://www.w3schools.com/w3css/default.asp">w3.css</a>.</p>\
</div>\
\
<div class="w3-third">\
<h3>GET INVOLVED</h3>\
<p>Contribute with data, tool or result.\
Stay updated.<br>\
Send us a mail at <a href="mailto:info@qim.dk">info@qim.dk</a>.</p>\
</div>\
\
<div class="w3-third">\
<h3>LINKS</h3>\
<p>\
<span class="w3-tag w3-grey w3-small w3-margin-bottom">\
<a style="text-decoration: none;" href="http://qim.dk/sciencecases/" target="_blank">QIM science</a></span>\
<span class="w3-tag w3-grey w3-small w3-margin-bottom">\
<a style="text-decoration: none;" href="http://qim.dk/software-tools/" target="_blank">QIM tools</a></span>\
<span class="w3-tag w3-grey w3-small w3-margin-bottom">\
<a style="text-decoration: none;" href="https://imaging.dtu.dk/" target="_blank">3DIM@DTU</a></span>\
<span class="w3-tag w3-grey w3-small w3-margin-bottom">\
<a style="text-decoration: none;" href="https://www.maxiv.lu.se/" target="_blank">MAX IV</a>\
</span>\
</p>\
</div>\
\
</div>\
</footer>\
');
header.js 0 → 100644
+ 9
− 0
View file @ 2c7db6cf
document.write('\
<header>\
<a href="http://qim.dk/"><img src="common/logo_square.png" style="width:65px;" class="w3-circle w3-right w3-margin w3-hide-large w3-hover-opacity"></a>\
<span class="w3-button w3-hide-large w3-xxlarge w3-hover-text-grey" onclick="w3_open()"><i class="fa fa-bars"></i></span>\
<div class="w3-container w3-bottombar w3-padding-16">\
<h1><b>3D DATA REPOSITORY</b></h1>\
</div>\
</header>\
');
index.html 0 → 100644
+ 91
− 0
View file @ 2c7db6cf
<!DOCTYPE html>
<html>
<title>QIM Data Repository</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</style>
<link rel="shortcut icon" href="favicon.ico">
<body class="w3-light-grey w3-content" style="max-width:1600px">
<!-- Sidebar/menu and -->
<!-- Overlay effect when opening sidebar on small screens -->
<script src='sidebar.js'></script>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px">
<!-- Header -->
<script src='header.js'></script>
<!-- START OF INDIVIDUAL PAGE CONTENT -->
<!-- First Photo Grid-->
<div class="w3-row-padding w3-padding-16">
<div class="w3-third w3-container w3-margin-bottom">
<a href="example1.html">
<img src="examples/placeholder_color.png" style="width:100%" class="w3-hover-opacity">
</a>
<div class="w3-container w3-white">
<p><b>Example</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<a href="example2.html">
<img src="examples/placeholder_color.png" style="width:100%" class="w3-hover-opacity">
</a>
<div class="w3-container w3-white">
<p><b>Example 2</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<a href="example3.html">
<img src="examples/placeholder_gray.png" style="width:100%" class="w3-hover-opacity">
</a>
<div class="w3-container w3-white">
<p><b>Example 3</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
</div>
<!-- Second Photo Grid-->
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
<img src="examples/placeholder_gray.png" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<img src="examples/placeholder_color.png" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<img src="examples/placeholder_color.png" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
</div>
<!-- Footer -->
<script src='footer.js'></script>
<!-- End page content -->
</div>
</body>
</html>
qim_repository_template.html 0 → 100644
+ 211
− 0
View file @ 2c7db6cf
<!DOCTYPE html>
<html>
<title>QIM Data Repository</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</style>
<link rel="shortcut icon" href="favicon.ico">
<body class="w3-light-grey w3-content" style="max-width:1600px">
<!-- Sidebar/menu and -->
<!-- Overlay effect when opening sidebar on small screens -->
<script src='sidebar.js'></script>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px">
<!-- Header -->
<script src='header.js'></script>
<!-- START OF INDIVIDUAL PAGE CONTENT -->
<!-- First Photo Grid-->
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
<img src="https://www.w3schools.com/w3images/mountains.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<img src="https://www.w3schools.com/w3images/lights.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<div class="w3-third w3-container">
<img src="https://www.w3schools.com/w3images/nature.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
</div>
<!-- Second Photo Grid-->
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
<img src="https://www.w3schools.com/w3images/p1.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<img src="https://www.w3schools.com/w3images/p2.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<div class="w3-third w3-container">
<img src="https://www.w3schools.com/w3images/p3.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
</div>
<!-- Pagination -->
<div class="w3-center w3-padding-32">
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button w3-hover-black">«</a>
<a href="#" class="w3-bar-item w3-black w3-button">1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-black">2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-black">3</a>
<a href="#" class="w3-bar-item w3-button w3-hover-black">4</a>
<a href="#" class="w3-bar-item w3-button w3-hover-black">»</a>
</div>
</div>
<!-- Images -->
<div class="w3-row-padding w3-padding-16">
<div class="w3-col m6">
<img src="https://www.w3schools.com/w3images/nature.jpg" alt="Me" style="width:100%">
</div>
<div class="w3-col m6">
<img src="https://www.w3schools.com/w3images/lights.jpg" alt="Me" style="width:100%">
</div>
</div>
<div class="w3-container w3-padding-large" style="margin-bottom:32px">
<h4><b>About</b></h4>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
<hr>
<h4>Applications</h4>
<!-- Progress bars / Skills -->
<p>Materials</p>
<div class="w3-grey">
<div class="w3-container w3-dark-grey w3-padding w3-center" style="width:95%">95%</div>
</div>
<p>Energy</p>
<div class="w3-grey">
<div class="w3-container w3-dark-grey w3-padding w3-center" style="width:85%">85%</div>
</div>
<p>Life</p>
<div class="w3-grey">
<div class="w3-container w3-dark-grey w3-padding w3-center" style="width:80%">80%</div>
</div>
<p>
<button class="w3-button w3-dark-grey w3-padding-large w3-margin-top w3-margin-bottom">
<i class="fa fa-download w3-margin-right"></i>Download
</button>
</p>
<hr>
<h4>Some details</h4>
<!-- Details Tables -->
<div class="w3-row-padding" style="margin:0 -16px">
<div class="w3-third w3-margin-bottom">
<ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
<li class="w3-black w3-xlarge w3-padding-32">Full</li>
<li class="w3-padding-16">Type</li>
<li class="w3-padding-16">Size</li>
<li class="w3-padding-16">1GB Storage</li>
<li class="w3-light-grey w3-padding-24">
<button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
</li>
</ul>
</div>
<div class="w3-third w3-margin-bottom">
<ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
<li class="w3-orange w3-xlarge w3-padding-32">Medium</li>
<li class="w3-padding-16">Type</li>
<li class="w3-padding-16">Size</li>
<li class="w3-padding-16">50GB Storage</li>
<li class="w3-light-grey w3-padding-24">
<button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
</li>
</ul>
</div>
<div class="w3-third">
<ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
<li class="w3-black w3-xlarge w3-padding-32">Segmentation</li>
<li class="w3-padding-16">Type</li>
<li class="w3-padding-16">Size</li>
<li class="w3-padding-16">Unlimited Storage</li>
<li class="w3-light-grey w3-padding-24">
<button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
</li>
</ul>
</div>
</div>
<!-- End of tables -->
</div>
<!-- Contact Section -->
<div class="w3-container w3-padding-large w3-grey">
<h4><b>Contact us</b></h4>
<div class="w3-row-padding w3-center w3-padding-24" style="margin:0 -16px">
<div class="w3-third w3-dark-grey">
<p><i class="fa fa-envelope w3-xxlarge w3-text-light-grey"></i></p>
<p>info@qim.dk</p>
</div>
<div class="w3-third w3-orange">
<p><i class="fa fa-map-marker w3-xxlarge w3-text-light-grey"></i></p>
<p>Lyngby, DK</p>
</div>
<div class="w3-third w3-dark-grey">
<p><i class="fa fa-phone w3-xxlarge w3-text-light-grey"></i></p>
<p>4545252525</p>
</div>
</div>
<hr class="w3-opacity">
<form action="/action_page.php" target="_blank">
<div class="w3-section">
<label>Name</label>
<input class="w3-input w3-border" type="text" name="Name" required>
</div>
<div class="w3-section">
<label>Email</label>
<input class="w3-input w3-border" type="text" name="Email" required>
</div>
<div class="w3-section">
<label>Message</label>
<input class="w3-input w3-border" type="text" name="Message" required>
</div>
<button type="submit" class="w3-button w3-black w3-margin-bottom"><i class="fa fa-paper-plane w3-margin-right"></i>Send Message</button>
</form>
</div>
<!-- Footer -->
<script src='footer.js'></script>
<!-- End page content -->
</div>
</body>
</html>
qim_repository_template_all.html 0 → 100644
+ 281
− 0
View file @ 2c7db6cf
<!DOCTYPE html>
<html>
<title>QIM Data Repository</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
footer a {
text-decoration: none;
}
</style>
<body class="w3-light-grey w3-content" style="max-width:1600px">
<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar"><br>
<div class="w3-container">
<a href="#" onclick="w3_close()" class="w3-hide-large w3-right w3-jumbo w3-padding w3-hover-grey" title="close menu">
<i class="fa fa-remove"></i>
</a>
<a href="http://qim.dk/">
<img src="common/logo_name.png" style="width:90%;" class="w3-round"></a>
<br><br>
</div>
<div class="w3-bar-block w3-text-grey">
<a href="about" onclick="w3_close()" class="w3-bar-item w3-button w3-padding" class="w3-text-grey"><i class="fa fa-bullseye fa-fw w3-margin-right"></i>ABOUT</a>
</div>
</nav>
<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px">
<!-- Header -->
<header id="myRepository">
<a href="http://qim.dk/"><img src="common/logo_square.png" style="width:65px;" class="w3-circle w3-right w3-margin w3-hide-large w3-hover-opacity"></a>
<span class="w3-button w3-hide-large w3-xxlarge w3-hover-text-grey" onclick="w3_open()"><i class="fa fa-bars"></i></span>
<div class="w3-container w3-bottombar w3-padding-16">
<h1><b>DATA REPOSITORY</b></h1>
</div>
</header>
<!-- END OF COMMON -->
<!-- First Photo Grid-->
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
<img src="https://www.w3schools.com/w3images/mountains.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<img src="https://www.w3schools.com/w3images/lights.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<div class="w3-third w3-container">
<img src="https://www.w3schools.com/w3images/nature.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
</div>
<!-- Second Photo Grid-->
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
<img src="https://www.w3schools.com/w3images/p1.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<img src="https://www.w3schools.com/w3images/p2.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<div class="w3-third w3-container">
<img src="https://www.w3schools.com/w3images/p3.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
</div>
<!-- Pagination -->
<div class="w3-center w3-padding-32">
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button w3-hover-black">«</a>
<a href="#" class="w3-bar-item w3-black w3-button">1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-black">2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-black">3</a>
<a href="#" class="w3-bar-item w3-button w3-hover-black">4</a>
<a href="#" class="w3-bar-item w3-button w3-hover-black">»</a>
</div>
</div>
<!-- Images -->
<div class="w3-row-padding w3-padding-16" id="about">
<div class="w3-col m6">
<img src="https://www.w3schools.com/w3images/nature.jpg" alt="Me" style="width:100%">
</div>
<div class="w3-col m6">
<img src="https://www.w3schools.com/w3images/lights.jpg" alt="Me" style="width:100%">
</div>
</div>
<div class="w3-container w3-padding-large" style="margin-bottom:32px">
<h4><b>About</b></h4>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
<hr>
<h4>Applications</h4>
<!-- Progress bars / Skills -->
<p>Materials</p>
<div class="w3-grey">
<div class="w3-container w3-dark-grey w3-padding w3-center" style="width:95%">95%</div>
</div>
<p>Energy</p>
<div class="w3-grey">
<div class="w3-container w3-dark-grey w3-padding w3-center" style="width:85%">85%</div>
</div>
<p>Life</p>
<div class="w3-grey">
<div class="w3-container w3-dark-grey w3-padding w3-center" style="width:80%">80%</div>
</div>
<p>
<button class="w3-button w3-dark-grey w3-padding-large w3-margin-top w3-margin-bottom">
<i class="fa fa-download w3-margin-right"></i>Download
</button>
</p>
<hr>
<h4>Some details</h4>
<!-- Details Tables -->
<div class="w3-row-padding" style="margin:0 -16px">
<div class="w3-third w3-margin-bottom">
<ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
<li class="w3-black w3-xlarge w3-padding-32">Full</li>
<li class="w3-padding-16">Type</li>
<li class="w3-padding-16">Size</li>
<li class="w3-padding-16">1GB Storage</li>
<li class="w3-light-grey w3-padding-24">
<button class="w3-button w3-teal w3-padding-large w3-hover-black">Download
</li>
</ul>
</div>
<div class="w3-third w3-margin-bottom">
<ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
<li class="w3-teal w3-xlarge w3-padding-32">Medium</li>
<li class="w3-padding-16">Type</li>
<li class="w3-padding-16">Size</li>
<li class="w3-padding-16">50GB Storage</li>
<li class="w3-light-grey w3-padding-24">
<button class="w3-button w3-teal w3-padding-large w3-hover-black">Download
</li>
</ul>
</div>
<div class="w3-third">
<ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
<li class="w3-black w3-xlarge w3-padding-32">Segmentation</li>
<li class="w3-padding-16">Type</li>
<li class="w3-padding-16">Size</li>
<li class="w3-padding-16">Unlimited Storage</li>
<li class="w3-light-grey w3-padding-24">
<button class="w3-button w3-teal w3-padding-large w3-hover-black">Download
</li>
</ul>
</div>
</div>
<!-- End of tables -->
</div>
<!-- Contact Section -->
<div class="w3-container w3-padding-large w3-grey">
<h4 id="contact"><b>Contact us</b></h4>
<div class="w3-row-padding w3-center w3-padding-24" style="margin:0 -16px">
<div class="w3-third w3-dark-grey">
<p><i class="fa fa-envelope w3-xxlarge w3-text-light-grey"></i></p>
<p>qim_center@dtu.dk</p>
</div>
<div class="w3-third w3-teal">
<p><i class="fa fa-map-marker w3-xxlarge w3-text-light-grey"></i></p>
<p>Lyngby, DK</p>
</div>
<div class="w3-third w3-dark-grey">
<p><i class="fa fa-phone w3-xxlarge w3-text-light-grey"></i></p>
<p>4545252525</p>
</div>
</div>
<hr class="w3-opacity">
<form action="/action_page.php" target="_blank">
<div class="w3-section">
<label>Name</label>
<input class="w3-input w3-border" type="text" name="Name" required>
</div>
<div class="w3-section">
<label>Email</label>
<input class="w3-input w3-border" type="text" name="Email" required>
</div>
<div class="w3-section">
<label>Message</label>
<input class="w3-input w3-border" type="text" name="Message" required>
</div>
<button type="submit" class="w3-button w3-black w3-margin-bottom"><i class="fa fa-paper-plane w3-margin-right"></i>Send Message</button>
</form>
</div>
<!-- START OF COMMON -->
<!-- Footer -->
<footer class="w3-container w3-padding-32 w3-dark-grey">
<div class="w3-row-padding">
<div class="w3-third">
<h3>3D DATA REPOSITORY</h3>
<p>QIM, October 2020.<br>
Powered by <a href="https://www.w3schools.com/w3css/default.asp">w3.css</a>.</p>
</div>
<div class="w3-third">
<h3>GET INVOLVED</h3>
<p>Contribute with data, tool or result.
Stay updated.<br>
Send us a mail at <a href="mailto:info@qim.dk">info@qim.dk</a>.</p>
</div>
<div class="w3-third">
<h3>LINKS</h3>
<p>
<span class="w3-tag w3-grey w3-small w3-margin-bottom"><a href="http://qim.dk/sciencecases/" target="_blank">QIM science</a></span>
<span class="w3-tag w3-grey w3-small w3-margin-bottom">
<a href="http://qim.dk/software-tools/" target="_blank">QIM tools</a></span>
<span class="w3-tag w3-grey w3-small w3-margin-bottom">
<a href="https://imaging.dtu.dk/" target="_blank">3DIM@DTU</a></span>
<span class="w3-tag w3-grey w3-small w3-margin-bottom">
<a href="https://www.maxiv.lu.se/" target="_blank">MAX IV</a>
</span>
</p>
</div>
</div>
</footer>
<!-- End page content -->
</div>
<script>
// Script to open and close sidebar
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
</script>
</body>
</html>
sidebar.js 0 → 100644
+ 34
− 0
View file @ 2c7db6cf
document.write('\
<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar"><br>\
<div class="w3-container">\
<a href="#" onclick="w3_close()" class="w3-hide-large w3-right w3-jumbo w3-padding w3-hover-grey" title="close menu">\
<i class="fa fa-remove"></i>\
</a>\
<a href="http://qim.dk/">\
<img src="common/logo_name.png" style="width:90%;" class="w3-round"></a>\
<br><br>\
</div>\
\
<div class="w3-bar-block w3-text-grey">\
<a href="index.html" onclick="w3_close()" class="w3-bar-item w3-button w3-padding" class="w3-text-grey"><i class="fa fa-home fa-fw w3-margin-right"></i>HOME</a>\
</div>\
<div class="w3-bar-block w3-text-grey">\
<a href="about.html" onclick="w3_close()" class="w3-bar-item w3-button w3-padding" class="w3-text-grey"><i class="fa fa-info fa-fw w3-margin-right"></i>ABOUT</a>\
</div>\
<!--div class="w3-bar-block w3-text-grey">\
<a href="about.html" onclick="w3_close()" class="w3-bar-item w3-button w3-padding" class="w3-text-grey"><i class="fa fa-exclamation fa-fw w3-margin-right"></i>USE</a>\
</div-->\
</nav>\
<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>\
');
// Script to open and close sidebar
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
w3_nature_portfolio_template.html 0 → 100644
+ 308
− 0
View file @ 2c7db6cf
<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</style>
<body class="w3-light-grey w3-content" style="max-width:1600px">
<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar"><br>
<div class="w3-container">
<a href="#" onclick="w3_close()" class="w3-hide-large w3-right w3-jumbo w3-padding w3-hover-grey" title="close menu">
<i class="fa fa-remove"></i>
</a>
<img src="https://www.w3schools.com/w3images/avatar_g2.jpg" style="width:45%;" class="w3-round"><br><br>
<h4><b>PORTFOLIO</b></h4>
<p class="w3-text-grey">Template by W3.CSS</p>
</div>
<div class="w3-bar-block">
<a href="#portfolio" onclick="w3_close()" class="w3-bar-item w3-button w3-padding w3-text-teal"><i class="fa fa-th-large fa-fw w3-margin-right"></i>PORTFOLIO</a>
<a href="#about" onclick="w3_close()" class="w3-bar-item w3-button w3-padding"><i class="fa fa-user fa-fw w3-margin-right"></i>ABOUT</a>
<a href="#contact" onclick="w3_close()" class="w3-bar-item w3-button w3-padding"><i class="fa fa-envelope fa-fw w3-margin-right"></i>CONTACT</a>
</div>
<div class="w3-panel w3-large">
<i class="fa fa-facebook-official w3-hover-opacity"></i>
<i class="fa fa-instagram w3-hover-opacity"></i>
<i class="fa fa-snapchat w3-hover-opacity"></i>
<i class="fa fa-pinterest-p w3-hover-opacity"></i>
<i class="fa fa-twitter w3-hover-opacity"></i>
<i class="fa fa-linkedin w3-hover-opacity"></i>
</div>
</nav>
<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px">
<!-- Header -->
<header id="portfolio">
<a href="#"><img src="https://www.w3schools.com/w3images/avatar_g2.jpg" style="width:65px;" class="w3-circle w3-right w3-margin w3-hide-large w3-hover-opacity"></a>
<span class="w3-button w3-hide-large w3-xxlarge w3-hover-text-grey" onclick="w3_open()"><i class="fa fa-bars"></i></span>
<div class="w3-container">
<h1><b>My Portfolio</b></h1>
<div class="w3-section w3-bottombar w3-padding-16">
<span class="w3-margin-right">Filter:</span>
<button class="w3-button w3-black">ALL</button>
<button class="w3-button w3-white"><i class="fa fa-diamond w3-margin-right"></i>Design</button>
<button class="w3-button w3-white w3-hide-small"><i class="fa fa-photo w3-margin-right"></i>Photos</button>
<button class="w3-button w3-white w3-hide-small"><i class="fa fa-map-pin w3-margin-right"></i>Art</button>
</div>
</div>
</header>
<!-- First Photo Grid-->
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
<img src="https://www.w3schools.com/w3images/mountains.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<img src="https://www.w3schools.com/w3images/lights.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<div class="w3-third w3-container">
<img src="https://www.w3schools.com/w3images/nature.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
</div>
<!-- Second Photo Grid-->
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
<img src="https://www.w3schools.com/w3images/p1.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<img src="https://www.w3schools.com/w3images/p2.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<div class="w3-third w3-container">
<img src="https://www.w3schools.com/w3images/p3.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
</div>
<!-- Pagination -->
<div class="w3-center w3-padding-32">
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button w3-hover-black">«</a>
<a href="#" class="w3-bar-item w3-black w3-button">1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-black">2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-black">3</a>
<a href="#" class="w3-bar-item w3-button w3-hover-black">4</a>
<a href="#" class="w3-bar-item w3-button w3-hover-black">»</a>
</div>
</div>
<!-- Images of Me -->
<div class="w3-row-padding w3-padding-16" id="about">
<div class="w3-col m6">
<img src="https://www.w3schools.com/w3images/avatar_g.jpg" alt="Me" style="width:100%">
</div>
<div class="w3-col m6">
<img src="https://www.w3schools.com/w3images/me2.jpg" alt="Me" style="width:100%">
</div>
</div>
<div class="w3-container w3-padding-large" style="margin-bottom:32px">
<h4><b>About Me</b></h4>
<p>Just me, myself and I, exploring the universe of unknownment. I have a heart of love and an interest of lorem ipsum and mauris neque quam blog. I want to share my world with you. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
<hr>
<h4>Technical Skills</h4>
<!-- Progress bars / Skills -->
<p>Photography</p>
<div class="w3-grey">
<div class="w3-container w3-dark-grey w3-padding w3-center" style="width:95%">95%</div>
</div>
<p>Web Design</p>
<div class="w3-grey">
<div class="w3-container w3-dark-grey w3-padding w3-center" style="width:85%">85%</div>
</div>
<p>Photoshop</p>
<div class="w3-grey">
<div class="w3-container w3-dark-grey w3-padding w3-center" style="width:80%">80%</div>
</div>
<p>
<button class="w3-button w3-dark-grey w3-padding-large w3-margin-top w3-margin-bottom">
<i class="fa fa-download w3-margin-right"></i>Download Resume
</button>
</p>
<hr>
<h4>How much I charge</h4>
<!-- Pricing Tables -->
<div class="w3-row-padding" style="margin:0 -16px">
<div class="w3-third w3-margin-bottom">
<ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
<li class="w3-black w3-xlarge w3-padding-32">Basic</li>
<li class="w3-padding-16">Web Design</li>
<li class="w3-padding-16">Photography</li>
<li class="w3-padding-16">1GB Storage</li>
<li class="w3-padding-16">Mail Support</li>
<li class="w3-padding-16">
<h2>$ 10</h2>
<span class="w3-opacity">per month</span>
</li>
<li class="w3-light-grey w3-padding-24">
<button class="w3-button w3-teal w3-padding-large w3-hover-black">Sign Up</button>
</li>
</ul>
</div>
<div class="w3-third w3-margin-bottom">
<ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
<li class="w3-teal w3-xlarge w3-padding-32">Pro</li>
<li class="w3-padding-16">Web Design</li>
<li class="w3-padding-16">Photography</li>
<li class="w3-padding-16">50GB Storage</li>
<li class="w3-padding-16">Endless Support</li>
<li class="w3-padding-16">
<h2>$ 25</h2>
<span class="w3-opacity">per month</span>
</li>
<li class="w3-light-grey w3-padding-24">
<button class="w3-button w3-teal w3-padding-large w3-hover-black">Sign Up</button>
</li>
</ul>
</div>
<div class="w3-third">
<ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
<li class="w3-black w3-xlarge w3-padding-32">Premium</li>
<li class="w3-padding-16">Web Design</li>
<li class="w3-padding-16">Photography</li>
<li class="w3-padding-16">Unlimited Storage</li>
<li class="w3-padding-16">Endless Support</li>
<li class="w3-padding-16">
<h2>$ 25</h2>
<span class="w3-opacity">per month</span>
</li>
<li class="w3-light-grey w3-padding-24">
<button class="w3-button w3-teal w3-padding-large w3-hover-black">Sign Up</button>
</li>
</ul>
</div>
</div>
</div>
<!-- Contact Section -->
<div class="w3-container w3-padding-large w3-grey">
<h4 id="contact"><b>Contact Me</b></h4>
<div class="w3-row-padding w3-center w3-padding-24" style="margin:0 -16px">
<div class="w3-third w3-dark-grey">
<p><i class="fa fa-envelope w3-xxlarge w3-text-light-grey"></i></p>
<p>email@email.com</p>
</div>
<div class="w3-third w3-teal">
<p><i class="fa fa-map-marker w3-xxlarge w3-text-light-grey"></i></p>
<p>Chicago, US</p>
</div>
<div class="w3-third w3-dark-grey">
<p><i class="fa fa-phone w3-xxlarge w3-text-light-grey"></i></p>
<p>512312311</p>
</div>
</div>
<hr class="w3-opacity">
<form action="/action_page.php" target="_blank">
<div class="w3-section">
<label>Name</label>
<input class="w3-input w3-border" type="text" name="Name" required>
</div>
<div class="w3-section">
<label>Email</label>
<input class="w3-input w3-border" type="text" name="Email" required>
</div>
<div class="w3-section">
<label>Message</label>
<input class="w3-input w3-border" type="text" name="Message" required>
</div>
<button type="submit" class="w3-button w3-black w3-margin-bottom"><i class="fa fa-paper-plane w3-margin-right"></i>Send Message</button>
</form>
</div>
<!-- Footer -->
<footer class="w3-container w3-padding-32 w3-dark-grey">
<div class="w3-row-padding">
<div class="w3-third">
<h3>FOOTER</h3>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
</div>
<div class="w3-third">
<h3>BLOG POSTS</h3>
<ul class="w3-ul w3-hoverable">
<li class="w3-padding-16">
<img src="https://www.w3schools.com/w3images/workshop.jpg" class="w3-left w3-margin-right" style="width:50px">
<span class="w3-large">Lorem</span><br>
<span>Sed mattis nunc</span>
</li>
<li class="w3-padding-16">
<img src="https://www.w3schools.com/w3images/gondol.jpg" class="w3-left w3-margin-right" style="width:50px">
<span class="w3-large">Ipsum</span><br>
<span>Praes tinci sed</span>
</li>
</ul>
</div>
<div class="w3-third">
<h3>POPULAR TAGS</h3>
<p>
<span class="w3-tag w3-black w3-margin-bottom">Travel</span> <span class="w3-tag w3-grey w3-small w3-margin-bottom">New York</span> <span class="w3-tag w3-grey w3-small w3-margin-bottom">London</span>
<span class="w3-tag w3-grey w3-small w3-margin-bottom">IKEA</span> <span class="w3-tag w3-grey w3-small w3-margin-bottom">NORWAY</span> <span class="w3-tag w3-grey w3-small w3-margin-bottom">DIY</span>
<span class="w3-tag w3-grey w3-small w3-margin-bottom">Ideas</span> <span class="w3-tag w3-grey w3-small w3-margin-bottom">Baby</span> <span class="w3-tag w3-grey w3-small w3-margin-bottom">Family</span>
<span class="w3-tag w3-grey w3-small w3-margin-bottom">News</span> <span class="w3-tag w3-grey w3-small w3-margin-bottom">Clothing</span> <span class="w3-tag w3-grey w3-small w3-margin-bottom">Shopping</span>
<span class="w3-tag w3-grey w3-small w3-margin-bottom">Sports</span> <span class="w3-tag w3-grey w3-small w3-margin-bottom">Games</span>
</p>
</div>
</div>
</footer>
<div class="w3-black w3-center w3-padding-24">Powered by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-opacity">w3.css</a></div>
<!-- End page content -->
</div>
<script>
// Script to open and close sidebar
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
</script>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment