add all files for first backup version

mronowska · Oct 1, 2019 · 7a6a2a3 · 7a6a2a3
1 parent 91dc35c
commit 7a6a2a3
Show file tree

Hide file tree

Showing 24 changed files with 479 additions and 0 deletions.
diff --git a/img/1.jpg b/img/1.jpg
diff --git a/img/2.jpg b/img/2.jpg
diff --git a/img/3.jpg b/img/3.jpg
diff --git a/img/4.jpg b/img/4.jpg
diff --git a/img/5.jpg b/img/5.jpg
diff --git a/img/6.jpg b/img/6.jpg
diff --git a/img/7.jpg b/img/7.jpg
diff --git a/img/8.jpg b/img/8.jpg
diff --git a/img/9.jpg b/img/9.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+    <title>Gallery</title>
+
+      <!--[if IE]>
+          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
+          </script>
+        <!--[endif]-->
+
+    <!--my styles-->
+    <link href="./scss/main.css" rel="stylesheet">
+    <!--fonts-->
+    <link href="https://fonts.googleapis.com/css?family=Bai+Jamjuree&display=swap" rel="stylesheet">
+</head>
+<body>
+    <header class="header">
+        <h1 class="header__title">Gallery of photos</h1>
+    </header>
+
+    <div class="masonry">
+        <!-- <div class="masonry__item">
+          
+        <img class="masonry__img"src="../img/5.jpg">
+    
+            <div class="masonry__description">
+                    <p class="masonry__description--title">Tytuł1</p>
+                    <p class="masonry__description--date">Data 2017</p></div>
+
+          
+        </div>
+        <div class="masonry__item">
+          
+                <img class="masonry__img"src="../img/5.jpg">
+            
+                    <div class="masonry__description">
+                        <p class="masonry__description--title">Tytuł2</p>
+                        <p class="masonry__description--date">Data 2018</p></div>
+        
+                  
+                </div>
+
+
+
+        <div class="masonry__item">
+          
+        <img class="masonry__img"src="../img/5.jpg">
+    
+            <div class="masonry__description">
+                    <p class="masonry__description--title">Tytuł3</p>
+                    <p class="masonry__description--date">Data 2019</p></div>
+
+          
+        </div>
+
+
+
+        <div class="masonry__item">
+          
+                <img class="masonry__img"src="../img/5.jpg">
+            
+                    <div class="masonry__description">
+                            <p class="masonry__description--title">Tytuł1</p>
+                            <p class="masonry__description--date">Data 2017</p></div>
+        
+                  
+                </div>
+                <div class="masonry__item">
+                  
+                        <img class="masonry__img" src="../img/5.jpg">
+                    
+                            <div class="masonry__description">
+                                <p class="masonry__description--title">Tytuł2</p>
+                                <p class="masonry__description--date">Data 2018</p></div>
+                        </div>
+        
+        
+                        
+                <div class="masonry__item">
+                  
+                <img class="masonry__img"src="../img/5.jpg">
+            
+                    <div class="masonry__description">
+                            <p class="masonry__description--title">Tytuł3</p>
+                            <p class="masonry__description--date">Data 2019</p></div>
+        
+                  
+                </div>-->
+    </div>
+    <script src="js/main.js"></script>
+</body>
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,61 @@
+const listOfImgNames = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg'];
+const listOfImgTitles = ['Wędrówka', 'Wolność', 'Spacer', 'Zielony kanion', 'Górskie widoki', 'W chmurach', 'Przbijające słońce', 'Tak mieszkać', 'Natura'];
+
+
+for (let i = 0; i < listOfImgNames.length; i++)
+{
+    //adding div with masonry__item class
+    const masonry = document.getElementsByClassName('masonry')[0];
+    const masonryItem = document.createElement('div');
+    masonryItem.className = "masonry__item";
+    masonry.appendChild(masonryItem);
+
+    const item = document.getElementsByClassName('masonry__item')[i];
+
+    //adding img with masonry__img class
+    const img = document.createElement('img');
+    img.className = "masonry__img w3-image";
+    img.src = `././img/${i+1}.jpg`;
+    item.appendChild(img);
+
+
+    //adding div with masonry__description class
+    const description = document.createElement('div');
+    description.className = "masonry__description";
+    item.appendChild(description);
+
+    const descriptionItem = document.getElementsByClassName('masonry__description')[i];
+
+    //adding p with masonry__description--title class
+    const title = document.createElement('p');
+    title.className = "masonry__description--title";
+    title.innerText = `${listOfImgTitles[i]}`;
+    descriptionItem.appendChild(title);
+
+    //adding p with masonry__description--date class
+    const date = document.createElement('p');
+    date.className = "masonry__description--date";
+    date.innerText = `10.02.200${i}`;
+    descriptionItem.appendChild(date);
+
+}
+
+for (let i = 0; i < listOfImgNames.length; i++)
+{
+document.getElementsByTagName("img")[i].addEventListener("click", () => {
+    console.log("WOOW");
+})}
+
+
+
+// const showImage = () => {
+//     image = document.querySelector(img);    
+//     image.addEventListener("click", change);
+// }
+
+const change = () => {
+    //  let obraz = document.getElementsByTagName(img);
+    //  obraz.styles.width = "100%";
+    console.log("JUZ");
+
+}
diff --git a/scss/abstracts/_abstracts.css b/scss/abstracts/_abstracts.css
@@ -0,0 +1 @@
+null
diff --git a/scss/abstracts/_abstracts.min.css b/scss/abstracts/_abstracts.min.css
@@ -0,0 +1 @@
+null
diff --git a/scss/abstracts/_abstracts.scss b/scss/abstracts/_abstracts.scss
@@ -0,0 +1,3 @@
+//ABSTRACTS
+
+$imgList2 : '1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg';
diff --git a/scss/layout/_layout.css b/scss/layout/_layout.css
@@ -0,0 +1,81 @@
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  height: 100vh;
+  background-color: #264cbf;
+}
+
+.header__title {
+  text-align: center;
+  font-size: 3em;
+  margin: 1em 0 1.5em 0;
+  color: #FFF;
+}
+
+.masonry {
+  margin: 1.5 auto;
+  max-width: 100%;
+  column-gap: 1.5em;
+  /* Masonry on large screens */
+  /* Masonry on medium-sized screens */
+  /* Masonry on small screens */
+}
+
+.masonry__item {
+  background: #0B2573;
+  margin: 0 9px 9px 9px;
+  padding: 1.5em;
+}
+
+.masonry__description {
+  display: inline-block;
+  line-height: 9px;
+  vertical-align: top;
+  color: #FFF;
+  padding: 0.5em;
+}
+
+.masonry__description--title {
+  font-size: 24px;
+}
+
+.masonry__description--date {
+  font-size: 16px;
+}
+
+.masonry__img {
+  width: 120px;
+  height: 120px;
+  vertical-align: center;
+}
+
+.masonry__img:hover {
+  opacity: 0.5;
+  border: 1px solid #FFF;
+}
+
+@media only screen and (min-width: 1024px) {
+  .masonry {
+    column-count: 3;
+  }
+}
+
+@media only screen and (max-width: 1023px) and (min-width: 768px) {
+  .masonry {
+    column-count: 2;
+  }
+}
+
+@media only screen and (max-width: 767px) and (min-width: 520px) {
+  .masonry {
+    column-count: 1;
+  }
+}
diff --git a/scss/layout/_layout.min.css b/scss/layout/_layout.min.css
diff --git a/scss/layout/_layout.scss b/scss/layout/_layout.scss
@@ -0,0 +1,113 @@
+//LAYOUT
+$imgListNames : '1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg';
+$imgSide: 120px;
+
+html {
+    box-sizing: border-box;
+  }
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: inherit;
+  }
+
+  body {
+    height: 100vh;
+    background-color: rgb(38,76,191);
+  }
+
+  .header {
+    &__title {
+      text-align: center;
+      font-size: 3em;
+      margin: 1em 0 1.5em 0;
+      //background-color: #487311;
+      color: #FFF;
+    }
+  }
+
+  .masonry {
+
+    margin: 1.5 auto;
+    max-width: 100%;
+    column-gap: 1.5em;
+
+
+
+    &__item {
+      background:#0B2573;
+
+      //border: 2px solid #808080;
+      margin: 0 9px 9px 9px;
+      padding: 1.5em;
+
+
+
+      // &--img {
+      //   display: inline-block;
+      //   font-size: 30px;
+      //   color: white;
+      //   background-image: url('../img/3.jpg');
+      //   height: 30px;
+      //   width: 30px;
+      // }
+
+    }
+    &__description {
+      display: inline-block;
+      line-height: 9px; 
+       vertical-align: top;
+       color: #FFF;
+       padding: 0.5em;
+
+      &--title {
+        font-size: 24px;
+       // color: #487311;
+        // &:hover {
+        //   color: #FFD0BF;
+        // }
+
+
+      }
+
+      &--date {
+        font-size: 16px;
+        //color: #558C0E;
+
+
+    }
+  }
+    &__img {
+      width: $imgSide;
+      height: $imgSide;
+      vertical-align: center;
+
+       &:hover {
+          opacity: 0.5;
+          border: 1px solid #FFF;
+
+        }
+    }
+
+      /* Masonry on large screens */
+    @media only screen and (min-width: 1024px) {
+        column-count: 3;
+    }
+
+    /* Masonry on medium-sized screens */
+    @media only screen and (max-width: 1023px) and (min-width: 768px) {
+        column-count: 2;
+    }
+
+    /* Masonry on small screens */
+    @media only screen and (max-width: 767px) and (min-width: 520px) {
+        column-count: 1;
+    }
+
+}
+
+
+
+
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		//ABSTRACTS

		$imgList2 : '1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg';