Αγγελική
HTML
<img id="logo" src="C:\Users\Rafael\Desktop\Aggeliki\logo2.png">
<div class="navbar">
<a class="a-links" href="#">ΕΠΙΚΟΙΝΩΝΙΑ</a>
<a class="a-links" href="#">ΒΙΟΓΡΑΦΙΚΟ</a>
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">ΥΠΗΡΕΣΙΕΣ
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
<a href="#">Λογοθεραπεία Παιδιών</a>
<a href="#">Λογοθεραπεία Ενηλίκων</a>
<a href="#">Εποπτείες Θεραπευτών</a>
</div>
</div>
<a class="a-links" href="#">ΑΡΘΡΑ</a>
<a class="a-links" href="#">ΑΡΧΙΚΗ</a>
</div>
<div id="clear"></div>
<div id="main">
<h1 id="name">Αγγελική Ψόχιου</h1>
</div>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</p>
<div id="botnav">
<form>
<button id="search-button" type="submit"><i class="fa fa-search"></i></button>
<input id="searchbar" type="text" placeholder="Αναζήτηση...">
</form>
<h2 id="follow-me">Follow me on Social<h2>
<a href="#"><img id="facebook-icon" src="C:\Users\Rafael\Desktop\Aggeliki\download.png"></a>
<div id="footer">
<p id="developer-sign"> Website developed by <a href="#">Rafael Tsantes</a></p>
</div>
</div>
</section>
CSS
body {
background-color: ;
margin: 0;
padding: 0;
z-index: 1;
background-image: url("b-amp-w-13.jpg");
background-repeat: no-repeat;
background-size: 100%;
}
.navbar {
overflow: hidden;
background-color: #FFA578;
font-family: Arial, Helvetica, sans-serif;
float: right;
width: 100%;
height: 98px;
position: fixed;
z-index: 2;
background: rgb(255, 165, 120, 0.8);
}
.navbar a {
float: right;
font-size: 16px;
color: black;
text-align: center;
padding: 40px 20px;
text-decoration: none;
font-weight: bold;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: black;
padding: 40px 20px;
background-color: inherit;
font-family: inherit;
margin: 0;
font-weight: bold;
}
.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
background-color: #C56E5A;
}
.dropdown-content {
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 144px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 2;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
#logo {
float: left;
width: 300px;
position: fixed;
margin-top: -50px;
margin-left: -80px;
z-index: 3;
}
#clear {
background-color: ;
height: 200px;
width: 100%;
overflow: hidden;
}
#main {
background-color: ;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
width: 100%;
}
h1 {
text-align: center;
font-size: 50px;
text-shadow: 0 0 8px white;
}
section {
position: relative;
top: 550px;
width: 100vw;
min-height: 500px;
box-sizing: border-box;
background-color: white;
z-index: 1;
}
section p {
text-align: center;
margin: 0 0 50px;
padding: 0;
font-size: 40px;
color: black;
}
#botnav {
background-color: #B2FE91;
height: 400px;
width: 100vw;
margin-top: 150px;
padding: 0;
overflow: hidden;
}
#searchbar {
padding: 15px;
border: 2px solid blue;
resize: none;
width: 500px;
background-image:
position: absolute;
margin-top: 50px;
float: left;
}
#search-button {
width: 50px;
height: 50px;
margin-left: 10px;
border: 2px solid blue;
border-right: none;
float: left;
margin-top: 50px;
}
#follow-me {
margin-left: 615px;
margin-top: 45px;
}
#facebook-icon {
width: 30px;
margin-left: 23px;
margin-top:
}
#footer {
background-color: red;
margin-top: 225px;
padding: 30px;
}
#developer-sign {
font-size: 15px;
}
JAVASCRIPT
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Script to change opacity when scrolling the web page -->
<script>
$(document).ready(function(){
$(window).scroll(function(){
$('#main').css("opacity", 1- $(window).scrollTop() / 700)
})
})
</script>
