diff --git a/task3/css/style.css b/task3/css/style.css new file mode 100644 index 0000000..16a6f2c --- /dev/null +++ b/task3/css/style.css @@ -0,0 +1,304 @@ +html{ + overflow-x: hidden; + overflow-y: hidden; +} +body{ + width: 100vw; + height: 100vh; + margin: 0; +} + +.main{ + width: 100vw; + height: 100vh; +} + +.main-header{ + width: 100vw; + height: 8vh; + border: none; + background: url("../img/header.jpg") no-repeat; + background-size: 100% 100%; +} + +.ver-button{ + width: 10%; + height: 50%; + margin: 1% 0 0 87%; + background-color: rgb(0, 163, 232); + border-radius: 10px; + text-align: center; + font-size: 1.1vw; +} + +.filter-page-part{ + width: 100vw; + height: 85vh; + border: none; + background: url("../img/bl.jpg") no-repeat; + background-size: 100% 100%; +} + +.question-user{ + width: 20%; + height: 10.5%; + background-color: rgb(200, 191, 231); + float:left; + margin-top: 1.6%; + margin-left: 4%; + border-radius: 10px; + border: 3px solid #000; + text-align: center; + display: flex; + align-items: center; + font-weight: bold; + font-size: 1.3vw; +} + +.filters-block{ + width: 30%; + height: 16.5%; + border: 3px solid #000; + float:left; + margin-top: 0.6%; + margin-left: 6%; + border-radius: 10px; + background-color: rgb(200, 191, 231); + padding: 0.2%; + padding-top: 0.7%; +} +.filter-single{ + width:100%; + height:30%; +} +#cb-author{ + width:3vw; + height: 3vh; + margin-top:4.4%; +} +.cb{ + float:left; + width:15%; + height:50%; + margin-left: 0%; +} +.label-filter{ + padding:1.2%; + width:35%; + height:50%; + float:left; +} +.filter-text-input{ + margin-top:1%; + font-size: 0.8vw; +} + +.text-of-filters{ + font-size:1.1vw; +} + +.filter-input-part{ + height:95%; + width:80%; + + float: left; +} +#cb-date{ + width:3vw; + height: 3vh; +} +#cb-hashtag{ + width:3vw; + height: 3vh; +} +.block-filter-button{ + height: 95%; + width:17%; + float:right; +} +.filter-button{ + width: 85%; + height: 50.5%; + background-color: rgb(200, 191, 231); + margin-top: 31.4%; + margin-left: 6%; + border-radius: 0.6vw; + font-size: 1.0vw; +} +.add-post-button{ + width: 17%; + height: 10.5%; + background-color: rgb(200, 191, 231); + float: right; + margin-top: 1.6%; + margin-right: 4%; + border-radius: 1.6vw; + font-size: 1.7vw; +} +.cards { + + width: 35vw; + height: 100vw; + position: absolute; + top: -44%; + left: 32.5%; + overflow-x: hidden; + overflow-y: scroll; + transform: rotate(270deg); +} +.cards::-webkit-scrollbar { + display: none; +} +.cards-content { + background-color: rgb(200, 191, 231); + width: 23vw; + height: 30vw; + margin: 3px auto; + transform: rotate(90deg); + border-radius: 10px; + border: 3px solid #000; + +} + +.post-header{ + + width: 95%; + height: 10%; + margin:auto; + +} + +.edit-button{ + outline: none; + width: 15%; + height: 90%; + float:right; + margin-top:1%; +} +.post-hashtags{ + margin-left: 6%; + width: 55%; + height: 90%; + display:inline-block; + font-size: 1vw; + font-style:italic; + overflow:hidden; + margin-top: 2%; +} +.delete-button{ + outline: none; + width: 15%; + height: 90%; + margin-left: 1%; + margin-top:2%; + float: left; +} +.del-add-post-image{ + width: 95%; + height: 95%; +} +.like-post-image{ + width: 95%; + height: 95%; +} +.like-button{ + outline: none; + width: 23%; + margin-left: 2%; + margin-top: 2%; + float:left; +} +.like-and-comment{ + width: 98%; + height: 16.5%; +} +.image-post{ + margin-top: 1%; + margin-left: 14%; + width: 70%; +} +.post-body{ + height: 66%; + width: 100%; +} +.comments{ + width: 67%; + height: 72.6%; + margin-left: 4%; + margin-top: 2%; + border: 0.2vw solid black; + border-radius: 1vw; + padding: 1%; + background-color: rgb(200, 191, 231); + font-size: 1vw; + overflow:hidden; + float: left; +} +.logged-user{ + + height: 80%; + width: 15%; + margin-left: 83% +} +.user-avatar{ + height:88%; + width:22%; + margin-top: 3%; + background: url("../img/av1.png") no-repeat; + background-size: 100% 100%; + float: left +} +.user-name{ + margin-top: 5%; + float:left; + height:88%; + width:76%; + text-align: center; + font-size: 2vw; + font-weight:bold + +} +.post-data{ + + margin-top: 1%; + margin-left: 2%; + width: 70%; + float: left; + height: 6%; + background-color: rgb(200, 191, 231); + text-align: left; + font-size: 1.3vw; + font-style:italic +} +.post-name{ + margin-top: 1%; + margin-left: 1%; + width: 25%; + height: 6%; + float: left; + background-color: rgb(200, 191, 231); + text-align: right; + font-size: 1.3vw; + font-weight:bold +} +.main-footer{ + width: 100vw; + height: 7vh; + border: none; + background: url("../img/footer.jpg") no-repeat; + background-size: 100% 100%; + alignment: bottom; + padding-top: 1%; + padding-left: 0.5%; +} +.text-footer-date{ + opacity: 0.7; + font-size: 1.0vw; + float: left; +} + +.text-footer-creator{ + opacity: 0.9; + font-size: 1.0vw; + margin-left: 79%; +} diff --git a/task3/img/av1.png b/task3/img/av1.png new file mode 100644 index 0000000..e337615 Binary files /dev/null and b/task3/img/av1.png differ diff --git a/task3/img/av2.png b/task3/img/av2.png new file mode 100644 index 0000000..5b3b82e Binary files /dev/null and b/task3/img/av2.png differ diff --git a/task3/img/avatar.png b/task3/img/avatar.png new file mode 100644 index 0000000..f2e96bc Binary files /dev/null and b/task3/img/avatar.png differ diff --git a/task3/img/bl.jpg b/task3/img/bl.jpg new file mode 100644 index 0000000..938babc Binary files /dev/null and b/task3/img/bl.jpg differ diff --git a/task3/img/brush.png b/task3/img/brush.png new file mode 100644 index 0000000..0f1ea10 Binary files /dev/null and b/task3/img/brush.png differ diff --git a/task3/img/cross.png b/task3/img/cross.png new file mode 100644 index 0000000..beb1a48 Binary files /dev/null and b/task3/img/cross.png differ diff --git a/task3/img/footer.jpg b/task3/img/footer.jpg new file mode 100644 index 0000000..0565037 Binary files /dev/null and b/task3/img/footer.jpg differ diff --git a/task3/img/header.jpg b/task3/img/header.jpg new file mode 100644 index 0000000..c6224e6 Binary files /dev/null and b/task3/img/header.jpg differ diff --git a/task3/img/like.svg b/task3/img/like.svg new file mode 100644 index 0000000..a1d32f5 --- /dev/null +++ b/task3/img/like.svg @@ -0,0 +1,17 @@ + + + + + background + + + + + + + Layer 1 + + + + + \ No newline at end of file diff --git a/task3/img/naruto.png b/task3/img/naruto.png new file mode 100644 index 0000000..2029821 Binary files /dev/null and b/task3/img/naruto.png differ diff --git a/task3/img/sham.png b/task3/img/sham.png new file mode 100644 index 0000000..3920c9d Binary files /dev/null and b/task3/img/sham.png differ diff --git a/task3/mainPage.html b/task3/mainPage.html new file mode 100644 index 0000000..808b495 --- /dev/null +++ b/task3/mainPage.html @@ -0,0 +1,266 @@ + + + + + + Title + + + +
+
+
+
+
Seal98
+
+
+
+ +
+
+
+
+ Delete +
#hashtag #hashtag #hashtag #hashtag #hashtag #hashtag
+ Edit +
+
+ +
+ +
12.12.2012
+
Misha2018
+
+
+
+ Delete +
#hashtag #hashtag #hashtag #hashtag #hashtag #hashtag
+ Edit +
+
+ +
+ +
12.12.2013
+
Misha2019
+
+
+
+ Delete +
#hashtag #hashtag #hashtag #hashtag #hashtag #hashtag
+ Edit +
+
+ +
+ +
12.12.2014
+
Misha20
+
+
+
+ Delete +
#hashtag #hashtag #hashtag #hashtag #hashtag #hashtag
+ Edit +
+
+ +
+ +
12.12.2015
+
Misha21
+
+
+
+ Delete +
#hashtag #hashtag #hashtag #hashtag #hashtag #hashtag
+ Edit +
+
+ +
+ +
12.12.2016
+
Misha22
+
+
+
+ Delete +
#hashtag #hashtag #hashtag #hashtag #hashtag #hashtag
+ Edit +
+
+ +
+ +
12.12.2017
+
Misha23
+
+
+
+ Delete +
#hashtag #hashtag #hashtag #hashtag #hashtag #hashtag
+ Edit +
+
+ +
+ +
12.12.2018
+
Misha24
+
+
+
+ Delete +
#hashtag #hashtag #hashtag #hashtag #hashtag #hashtag
+ Edit +
+
+ +
+ +
12.12.2019
+
Misha25
+
+
+
+ Delete +
#hashtag #hashtag #hashtag #hashtag #hashtag #hashtag
+ Edit +
+
+ +
+ +
12.12.2020
+
Misha26
+
+ + +
+ +
+ + + + +