Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- index.html:
- <!DOCTYPE html>
- <html lang="pl">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>artfolio | fotografia w plenerze, Lublin</title>
- <link rel="stylesheet" href="css/main.css">
- </head>
- <body>
- <div class="container">
- <header class="header">
- <div class="logo">
- <a href="index.html">
- <img src="images/artfolio-logo.png" alt="logo">
- </a>
- </div>
- <div class="slider">
- <ul class="rslides">
- <li><img src="images/foto-index.jpg" alt=""></li>
- <li><img src="images/foto-cennik.jpg" alt=""></li>
- <li><img src="images/foto-fotografia.jpg" alt=""></li>
- <li><img src="images/foto-omnie.jpg" alt=""></li>
- </ul>
- </div>
- <nav class="menu">
- <a href="o-mnie.html" class="menu__link">O mnie</a>
- <a href="fotografia.html" class="menu__link">Fotografia</a>
- <a href="cennik.html" class="menu__link">Cennik</a>
- </nav>
- </header>
- <main class="content">
- <p class="content__brief">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi vero maiores iusto
- sit minima tenetur repellendus ullam ex ea unde quaerat dolor nam cum omnis enim, earum vel voluptatum
- fuga.</p>
- <p class="content__brief">At impedit similique ea hic itaque est ad, quia recusandae facilis amet
- repudiandae consectetur aperiam nisi maiores perspiciatis totam. Veniam dicta inventore ad amet, ab
- veritatis porro a sunt asperiores.</p>
- <p class="content__brief">Praesentium quisquam provident molestiae similique possimus, quidem perferendis
- rem enim iste sint eligendi dolorem dignissimos non autem vero illum fugit aut odit, libero quo nam
- nostrum quam! Modi, libero quibusdam!</p>
- </main>
- <footer class="footer">
- <div class="contact">
- <div class="contact__info">
- <span class="contact__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
- height="24">
- <path class="heroicon-ui"
- d="M5.64 16.36a9 9 0 1 1 12.72 0l-5.65 5.66a1 1 0 0 1-1.42 0l-5.65-5.66zm11.31-1.41a7 7 0 1 0-9.9 0L12 19.9l4.95-4.95zM12 14a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" />
- </svg></span>
- <p class="contact__description">
- ul. Jana Kowalskiego 23<br>
- Lublin, Polska
- </p>
- </div>
- <div class="contact__info">
- <span class="contact__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
- height="24">
- <path class="heroicon-ui"
- d="M8 2h8a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4c0-1.1.9-2 2-2zm0 2v16h8V4H8zm4 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
- </svg></span>
- <p class="contact__description">
- +48 532 73 89
- </p>
- </div>
- <div class="contact__info">
- <span class="contact__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
- height="24">
- <path class="heroicon-ui"
- d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2zm16 3.38V6H4v1.38l8 4 8-4zm0 2.24l-7.55 3.77a1 1 0 0 1-.9 0L4 9.62V18h16V9.62z" />
- </svg></span>
- <p class="contact__description">
- biuro@artfolio.pl
- </p>
- </div>
- </div>
- <p class="footer__copy">Wszelkie prawa zastrzeżone © Artfolio</p>
- </footer>
- </div>
- <script src="js/jquery-3.4.1.min.js"></script>
- <script src="js/responsiveslides.min.js"></script>
- <script>
- $(function () {
- $(".rslides").responsiveSlides({
- speed: 1000, // Integer: Speed of the transition, in milliseconds
- timeout: 2000, // Integer: Time between slide transitions, in milliseconds
- pager: false, // Boolean: Show pager, true or false
- random: false, // Boolean: Randomize the order of the slides, true or false
- pause: false, // Boolean: Pause on hover, true or false
- });
- });
- </script>
- </body>
- </html>
- css/main.css:
- @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,700&subset=latin-ext');
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-size: 14px;
- }
- a {
- text-decoration: none; /* brak podkreślenia linków */
- color: inherit; /* link w kolorze tekstu */
- }
- img {
- max-width: 100%; /* daje responsywność dla obrazu */
- height: auto; /* przeskalowuje wysokość */
- vertical-align: top; /* wyrównuje w pionie i nie ma przerwy pod obrazem */
- }
- body {
- font-family: 'Open Sans', sans-serif; /* ustawia czcionkę dla body */
- font-weight: 300; /* ustawia grubość czcionki */
- background-color: #282d33; /* ustawia kolor tła */
- color: #999; /* ustawia kolor tekstów */
- line-height: 1.62; /* ustawia interlinię - odstępy między wierszami */
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* Tutaj wstawimy fajne tło */
- }
- .container {
- max-width: 980px; /* ustalamy maksymalną szerokość kontenera - jest responsywna bo może się zmniejszać */
- margin: 0 auto; /* margines górny i dolny ustawiamy na 0, prawy i lewy będą miały równą szerokość, dzięki temu strona się wycentruje */
- }
- .logo {
- display: flex;
- justify-content: center; /* wyśrodkowanie logo z flexboxem */
- margin: 50px auto; /* jak wyżej tylko margines górny i dolny 50px */
- }
- .slider {
- border-radius: 20px; /* zaokrągla rogi obrazka na sliderze */
- overflow: hidden; /* ukrywamy elementy które "wypływają" poza kontener slidera */
- }
- .menu {
- display: flex;
- justify-content: space-between; /* ustawiamy rozmieszczenie elementów w kontenerze menu: będą rozmieszczone równomiernie w całej szerokości kontenera */
- margin: 20px 3.5714% 50px; /* dodanie marginesów do elementu menu */
- }
- .menu__link {
- flex-grow: 0; /* nie wolno ci rosnąć */
- flex-shrink: 1; /* możesz się zmniejszyć jak będzie mało miejsca */
- flex-basis: 30.769%; /* to jest szerokość podstawowa elementu */
- text-align: center; /* pięknie i na środku */
- font-size: 26px; /* oto rozmiar tekstu linku */
- line-height: 1; /* interlinia ustawiona na 1 */
- padding: 25px 0; /* marginesy wewnętrzne góra/dół 25px prawy/lewy 0 */
- border-bottom: 1px solid #414752; /*piękna ramka na dole linku upodabniająca go do przycisku */
- border-radius: 20px; /* zaokrąglenie tej ramki i preudo-przycisku zbudowanego na elemancie <a> */
- transition: background-color .2s ease-in-out, color .2s ease-in-out; /* dodajemy animację do atrybutów background-color i color */
- }
- .menu__link:hover {
- /* po najechaniu kursorem w obszar elemanu menu__link ten zmieni się zgodnie z poniższymi regułami */
- color: white;
- background-color: #414752;
- }
- .content {
- display: flex; /* ustawiamy aby element był taktowany jako flexbox a wszystkie elementy w nim umieszczone jako elemanty flex */
- justify-content: space-between; /* elementy z określoną szerokością wypełnią cały kontener na szerokość, ale przeglądarka doda między nimi pustą przestrzeń, tak aby wszystkie wypełniły całą szerokość kontenera */
- margin: 20px 3.5714% 50px; /* ustawiamy margines dla elementu: górny 20px dolny 50px prawy/lewy 3.5714% (35 : 980) */
- }
- .content__brief {
- flex: 0 1 30.769%; /* zastępuje flex-grow, flex-shrink i flex-basis - uważaj na zachowanie tej kolejności przy wpisywaniu wartości parametrów */
- }
- .contact {
- display: flex; /* ustawiamy aby element był taktowany jako flexbox a wszystkie elementy w nim umieszczone jako elemanty flex */
- justify-content: space-between; /* elementy z określoną szerokością wypełnią cały kontener na szerokość, ale przeglądarka doda między nimi pustą przestrzeń, tak aby wszystkie wypełniły całą szerokość kontenera */
- margin: 20px 0 50px; /* ustawiamy margines dla elementu: górny 20px dolny 50px prawy/lewy na 0 */
- background-color: #2d3238; /* ustawiamy kolor tła elementu */
- border-radius: 20px; /* zaokrąglamy rogi elementu */
- padding: 40px 3.5714%; /* ustawiamy marginesy wewnętrzne góra/dół 40px prawo/lewo 3.5714% */
- }
- .contact__info {
- flex: 0 1 30.769%; /* zastępuje flex-grow, flex-shrink i flex-basis - uważaj na zachowanie tej kolejności przy wpisywaniu wartości parametrów */
- color: #999; /* ustalam kolor napisów w tym elemencie */
- text-align: center; /* wyśrodkowujemy elementy tekstowe w kontenerze */
- }
- .contact__icon {
- display: inline-block; /* możesz ustawić rozmiary elementowi a on będzie traktowany jak element inline (jak tekst) */
- height: 50px; /* ustawiam wysokość elementu */
- width: 50px; /* ustawiam szerokość elementu */
- background-color: #25282d; /* kolor tła */
- border-radius: 50%; /* sposób na zrobienie okręgu z kwadratu */
- margin-bottom: 20px; /* dodaję marginies dolny 20px */
- line-height: 64px; /* ustawiam wielkość interlinii */
- }
- .heroicon-ui {
- fill: #999; /* deklarujemy kolor wypełnienia elementu grafiki wektorowej SVG */
- }
- .footer__copy {
- text-align: center; /* wyśrodkowyjemy tekst */
- margin-bottom: 50px; /* margines dolny 50px */
- color: #414752; /* ustawiam kolor napisów */
- }
- .rslides {
- position: relative;
- list-style: none;
- overflow: hidden;
- width: 100%;
- padding: 0;
- margin: 0;
- }
- .rslides li {
- -webkit-backface-visibility: hidden;
- position: absolute;
- display: none;
- width: 100%;
- left: 0;
- top: 0;
- }
- .rslides li:first-child {
- position: relative;
- display: block;
- float: left;
- }
- .rslides img {
- display: block;
- height: auto;
- float: left;
- width: 100%;
- border: 0;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement