body {
background-image: url("../img/img9.jpeg");
height: 100vh;
}
a {
text-decoration: none;
width: 100%;
height: 100%;
text-align: center;
display: block;
color: #fff;
}
a:hover {
color: #5bc0de;
}
nav {
background-color: #000;
width: 100%;
height: 60px;
}
nav img {
color: #fff;
margin-left: 40px;
width: 60px;
height: 60px;
background-color: #fff;
}
nav .navbar-brand {
color: gray;
font-size: 35px;
font-family: 'Caveat', cursive;
padding-top: 0;
padding-bottom: 0;
margin-right: 0;
}
nav ul {
float: right;
display: flex;
align-items: center;
height: 100%;
}
nav ul li {
text-align: center;
list-style: none;
font-size: 20px;
text-decoration: none;
border-right: 2px solid #fff;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
width: 60px;
}
textarea {
resize: none;
}
label {
text-align: left;
}
footer{
background-color: #282e34;
width: 100%;
height: 400px;
padding: 20px 30px
}
footer h1 {
font-size: 25px;
color: gray;
border-bottom: 1px ridge lightgray;
letter-spacing: 3px;
font-weight: lighter;
}
footer li {
background-color: #282e34;
font-size: 15px;
letter-spacing: 2px;
list-style: none;
position: relative;
display: flex;
flex-flow: row wrap;
align-items: center;
padding: .75rem 1rem;
}
footer li a {
text-align: left;
}
.sub {
width: 480px;
height: 320px;
background-color: #282e34;
float: right;
margin-top: -320px;
}
.sub p {
font-size: 25px;
color: gray;
margin-top: 25px;
}
.button3 {
font-size: 20px;
background-color: transparent;
margin-top: 80px;
margin-left: 190px;
position: absolute;
border: solid white;
border-radius: 5px;
color: gray;
padding: 5px;
}
footer p {
color: pink;
font-size: 15px;
text-align: center;
font-weight: lighter;
font-family: 'Jura', sans-serif;
margin-top: 40px;
margin-left: 40px;
opacity: 0.5
}
.contact-box{
width: 1000px;
height: 500px;
background-color: #000;
opacity: 0.5;
margin-left: 150px;
top: 50px;
position: relative;
color: #fff;
}
#contact{
text-align: center;
padding: 5px;
}
.media-col i {
font-size: 1.75em;
}
a:hover .fa-facebook-official {
color: #3B5998;
}
a:hover .fa-twitter {
color: #1dcaff;
}
a:hover .fa-instagram {
color: #8a3ab9;
}
a:hover .fa-google-plus {
color: #d34836;
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="description" content="OPIS"/>
<meta name="keywords" conent="slowo klucz">
<meta http-equiv="X-UA-Compatible" conent="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />
<title>Example</title>
</head>
<body>
<nav>
<div class="navbar-brand">
<img src="img/img1.png">
Duke Kennen
</div>
<ul>
<li><a href="Index.html"><i class="fa fa-home" aria-hidden="true"></i></a></li>
<li><a href="Love.html"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
<li><a href="Info.html"><i class="fa fa-info" aria-hidden="true"></i></a></li>
<li><a href="Contact.html"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li>
<li><a href="x"><i class="fa fa-globe" aria-hidden="true"></i></a></li>
</ul>
</nav>
<div class="contact-box">
<form name="contact" method="post" action="form-processing.php">
<div class="form-group">
<label for="Name">Name:</label>
<input class="form-control" name="Name" type="text" id="FName" size="10">
</div>
<div class="form-group">
<label for="Email">Email:</label>
<input class="form-control" name="Email" type="text" id="Email" size="48">
</div>
<div class="form-group">
<label for="Message">Message:</label>
<textarea class="form-control" name="Message" id="Message" cols="50" rows="7"></textarea>
</div>
<div class="form-group">
<input name="Button" type="submit" class="btn btn-primary form-control" id="button" value="Send"/>
</div>
</form>
</div>
<footer>
<div class="row">
<div class="col-2">
<ul class="list-group">
<h1 class="list-group-item-heading">O Nas</h1>
<li><a href="index.html">Kim Jesteśmy</a></li>
<li><a href="Love.html">Historia</a></li>
<li><a href="x">Programy</a></li>
<li><a href="x">Fotografia</a></li>
</ul>
</div>
<div class="col-2">
<ul class="list-group">
<h1 class="list-group-item-heading">Firma</h1>
<li><a href="index.html">Projekty</a></li>
<li><a href="Love.html">Marketing</a></li>
<li><a href="x">Blog</a></li>
<li><a href="x">Praca</a></li>
</ul>
</div>
<div class="col-2">
<ul class="list-group">
<h1 class="list-group-item-heading">Wsparcie</h1>
<li><a href="index.html">FAQ</a></li>
<li><a href="Love.html">Support24</a></li>
<li><a href="x">Regulamin</a></li>
</ul>
</div>
<div class="col-2">
<ul class="list-group">
<h1 class="list-group-item-heading">Stay In Touch</h1>
<div class="row mb-3 mt-3">
<div class="col-6 media-col"><a href="index.html"><i class="fa fa-facebook-official" aria-hidden="true"></i></a></div>
<div class="col-6 media-col"><a href="index.html"><i class="fa fa-twitter" aria-hidden="true"></i></a></div>
</div>
<div class="row">
<div class="col-6 media-col"><a href="index.html"><i class="fa fa-instagram" aria-hidden="true"></i></a></div>
<div class="col-6 media-col"><a href="index.html"><i class="fa fa-google-plus" aria-hidden="true"></i></a></div>
</div>
</ul>
</div>
</div>
<div class="sub">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, officiis. Quos velit commodi adipisci itaque amet optio aliquid vel ratione!</p>
<form>
<input type="Email" placeholder="Enter Email">
<button type="Submit" class="button3">Subskrybuj</button>
</form>
</div>
<p>Creative Technology © 2017</p>
</footer>
</body>
</html>
"Troszkę" zmieniłem Twój układ strony (za przeproszeniem). Zauważyłem, że korzystałeś z Bootstrapa (przynamniej go zaincludowałeś) tak więc używałem podstawowych klas lub uzupełniałem własnymi
Kilka uwag na przyszłość (jako młody samouk :P)
1. Proponuję rozpocząć naukę od wnikliwej analizy całego CSS, od podstaw do CSS3, flexboxów itp. Potem wejdź w Bootstrapa (nie mówię, że robisz źle korzystając, ale pozwala to na jeszcze lepsze pisanie kodu)
2. Uwagi optymalizacyjne itp itd
- Nie includuj za dużo elementów - naliczyłem z 3 pliki css i 3 fonty. Zwiększa to czas wczytywania strony.
- jeśli robisz samemu style, pamiętaj żeby precyzować - mam tu na myśli np. background-color zamiast background - jeśli oczywiście deklarujesz tylko kolor - odnoszenie się do konkretnego elementu zmniejsza czas renderowania.
- #000 zamiast black #fff zamiast white. Wciąż nie jest to chyba udowodnione, ale z długiej lektury wychodzi na to że hexa jest szybciej obsługiwane + jeden znak mniej :D
- staraj się unikać ustawiania wartości na sztywno - szerokość 1000px, itp itd. więcej nauczysz się kiedy wejdziesz w całe RWD (responsywność), a wtedy to już *****.
- struktura HTML - nie wiem ile niepotrzebnych znaczników usunąłem, nie wiem z iloma źle zastosowanymi się znalazłem, ale myślę, że "internety" i tutoriale pomogą (ewentualnie lintery).
- elementy z dupy (przykro mi ale taka prawda. Jak patrzę na "sub", który z tego co wiem nie powinien być stosowany tak jak został. + kompletnie nie wiem co autor miał na myśli robiąc go (to miał być sidebar czy co? Nie mam pojęcia dlatego tego nawet nie dotknąłem, bałem się że mnie ugryzie)).
- Ale każdy uczy się na błędach, a od czegoś trzeba zacząć.
Mam nadzieję, że się przydało cokolwiek stąd. Good Luck
