Projektdoboz 1.

Egyszerű,könnyen átlátható és szerkeszthető projektdoboz. Inkább olyan projektekhez alkalmas,ahol kevesebb adatot,-de több szöveget kell feltűntetni. A .css-be minden részhez odaírtam,hogy mi mit jelent,ha esetleg valaki átrendeznék.
 

A doboz html kódja

<div id=”projektdoboz”>
<div class=”projektcim”>Projekt cime</div>
<div class=”minileiras”>Lorem ipsum dolor set</div>
<div class=”projektlink” style=”margin-left: 224px; margin-top: 130px;”><a href=”LINK HELYE”>Link</a></div>
<div class=”projektlink” style=”margin-left: 257px; margin-top: 130px;”><a href=”LINK HELYE”>Link</a></div>
<div class=”projektlink” style=”margin-left: 290px; margin-top: 130px;”><a href=”LINK HELYE”>Link</a></div>
<div class=”projektbovebben”>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi
sint occaecati cupiditate non provident, similique sunt in culpa qui officia
deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum
facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi
optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis
aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
recusandae. Itaque earum rerum hic tenetur a sapiente delectus qui blanditiis praesentium voluptatum.
</div>
</div>

 

A doboz css kódja

#projektdoboz {
width: 360px; /*projekt képének szélessége*/
height: 250px; /*a doboz olyan magas,amilyen magas a kép*/
background-image: url(‘http://designation.flaunt.nu/wp-content/uploads/2017/08/projektkep.png’); /*a doboz háttere*/
position: fixed;
}
.projektcim { /*a cím formázása*/
text-align: center;
font-family: Georgia;
text-transform: lowercase;
font-style: italic;
font-size: 22px;
color: #d198b3;
position: absolute;
margin-left: 205px; /*a cím 205 pixellel van behúzva balról*/
margin-top: 87px; /*a cím 87 pixellel van letolva felülről*/
}
.projektcim span { /*projekt címének megformázása*/
background-color: #000;
padding: 5px;
border-bottom: solid 1px #d198b3;
}
.minileiras { /*rövid leírás formázása*/
text-align: center;
color: black;
font-family: georgia;
font-size: 11px;
text-transform: lowercase;
font-style: italic;
position: absolute;
margin-left: 215px; /*a leírás 215 pixellel van behúzva balról*/
margin-top: 117px; /*a leírás 117 pixellel van letolva felülről*/
}
.minileiras span { /*rövid leírás megformázása*/
background-color: #fff;
padding: 3px;
}
.projektlink a{ /*projekt linkek megormázása*/
display: inline-box;
text-align: center;
font-family: georgia;
font-style: italic;
font-size: 12px;
text-transform: lowercase;
color: #fff;
background-color: #d198b3;
border-bottom: solid 1px #fff;
padding: 5px;
text-decoration: none;
position: absolute;
-webkit-transition: .5s ease-in;
-moz-transition: .5s ease-in;
-o-transition: .5s ease-in;
}
.projektlink a:hover{
text-align: center;
font-family: georgia;
font-style: italic;
font-size: 12px;
background-color: #000;
color: #d198b3;
border-bottom: solid 1px #d198b3;
padding: 5px;
text-decoration: none;
}
.projektbovebben { /*a projekt hosszú szövegének megformázása*/
font-family: Calibri;
font-size: 12px;
color: black;
text-align: justify;
background-color: white;
border: solid 1px #d198b3;
padding: 10px;
width: 300px;
height: 100%;
text-shadow: none !important;
line-height: 18px;
margin-top: 160px; /*a doboz 160 pixellel van letolva fentről*/
margin-left: 18px; /*a dovboz 18 pixellel van behúzva balról*/
}