cybernetico
Power Member
Boas pessoal,
estou a apender programação em HTML e css mas não sei o k está mal neste código...
envio o código em anexo.
Obrigado a todos desde já.
Abraço
HTML:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Yantramanav:100,300,400,500,700,900" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="Style.css">
<title>Marucos</title>
<style type="text/css">
</style>
</head>
<body background='background-index.jpg'>
<figure class="container-img">
<img class="center" src="esqueleto de peixe - Marucos.jpg">
<header>
<a href="Index01.html" class="btn-1">Marucos</a>
</header>
</body>
</HTML>
CSS:
* {
margin: 0px;
padding: 0px;
}
container-img {
position: absolute;
overflow: hidden;
top:10%;
left: calc(50% - 200px);
margin: auto;
height: 400px;
width: 500px;
}
container-img {
display: flex;
align-items: center;
justify-content: center;
}
.center {
position: absolute;
top: 0;
bottom: 0;
left: -320px;
margin: auto 0;
margin-left: 50%;
}
body {
background-image: background-index.jpg;
background-repeat: no-repeat;
background-size: cover;
margin: center;
padding: 50px 60px;
}
h1 {
color: white;
font-family: 'Yantramanav', sans-serif;
font-size: 50px;
font-weight: 400;
margin: 0;
text-align: center;
}
h2 {
color: #AAA;
font-family: 'Yantramanav', sans-serif;
font-size: 16px;
font-weight: 100;
letter-spacing: 2px;
margin: 0;
text-align: center;
text-transform: uppercase;
}
p {
color: #333;
font-family: 'Yantramanav', sans-serif;
font-size: 16px;
font-weight: 100;
margin: 0;
text-align: center;
}
.actions {
text-align: center;
margin-top: 30px;
cursor
ointer;
}
.actions a {
background-color: background-index.jpg;
border-radius: 3px;
color:background-index.jpg;
font-family: 'Yantramanav', sans-serif;
font-size: 16px;
font-weight: 300;
display: inline-block;
margin: 10px;
padding: 12px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
#gameboard {
position: relative;
text-align: center;
top: 30px;
}
.card {
border: 2px solid #9DD1F1;
display: inline-block;
height: 200px;
margin-top: 4px;
padding: 30px auto;
text-align: center;
width: 215px;
}
.card:hover {
background-color: background-index.jpg;
border-color: #004E89;
}
.card img {
padding-top: 40px;
}
estou a apender programação em HTML e css mas não sei o k está mal neste código...
envio o código em anexo.
Obrigado a todos desde já.
Abraço
HTML:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Yantramanav:100,300,400,500,700,900" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="Style.css">
<title>Marucos</title>
<style type="text/css">
</style>
</head>
<body background='background-index.jpg'>
<figure class="container-img">
<img class="center" src="esqueleto de peixe - Marucos.jpg">
<header>
<a href="Index01.html" class="btn-1">Marucos</a>
</header>
</body>
</HTML>
CSS:
* {
margin: 0px;
padding: 0px;
}
container-img {
position: absolute;
overflow: hidden;
top:10%;
left: calc(50% - 200px);
margin: auto;
height: 400px;
width: 500px;
}
container-img {
display: flex;
align-items: center;
justify-content: center;
}
.center {
position: absolute;
top: 0;
bottom: 0;
left: -320px;
margin: auto 0;
margin-left: 50%;
}
body {
background-image: background-index.jpg;
background-repeat: no-repeat;
background-size: cover;
margin: center;
padding: 50px 60px;
}
h1 {
color: white;
font-family: 'Yantramanav', sans-serif;
font-size: 50px;
font-weight: 400;
margin: 0;
text-align: center;
}
h2 {
color: #AAA;
font-family: 'Yantramanav', sans-serif;
font-size: 16px;
font-weight: 100;
letter-spacing: 2px;
margin: 0;
text-align: center;
text-transform: uppercase;
}
p {
color: #333;
font-family: 'Yantramanav', sans-serif;
font-size: 16px;
font-weight: 100;
margin: 0;
text-align: center;
}
.actions {
text-align: center;
margin-top: 30px;
cursor
ointer;}
.actions a {
background-color: background-index.jpg;
border-radius: 3px;
color:background-index.jpg;
font-family: 'Yantramanav', sans-serif;
font-size: 16px;
font-weight: 300;
display: inline-block;
margin: 10px;
padding: 12px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
#gameboard {
position: relative;
text-align: center;
top: 30px;
}
.card {
border: 2px solid #9DD1F1;
display: inline-block;
height: 200px;
margin-top: 4px;
padding: 30px auto;
text-align: center;
width: 215px;
}
.card:hover {
background-color: background-index.jpg;
border-color: #004E89;
}
.card img {
padding-top: 40px;
}
