Home Explore Help
Sign In
kurashov1307
/
Monblanproject-Test-Task-Master
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

first commit

Evgeny 4 years ago
parent
ce35fcb18d
commit
5377374c15
87 changed files with 23627 additions and 0 deletions
Split View Show Diff Stats
  1. 3 0
      .gitignore
  2. BIN
      docs/HelveticaNeue-Bold.2fd1ba84.eot
  3. BIN
      docs/HelveticaNeue-Bold.5be5f7fb.ttf
  4. BIN
      docs/HelveticaNeue-Bold.87a4310b.woff
  5. BIN
      docs/HelveticaNeue-Bold.945183ec.eot
  6. BIN
      docs/HelveticaNeue-Bold.ca2b3208.woff
  7. BIN
      docs/HelveticaNeue-Bold.cc7c848d.ttf
  8. BIN
      docs/HelveticaNeue.0be08955.ttf
  9. BIN
      docs/HelveticaNeue.0cfbba59.woff
  10. BIN
      docs/HelveticaNeue.19675a57.woff
  11. BIN
      docs/HelveticaNeue.1fde49a6.eot
  12. BIN
      docs/HelveticaNeue.96b78a50.ttf
  13. BIN
      docs/HelveticaNeue.a2dc7a99.eot
  14. BIN
      docs/MyriadProRegular.0812e7e4.ttf
  15. BIN
      docs/MyriadProRegular.0eab6dc7.woff
  16. BIN
      docs/MyriadProRegular.88e0edc4.woff
  17. BIN
      docs/MyriadProRegular.b90f14ed.ttf
  18. BIN
      docs/MyriadProRegular.c60bb226.eot
  19. BIN
      docs/MyriadProRegular.d671f79e.eot
  20. BIN
      docs/ProximaNovaBold.13ce2d37.eot
  21. BIN
      docs/ProximaNovaBold.19411ace.eot
  22. BIN
      docs/ProximaNovaBold.67a9f5a2.woff
  23. BIN
      docs/ProximaNovaBold.6c96fea1.ttf
  24. BIN
      docs/ProximaNovaBold.8719dfb4.woff
  25. BIN
      docs/ProximaNovaBold.c8ac93ef.ttf
  26. BIN
      docs/ProximaNovaRegular.055bba8e.ttf
  27. BIN
      docs/ProximaNovaRegular.09291d92.eot
  28. BIN
      docs/ProximaNovaRegular.39ccd3dd.ttf
  29. BIN
      docs/ProximaNovaRegular.6456d2c8.woff
  30. BIN
      docs/ProximaNovaRegular.a1457cc8.woff
  31. BIN
      docs/ProximaNovaRegular.aad5768d.eot
  32. BIN
      docs/content-img1.a870952d.jpg
  33. BIN
      docs/content-img1.e4a7a724.jpg
  34. BIN
      docs/form1.6c261e78.png
  35. BIN
      docs/form1.7998db30.png
  36. BIN
      docs/form2.381b72bf.png
  37. BIN
      docs/form2.a0655e31.png
  38. 1 0
      docs/index.html
  39. BIN
      docs/logo.6023b87e.png
  40. BIN
      docs/logo.652886af.png
  41. 8 0
      docs/main.54f289b5.js
  42. 1 0
      docs/main.54f289b5.js.map
  43. 2933 0
      docs/main.d8ebb8d6.js
  44. 1 0
      docs/main.d8ebb8d6.js.map
  45. 2 0
      docs/reponsive.12a24204.css
  46. 1 0
      docs/reponsive.12a24204.css.map
  47. 116 0
      docs/reponsive.a5b1628c.css
  48. 1 0
      docs/reponsive.a5b1628c.css.map
  49. 397 0
      docs/reponsive.a5b1628c.js
  50. 1 0
      docs/reponsive.a5b1628c.js.map
  51. 2 0
      docs/styles.180e5b63.css
  52. 1 0
      docs/styles.180e5b63.css.map
  53. 380 0
      docs/styles.6145e9cd.css
  54. 1 0
      docs/styles.6145e9cd.css.map
  55. 407 0
      docs/styles.6145e9cd.js
  56. 1 0
      docs/styles.6145e9cd.js.map
  57. BIN
      fonts/HelveticaNeueBold/HelveticaNeue-Bold.eot
  58. 5856 0
      fonts/HelveticaNeueBold/HelveticaNeue-Bold.svg
  59. BIN
      fonts/HelveticaNeueBold/HelveticaNeue-Bold.ttf
  60. BIN
      fonts/HelveticaNeueBold/HelveticaNeue-Bold.woff
  61. BIN
      fonts/HelveticaNeueRegular/HelveticaNeue.eot
  62. 5866 0
      fonts/HelveticaNeueRegular/HelveticaNeue.svg
  63. BIN
      fonts/HelveticaNeueRegular/HelveticaNeue.ttf
  64. BIN
      fonts/HelveticaNeueRegular/HelveticaNeue.woff
  65. BIN
      fonts/MyriadProRegular/MyriadProRegular.eot
  66. BIN
      fonts/MyriadProRegular/MyriadProRegular.otf
  67. BIN
      fonts/MyriadProRegular/MyriadProRegular.ttf
  68. BIN
      fonts/MyriadProRegular/MyriadProRegular.woff
  69. BIN
      fonts/ProximaNovaBold/ProximaNovaBold.eot
  70. BIN
      fonts/ProximaNovaBold/ProximaNovaBold.ttf
  71. BIN
      fonts/ProximaNovaBold/ProximaNovaBold.woff
  72. BIN
      fonts/ProximaNovaRegular/ProximaNovaRegular.eot
  73. BIN
      fonts/ProximaNovaRegular/ProximaNovaRegular.ttf
  74. BIN
      fonts/ProximaNovaRegular/ProximaNovaRegular.woff
  75. BIN
      images/content-img1.jpg
  76. BIN
      images/form1.png
  77. BIN
      images/form2.png
  78. BIN
      images/grid-mode-switcher.png
  79. BIN
      images/list-mode-switcher.png
  80. BIN
      images/logo.png
  81. 348 0
      index.html
  82. 6754 0
      package-lock.json
  83. 18 0
      package.json
  84. 46 0
      scripts/main.js
  85. 50 0
      styles/fonts.css
  86. 318 0
      styles/index.css
  87. 114 0
      styles/reponsive.css

+ 3 - 0
.gitignore
View File 

@@ -0,0 +1,3 @@
 
+node_modules
 
+.cache
 
+dist

BIN
docs/HelveticaNeue-Bold.2fd1ba84.eot
View File


BIN
docs/HelveticaNeue-Bold.5be5f7fb.ttf
View File


BIN
docs/HelveticaNeue-Bold.87a4310b.woff
View File


BIN
docs/HelveticaNeue-Bold.945183ec.eot
View File


BIN
docs/HelveticaNeue-Bold.ca2b3208.woff
View File


BIN
docs/HelveticaNeue-Bold.cc7c848d.ttf
View File


BIN
docs/HelveticaNeue.0be08955.ttf
View File


BIN
docs/HelveticaNeue.0cfbba59.woff
View File


BIN
docs/HelveticaNeue.19675a57.woff
View File


BIN
docs/HelveticaNeue.1fde49a6.eot
View File


BIN
docs/HelveticaNeue.96b78a50.ttf
View File


BIN
docs/HelveticaNeue.a2dc7a99.eot
View File


BIN
docs/MyriadProRegular.0812e7e4.ttf
View File


BIN
docs/MyriadProRegular.0eab6dc7.woff
View File


BIN
docs/MyriadProRegular.88e0edc4.woff
View File


BIN
docs/MyriadProRegular.b90f14ed.ttf
View File


BIN
docs/MyriadProRegular.c60bb226.eot
View File


BIN
docs/MyriadProRegular.d671f79e.eot
View File


BIN
docs/ProximaNovaBold.13ce2d37.eot
View File


BIN
docs/ProximaNovaBold.19411ace.eot
View File


BIN
docs/ProximaNovaBold.67a9f5a2.woff
View File


BIN
docs/ProximaNovaBold.6c96fea1.ttf
View File


BIN
docs/ProximaNovaBold.8719dfb4.woff
View File


BIN
docs/ProximaNovaBold.c8ac93ef.ttf
View File


BIN
docs/ProximaNovaRegular.055bba8e.ttf
View File


BIN
docs/ProximaNovaRegular.09291d92.eot
View File


BIN
docs/ProximaNovaRegular.39ccd3dd.ttf
View File


BIN
docs/ProximaNovaRegular.6456d2c8.woff
View File


BIN
docs/ProximaNovaRegular.a1457cc8.woff
View File


BIN
docs/ProximaNovaRegular.aad5768d.eot
View File


BIN
docs/content-img1.a870952d.jpg
View File


BIN
docs/content-img1.e4a7a724.jpg
View File


BIN
docs/form1.6c261e78.png
View File


BIN
docs/form1.7998db30.png
View File


BIN
docs/form2.381b72bf.png
View File


BIN
docs/form2.a0655e31.png
View File


File diff suppressed because it is too large
+ 1 - 0
docs/index.html


BIN
docs/logo.6023b87e.png
View File


BIN
docs/logo.652886af.png
View File


File diff suppressed because it is too large
+ 8 - 0
docs/main.54f289b5.js


File diff suppressed because it is too large
+ 1 - 0
docs/main.54f289b5.js.map


File diff suppressed because it is too large
+ 2933 - 0
docs/main.d8ebb8d6.js


File diff suppressed because it is too large
+ 1 - 0
docs/main.d8ebb8d6.js.map


File diff suppressed because it is too large
+ 2 - 0
docs/reponsive.12a24204.css


File diff suppressed because it is too large
+ 1 - 0
docs/reponsive.12a24204.css.map


+ 116 - 0
docs/reponsive.a5b1628c.css
View File 

@@ -0,0 +1,116 @@
 
+@media screen and (max-width: 935px) {
 
+    .container {
 
+        padding-left: 3%;
 
+        padding-right: 3%;
 
+    }
 
+
 
+    .decoration {
 
+        display: none;
 
+    }
 
+}
 
+
 
+@media screen and (max-width: 840px) {
 
+    header {
 
+        height: 420px;
 
+    }
 
+
 
+    header .logo {
 
+        transform: scale(0.7);
 
+        margin: 0;
 
+    }
 
+
 
+    header .container {
 
+        padding: 0 3%;
 
+        max-width: 100%;
 
+        display: flex;
 
+        flex-direction: column;
 
+        justify-content: center;
 
+        align-items: center;
 
+    }
 
+
 
+    header .profile {
 
+        font-size: 14px;
 
+        margin-top: 0;
 
+    }
 
+
 
+    header .profile .profile__info {
 
+        display: block;
 
+        text-align: center;
 
+    }
 
+
 
+    header .profile .profile__info .profile__username {
 
+        margin-right: 0;
 
+        margin-bottom: 17px;
 
+    }
 
+    
+    header .profile__stats, header .profile__date-select {
 
+        display: flex;
 
+        justify-content: space-between;
 
+        width: 90%;
 
+        margin: 0 auto;
 
+        margin-top: 20px;
 
+    }
 
+
 
+    header .profile__date-select {
 
+        display: block;
 
+    }
 
+    header .profile__date-select .profile__date-select__input {
 
+        margin: 7px 0;
 
+        width: 100%;
 
+        display: block;
 
+    }
 
+
 
+    header .profile__date-select .profile__date-select__input input {
 
+        margin-left: 0;
 
+        width: 100%;
 
+    }
 
+    header .profile .profile__stats > p {
 
+        margin-right: 0;
 
+    }
 
+
 
+    main {
 
+        margin-top: 420px;
 
+        font-size: 12px;
 
+    }
 
+
 
+}
 
+
 
+@media screen and (max-width: 630px) {
 
+    .material-icons {
 
+        font-size: 17px!important;
 
+    }
 
+    .content.display_grid .container {
 
+        width: auto;
 
+        justify-content: center;
 
+    }
 
+
 
+    .content.display_list .content__item {
 
+        height: auto;
 
+    }
 
+    .content.display_list .content__item-img {
 
+        display: inline-block;
 
+        min-width: 120px;
 
+        min-height: 120px;
 
+        margin-right: 20px;
 
+    }
 
+
 
+    .content.display_list .content__item-info {
 
+        display: inline-block;
 
+    }
 
+    .content.display_list .content__item-info__data {
 
+        width: 100%;
 
+        margin: 0;
 
+    }
 
+
 
+    .content.display_list .content__item-info .content__item-info__data p {
 
+        font-size: 12px;
 
+    }
 
+    .content.display_list .content__item-info .content__item-info__data p:first-child {
 
+        margin: 3px 0 5px 0;
 
+        font-size: 12px;
 
+    }
 
+    
+
 
+}
 
+
 
+/*# sourceMappingURL=/reponsive.a5b1628c.css.map */

File diff suppressed because it is too large
+ 1 - 0
docs/reponsive.a5b1628c.css.map


File diff suppressed because it is too large
+ 397 - 0
docs/reponsive.a5b1628c.js


File diff suppressed because it is too large
+ 1 - 0
docs/reponsive.a5b1628c.js.map


File diff suppressed because it is too large
+ 2 - 0
docs/styles.180e5b63.css


File diff suppressed because it is too large
+ 1 - 0
docs/styles.180e5b63.css.map


File diff suppressed because it is too large
+ 380 - 0
docs/styles.6145e9cd.css


File diff suppressed because it is too large
+ 1 - 0
docs/styles.6145e9cd.css.map


File diff suppressed because it is too large
+ 407 - 0
docs/styles.6145e9cd.js


File diff suppressed because it is too large
+ 1 - 0
docs/styles.6145e9cd.js.map


BIN
fonts/HelveticaNeueBold/HelveticaNeue-Bold.eot
View File


File diff suppressed because it is too large
+ 5856 - 0
fonts/HelveticaNeueBold/HelveticaNeue-Bold.svg


BIN
fonts/HelveticaNeueBold/HelveticaNeue-Bold.ttf
View File


BIN
fonts/HelveticaNeueBold/HelveticaNeue-Bold.woff
View File


BIN
fonts/HelveticaNeueRegular/HelveticaNeue.eot
View File


File diff suppressed because it is too large
+ 5866 - 0
fonts/HelveticaNeueRegular/HelveticaNeue.svg


BIN
fonts/HelveticaNeueRegular/HelveticaNeue.ttf
View File


BIN
fonts/HelveticaNeueRegular/HelveticaNeue.woff
View File


BIN
fonts/MyriadProRegular/MyriadProRegular.eot
View File


BIN
fonts/MyriadProRegular/MyriadProRegular.otf
View File


BIN
fonts/MyriadProRegular/MyriadProRegular.ttf
View File


BIN
fonts/MyriadProRegular/MyriadProRegular.woff
View File


BIN
fonts/ProximaNovaBold/ProximaNovaBold.eot
View File


BIN
fonts/ProximaNovaBold/ProximaNovaBold.ttf
View File


BIN
fonts/ProximaNovaBold/ProximaNovaBold.woff
View File


BIN
fonts/ProximaNovaRegular/ProximaNovaRegular.eot
View File


BIN
fonts/ProximaNovaRegular/ProximaNovaRegular.ttf
View File


BIN
fonts/ProximaNovaRegular/ProximaNovaRegular.woff
View File


BIN
images/content-img1.jpg
View File


BIN
images/form1.png
View File


BIN
images/form2.png
View File


BIN
images/grid-mode-switcher.png
View File


BIN
images/list-mode-switcher.png
View File


BIN
images/logo.png
View File


+ 348 - 0
index.html
View File 

@@ -0,0 +1,348 @@
 
+<!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="./styles/index.css">
 
+    <link rel="stylesheet" href="./styles/reponsive.css">
 
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
+    <title>MonblanProject</title>
 
+</head>
 
+<body>
 
+    <header>
 
+        <div class="container">
 
+            <div class="logo">
 
+                <img src="./images/logo.png" alt="MonblanProject" />
 
+            </div>
 
+            <div class="profile"> 
+                <div class="profile__info">
 
+                    <h1 class="profile__username">
 
+                        monblanproject
 
+                    </h1>
 
+                    <span class="profile__start-date">
 
+                        Start on 17-02-2016
 
+                    </span>    
+                </div>
 
+                <div class="profile__stats">
 
+                    <p><span>870</span> posts</p>
 
+                    <p><span>11,787</span> followers</p>
 
+                    <p><span>112</span> following</p>
 
+                </div>
 
+                <div class="profile__date-select" >
 
+                    <span class="profile__date-select__name">Date</span>
 
+                    <div class="profile__date-select__input" id="from-date">
 
