css
Data utworzenia: 2025-04-15 07:11:35
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
font-size: 24px;
background-color: #222;
color: white;
}
nav {
/* display: flex; */
width: 100%;
height: 60px;
background-color: rgb(14, 23, 43);
/* text-align: center;
justify-content: flex-end; */
}
nav ul {
display: flex;
text-decoration: none;
}
li {
margin: auto 20px;
list-style-type: none;
}
a {
text-decoration: none;
color: #ebebeb;
text-shadow: 1px 1px 0 black;
}
.lewy{
position: absolute;
left: 20px;
top: 10px;
}
.lewy i{
color: #ebebeb;
}
.prawy{
position: absolute;
right: 20px;
top: 10px;
}
header {
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
width: 100%;
height: 900px;
background-image: url(./camera-7726802_1280.jpg);
background-size: cover;
color: whitesmoke;
}
h1 {
text-transform: uppercase;
text-shadow: 2px 3px 0 black;
}
span {
text-transform: none;
color: whitesmoke;
text-shadow: 2px 3px 0 black;
}
header h1 {
display: flex;
justify-content: center;
justify-items: center;
}
.section1 {
width: 80%;
margin: 30px auto;
height: 700px;
display: flex;
flex-wrap: wrap;
}
.image {
margin: 10px;
width: 30%;
height: 40%;
display: flex;
align-items: flex-end;
}
.image1 {
background-image: url(./doberman-2810203_1280.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.image2 {
background-image: url(./cognac-3870510_1280.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.image3 {
background-image: url(./spider-8253028_1280.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.image4 {
background-image: url(./dice-3929510_1280.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.image5 {
background-image: url(./vehicle-5570248_1280.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.image6 {
background-image: url(./grey-wolf-8492789_1280.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.image_text {
width: 100%;
height: 40px;
background-color: #000000cc;
padding: 10px;
}
.Hj{
transform: translate(0%, 35%);
-webkit-transform: translate(0%, 35%);
-moz-transform: translate(0%, 35%);
-ms-transform: translate(0%, 35%);
-o-transform: translate(0%, 35%);
}
.section2{
display: flex;
width: 80%;
margin: 20px auto;
}
.tekst{
margin: 10px 10px ;
transform: translate(10%);
-webkit-transform: translate(10%);
-moz-transform: translate(10%);
-ms-transform: translate(10%);
-o-transform: translate(10%);
}
.section3{
display: flex;
width: 50%;
height: 900px;
margin: 30px auto;
}
.card{
height: 100%;
width: 80%;
margin: auto 20px;
border: 2px solid snow;
}
.section3 .card-img{
height: 300px;
object-fit: cover;
}
Powrót