MladenMladenov/index.html

## index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>This is my project website</title>
    <link href='https://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="script.js" type="text/javascript"></script>
</head>
<body>
    <div id="wrapper">
        <header>
            <nav>
                <ul id="list-left">
                    <li><a href="#">Начало</a></li>
                    <li><a href="#">Who we are</a></li>
                    <li><a href="#">Idea</a></li>
                    <li><a href="#">Най-търсена професия</a></li>
                </ul>
                <ul id="list-right">
                    <li><a href="#">Sign In</a></li>
                    <span>/</span>
                    <li><a href="#">Sing Up</a></li>
                </ul>
            </nav>
            <h1><a href="#">Job Profile</a></h1>
            <span>Step into your future</span>
        </header>
        <main>
            <section id="slideshow">
                <div>
                    <img src="images/GIJ_Header_WhereToStart_LoggedIn-1021x381.jpg" alt="image1">
                </div>
                <div>
                    <img src="images/download.jpg" alt="image2">
                </div>
                <div>
                    <img src="images/Job-Shadow-2016-CC-Homepage1.jpg" alt="image3">
                </div>
            </section>
            <section id="intro">
                <div>
                <h2>Кой сме ние?</h2>
                <p>Сайтът е направен с цел да помогне на хората, който искат
                да се развиват в професията си.
                <p>Искат да сменят своята сфера на
                работа и да получат нови знания.</p>
                <p>В нашата платформа може да откриете какви професии може да работите и необходимите за тях
                курсове и школи.</p>
                    <p>Знаем какво търсят компаниите и ще ви помогнем да намерите пътят до тях</p>
                </div>
                <div>
                    <span>Въведи желана професия: </span>
                    <input type="text">
                    <input type="button" value="Търси">
                </div>
            </section>
            <section id="grid-view">
            <div>
                <h2>Предпочитани Компании</h2>
                <p>HP</p>
                <p>HP</p>
                <p>HP</p>
            </div>
            <div>
                <h2>Предпочитани Школи</h2>
                <p>HP</p>
                <p>HP</p>
                <p>HP</p>
            </div>
            <div>
                <h2>Предпочитани Професии</h2>
                <p>HP</p>
                <p>HP</p>
                <p>HP</p>
            </div>
            <div>
                <h2>Предпочитани Компании</h2>
                <p>HP</p>
                <p>HP</p>
                <p>HP</p>
            </div>
            <div>
                <h2>Предпочитани Школи</h2>
                <p>HP</p>
                <p>HP</p>
                <p>HP</p>
            </div>
            <div>
                <h2>Предпочитани Професии</h2>
                <p>HP</p>
                <p>HP</p>
                <p>HP</p>
            </div>
            </section>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>

## script.js
setInterval(function() {
    $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end(1000)
        .appendTo('#slideshow');
},  3000);

## style.css
/* RESET */
body,h1,#wrapper,li,ul{
    margin: 0;
    padding: 0;

}
/*HEADER*/
body{
    background-color: #ccccff;
    font-family: Ubuntu,sans-serif;
}
#wrapper{
    background-color: rgba(255, 255, 255,0.3);
    margin: 60px auto;
    width: 960px;
    height:1200px;
    padding-top:10px;
}
header>nav>ul>li>a:hover{
    text-shadow:1px 1px 1px black;
    color:white;
}
header>nav>ul>li{
    list-style:none;
}
header>nav>ul>li>a{
    text-decoration: none;
    color:#000;
}
header>h1>a{
    text-decoration:none;
    color:#000;
    margin-top:5px;
    margin-left:2px;
    text-shadow:1px 1px 1px white;
    width:170px;
}
header>h1>a:hover{
text-shadow:1px 1px 1px black;
color:white;
}

nav>ul>li{
    display: inline-block;
    padding:0;
    margin:0;
    text-shadow:1px 1px 1px white;
}
#list-right{
    float:right;
    margin-top: 15px;
    margin-right:20px;
}
#list-left>li{
    margin-right:20px;
}
#list-left{
    float:left;
    margin-top: 15px;
    margin-right:20px;
}
nav{
    margin-top:5px;
    width:80%;
    float:right;
}
header{
    z-index: 5;
    position:fixed;
    top:0;
    width:960px;
    height: 60px;
    border-bottom: 1px solid blue;
    background: linear-gradient(to bottom, #ccccff 10%,rgba(255, 255, 255,0.5) 90%);
    box-shadow: 0px 0px 4px black;
}
header>span{
    font-style: italic;
    margin-left:2px;
}
#wrapper:after{
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}
/*MAIN*/

main>#slideshow>div>img{
    z-index: 1;
    width: 960px;
    height:300px;
}
#slideshow {
    position: relative;
}

#slideshow > div {
    position: absolute;
}
main>#intro{
    margin-top:0px;
    width:960px;
    height:280px;
    display:block;
    position:relative;
    top:300px;
    border-bottom:1px solid white;
}
main>div{
    display:inline-block;
    width:280px;
    height:200px;
    position: relative;
    top:300px;
    background-color: #ccccff;
    box-sizing: border-box;
    float:left;
    margin-right:20px;
    margin-left:20px;
}

#intro>div{
    display:inline-block;
    float:left;
    width:480px;
    height:300px;
    box-sizing: border-box;
    padding-left:5px;
}
#intro>div>span{
    margin:20px;
    display:inline-block;
}
#intro>div>input[type=button]{
    width:60px;
    height:20px;
    border:none;
    background:#ccccff;
    display:inline-block;
}
#intro>div>input[type=button]:hover {
    background:#fff;
    cursor:pointer;
}

#grid-view>div{
    display:inline-block;
    width:280px;
    height:200px;
    position: relative;
    top:300px;
    background-color: #ccccff;
    box-sizing: border-box;
    float:left;
    margin-right:20px;
    margin-left:20px;
    margin-bottom:20px;
}

main>#grid-view>div>h2{
    font-size:20px;
    text-align: center;
}
main>#grid-view>div>p{
    text-align:center;
}
main>#grid-view>div:hover{
    cursor:pointer;
    background:white;
}

main>div>p{
    text-align: center;
}
/*FOOTER*/