+                        <button title="clear" data-clear>✕</button>
 
+                        <input  data-input type="text" placeholder="from"/>    
+                    </div>
 
+                    <div class="profile__date-select__input" id="to-date">
 
+                        <button title="clear" data-clear>✕</button>
 
+                        <input type="text" placeholder="to" data-input  />                        
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </header>
 
+    <main>
 
+        <div class="decoration">
 
+            <img src="./images/form1.png" />
 
+            <img src="./images/form2.png" />
 
+        </div>
 
+        <section class="mode-switcher">
 
+            <div class="container">
 
+                <div class="mode-switcher__items">
 
+                    <div class="mode-switcher__items-grid" id="mode-switcher-grid">
 
+                        <div></div>
 
+                        <div></div>
 
+                        <div></div>
 
+                        <div></div>
 
+                        <div></div>
 
+                        <div></div>
 
+                        <div></div>
 
+                        <div></div>
 
+                        <div></div>
 
+                    </div>
 
+                    <div class="mode-switcher__items-list active" id="mode-switcher-list">
 
+                        <div></div>
 
+                        <div></div>
 
+                        <div></div>
 
+                        <div></div>
 
+                        <div></div>
 
+                        <div></div>
 
+                    </div>
 
+                </div>
 
+                
+            </div>
 
+        </section>
 
+        <section class="content display_list" id="content">
 
+            <div class="container">
 
+                <div class="content__item">
 
+                    <div class="content__item-img">
 
+                        <img src="./images/content-img1.jpg" alt="" />
 
+                    </div>
 
+                    <div class="content__item-info">
 
+                        <div class="content__item-info__data">
 
+                            <p>Today</p>
 
+                            <p>
 
+                                <span class="material-icons likes">favorite</span> 
+                                <span>128</span>  
+                                <span class="material-icons comments">chat_bubble</span>
 
+                                <span>31</span> 
+                            </p>
 
+                        </div>
 
+                        <div class="content__item-info__data">
 
+                            <p>9-08-2016</p>
 
+                            <p>
 
+                                <span class="material-icons likes">favorite</span> 
+                                <span>67</span> 
+                                <span class="material-icons comments">chat_bubble</span>
 
+                                <span>22</span> 
+                            </p>
 
+                        </div>
 
+                        <div class="content__item-info__data">
 
+                            <p>Image upload</p>
 
+                            <p>11-04-2016</p>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="content__item">
 
+                    <div class="content__item-img">
 
+                        <img src="./images/content-img1.jpg" alt="" />
 
+                    </div>
 
+                    <div class="content__item-info">
 
+                        <div class="content__item-info__data">
 
+                            <p>Today</p>
 
+                            <p>
 
+                                <span class="material-icons likes">favorite</span> 
+                                <span>128</span>  
+                                <span class="material-icons comments">chat_bubble</span>
 
+                                <span>31</span> 
+                            </p>
 
+                        </div>
 
+                        <div class="content__item-info__data">
 
+                            <p>9-08-2016</p>
 
+                            <p>
 
+                                <span class="material-icons likes">favorite</span> 
+                                <span>67</span> 
+                                <span class="material-icons comments">chat_bubble</span>
 
+                                <span>22</span> 
+                            </p>
 
+                        </div>
 
+                        <div class="content__item-info__data">
 
+                            <p>Image upload</p>
 
+                            <p>11-04-2016</p>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="content__item">
 
+                    <div class="content__item-img">
 
+                        <img src="./images/content-img1.jpg" alt="" />
 
+                    </div>
 
+                    <div class="content__item-info">
 
+                        <div class="content__item-info__data">
 
+                            <p>Today</p>
 
+                            <p>
 
+                                <span class="material-icons likes">favorite</span> 
+                                <span>128</span>  
+                                <span class="material-icons comments">chat_bubble</span>
 
+                                <span>31</span> 
+                            </p>
 
+                        </div>
 
+                        <div class="content__item-info__data">
 
+                            <p>9-08-2016</p>
 
+                            <p>
 
+                                <span class="material-icons likes">favorite</span> 
+                                <span>67</span> 
+                                <span class="material-icons comments">chat_bubble</span>
 
+                                <span>22</span> 
+                            </p>
 
+                        </div>
 
+                        <div class="content__item-info__data">
 
+                            <p>Image upload</p>
 
+                            <p>11-04-2016</p>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="content__item">
 
+                    <div class="content__item-img">
 
+                        <img src="./images/content-img1.jpg" alt="" />
 
+                    </div>
 
+                    <div class="content__item-info">
 
+                        <div class="content__item-info__data">
 
+                            <p>Today</p>
 
+                            <p>
 
+                                <span class="material-icons likes">favorite</span> 
+                                <span>128</span>  
+                                <span class="material-icons comments">chat_bubble</span>
 
+                                <span>31</span> 
+                            </p>
 
+                        </div>
 
+                        <div class="content__item-info__data">
 
+                            <p>9-08-2016</p>
 
+                            <p>
 
+                                <span class="material-icons likes">favorite</span> 
+                                <span>67</span> 
+                                <span class="material-icons comments">chat_bubble</span>
 
+                                <span>22</span> 
+                            </p>
 
+                        </div>
 
+                        <div class="content__item-info__data">
 
+                            <p>Image upload</p>
 
+                            <p>11-04-2016</p>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="content__item">
 
+                    <div class="content__item-img">
 
+                        <img src="./images/content-img1.jpg" alt="" />
 
+                    </div>
 
+                    <div class="content__item-info">
 
+                        <div class="content__item-info__data">
 
+                            <p>Today</p>
 
+                            <p>
 
