👤

Zrobi ktoś stronę opartą na divach w HTML o dowolnej tematyce proszę :) ?

Odpowiedź :

Odpowiedź:

Kod HTML nazwa.html

{

<!DOCTYPE html>

<html lang="pl">

   <head>

       <meta charset="UTF-8"/>

       <title>Strona</title>

       <link rel="stylesheet" href="style.css" type="text/css"/>

   </head>

   <body>

       <div id="pudełko">

           <div id="logo">Logo strony</div>

           <div id="lewakolumna">

               <div class="zdjęcie1">

                   <img src="img/przykładowe zdjęcie.png" width="460" height="460" class="lewa"/>

                   <div id="opis">

                       <p>Przykładowy opis zdjęcia</p>

                   </div>

               </div>

               <div class="zdjęcie2">

                   <img src="img/przykładowe zdjęcie.png" width="460" height="460" class="lewa"/>

                   <div id="opis">

                       <p>Przykładowy opis zdjęcia</p>

                   </div>

               </div>

               <div class="zdjęcie3">

                   <img src="img/przykładowe zdjęcie.png" width="460" height="460" class="lewa"/>

                   <div id="opis">

                       <p>Przykładowy opis zdjęcia</p>

                   </div>

               </div>

           </div>

           

           <div id="prawakolumna">

               <div class="zdjęcie4">

                   <img src="img/przykładowe zdjęcie.png" width="460" height="460" class="prawa"/>

                   <div id="opis">

                       <p>Przykładowy opis zdjęcia</p>

                   </div>

               </div>

               <div class="zdjęcie5">

                   <img src="img/przykładowe zdjęcie.png" width="460" height="460" class="prawa"/>

                   <div id="opis">

                       <p>Przykładowy opis zdjęcia</p>

                   </div>

               </div>

               <div class="zdjęcie6">

                   <img src="img/przykładowe zdjęcie.png" width="460" height="460" class="prawa"/>

                   <div id="opis">

                       <p>Przykładowy opis zdjęcia</p>

                   </div>

               </div>

           </div>

       

       

       </div>

   </body>

</html>

}

Kod CSS nazwa.css

{

body

{

   background-color: gray;

}

#pudełko

{

   width: 1000px;

   margin-left: auto;

   margin-right: auto;

}

#logo

{

   text-align: center;

   color: bisque;

   letter-spacing: 2px;

   font-size: 45px;

   padding: 5px;

   width: 1000px;

   text-transform: uppercase;

}

#lewakolumna

{

   width: 50%;

   float: left;

}

#prawakolumna

{

   width: 50%;

   float: left;

}

.zdjęcie1

{

   margin-top: 20px;

   transition: transform 0.2s ease-in-out;

}

.zdjęcie2

{

   margin-top: 20px;

   transition: transform 0.2s ease-in-out;

}

.zdjęcie3

{

   margin-top: 20px;

   transition: transform 0.2s ease-in-out;

}

.lewa:hover

{

   transform: rotate(5deg);

}

.zdjęcie4

{

   margin-top: 20px;

   transition: transform 0.2s ease-in-out;

}

.zdjęcie5

{

   margin-top: 20px;

   transition: transform 0.2s ease-in-out;

}

.zdjęcie6

{

   margin-top: 20px;

   transition: transform 0.2s ease-in-out;

}

.prawa:hover

{

   transform: rotate(-5deg)

}

#opis

{

   max-width: 460px;

   text-align: center;

   font-size: 20px;

   font-family: Helvetica;

   color: bisque;

   padding: 10px;

   word-wrap: break-word;

}

}

Wyjaśnienie:

Podane kody należy umieścić w folderze. W  folderze powinien znajdować się jeszcze jeden folder img. Do podanych kodów należy dodać jeszcze tytuł, logo i zaimportować zdjęcia oraz dodać opis do zdjęć.

Pobrane zdjęcia należy umieścić w folderze img. Opis zdjęcia trzeba dodać w miejscu Przykładowy opis zdjęcia. Natomiast nazwę zdjęcia które chcemy dodać w miejscu przykładowe zdjęcie.png.

Pliki z podanymi kodami należy zapisać z podanymi rozszerzeniami.