poster

add poster skelet

poster
add poster skelet
50bf5bd7 · tolyakryv · 1bf70669 · 50bf5bd7 · 50bf5bd7 · 1bf70669
Commit 50bf5bd7 authored 2 years ago by tolyakryv
--- a/src/html/one-card-modal.html
+++ b/src/html/one-card-modal.html
+<img src="#" alt="poster" />
+<h2>name</h2>
+<dl>
+  <dt>Vote / Votes</dt>
+  <dd>'.../...'</dd>
+  <dt>Popularity</dt>
+  <dd>100.2</dd>
+  <dt>Original Title</dt>
+  <dd>A FISTFUL OF LEAD</dd>
+  <dt>Genre</dt>
+  <dd>Western</dd>
+</dl>
+<h3>About</h3>
+<p>
+  Four of the West’s most infamous outlaws assemble to steal a huge stash of gold from the most
+  corrupt settlement of the gold rush towns. But not all goes to plan one is killed and the other
+  three escapes with bags of gold hide out in the abandoned gold mine where they happen across
+  another gang of three – who themselves were planning to hit the very same bank! As tensions rise,
+  things go from bad to worse as they realise the bags of gold are filled with lead... they’ve been
+  double crossed – but by who and how?
+</p>
+<button>add to Watched</button>
+<button>add to queue</button>
--- a/src/html/one-card-preview.html
+++ b/src/html/one-card-preview.html
+<div class="container-card-preview">
+  <img src="images/Rectangle.jpg" alt="poster" class="card-preview__poster" />
+
+  <h2 class="card-preview-info__name">name</h2>
+  <div class="card-preview-info">
+    <p class="card-preview-info__data">Genre | years</p>
+    <span class="card-preview-info__rating">rating</span>
+  </div>
+</div>
--- a/src/html/one-card.html
+++ b/src/html/one-card.html
-<div class="container conteiner_card">
-  <img src="#" alt="poster" />
-  <h2>name</h2>
-  <p>Genre</p>
-  <p>years</p>
-  <p>rating</p>
-</div>
--- a/src/images/Rectangle.jpg
+++ b/src/images/Rectangle.jpg
--- a/src/index.html
+++ b/src/index.html
@@ -20,7 +20,8 @@
  <body>
    <!-- Так добавляются фрагменты в главные HTML-файлы страниц. -->
    <!-- <include src="./partials/example.html"></include> -->
-    <include src="./html/one-card.html"></include>
+    <include src="./html/one-card-preview.html"></include>
+    <!-- <include src="./html/one-card-modal.html"></include> -->

    <!-- Скрипт идёт последним в разметке. В нём уже подключен главный SASS-файл. -->
    <script src="./index.js"></script>

--- a/src/sass/components/_one-card-modal.scss
+++ b/src/sass/components/_one-card-modal.scss
--- a/src/sass/components/_one-card-preview.scss
+++ b/src/sass/components/_one-card-preview.scss
+
+.container-card-preview{
+height: 445px;
+margin-left: auto;
+margin-right: auto;
+  width: 320px;
+  padding: 0 20px;
+@media screen and (min-width: 480px) {
+ margin-top: 20px;
+width: 324px;
+padding: 0 15px;
+}
+
+@media screen and (min-width: 768px) {
+  margin-top: 30px;
+  width: 304px;
+
+}
+
+// @media screen and (min-width: 1024px) {
+
+// }
+}
+.card-preview__poster{
+  width: 100%;
+  height: 398px;
+
+}
+.card-preview-info{
+
+  display: flex;
+  font-size: 12px;
+  line-height: 1.33;
+
+}
+.card-preview-info__name{
+  margin: 10px 0 0 0 ;
+  font-size: 12px;
+  line-height: 1.33;
+
+}
+.card-preview-info__data{
+  color: $accent-color;
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.33;
+  margin-right: 10px;
+}
+.card-preview-info__rating{
+  padding: 1px 9px 1px 10px;
+  background-color:  $accent-color;
+  color: $primary-white-color;
+  border-radius: 5px;
+line-height: 1.16;
+}
\ No newline at end of file
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -6,3 +6,5 @@
 // Стили для файла с примером HTML-фрагмента
 @import './variables';
 @import './utility-classes';
+@import './components/one-card-preview';
+@import './components/one-card-modal';