+                                <span class="material-icons likes">favorite</span> 
+                                <span>128</span>  
+                                <span class="material-icons comments">chat_bubble</span>
 
+                                <span>31</span> 
+                            </p>
 
+                        </div>
 
+                        <div class="content__item-info__data">
 
+                            <p>9-08-2016</p>
 
+                            <p>
 
+                                <span class="material-icons likes">favorite</span> 
+                                <span>67</span> 
+                                <span class="material-icons comments">chat_bubble</span>
 
+                                <span>22</span> 
+                            </p>
 
+                        </div>
 
+                        <div class="content__item-info__data">
 
+                            <p>Image upload</p>
 
+                            <p>11-04-2016</p>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="content__item">
 
+                    <div class="content__item-img">
 
+                        <img src="./images/content-img1.jpg" alt="" />
 
+                    </div>
 
+                    <div class="content__item-info">
 
+                        <div class="content__item-info__data">
 
+                            <p>Today</p>
 
+                            <p>
 
+                                <span class="material-icons likes">favorite</span> 
+                                <span>128</span>  
+                                <span class="material-icons comments">chat_bubble</span>
 
+                                <span>31</span> 
+                            </p>
 
+                        </div>
 
+                        <div class="content__item-info__data">
 
+                            <p>9-08-2016</p>
 
+                            <p>
 
+                                <span class="material-icons likes">favorite</span> 
+                                <span>67</span> 
+                                <span class="material-icons comments">chat_bubble</span>
 
+                                <span>22</span> 
+                            </p>
 
+                        </div>
 
+                        <div class="content__item-info__data">
 
+                            <p>Image upload</p>
 
+                            <p>11-04-2016</p>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="content__item">
 
+                    <div class="content__item-img">
 
+                        <img src="./images/content-img1.jpg" alt="" />
 
+                    </div>
 
+                    <div class="content__item-info">
 
+                        <div class="content__item-info__data">
 
+                            <p>Today</p>
 
+                            <p>
 
+                                <span class="material-icons likes">favorite</span> 
+                                <span>128</span>  
+                                <span class="material-icons comments">chat_bubble</span>
 
+                                <span>31</span> 
+                            </p>
 
+                        </div>
 
+                        <div class="content__item-info__data">
 
+                            <p>9-08-2016</p>
 
+                            <p>
 
+                                <span class="material-icons likes">favorite</span> 
+                                <span>67</span> 
+                                <span class="material-icons comments">chat_bubble</span>
 
+                                <span>22</span> 
+                            </p>
 
+                        </div>
 
+                        <div class="content__item-info__data">
 
+                            <p>Image upload</p>
 
+                            <p>11-04-2016</p>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="content__item">
 
+                    <div class="content__item-img">
 
+                        <img src="./images/content-img1.jpg" alt="" />
 
+                    </div>
 
+                    <div class="content__item-info">
 
+                        <div class="content__item-info__data">
 
+                            <p>Today</p>
 
+                            <p>
 
+                                <span class="material-icons likes">favorite</span> 
+                                <span>128</span>  
+                                <span class="material-icons comments">chat_bubble</span>
 
+                                <span>31</span> 
+                            </p>
 
+                        </div>
 
+                        <div class="content__item-info__data">
 
+                            <p>9-08-2016</p>
 
+                            <p>
 
+                                <span class="material-icons likes">favorite</span> 
+                                <span>67</span> 
+                                <span class="material-icons comments">chat_bubble</span>
 
+                                <span>22</span> 
+                            </p>
 
+                        </div>
 
+                        <div class="content__item-info__data">
 
+                            <p>Image upload</p>
 
+                            <p>11-04-2016</p>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="content__item">
 
+                    <div class="content__item-img">
 
+                        <img src="./images/content-img1.jpg" alt="" />
 
+                    </div>
 
+                    <div class="content__item-info">
 
+                        <div class="content__item-info__data">
 
+                            <p>Today</p>
 
+                            <p>
 
+                                <span class="material-icons likes">favorite</span> 
+                                <span>128</span>  
+                                <span class="material-icons comments">chat_bubble</span>
 
+                                <span>31</span> 
+                            </p>
 
+                        </div>
 
+                        <div class="content__item-info__data">
 
+                            <p>9-08-2016</p>
 
+                            <p>
 
+                                <span class="material-icons likes">favorite</span> 
+                                <span>67</span> 
+                                <span class="material-icons comments">chat_bubble</span>
 
+                                <span>22</span> 
+                            </p>
 
+                        </div>
 
+                        <div class="content__item-info__data">
 
+                            <p>Image upload</p>
 
+                            <p>11-04-2016</p>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+
 
+            </div>
 
+        </section>    
+        <section class="load-more">
 
+            <button class="load-more__button">Load more</button>
 
+        </section>
 
+    </main>
 
+    <script src="./scripts/main.js"></script>
 
+</body>
 
+</html>

File diff suppressed because it is too large
+ 6754 - 0
package-lock.json


+ 18 - 0
package.json
View File 

@@ -0,0 +1,18 @@
 
+{
 
+  "name": "monblanproject",
 
+  "version": "1.0.0",
 
+  "description": "",
 
+  "main": "index.js",
 
+  "scripts": {
 
+    "start": "parcel index.html",
 
+    "build": "parcel build index.html"
 
+  },
 
+  "author": "",
 
+  "license": "ISC",
 
+  "devDependencies": {
 
+    "parcel": "^1.12.4"
 
+  },
 
+  "dependencies": {
 
+    "flatpickr": "^4.6.3"
 
+  }
 
+}

+ 46 - 0
scripts/main.js
View File 

@@ -0,0 +1,46 @@
 
+import flatpickr from 'flatpickr';
 
+
 
+const initSwitcher = (gridMode, listMode, content) => {
 
+    const activeClass = 'active';
 
+    const displayList = 'display_list';
 
+    const displayGrid = 'display_grid';
 
+
 
+    const toggleSwitch = (btn, className) => {
 
+        btn.classList.toggle(activeClass);
 
+        content.classList.toggle(className);
 
+    };
 
+
 
+    let active = listMode;
 
+
 
+    const eventListener = (oldBtn, oldClass, newBtn, newClass) => {
 
+        return () => {
 
+            if(active !== newBtn) {
 
+                active = newBtn;
 
+                // remove old state
 
+                toggleSwitch(oldBtn, oldClass);
 
+                // add new state
 
+                toggleSwitch(newBtn, newClass);
 
+            }
 
+        };
 
+    };
 
+
 
+    gridMode.addEventListener('click', eventListener(listMode, displayList, gridMode, displayGrid));
 
+    listMode.addEventListener('click', eventListener(gridMode, displayGrid, listMode, displayList));
 
+};
 
+
 
+initSwitcher(
 
+    document.getElementById('mode-switcher-grid'),
 
+    document.getElementById('mode-switcher-list'),
 
+    document.getElementById('content')
 
+);
 
+
 
+const initDatepicker = (id) => {
 
+    flatpickr(id, { 
+        dateFormat: "Y-m-d", 
+        wrap: true, 
+        weekNumbers: true 
+    });
 
+};
 
+
 
+initDatepicker('#from-date');
 
+initDatepicker('#to-date');

+ 50 - 0
styles/fonts.css
View File 

@@ -0,0 +1,50 @@
 
+@font-face {
 
+    font-family: "MyriadProRegular";
 
+    src: url("../fonts/MyriadProRegular/MyriadProRegular.eot");
 
+    src: url("../fonts/MyriadProRegular/MyriadProRegular.eot?#iefix")format("embedded-opentype"),
 
+    url("../fonts/MyriadProRegular/MyriadProRegular.woff") format("woff"),
 
+    url("../fonts/MyriadProRegular/MyriadProRegular.ttf") format("truetype");
 
+    font-style: normal;
 
+    font-weight: normal;
 
+}
 
+
 
+@font-face {
 
+    font-family: "ProximaNovaRegular";
 
+    src: url("../fonts/ProximaNovaRegular/ProximaNovaRegular.eot");
 
+    src: url("../fonts/ProximaNovaRegular/ProximaNovaRegular.eot?#iefix")format("embedded-opentype"),
 
+    url("../fonts/ProximaNovaRegular/ProximaNovaRegular.woff") format("woff"),
 
+    url("../fonts/ProximaNovaRegular/ProximaNovaRegular.ttf") format("truetype");
 
+    font-style: normal;
 
+    font-weight: normal;
 
+}
 
+
 
+/* font-family: "ProximaNovaBold"; */
 
+@font-face {
 
+    font-family: "ProximaNovaBold";
 
+    src: url("../fonts/ProximaNovaBold/ProximaNovaBold.eot");
 
+    src: url("../fonts/ProximaNovaBold/ProximaNovaBold.eot?#iefix")format("embedded-opentype"),
 
+    url("../fonts/ProximaNovaBold/ProximaNovaBold.woff") format("woff"),
 
+    url("../fonts/ProximaNovaBold/ProximaNovaBold.ttf") format("truetype");
 
+    font-style: normal;
 
+    font-weight: normal;
 
+}
 
+
 
+@font-face {
 
+    font-family: "HelveticaNeueRegular";
 
+    src: url("../fonts/HelveticaNeueRegular/HelveticaNeue.eot");
 
+    src: url("../fonts/HelveticaNeueRegular/HelveticaNeue.eot?#iefix")format("embedded-opentype"),
 
+    url("../fonts/HelveticaNeueRegular/HelveticaNeue.woff") format("woff"),
 
+    url("../fonts/HelveticaNeueRegular/HelveticaNeue.ttf") format("truetype");
 
+    font-style: normal;
 
+    font-weight: normal;
 
+}
 
+
 
+@font-face {
 
+    font-family: "HelveticaNeueBold";
 
+    src: url("../fonts/HelveticaNeueBold/HelveticaNeue-Bold.eot");
 
+    src: url("../fonts/HelveticaNeueBold/HelveticaNeue-Bold.eot?#iefix")format("embedded-opentype"),
 
+    url("../fonts/HelveticaNeueBold/HelveticaNeue-Bold.woff") format("woff"),
 
+    url("../fonts/HelveticaNeueBold/HelveticaNeue-Bold.ttf") format("truetype");
 
+    font-style: normal;
 
+    font-weight: normal;
 
+}

+ 318 - 0
styles/index.css
View File 

@@ -0,0 +1,318 @@
 
+@import "../node_modules/flatpickr/dist/flatpickr.min";
 
+@import "./fonts";
 
+
 
+.flatpickr-input{
 
+    outline: none;
 
+}
 
+
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+    box-sizing: border-box;
 
+}
 
+
 
+body {
 
+    background-color: #fafafa;
 
+    font-size: 15px;
 
+}
 
+
 
+.container {
 
+    max-width: 935px;
 
+    margin: 0 auto;
 
+    width: 100%;
 
+}
 
+
 
+.decoration img{
 
+    position: absolute;
 
+    z-index: -2;
 
+}
 
+
 
+.decoration img:first-child {
 
+    top: 0;
 
+    left: -3%;
 
+}
 
+
 
+.decoration img:last-child {
 
+    right: 0;
 
+    bottom: -75%;
 
+}
 
+
 
+
 
