• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Ocena prototypu strony

VPS Starter Arubacloud
0 głosów
131 wizyt
pytanie zadane 16 lutego 2020 w Offtop przez Layoutowiec Mądrala (5,470 p.)
edycja 16 lutego 2020 przez Layoutowiec

Witam wszystkich serdecznie!

Chciałem prosić o ocenę drugiej wersji mojej strony nad którą aktualnie pracuję. 

Zdaję sobie także sprawę z tego, iż strona aktualnie jest dosyć krótka, dlatego jestem otwarty na wszelkie propozycje. 

http://dreamsday.pl/

Mam jeszcze 2 pytania:

1) W przypadku tych pomarańczowych kwadratów mam taki kod:

<div class="squares mx-auto">
                <div class="grid_item"></div>
                <div class="grid_item"></div>
                <div class="grid_item"></div>
                <div class="grid_item"></div>
</div>
.squares 
{
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    width: 7em;
    margin-top: 50px;
    list-style: none;
    font-size: 3.5em;
}

.squares:hover
{
    cursor: pointer;
}

I nie do końca wiem jak później zmienić te zwykłe kolory na grafiki tak aby miały one dokładnie takie wymiary.

 

2) Chciałbym aby po kliknięciu na zielony kwadraty otworzyła się jakby druga strona ale w tle tej drugiej strony ciągle znajdowała się główna.

Chodzi mi mniej więcej o taki efekt: 

 

https://www.behance.net/gallery/80271709/36-Days-of-Type-2019?tracking_source=search

A, i jeszcze wzorowałem się na tej stronie, ale chyba nie powinno być problemu bo nie są raczej bardzo podobne do siebie.

Wielkie dzięki za poświęcony czas, miłego dnia!

1 odpowiedź

+1 głos
odpowiedź 16 lutego 2020 przez Landu Stary wyjadacz (11,880 p.)
edycja 16 lutego 2020 przez Landu

Jak na razie strona wygląda ok.

1. Możesz spróbować przez background-image i background-size

2. Nie wiem czy to jest dobry sposób, ale ja zazwyczaj robię tak:
- div na cały ekran (width: 100vw; height: 100vh; z-index: 1; background: rgba(0, 0, 0, 0.2) )
- kolejny div (wewnątrz tego pierwszego) z treścią którą chcesz wyświetlać na pierwszym planie (np. width: 80vw; z-index: 2)
- ukrywasz głownego diva (display: none) i potem przez javascript na jakimś przycisku pokazujesz go zmieniając display na block. Dodatkowo możesz jeszcze dodać do tego diva na cały ekran atrybut onclick="this.style.display = 'none' ", żeby ukrywać go po kliknięciu w przyciemniony obszar (możesz to też zrobić w js przed addEventListener jak coś, nie ma różnicy).

Pisałem to z głowy więc nie jestem w stanie ci powiedzieć czy będzie w 100% działać. Musisz kombinować.

#Edit
Jeżeli dobrze pamiętam to używając klasy col-lg-4, nie musisz pisać dodatkowo col-12 tak jak np. tutaj:

<div class="description col-lg-4 col-12 mx-auto">

 

#Edit 2

</body>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
</html>

- te skrypty powinny być na końcu body, a nie pomiędzy body i html
- musisz ładować popper.js przed bootstrap.min.js

   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
   <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

 

komentarz 16 lutego 2020 przez Layoutowiec Mądrala (5,470 p.)

Okej dzięki za pomoc

Jeżeli dobrze pamiętam to używając klasy col-lg-4, nie musisz pisać dodatkowo col-12 tak jak np. tutaj:

W sensie col-12 jest dla rozmiarów ekranów poniżej tego rozmiaru lg

 

Okej zmienię kolejnoś, a mógłbyś mi powiedzieć w jakiej kolejności powinno się to ustawiać żeby było dobrze? 

komentarz 16 lutego 2020 przez Landu Stary wyjadacz (11,880 p.)

Jeżeli napiszesz col-lg-4 / col-md-6 czy cokolwiek innego, to dla mniejszych ekranów chyba domyślnie jest ustawione col-12. Ale nie wiem czy dobrze kojarzę.

Kolejność podałem ci w na końcu odpowiedzi. W twoim przypadku powinno być jQuery>Popper>bootstrap.js. Jeżeli nie masz zamiaru używać poppera, to możesz go wyrzucić, bo on jest tylko do tego (bootstrap docs).

Podobne pytania

+2 głosów
2 odpowiedzi 223 wizyt
pytanie zadane 15 lipca 2018 w Offtop przez szymonq Użytkownik (770 p.)
+2 głosów
2 odpowiedzi 599 wizyt
pytanie zadane 3 września 2021 w HTML i CSS przez poczatkujacy-prog Początkujący (410 p.)
+1 głos
0 odpowiedzi 321 wizyt
pytanie zadane 28 marca 2021 w HTML i CSS przez janzw4 Bywalec (2,050 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...