Arkadaşlar ben internetten bakıp freelancer web template yapmaya karar verdim fakat bir sorunla karşılaştım ama anlayan biri varsa illaki çözer.
Sorun şu bakın resimlerin altında yeşil bir renk var ve ben bunu bir türlü yok edemedim .
https://hizliresim.com/kOLrpy
HTML KODLARI
CSS KODLARI
valla bu sorunu çözerseniz çok sevinicem.
Sorun şu bakın resimlerin altında yeşil bir renk var ve ben bunu bir türlü yok edemedim .
https://hizliresim.com/kOLrpy
HTML KODLARI
Kod:
<!DOCTYPE html>
<html>
<head>
<title>Freelancer Web Template</title>
<link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav-container">
<div id="nav-inner" class="container">
<a id="logo">Start Bootstrap</a>
<ul id="nav-menu">
<li>
<a href="#">
Portfolio
</a>
</li>
<li>
<a href="#">
About
</a>
</li>
<li>
<a href="#">
Contact
</a>
</li>
</ul>
</div>
</div>
<div id="header">
<div id="header-inner" class="container">
<img src="img/profile.png">
<h1 >
Start Bootstrap
</h1>
<hr class="star-line star-line-white">
<span>
Web Developer-Graphic Artist-User Experience Designer
</span>
</div>
</div>
<div id="content">
<div class="container">
<h2>
Portfolio
</h2>
<hr class="star-line star-line-green">
<div id="portfolio">
<div class="portfolio-item">
<a href="#">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x" ></i>
</div>
</div>
<img src="img/cabin.png">
</a>
</div>
<div class="portfolio-item">
<a href="#">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x" ></i>
</div>
</div>
<img src="img/cake.png">
</a>
</div>
<div class="portfolio-item">
<a href="#">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x" ></i>
</div>
</div>
<img src="img/circus.png">
</a>
</div>
<div class="portfolio-item">
<a href="#">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x" ></i>
</div>
</div>
<img src="img/game.png">
</a>
</div>
<div class="portfolio-item">
<a href="#">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x" ></i>
</div>
</div>
<img src="img/safe.png">
</a>
</div>
<div class="portfolio-item">
<a href="#">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-4x" ></i>
</div>
</div>
<img src="img/submarine.png">
</a>
</div>
<div class="clear"/>
</div>
</div>
</div>
</body>
</html>CSS KODLARI
Kod:
body
{
padding: 0;
margin: 0;
font-family: Lato,'Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 14px;
}
.container
{
width: 1170px;
margin: 0 auto;
}
h1,h2,h3,h4,h5,h6
{
margin-top: 20px;
margin-bottom: 10px;
text-transform: uppercase;
font-weight: 700;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
#header
{
text-align: center;
color: #fff;
background-color: #18BC9C;
}
#header h1
{
font-size: 4.75em;
}
.star-line
{
border: none;
border-top: solid 5px;
max-width: 250px;
margin-top: 40px;
}
.star-line:after
{
font-family: FontAwesome;
content: "\f005";
position: relative;
top: -17px;
font-size: 30px;
background-color: #18BC9C;
padding: 10px;
}
.star-line-white:after
{
background-color: #18BC9C;
color: #fff;
}
.star-line-green:after
{
background-color: #fff;
color: #2C3E50;
}
#header span
{
font-size: 25px;
}
#header .container
{
padding-top: 100px;
padding-bottom: 100px;
}
#nav-container
{
height: 100px;
background-color: #2C3E50;
}
#nav-inner
{
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
height: 100px;
}
#logo
{
float: left;
font-size: 2em;
margin:30px 10px;
}
#nav-menu
{
float: right;
margin:40px 10px;
}
#nav-inner a
{
color: #fff;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
}
#nav-menu li
{
display: inline-block;
list-style: none;
margin:0 12px;
}
#nav-menu li a{
letter-spacing: 1px;
}
#nav-menu li a:hover{
color:#18BC9C;
}
.clear
{
clear: both;
}
#content
{
padding-top: 100px;
text-align: center;
}
#content h2
{
font-size: 40px;
color: #2C3E50;
}
.portfolio-item
{
width: 32%;
float: left;
background-color: aquamarine;
margin-right: 1.3%;
margin-top: 15px;
}
.portfolio-item img
{
width: 100%;
}
.portfolio-item a
{
display: block;
position: relative;
}
.caption{
background-color: #18BC9C;
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.caption:hover{
opacity: 0.9;
}
.caption-content
{
position: absolute;
top: 50%;
width: 100%;
color: #fff;
font-size: 20px;
margin-top: -20px;
}valla bu sorunu çözerseniz çok sevinicem.