+header {
 
+    width: 100%;
 
+    position: absolute;
 
+    top: 0;
 
+    left: 0;
 
+    right: 0;
 
+    height: 200px;
 
+    background-color: rgba(255, 255, 255, 0.6);
 
+    box-shadow: 0px 6px 24px 0px rgba(0,0,0,0.06);
 
+}
 
+
 
+header > .container {
 
+    display: flex;
 
+    padding: 15px 70px 0 70px;
 
+}
 
+
 
+header .logo {
 
+    margin-right: 100px;
 
+}
 
+
 
+.profile {
 
+    display: flex;
 
+    flex-direction: column;
 
+    justify-content: space-between;
 
+    height: 116px;
 
+    margin-top: 30px;
 
+}
 
+
 
+.profile .profile__info {
 
+    display: flex;
 
+    align-items: center;
 
+}
 
+.profile .profile__username {
 
+    font-family: 'MyriadProRegular', serif;
 
+    font-size: 2.3em;
 
+    text-transform: lowercase;
 
+    margin-right: 20px;
 
+
 
+}
 
+
 
+.profile .profile__start-date {
 
+    font-family: 'HelveticaNeueRegular', serif;
 
+    font-size: 1em;
 
+    text-transform: capitalize;
 
+    color: #4090db;
 
+    border: 1px solid #4090db;
 
+    padding: 10px 12px;
 
+    border-radius: 3px;
 
+}
 
+
 
+.profile .profile__stats p {
 
+    font-family: 'ProximaNovaRegular', serif;
 
+    font-size: 1.1em;
 
+    display: inline-block;
 
+    margin-right: 30px;
 
+}
 
+
 
+.profile .profile__stats p > span {
 
+    font-family: 'ProximaNovaBold', serif;
 
+}
 
+
 
+.profile .profile__date-select > .profile__date-select__name {
 
+    font-family: 'Tahoma', serif;
 
+}
 
+
 
+.profile__date-select__input {
 
+    display: inline-block;
 
+    position: relative;
 
+}
 
+.profile .profile__date-select input {
 
+    width: 180px;
 
+    padding: 8px 9px;
 
+    border-radius: 3px;
 
+    border: 1px solid #cccccc;
 
+    margin-left: 25px;
 
+}
 
+
 
+.profile .profile__date-select button {
 
+    position: absolute;
 
+    top: 1px;
 
+    bottom: 1px;
 
+    right: 1px;
 
+    border-radius: 0 2px 2px 0;
 
+    border: none;
 
+    border-left: 1px solid #cccccc;
 
+    padding: 6px;
 
+    background-color: #ebebeb;
 
+    color: #7c7c7c;
 
+    user-select: none;
 
+    cursor: pointer;
 
+    outline: none;
 
+}
 
+
 
+main {
 
+    margin-top: 200px;
 
+}
 
+.mode-switcher {
 
+    padding: 20px 0;
 
+}
 
+
 
+.mode-switcher .container {
 
+    display: flex;
 
+    justify-content: flex-end;
 
+}
 
+
 
+.mode-switcher .mode-switcher__items{
 
+    display: flex;
 
+}
 
+
 
+.mode-switcher__items-grid, .mode-switcher__items-list {
 
+    margin-left: 20px;
 
+    width: 25px;
 
+    height: 26px;
 
+    display: flex;
 
+    justify-content: space-between;
 
+    flex-wrap: wrap;
 
+    cursor: pointer;
 
+}
 
+
 
+.mode-switcher__items-grid.active div, .mode-switcher__items-list.active div {
 
+    background-color: #3b8ede;
 
+}
 
+
 
+.mode-switcher__items-grid div, .mode-switcher__items-list div {
 
+    width: 7px;
 
+    height: 7px;
 
+    background-color: #cccccc;
 
+    border-radius: 1px;
 
+}
 
+
 
+
 
+.mode-switcher__items-list div:nth-child(2n) {
 
+    width: 16px;
 
+}
 
+
 
+/* ===========================DISPLAY LIST================= */
 
+.content.display_list .content__item {
 
+    width: 100%;
 
+    background-color: #fff;
 
+    border-radius: 2px;
 
+    display: flex;
 
+    margin-bottom: 10px;
 
+}
 
+
 
+.content.display_list .content__item-img {
 
+    display: inline-block;
 
+    width: 95px;
 
+    height: 95px;
 
+}
 
+
 
+.content.display_list .content__item-img img {
 
+    width: 100%;
 
+    height: 100%;
 
+}
 
+
 
+.content.display_list .content__item-info {
 
+    width: 90%;
 
+    display: flex;
 
+    justify-content: space-around;
 
+    /* margin: 0 auto; */
 
+}
 
+
 
+.content .content__item-info .content__item-info__data {
 
+    margin-top: 15px;
 
+    font-family: 'HelveticaNeueBold'; /* HELWETICA CE BOLD*/
 
+    font-size: 1.1em;
 
+}
 
+
 
+.content.display_list  .content__item-info .content__item-info__data p:first-child {
 
+    margin-bottom: 15px;
 
+}
 
+
 
+.content .content__item-info .content__item-info__data p:last-child {
 
+    display: flex!important;
 
+    align-items: center;
 
+}
 
+
 
+.content .content__item-info .content__item-info__data p:last-child span.material-icons {
 
+    margin-right: 6px;
 
+}
 
+.content .content__item-info .content__item-info__data p:last-child span.comments {
 
+    margin-left: 30px;
 
+    transform: scale(-1,1);
 
+}
 
+
 
+/* ===========================DISPLAY GRID================= */
 
+
 
+.content.display_grid .container{
 
+    display: flex;
 
+    justify-content: space-between;
 
+    flex-wrap: wrap;
 
+}
 
