strona internetowa

Question

Witam, tworzę właśnie stronę internetową w wordpressie i wgląda ona tak:

 

jakie zmiany polecacie mi wprowadzić aby wyglądała ona lepiej?

Comments

Jeśli prosisz o ocenę strony, to wygodniej by było podać do niej link (do własnego serwera, czy to na np. CodePen lub GitHub Pages), żeby można było sprawdzić ją dokładniej niż tylko po samych screenach.

Answer 1

Zdecydowanie lepiej strona wyglądałaby z transparentnymi opisami sprzętu. Zmiana czcionki również poprawiłaby efekty wizualne, ewentualnie dodać jakąś responsywność, aby te całe definicje z wikipedii miały jakieś dodatkowe elementy obok siebie, żeby nie było dużo pustej przestrzeni. Dodatkową opcją byłoby dodanie takich "pasków" lub ramek (do 5px) oddzielających obrazki, ponieważ jeśli się na siebie nachodzą, strona wygląda(moim zdaniem) źle.

Answer 2

Ta jak napisał

@Oskarejro,

Zdecydowanie lepiej strona wyglądałaby z transparentnymi opisami sprzętu

też tak myślę i jeszcze jakiś margines (padding, margin => css), np.:

<div class="description">
  <h3>Laptop</h3>
  <p>Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu</p>
  <img src="https://c.pxhere.com/photos/e0/a2/apple_desk_desktop_digital_iphone_macbook_pro_mockup_notebook-978945.jpg!d" srcset="https://c.pxhere.com/photos/e0/a2/apple_desk_desktop_digital_iphone_macbook_pro_mockup_notebook-978945.jpg!d" alt="The free high-resolution photo of laptop, iphone, desk, notebook, screen, apple, technology" />
</div>

body {
  background-image: url(https://images.freeimages.com/images/large-previews/48f/london-by-a-day-3-1562917.jpg);
}
 
.description {
  background-color: rgba(255,255,255,0.85);
  color: black;
  padding: 1em;
  margin: 1em;
}
.description img {
  width: 100%;
  height: 300px;
  border: 2px solid rgba(255,255,255,0.5);
}

 

Comments

Na tło można "użyć" filter

 

np. 

<div class="description">
  <h3>Laptop</h3>
  <p>Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu</p>
  <img src="https://c.pxhere.com/photos/e0/a2/apple_desk_desktop_digital_iphone_macbook_pro_mockup_notebook-978945.jpg!d" srcset="https://c.pxhere.com/photos/e0/a2/apple_desk_desktop_digital_iphone_macbook_pro_mockup_notebook-978945.jpg!d" alt="The free high-resolution photo of laptop, iphone, desk, notebook, screen, apple, technology" />
</div>

html:not(:hover) > body::before {
  filter: blur(5px) grayscale(1);
}
body::before {
  content: '';
  position: absolute;
  z-index: -1;  
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url(https://images.freeimages.com/images/large-previews/48f/london-by-a-day-3-1562917.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  filter: blur(3px);
  transition: all 1s;
}
  
.description {
  background-color: rgba(255,255,255,0.85);
  color: black;
  padding: 1em;
  margin: 1em;
}
.description img {
  width: 100%;
  height: 300px;
  border: 2px solid rgba(255,255,255,0.5);
}