<DOCTYPE html>
<html lang="en">
<head>
<title>personal portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<!------------link css ------->
<link rel="stylesheet" href="main.css">
<!--------bootstrap------------>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!--using some icons from font awesom cnd-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" >
<!--------------jQuery--------->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" >
</script>
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<!-------------??????????------------>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script> $(document).(ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<!---------------navigationBar----------->
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!---instead sara I can use logo--<img src="img/logo.png">-->
<a class="navbar-brand" href="#">Sara</a>
<!------------navbar hidden botton---------->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<!----- outo nav----->
<ul class="navbar-nav ml-auto">
<!-- ===================home============= -->
<li class="nav-item active">
<a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Project</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</section>
<!------------------------slider--------------->
<div id ="slider">
<div id="headerSlider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#headerSlider" data-slide-to="0" class="active"></li>
<li data-target="#headerSlider" data-slide-to="1"></li>
<li data-target="#headerSlider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<!-- background pic-->
<img class="d-block img-fluid" src="img/IMG-8217.jpg" alt="First slide">
<!---------------writing on first slider page----------->
<div class="carousel-caption">
<h4>Hello,</h4>
<h5>I'm Sara Ansari!</h5>
<h6>Web Designer</h6>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="img/IMG-8217.jpg" alt="First slide">
<!---------------writing on second slider page----------->
<div class="carousel-caption">
<h5>How can I help you?</h5>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="img/IMG-8217.jpg" alt="First slide">
<div class="carousel-caption">
<h5>Just contact me!</h5>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#headerSlider" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#headerSlider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!--------------------end slider------------------------->
<footer></footer>
</body>
</html>
*
{
margin: 0;
padding: 0;
}
/*-------------Navigation----------*/
#nav-bar
{
position: sticky;
top: 0;
z-index: 10;
}
/*-------using for logo--------*/
.navbar-brand img
{
height:40px;
padding-left:30px;
}
/*navbar*/
.navbar-nav li
{
padding: 0 10;
}
.navbar-nav li a
{
float: right;
text-align: left;
}
/*-----changing color on hover on icons----*/
#nav-bar ul li a:hover
{
color: #ffd700!important;
}
.navbar
{
background: #fff;
}
.navbar-toggler
{
border: none!important;
}
.nav-link
{
color: #555!important;
font-size: 16x;
font-weight: 600;
}
/*---------------------Slider----------------*/
#slider
{
width: 100%;
}
.carousel-caption
{
top: 1%;
transform: translateY(-50);
bottom: initial!important!
}
.carousel-caption h4
{
color: #ffd700;
font-size: 45px;
}
.carousel-caption h5
{
color: #ffd700;
font-size: 35px;
}
.carousel-caption h6
{
color: #ffd700;
font-size: 25px;
font-style: italic;
}