+
 
+.content.display_grid .content__item {
 
+    width: 293px;
 
+    height: 293px;
 
+    position: relative;
 
+    margin-bottom: 30px;
 
+    cursor: pointer;
 
+}
 
+
 
+.content.display_grid .content__item-img {
 
+    position: absolute;
 
+    top: 0;
 
+    left: 0;
 
+    width: 100%;
 
+    z-index: -1;
 
+    height: 100%;
 
+}
 
+
 
+.content.display_grid .content__item-info {
 
+    opacity: 0;
 
+    /* display: none; */
 
+    position: absolute;
 
+    background-color: rgba(0,0,0,0.5);
 
+    padding: 20px;
 
+    height: 100%;
 
+    width: 100%;
 
+    bottom: 0;
 
+    display: flex;
 
+    flex-direction: column;
 
+    justify-content: flex-end;
 
+    transition: opacity 0.3s ease-in;
 
+}
 
+
 
+.content.display_grid .content__item:hover .content__item-info {
 
+    opacity: 1;
 
+}
 
+.content.display_grid .content__item-info .content__item-info__data {
 
+    width: 100%;
 
+    display: flex;
 
+}
 
+
 
+.content.display_grid .content__item-info .content__item-info__data:last-child {
 
+    justify-content: center;
 
+}
 
+
 
+.content.display_grid .content__item-info .content__item-info__data p {
 
+    color: #fff;
 
+}
 
+
 
+
 
+.content.display_grid .content__item-info .content__item-info__data p:first-child {
 
+    width: 40%;
 
+    display: inline-block;
 
+    color: #fff;
 
+}
 
+
 
+
 
+.content.display_grid .content__item-info .content__item-info__data:last-child p:first-child {
 
+    width: auto;
 
+}
 
+
 
+.content.display_grid .content__item-info .content__item-info__data:last-child p:first-child::after {
 
+    content: ':';
 
+    margin-right: 7px;
 
+}
 
+
 
+/* BUTTON */
 
+
 
+.load-more {
 
+    width: 100%;
 
+    margin: 45px 0 75px 0;
 
+}
 
+
 
+.load-more .load-more__button {
 
+    outline: none;
 
+    display: block;
 
+    margin: 0 auto;
 
+    font-family: 'ProximaNovaRegular';
 
+    font-size: 0.8em;
 
+    text-transform: uppercase;
 
+    background: none;
 
+    border: 1px solid #000;
 
+    border-radius: 30px;
 
+    padding: 10px 30px;
 
+    cursor: pointer;
 
+}

+ 114 - 0
styles/reponsive.css
View File 

@@ -0,0 +1,114 @@
 
+@media screen and (max-width: 935px) {
 
+    .container {
 
+        padding-left: 3%;
 
+        padding-right: 3%;
 
+    }
 
+
 
+    .decoration {
 
+        display: none;
 
+    }
 
+}
 
+
 
+@media screen and (max-width: 840px) {
 
+    header {
 
+        height: 420px;
 
+    }
 
+
 
+    header .logo {
 
+        transform: scale(0.7);
 
+        margin: 0;
 
+    }
 
+
 
+    header .container {
 
+        padding: 0 3%;
 
+        max-width: 100%;
 
+        display: flex;
 
+        flex-direction: column;
 
+        justify-content: center;
 
+        align-items: center;
 
+    }
 
+
 
+    header .profile {
 
+        font-size: 14px;
 
+        margin-top: 0;
 
+    }
 
+
 
+    header .profile .profile__info {
 
+        display: block;
 
+        text-align: center;
 
+    }
 
+
 
+    header .profile .profile__info .profile__username {
 
+        margin-right: 0;
 
+        margin-bottom: 17px;
 
+    }
 
+    
+    header .profile__stats, header .profile__date-select {
 
+        display: flex;
 
+        justify-content: space-between;
 
+        width: 90%;
 
+        margin: 0 auto;
 
+        margin-top: 20px;
 
+    }
 
+
 
+    header .profile__date-select {
 
+        display: block;
 
+    }
 
+    header .profile__date-select .profile__date-select__input {
 
+        margin: 7px 0;
 
+        width: 100%;
 
+        display: block;
 
+    }
 
+
 
+    header .profile__date-select .profile__date-select__input input {
 
+        margin-left: 0;
 
+        width: 100%;
 
+    }
 
+    header .profile .profile__stats > p {
 
+        margin-right: 0;
 
+    }
 
+
 
+    main {
 
+        margin-top: 420px;
 
+        font-size: 12px;
 
+    }
 
+
 
+}
 
+
 
+@media screen and (max-width: 630px) {
 
+    .material-icons {
 
+        font-size: 17px!important;
 
+    }
 
+    .content.display_grid .container {
 
+        width: auto;
 
+        justify-content: center;
 
+    }
 
+
 
+    .content.display_list .content__item {
 
+        height: auto;
 
+    }
 
+    .content.display_list .content__item-img {
 
+        display: inline-block;
 
+        min-width: 120px;
 
+        min-height: 120px;
 
+        margin-right: 20px;
 
+    }
 
+
 
+    .content.display_list .content__item-info {
 
+        display: inline-block;
 
+    }
 
+    .content.display_list .content__item-info__data {
 
+        width: 100%;
 
+        margin: 0;
 
+    }
 
+
 
+    .content.display_list .content__item-info .content__item-info__data p {
 
+        font-size: 12px;
 
+    }
 
+    .content.display_list .content__item-info .content__item-info__data p:first-child {
 
+        margin: 3px 0 5px 0;
 
+        font-size: 12px;
 
+    }
 
+    
+
 
+}