footer>p{

    position:absolute;
    bottom:0;
}

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>This is my project website</title>
	<link href='https://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
	<script src="script.js" type="text/javascript"></script>
	</head>
	<body>
	<div id="wrapper">
	<header>
	<nav>
	<ul id="list-left">
	<li><a href="#">Начало</a></li>
	<li><a href="#">Who we are</a></li>
	<li><a href="#">Idea</a></li>
	<li><a href="#">Най-търсена професия</a></li>
	</ul>
	<ul id="list-right">
	<li><a href="#">Sign In</a></li>
	<span>/</span>
	<li><a href="#">Sing Up</a></li>
	</ul>
	</nav>
	<h1><a href="#">Job Profile</a></h1>
	<span>Step into your future</span>
	</header>
	<main>
	<section id="slideshow">
	<div>
	<img src="images/GIJ_Header_WhereToStart_LoggedIn-1021x381.jpg" alt="image1">
	</div>
	<div>
	<img src="images/download.jpg" alt="image2">
	</div>
	<div>
	<img src="images/Job-Shadow-2016-CC-Homepage1.jpg" alt="image3">
	</div>
	</section>
	<section id="intro">
	<div>
	<h2>Кой сме ние?</h2>
	<p>Сайтът е направен с цел да помогне на хората, който искат
	да се развиват в професията си.
	<p>Искат да сменят своята сфера на
	работа и да получат нови знания.</p>
	<p>В нашата платформа може да откриете какви професии може да работите и необходимите за тях
	курсове и школи.</p>
	<p>Знаем какво търсят компаниите и ще ви помогнем да намерите пътят до тях</p>
	</div>
	<div>
	<span>Въведи желана професия: </span>
	<input type="text">
	<input type="button" value="Търси">
	</div>
	</section>
	<section id="grid-view">
	<div>
	<h2>Предпочитани Компании</h2>
	<p>HP</p>
	<p>HP</p>
	<p>HP</p>
	</div>
	<div>
	<h2>Предпочитани Школи</h2>
	<p>HP</p>
	<p>HP</p>
	<p>HP</p>
	</div>
	<div>
	<h2>Предпочитани Професии</h2>
	<p>HP</p>
	<p>HP</p>
	<p>HP</p>
	</div>
	<div>
	<h2>Предпочитани Компании</h2>
	<p>HP</p>
	<p>HP</p>
	<p>HP</p>
	</div>
	<div>
	<h2>Предпочитани Школи</h2>
	<p>HP</p>
	<p>HP</p>
	<p>HP</p>
	</div>
	<div>
	<h2>Предпочитани Професии</h2>
	<p>HP</p>
	<p>HP</p>
	<p>HP</p>
	</div>
	</section>
	</main>
	<footer>
	</footer>
	</div>
	</body>
	</html>
	setInterval(function() {
	$('#slideshow > div:first')
	.fadeOut(1000)
	.next()
	.fadeIn(1000)
	.end(1000)
	.appendTo('#slideshow');
	}, 3000);
	/* RESET */
	body,h1,#wrapper,li,ul{
	margin: 0;
	padding: 0;

	}
	/HEADER/
	body{
	background-color: #ccccff;
	font-family: Ubuntu,sans-serif;
	}
	#wrapper{
	background-color: rgba(255, 255, 255,0.3);
	margin: 60px auto;
	width: 960px;
	height:1200px;
	padding-top:10px;
	}
	header>nav>ul>li>a:hover{
	text-shadow:1px 1px 1px black;
	color:white;
	}
	header>nav>ul>li{
	list-style:none;
	}
	header>nav>ul>li>a{
	text-decoration: none;
	color:#000;
	}
	header>h1>a{
	text-decoration:none;
	color:#000;
	margin-top:5px;
	margin-left:2px;
	text-shadow:1px 1px 1px white;
	width:170px;
	}
	header>h1>a:hover{
	text-shadow:1px 1px 1px black;
	color:white;
	}

	nav>ul>li{
	display: inline-block;
	padding:0;
	margin:0;
	text-shadow:1px 1px 1px white;
	}
	#list-right{
	float:right;
	margin-top: 15px;
	margin-right:20px;
	}
	#list-left>li{
	margin-right:20px;
	}
	#list-left{
	float:left;
	margin-top: 15px;
	margin-right:20px;
	}
	nav{
	margin-top:5px;
	width:80%;
	float:right;
	}
	header{
	z-index: 5;
	position:fixed;
	top:0;
	width:960px;
	height: 60px;
	border-bottom: 1px solid blue;
	background: linear-gradient(to bottom, #ccccff 10%,rgba(255, 255, 255,0.5) 90%);
	box-shadow: 0px 0px 4px black;
	}
	header>span{
	font-style: italic;
	margin-left:2px;
	}
	#wrapper:after{
	content: ".";
	clear: both;
	display: block;
	visibility: hidden;
	height: 0px;
	}
	/MAIN/

	main>#slideshow>div>img{
	z-index: 1;
	width: 960px;
	height:300px;
	}
	#slideshow {
	position: relative;
	}

	#slideshow > div {
	position: absolute;
	}
	main>#intro{
	margin-top:0px;
	width:960px;
	height:280px;
	display:block;
	position:relative;
	top:300px;
	border-bottom:1px solid white;
	}
	main>div{
	display:inline-block;
	width:280px;
	height:200px;
	position: relative;
	top:300px;
	background-color: #ccccff;
	box-sizing: border-box;
	float:left;
	margin-right:20px;
	margin-left:20px;
	}

	#intro>div{
	display:inline-block;
	float:left;
	width:480px;
	height:300px;
	box-sizing: border-box;
	padding-left:5px;
	}
	#intro>div>span{
	margin:20px;
	display:inline-block;
	}
	#intro>div>input[type=button]{
	width:60px;
	height:20px;
	border:none;
	background:#ccccff;
	display:inline-block;
	}
	#intro>div>input[type=button]:hover {
	background:#fff;
	cursor:pointer;
	}

	#grid-view>div{
	display:inline-block;
	width:280px;
	height:200px;
	position: relative;
	top:300px;
	background-color: #ccccff;
	box-sizing: border-box;
	float:left;
	margin-right:20px;
	margin-left:20px;
	margin-bottom:20px;
	}

	main>#grid-view>div>h2{
	font-size:20px;
	text-align: center;
	}
	main>#grid-view>div>p{
	text-align:center;
	}
	main>#grid-view>div:hover{
	cursor:pointer;
	background:white;
	}

	main>div>p{
	text-align: center;
	}
	/FOOTER/

	footer>p{

	position:absolute;
	bottom:0;
	}