initial structure with provisional content

codeswitchstudio · Apr 8, 2024 · fbbca82 · fbbca82
1 parent 1705dc1
commit fbbca82
Show file tree

Hide file tree

Showing 8 changed files with 177 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1 +1,14 @@
-# css-photo-scroll
+# css-photo-scroll
+
+## photo credits
+
+Mikkel Jönck Schmidt [Mikkel Jönck Schmidt](https://unsplash.com/@mikkel_schmidt?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)
+on [Unsplash](href="https://unsplash.com/photos/two-black-oil-platforms-uUXB3EPgVp4?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) 
+
+Thomas Peham [Thomas Peham](https://unsplash.com/@tompeham?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) on
+[Unsplash](href="https://unsplash.com/photos/person-sitting-down-on-frame-f4TfjV-gE54?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash")
+
+Stephan Mahlke [Stephan Mahlke](https://unsplash.com/@stpxn?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)
+on [Unsplash](https://unsplash.com/photos/white-and-brown-building-during-daytime-photo-pMZMmhK4P34?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)
+
+Steffen  Muldbjerg [Steffen  Muldbjerg](https://unsplash.com/@muldbjerg?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) on [Unsplash](https://unsplash.com/photos/architectural-photography-of-white-blue-and-brown-houses-SmMVE8XpH90?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)
diff --git a/assets/_base.css b/assets/_base.css
@@ -0,0 +1,61 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+img, iframe {
+  vertical-align: bottom;
+  max-width: 100%;
+}
+
+input, textarea, select {
+  font: inherit;
+}
+
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
diff --git a/assets/mikkel-jonck-schmidt-uUXB3EPgVp4-unsplash.jpg b/assets/mikkel-jonck-schmidt-uUXB3EPgVp4-unsplash.jpg
diff --git a/assets/steffen-muldbjerg-SmMVE8XpH90-unsplash.jpg b/assets/steffen-muldbjerg-SmMVE8XpH90-unsplash.jpg
diff --git a/assets/stephan-mahlke-pMZMmhK4P34-unsplash.jpg b/assets/stephan-mahlke-pMZMmhK4P34-unsplash.jpg
diff --git a/assets/style.css b/assets/style.css
@@ -0,0 +1,73 @@
+body {
+
+  font-size:  16px;
+  font-weight: 400;
+  background-color: #000000;
+
+}
+
+a {
+  color:  #ffffff;
+  text-decoration:  none;
+}
+
+section {
+  /*viewport height*/
+  height: 100vh;
+  background-image: url(./thomas-peham-f4TfjV-gE54-unsplash.jpg);
+  background-size:  cover; 
+  /*fix bg to viewport*/
+  background-attachment:  fixed;
+}
+
+header {
+  position:  fixed;
+  top:  20px;
+  left:  20px;
+}
+
+h1 {
+  font-size:  44px;
+  font-family:  "Alegreya Sans", sans-serif;
+  margin-bottom:  5px;
+  font-weight: 700;
+	background-color: rgb(255, 242, 0);
+	padding: 10px;
+  max-width:max-content;
+}
+
+
+p {
+  background-color: #ffffff;
+  font-weight: 100;
+  width: max-content;
+  padding: 10px;
+}
+
+footer {
+  position:  fixed;
+  bottom:  20px;
+  left:  20px;
+}
+
+footer a {
+  margin-right:  5px;
+}
+
+a:hover {
+  color: #dddddd;
+}
+
+.image_2{
+  background-image: url(./mikkel-jonck-schmidt-uUXB3EPgVp4-unsplash.jpg);
+}
+
+.image_3{
+  background-image: url(./steffen-muldbjerg-SmMVE8XpH90-unsplash.jpg);
+}
+
+.image_4{
+  background-image: url(./stephan-mahlke-pMZMmhK4P34-unsplash.jpg);
+}
+
+
diff --git a/assets/thomas-peham-f4TfjV-gE54-unsplash.jpg b/assets/thomas-peham-f4TfjV-gE54-unsplash.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="stylesheet" href="./assets/style.css">
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900&family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Skranji:wght@400;700&display=swap" rel="stylesheet">	<title>The Danish Year</title>
+</head>
+<body>
+	<header>
+		<h1>Four seasons in Aarhus</h1> 
+		<p>notes from a tropical scholar</p>
+	</header>
+
+	<section class = "image_1"></section>
+	<section class = "image_2"></section>
+	<section class = "image_3"></section>
+	<section class = "image_4"></section>
+
+	<footer>
+		<a href="">Email</a> 
+		<a href="">Twitter</a>
+		<a href="">Instagram</a>
+	</footer>
+
+</body>
+</html>