Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html lang ="pl>
- <head>
- <meta charset="utf-8"/>
- <meta name="desctription" content="przyklad strony html"/>
- <title>Szablon WWW</title>
- <link rel="stylesheet" href="./awesomecss/css/fontawesome-all.min.css/>
- <style>
- html, body
- {
- margin: 0 !important;
- padding: 0 !important;
- }
- header
- {
- height: 200px;
- background: red;
- }
- header h1
- {
- height: 90px;
- font-size: 90px;
- line-height: 75px;
- margin 0;
- }
- .button
- {
- height: 50px;
- width: 25%;
- overflow: hidden;
- -webkit-user-select:none;
- -moz-user-select:none;
- -o-user-select:none;
- -ms-user-select:none;
- user-select: none;
- cursor: pointer;
- }
- .button:hover, .button:hover main p
- {
- background: #00A
- }
- .main p
- {
- color:red
- font-weight: 800;
- font-size: 32px;
- text-align: center;
- margin-top: calc((50px - 32px) / 2);
- line-height: 30px;
- }
- div.main
- {
- float: left;
- }
- nav::after
- {
- content: '';
- display: block;
- clear: both;
- }
- main
- {
- margin-left: 30px;
- margin-right: 30px;
- text-align: justify;
- width: 80%;
- float:left;
- }
- aside
- {
- width: calc(20% -35px);
- float:right;
- }
- footer::before
- {
- content: '';
- display: block;
- clear: both;
- }
- nav#slideMenu
- {
- position: fixed;
- width:400px;
- left: -380px;
- overflow: hidden;
- transition: left 2s;
- }
- nav#slideMenu:hover
- {
- left: 0px;
- background: #FFAACC;
- }
- .button,nav#slideMenu
- {
- background: #007045;
- }
- nav#slideMenu ul
- {
- padding 0;
- list-style: none;
- overflow: hidden;
- float:left;
- }
- nav#slideMenu ul li
- {
- padding-left: 20px;
- margin-top: 5px;
- overflow: hidden;
- width: 350px;
- }
- nav#slideMenu ul li a
- {
- padding-top: 15px;
- display: block;
- }
- i.mybtn
- {
- font-size: 25px;
- margin-top: calc((200px -25px) /2);
- color: white;
- }
- nav#slideMenu:hover i.mybtn
- {
- transform; rotate(180deq);
- }
- for input[type=text], form select
- {
- display:block;
- height: 30px;
- font-size: 25px;
- width: 95%
- margin-bottom: 10px;
- margin-left: auto;
- margin-right: auto;
- }
- form select
- {
- font-size: 20px;
- text-align: center;
- }
- form textarea
- {
- width: 95%
- margin-left: auto;
- matgin-right: auto;
- height: 200px;
- }
- form input[type=submit]
- {
- color:green
- width: 95%
- margin-left: auto;
- margin-right: auto;
- display: block;
- font-size: 35px;
- }
- ::-webkit-placeholder
- {
- text-align: center;
- color: green;
- }
- ::-ms-webkit-placeholder
- {
- text-align: center;
- color: green;
- }
- ::-moz-placeholder
- {
- text-align: center;
- color: green;
- }
- #gallery
- {
- width: 100%;
- overflow: hidden;
- display: flex;
- flex-wrap: wrap;
- }
- #gallery figure
- {
- width: 22%
- height: auto;
- margin-right: 2%;
- border: 1px solid black;
- padding: 2%;
- border-radius: 10px;
- overflow: hidden;
- position: relative;
- }
- #gallery figure img
- {
- width: 100%;
- height: auto;
- }
- #gallery figure figcaption
- {
- font-size: 14px;
- position: absolute;
- bottom: 0;
- }
- #gallery figure div
- {
- margin-top: 10px;
- width: 95%;
- height: 200px;
- }
- </style>
- </head>
- <body>
- <header>
- <h1> Strona Glowna </h1>
- </header>
- <nav>
- <div class="button main"><p> Najwazniejsze informacje</p</div>
- <div class="button main"><p> Galeria</p</div>
- <div class="button main"><p> Kontakt</p</div>
- <div class="
- <nav id ="slideMenu">
- <ul>
- <li class ="button"><a href="#art1">Artykuł1</a></li>
- </ul>
- <i class="mybtn far fa-arrow-alt-circle-right"></i>
- </nav>
- <main>
- <div id="gallery">
- <figure>
- <div>
- <img src="link" alt=""/>
- <figcaption>Natura 1</figcaption>
- </div>
- </figure>
- <figure>
- <div>
- <img src="link" alt=""/>
- <figcaption>Natura 2</figcaption>
- </div>
- </figure>
- <figure>
- <div>
- <img src="link" alt=""/>
- <figcaption>Natura 3</figcaption>
- </div>
- </figure>
- <figure>
- <img src="link" alt=""/>
- <figcaption>Natura 4</figcaption>
- </figure>
- <figure>
- <img src="link" alt=""/>
- <figcaption>Natura 5</figcaption>
- </figure>
- <figure>
- <img src="link" alt=""/>
- <figcaption>Natura 6</figcaption>
- </figure>
- <figure>
- <img src="link" alt=""/>
- <figcaption>Natura 7</figcaption>
- </figure>
- <figure>
- <img src="link" alt=""/>
- <figcaption>Natura 8</figcaption>
- </figure>
- </div>
- </main>
- <aside>
- <p> miejsce na reklame</p>
- </aside>
- <footer>
- </footer>
- </body>
- // fontawesome w folderze z index.html
- // folder css przekopiowac .css do folderu
- // zapisac galerie usunac formularz(main)
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement