I'm noob and I'm following different tutorial to achieve my goal and the goal is to make animated social icons in the footer and the problem is that the socials icons from FontAwesome are not working.
If i put them in < ul > they are not working but outside i can see them .-
How can i solve this to see them when I put them in < ul > ?
This is the code :
HTML :
<!DOCTYPE html>
<html>
<head>
<title>Contact us</title>
<link rel="stylesheet" type="text/css" href="stilecontact.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/17fe744bb9.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
</head>
<body>
<section>
<div class="circle"></div>
<header>
<img src ="logo.jpg">
</header>
</div>
<div class="container">
<div class="contact-box">
<div class="left"></div>
<div class="right">
<h2>Contact Us</h2>
<input type="text" class="field" placeholder="Your Name">
<input type="text" class="field" placeholder="Your Email">
<input type="text" class="field" placeholder="Phone">
<textarea placeholder="Message" class="field"></textarea>
<button class="btn">Send</button>
</div>
</div>
</div>
</body>
<footer>
<ul>
<li><i class="fa-brands fa-twitter"></i></li>
<li><i class="fa-brands fa-facebook"></i></li>
<li><i class="fa-brands fa-instagram"></i></li>
</ul>
</footer>
</html>
This is CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Quicksand', sans-serif;
}
body{
height: 100vh;
width: 100%;
}
.container{
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 20px 100px;
}
.container:after{
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url("team.jpg") no-repeat center;
background-size: cover;
filter: blur(50px);
z-index: -1;
}
.contact-box{
max-width: 850px;
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-content: center;
align-items: center;
text-align: center;
background-color: #fff;
box-shadow: 0px 0px 19px 5px rgba(0,0,0,0.19);
}
.left{
background: url("team.jpg") no-repeat center;
background-size: cover;
height: 100%;
}
.right{
padding: 25px 40px;
}
h2{
position: relative;
padding: 0 0 10px;
margin-bottom: 10px;
}
h2:after{
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
height: 4px;
width: 50px;
border-radius: 2px;
background-color: #2ecc71;
}
.field{
width: 100%;
border: 2px solid rgba(0, 0, 0, 0);
outline: none;
background-color: rgba(230, 230, 230, 0.6);
padding: 0.5rem 1rem;
font-size: 1.1rem;
margin-bottom: 22px;
transition: .3s;
}
.field:hover{
background-color: rgba(0, 0, 0, 0.1);
}
textarea{
min-height: 150px;
}
.btn{
width: 100%;
padding: 0.5rem 1rem;
background-color: #2ecc71;
color: #fff;
font-size: 1.1rem;
border: none;
outline: none;
cursor: pointer;
transition: .3s;
}
.btn:hover{
background-color: #27ae60;
}
.field:focus{
border: 2px solid rgba(30,85,250,0.47);
background-color: #fff;
}
#media screen and (max-width: 880px){
.contact-box{
grid-template-columns: 1fr;
}
.left{
height: 200px;
}
}
footer {
margin: o;
padding: o;
box-sizing: border-box;
}
body footer {
display:flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
ul
{
position: relative;
display: flex;
color: #fff;
}
ul li
{
position: relative;
list-style: none;
margin: 0 20px;
cursor: pointer;
}
ul li a
{
text-decoration: none;
}
ul li a .fa
{
font-size: 6em;
color: #222;
}
ul li ::before
{
font-family: fontAwesome;
position: absolute;
top: 0;
left: 0;
font-size: 6em;
height: 0;
overflow: hidden;
transition: 0.5s ease-in-out;
}
ul li:nth-child(1)::before
{
content: '\f099';
color: #1da1f2;
border-bottom: 4px solid #1da1f2;
}
ul li:nth-child(2)::before
{
content: '\f09a';
color: #07476f;
border-bottom: 4px solid #1da1f2;
}
ul li:nth-child(3)::before
{
content: '\f16d';
color: #f24f1d;
border-bottom: 4px solid #f2391d;
}
Icons were there, but they were not visible. So for your reference, I have given red color.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Quicksand', sans-serif;
}
body{
height: 100vh;
width: 100%;
}
.container{
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 20px 100px;
}
.container::after{
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url("team.jpg") no-repeat center;
background-size: cover;
filter: blur(50px);
z-index: -1;
}
.contact-box{
max-width: 850px;
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-content: center;
align-items: center;
text-align: center;
background-color: #fff;
box-shadow: 0px 0px 19px 5px rgba(0, 0, 0, 0.19);
}
.left{
background: url("team.jpg") no-repeat center;
background-size: cover;
height: 100%;
}
.right{
padding: 25px 40px;
}
h2{
position: relative;
padding: 0 0 10px;
margin-bottom: 10px;
}
h2::after{
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
height: 4px;
width: 50px;
border-radius: 2px;
background-color: #2ecc71;
}
.field{
width: 100%;
border: 2px solid rgba(0, 0, 0, 0);
outline: none;
background-color: rgba(230, 230, 230, 0.6);
padding: 0.5rem 1rem;
font-size: 1.1rem;
margin-bottom: 22px;
transition: 0.3s;
}
.field:hover{
background-color: rgba(0, 0, 0, 0.1);
}
textarea{
min-height: 150px;
}
.btn{
width: 100%;
padding: 0.5rem 1rem;
background-color: #2ecc71;
color: #fff;
font-size: 1.1rem;
border: none;
outline: none;
cursor: pointer;
transition: 0.3s;
}
.btn:hover{
background-color: #27ae60;
}
.field:focus{
border: 2px solid rgba(30, 85, 250, 0.47);
background-color: #fff;
}
#media screen and (max-width: 880px){
.contact-box{
grid-template-columns: 1fr;
}
.left{
height: 200px;
}
}
footer {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body footer {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
ul
{
position: relative;
display: flex;
color: #fff;
}
ul li
{
position: relative;
list-style: none;
margin: 0 20px;
cursor: pointer;
}
ul li a
{
text-decoration: none;
}
ul li a .fa
{
font-size: 6em;
color: #222;
}
ul li::before
{
font-family: sans-serif;
position: absolute;
top: 0;
left: 0;
font-size: 6em;
height: 0;
overflow: hidden;
transition: 0.5s ease-in-out;
}
ul li:nth-child(1)::before
{
content: '\f099';
color: #1da1f2;
border-bottom: 4px solid #1da1f2;
}
ul li:nth-child(2)::before
{
content: '\f09a';
color: #07476f;
border-bottom: 4px solid #1da1f2;
}
ul li:nth-child(3)::before
{
content: '\f16d';
color: #f24f1d;
border-bottom: 4px solid #f2391d;
}
<!DOCTYPE html>
<html>
<head>
<title>Contact us</title>
<link rel="stylesheet" type="text/css" href="stilecontact.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/17fe744bb9.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section>
<div class="circle"></div>
<header>
<img src="logo.jpg">
</header>
</div>
<div class="container">
<div class="contact-box">
<div class="left"></div>
<div class="right">
<h2>Contact Us</h2>
<input type="text" class="field" placeholder="Your Name">
<input type="text" class="field" placeholder="Your Email">
<input type="text" class="field" placeholder="Phone">
<textarea placeholder="Message" class="field"></textarea>
<button class="btn">Send</button>
</div>
</div>
</div>
</body>
<footer>
<!-- <ul>
<li><i class="fa-brands fa-twitter"></i></li>
<li><i class="fa-brands fa-facebook"></i></li>
<li><i class="fa-brands fa-instagram"></i></li>
</ul> -->
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-instagram"></i>
<div style="color:red">
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-instagram"></i>
</div>
</footer>
</html>
found the solution !
HTML
<!DOCTYPE html>
<html>
<head>
<title>Contact us</title>
<link rel="stylesheet" type="text/css" href="stilecontact.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
</head>
<body>
<section>
<div class="circle"></div>
<header>
<img src="logo.jpg">
</header>
</div>
<div class="container">
<div class="contact-box">
<div class="left"></div>
<div class="right">
<h2>Contact Us</h2>
<input type="text" class="field" placeholder="Your Name">
<input type="text" class="field" placeholder="Your Email">
<input type="text" class="field" placeholder="Phone">
<textarea placeholder="Message" class="field"></textarea>
<button class="btn">Send</button>
</div>
</div>
</div>
</body>
<footer>
<ul>
<li><i class="fa fa-twitter" aria-hidden="true"> </i> </li>
<li><i class="fa fa-instagram" aria-hidden="true"> </i> </li>
<li><i class="fa fa-facebook" aria-hidden="true"> </i> </li>
</ul>
</div>
</footer>
</html>
CSS
*{
margin: 0;
padding: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000000;
}
ul{
position: relative;
display: flex;
}
ul li{
position: relative;
list-style: none;
margin: 0 20px;
cursor: pointer;
}
ul li a{
text-decoration: none;}
ul li a .fa{
font-size: 6em;
color: #222;
}
ul li a .fa:hover{
opacity: 0;
transition: opacity 0.2s ease-in;
}
ul li:before{
position: absolute;
font-family: FontAwesome;
top: -10px;
left: 0;
font-size: 6em;
width: 100%;
height: 0;
overflow: hidden;
transition: .3s ease-in-out;
}
ul li:nth-child(1)::before{
content: '\f099';
color: #1da1f2;
border-bottom: 4px solid #1da1f2;
}
ul li:nth-child(2)::before{
content: '\f232';
color: #25d366;
border-bottom: 4px solid #25d366;
}
ul li:nth-child(3)::before{
content: '\f16a';
color: #ff0000;
border-bottom: 4px solid #ff0000;
}
ul li:hover:before{
height: 110%;
}
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
<title>Contact Us</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.hero {
width: 100%;
height: 100vh;
background-image: linear-gradient(black 0%, black 34%, white 34%, white 100%);
position: relative;
padding: 0 5%;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
}
nav {
width: 100%;
position: absolute;
top: 0;
left: 0;
padding: 20px 8%;
display: flex;
align-items: center;
justify-content: space-between;
}
nav .logo {
width: 100px;
margin-left: -80px;
}
nav ul li {
list-style: none;
display: inline-block;
margin-left: 40px;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 17px;
}
.content {
text-align: left;
}
.content h1{
font-size: 70px;
color: rgb(255, 255, 255);
font-weight: 600;
transition: 0.5s;
margin-bottom: 700px;
}
.content h1:hover{
-webkit-text-stroke: 2px #fff;
color: transparent;
}
.banner {
position: relative;
width: 90%;
margin: 50px auto;
}
.heading {
position: absolute;
top: 50%;
width: 50%;
margin-top: -400px;
margin-left: 650px;
text-align: center;
font-size: 3rem;
}
.food{
width: 400px;
position:absolute;
margin-top: -500px;
margin-left: 580px;
opacity: 0.4;
transition: opacity .3s ease;
background-color: rgba(0,0,0,0.6);
}
.contact-info{
display: inline;
width: 100%;
max-width: 1200px;
align-items: center;
justify-content: center;
padding: 0 20px;
margin-top: 320px;
}
.card{
background: #fff;
padding: 0 20px;
margin: 0 10px;
width: calc(33% - 20px);
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: rgb(0, 0, 0);
cursor: pointer;
}
.card-icon{
font-size: 28px;
background: #ff6348;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px !important;
border-radius: 50%;
transition: 0.3s linear;
}
.card:hover .card-icon{
background: none;
color: #ff6348;
transform: scale(1.6);
}
.card p{
margin-top: 20px;
font-weight: 300;
letter-spacing: 2px;
max-height: 0;
opacity: 0;
transition: 0.3s linear;
}
.card:hover p{
max-height: 40px;
opacity: 1;
}
.contact{
position: relative;
min-height: 100vh;
padding: 50px 100px;
display: inline;
justify-content: center;
align-items: center;
flex-direction: column;
}
.contactform {
width: 500px;
padding: 10px;
background: #fff;
margin-top: 280px;
}
.contatform h2 {
font-size: 30px;
color: #333;
font-weight: 500;
}
.contactform .inputBox{
position: relative;
width: 100%;
margin-top: 10px;
}
.contactform .inputBox input,
.contactform .inputBox textarea{
width: 100%;
padding: 5px 0;
font-size: 16px;
margin: 10px 0;
border: none;
border-bottom: 2px solid #333;
outline: none;
resize: none;
}
.contactform .inputBox input [type="submit"]
{
width: 100px;
background: #00bcd4;
color: #fff;
border: none;
cursor: pointer;
padding: 10px;
font-size: 18px;
}
.map iframe {
width: 300px;
height: 400px;
display: flex;
flex-direction: row;
margin-top: 100px;
}
#media (max-width: 991px)
{
.contact{
padding:50px;
}
.container {
flex-direction: column;
}
.container .contact-info2 {
margin-bottom: 40PX;
}
.container .contact-info2,
.contatform{
width: 100%;
}
}
#media screen and (max-width:800px) {
.contact-info{
flex-direction: column;
}
.card{
width: 100%;
max-width: 300px;
margin: 10px 0;
}
}
footer {
text-align: center;
background-color: rgb(29, 17, 17);
color: #fff;
padding: 12px;
position: absolute;
bottom: 0;
width: 100%;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="hero">
<nav>
<img src="logo.png" class="logo">
<ul>
<li>Home</li>
<li>Photos</li>
<li>Menu</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="content">
<div class ="row">
<div class = "banner">
<img class="food" src="food.jpeg" alt="[food]">
<h1 class ="heading">Contact Us</h1>
</div>
</div>
</div>
<div class="contact-info">
<div class="card">
<i class="card-icon far fa-envelope"></i>
<p>Mehmet.under#gmail.com</p>
</div>
<div class="card">
<i class="card-icon fas fa-phone"></i>
<p>+4799221199</p>
</div>
<div class="card">
<i class="card-icon fas fa-map-marker-alt"></i>
<p>Karl Johans gate 5, 0154 OSLO</p>
</div>
</div>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2000.2351438173973!2d10.
746176751774849!3d59.911644771148914!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46416e89e0be32c5%
3A0xa9aad198e39ddef9!2sKarl%20Johans%20gate%205%2C%200154%20Oslo!5e0!3m2!1sno!2sno!4v1667850923403!5m2!1sno!2sno"
style="border:0;"
allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
<section class="contact">
<div class="contactform">
<form action="">
<h2>Send Message</h2>
<div class="inputBox">
<input type="text" name="" placeholder= "Full Name" required="required">
</div>
<div class="inputBox">
<input type="text" name="" placeholder="Email" required="required">
</div>
<div class="inputBox">
<textarea placeholder="Type Your Message" required="required"></textarea>
</div>
<div class="inputBox">
<input type="submit" name="" value="Send">
</div>
</div>
</form>
</section>
<footer>
<p>Just Turkey Grill is a 501c(3)
organization, and your contributions are tax
deductible.</p>
<p id="copyright">Copyright © 2022 by the Just Turkey Grill.
Questions?
<a href="mailto:Mehmet.under#gmail.com"
>Mail Mehmet Under.</a></p>
</footer>
<!-- footer -->
</div>
</body>
</html>
I did nothing special. The first second it worked and the other, it stopped being clickable. I need help straight away because I have to give in this task about 2 hours. The only thing I changed was the section area, but nothing more. I just changed the form and added back the map, and changed and added more css code.
Just add z-index: 1 to your navbar and should be work
With the inspector of your browser you can see that the "contact" section goes over the navbar, you have to put a higher z-index on the navbar so that it goes over it
I tried using overflow hidden, box-shadow none, background none, background color transparent, outline none, border 0, border-width 0px and border none, but it doesn't change. Is there any more option I can do? I'm currently not using JavaScript or jQuery. I'm not using any framework either. How to remove the border?
header {
background-color: rgb(255, 255, 255);
height: 600px;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
width: 98.5%;
margin: auto;
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
outline: none;
}
.logo {
width: 160px;
cursor: pointer;
margin-right: auto;
}
.navbar .dropdown {
display: none;
box-shadow: 0px 0px 2px #000;
border-radius: 5px;
outline: none;
}
.navbar ul li:hover .dropdown {
display: block;
}
.navbar>ul>li {
position: relative;
}
.navbar>ul>li>.dropdown {
position: absolute;
top: 1.4em;
}
.navbar .dropdown li {
display: block;
margin: 15px;
margin-left: -20px;
text-align: left;
}
.navbar ul li {
list-style: none;
display: inline-block;
margin: 0 20px;
position: relative;
}
.navbar ul li a {
text-decoration: none;
color: black;
border-bottom: 0px;
}
.navbar ul li a:hover {
color: teal;
}
.navbar>ul>li::after {
content: '';
height: 3px;
width: 0;
background: teal;
position: absolute;
left: 0;
bottom: 0px;
transition: 0.5s;
}
.navbar>ul>li:hover::after {
width: 100%;
}
button1 {
list-style: none;
border: none;
background: teal;
padding: 10px 20px;
border-radius: 20px;
color: white;
font-size: 15px;
transition: 0.4s;
}
.Header-Register {
text-align: center;
}
.content {
position: relative;
bottom: 200px;
}
.Full-Name {
width: 100%;
padding: 10px 0;
margin: 5px 0;
border-left: 0;
border-top: 0;
border-right: 0;
outline: none;
background: transparent;
border-bottom: 2px solid #adadad;
}
.gender {
margin: 20px;
display: flex;
text-align: center;
justify-content: center;
}
.email {
border-bottom: 2px solid #adadad;
}
.option {
margin: 20px;
}
.Password {
margin: 20px;
border-bottom: 2px solid #adadad;
}
.Confirm-Password {
border-bottom: 2px solid #adadad;
}
.Register {
width: 5%;
padding: 5px 30px;
cursor: pointer;
display: block;
margin: auto;
background: teal;
border: 0;
outline: none;
border-radius: 5px;
color: white;
margin-top: 20px;
}
.content {
position: relative;
text-align: center;
margin-top: -190px;
bottom: 120px;
}
footer {
position: relative;
bottom: -15px;
height: auto;
background-color: rgb(255, 255, 255);
padding-top: 0px;
margin-top: 20px;
}
.socials {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
list-style: none;
margin: 5px;
position: relative;
bottom: -20px;
left: -20px;
}
.socials li {
margin: 10px;
}
.socials a {
text-decoration: none;
color: #000;
font-size: 25px;
}
.footer-content{
align-items: center;
justify-content: center;
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<header>
<div class="banner-home">
<div class="navbar">
<img src="icon.png" class="logo">
<ul>
<li>Home</li>
<li>Products
<ul class="dropdown">
<li>Healthcare</li>
<li>Cosmetic</li>
<li>Misc.</li>
</ul>
</li>
<li>About Us</li>
<li>Register</li>
</ul>
<button1>Login</button1>
</div>
<div class="Header-Register">
<h1>Register</h1>
</div>
</header>
<section>
<div class="content">
<div class="Full-Name">
<input type="text" placeholder="Full Name" required>
</div>
<div class="email">
<input type="email" placeholder="Email" required>
</div>
<div class="gender">
<input type="radio" name="radiobutton" value="Male">
<label for="radiobutton">Male</label>
<input type="radio" name="radiobutton" value="Female">
<label for="radiobutton">Female</label>
</div>
<div>
<div class="option">
<select>
<option value="Jakarta">Jakarta</option>
<option value="Bogor">Bogor</option>
<option value="Depok">Depok</option>
<option value="Tangerang">Tangerang</option>
<option value="Bekasi">Bekasi</option>
</select>
</div>
</div>
<div class="Password">
<input type="text" placeholder="Password">
</div>
<div class="Confirm-Password">
<input type="text" placeholder="Confirm Password">
</div>
<div class="Register">
Register
</div>
</div>
<footer>
<div>
<ul class="socials">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-instagram"></i></li>
</ul>
<div class="footer-content">
<p>Copyright Ⓒ 2022 [NAME]. All Rights Reserved.</p>
</div>
</footer>
Juju. By default browsers may apply some defualt styling to input elements. You can opt-out this styling by setting -webkit-appearance: none;on the elements you wanna override.
-webkit-appearance: none;
If you want no border its:
input {
border: none;
}
If you want no border when the input has been clicked on its (in Chrome at least):
input:focus-visible {
outline: none;
}
Snippet:
input {
border: none;
}
input:focus-visible {
outline: none;
}
header {
background-color: rgb(255, 255, 255);
height: 600px;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
width: 98.5%;
margin: auto;
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
outline: none;
}
.logo {
width: 160px;
cursor: pointer;
margin-right: auto;
}
.navbar .dropdown {
display: none;
box-shadow: 0px 0px 2px #000;
border-radius: 5px;
outline: none;
}
.navbar ul li:hover .dropdown {
display: block;
}
.navbar>ul>li {
position: relative;
}
.navbar>ul>li>.dropdown {
position: absolute;
top: 1.4em;
}
.navbar .dropdown li {
display: block;
margin: 15px;
margin-left: -20px;
text-align: left;
}
.navbar ul li {
list-style: none;
display: inline-block;
margin: 0 20px;
position: relative;
}
.navbar ul li a {
text-decoration: none;
color: black;
border-bottom: 0px;
}
.navbar ul li a:hover {
color: teal;
}
.navbar>ul>li::after {
content: '';
height: 3px;
width: 0;
background: teal;
position: absolute;
left: 0;
bottom: 0px;
transition: 0.5s;
}
.navbar>ul>li:hover::after {
width: 100%;
}
button1 {
list-style: none;
border: none;
background: teal;
padding: 10px 20px;
border-radius: 20px;
color: white;
font-size: 15px;
transition: 0.4s;
}
.Header-Register {
text-align: center;
}
.content {
position: relative;
bottom: 200px;
}
.Full-Name {
width: 100%;
padding: 10px 0;
margin: 5px 0;
border-left: 0;
border-top: 0;
border-right: 0;
outline: none;
background: transparent;
border-bottom: 2px solid #adadad;
}
.gender {
margin: 20px;
display: flex;
text-align: center;
justify-content: center;
}
.email {
border-bottom: 2px solid #adadad;
}
.option {
margin: 20px;
}
.Password {
margin: 20px;
border-bottom: 2px solid #adadad;
}
.Confirm-Password {
border-bottom: 2px solid #adadad;
}
.Register {
width: 5%;
padding: 5px 30px;
cursor: pointer;
display: block;
margin: auto;
background: teal;
border: 0;
outline: none;
border-radius: 5px;
color: white;
margin-top: 20px;
}
.content {
position: relative;
text-align: center;
margin-top: -190px;
bottom: 120px;
}
footer {
position: relative;
bottom: -15px;
height: auto;
background-color: rgb(255, 255, 255);
padding-top: 0px;
margin-top: 20px;
}
.socials {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
list-style: none;
margin: 5px;
position: relative;
bottom: -20px;
left: -20px;
}
.socials li {
margin: 10px;
}
.socials a {
text-decoration: none;
color: #000;
font-size: 25px;
}
.footer-content {
align-items: center;
justify-content: center;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MediCare</title>
<link rel="stylesheet" href="Register.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
<header>
<div class="banner-home">
<div class="navbar">
<img src="icon.png" class="logo">
<ul>
<li>Home</li>
<li>Products
<ul class="dropdown">
<li>Healthcare</li>
<li>Cosmetic</li>
<li>Misc.</li>
</ul>
</li>
<li>About Us</li>
<li>Register</li>
</ul>
<a href="#" style="text-decoration:none;">
<button1>Login</button1>
</a>
</div>
<div class="Header-Register">
<h1>Register</h1>
</div>
</header>
<section>
<div class="content">
<div class="Full-Name">
<input type="text" placeholder="Full Name" required>
</div>
<div class="email">
<input type="email" placeholder="Email" required>
</div>
<div class="gender">
<input type="radio" name="radiobutton" value="Male">
<label for="radiobutton">Male</label>
<input type="radio" name="radiobutton" value="Female">
<label for="radiobutton">Female</label>
</div>
<div>
<div class="option">
<select>
<option value="Jakarta">Jakarta</option>
<option value="Bogor">Bogor</option>
<option value="Depok">Depok</option>
<option value="Tangerang">Tangerang</option>
<option value="Bekasi">Bekasi</option>
</select>
</div>
</div>
<div class="Password">
<input type="text" placeholder="Password">
</div>
<div class="Confirm-Password">
<input type="text" placeholder="Confirm Password">
</div>
<div class="Register">
Register
</div>
</div>
<footer>
<div>
<ul class="socials">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-instagram"></i></li>
</ul>
<div class="footer-content">
<p>Copyright Ⓒ 2022 [NAME]. All Rights Reserved.</p>
</div>
</footer>
</body>
</html>
I'm trying to build an ecommerce website by watching a YouTube video. I am stuck at apply CSS style to some classes. I have given my html CSS code below. In that from the class "#product1 .pro.des{ "onwards CSS styling is not applying to its content.on #product1 .pro.des{ element in CSS I tried to align text to start but it is not reflecting. Not only that but also the styling of other elements which comes after "#product1 .pro.des{" also are not working. Hope someone will resolve this?
#import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&family=Spartan:wght#100;200;300;400;500;600;700;800;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Spartan' sans-serif;
}
h1{
font-size: 50PX;
line-height: 64px;
color: #222;
}
h2{
font-size: 46PX;
line-height: 54px;
color: #222;
}
h4{
font-size: 20PX;
color: #222;
}
h6{
font-weight: 700;
font-size: 12px
}
p{
font-size: 16PX;
color: #465b52;
margin: 15px 0 20px 0;
}
.section-p1{
padding: 40px 80px;
}
.section-p1{
margin: 40px 0;
}
body{
width: 100%;
}
/*header start*/
#header{
display: flex;
justify-content: space-between ;
align-items: center;
padding: 20px 80px;
background-color: #e3e6f3;
box-shadow: 0px 5px 15p rgba(0, 0, 0, 0.06);
z-index: 999;
position: sticky;
top: 0;
left: 0;
}
#navbar{
display: flex;
justify-content: center;
align-items: center;
}
#navbar li{
list-style: none;
padding: 0 20px;
position: relative;
}
#navbar li a{
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
transition: 0.3s ease;
}
#navbar li a:hover,
#navbar li a.active{
color: #088178;
}
#navbar li a.active::after,
#navbar li a:hover::after{
content: "";
width: 30%;
height: 2px;
background: #088178;
position: absolute;
bottom: -4px;
left: 20px;
}
#hero{
background-image: url("img/hero4.png");
height: 90vh;
width: 100%;
background-position: top 25 right 0;
background-size: cover;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
#hero h4{
padding-bottom: 15px;
}
#hero h1{
color: #088178;
}
#hero button{
background-image: url(img/button.png);
background-color: transparent;
color: #088178;
border:0;
padding: 14px 80px 14px 65px;
background-repeat: no-repeat;
cursor: pointer;
font-weight: 700;
font-size: 15px;
}
#feature{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
#feature .fe-box{
width: 180px;
text-align: center;
padding: 25px 15px;
box-shadow: 20px 20px 34px rgba(0, 0, 0, 0.03);
border: 1px solid #cce7d0;
border-radius: 4px;
margin: 15px 0;
}
#feature .fe-box:hover{
box-shadow: 10px 10px 34px rgba(0, 0, 0, 0.03);
}
#feature .fe-box h6{
display: inline-block;
padding: 9px 8px 6px 8px;
line-height: 1;
border-radius: 4px;
color: #088178;
background-color: #fddde4;
}
#feature .fe-box img{
width: 100%;
margin-bottom: 10px;
}
#product1{
text-align: center;
}
#product1 .pro{
width: 23%;
min-width: 250px;
padding: 10px 12px;
border: 1px solid #cce7d0;
border-radius: 25px;
cursor: pointer;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.02);
margin: 15px 0;
}
#product1 .pro img{
width: 100%;
border-radius: 20px;
}
#product1 .pro.des{
text-align: start;
padding: 10px 0;
}
#product1.pro.des span{
color: #606063;
font-size: 50px;
}
#product1 .pro.des h5{
padding-top: 7px;
color: #1a1a1a;
font-size: 14px;
}
#product1 .pro.des i{
font-size: 25px;
color: rgb(241, 183, 25);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ecommerce</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="header">
<img src="img/logo.png" class="logo">
<div>
<ul id="navbar">
<li><a class="active" href="index.html">Home</a></l1>
<li>Shop</l1>
<li>Blog</l1>
<li>About</l1>
<li>Contact</li>
<li><i class="fa-solid fa-cart-arrow-down"></i></li>
</ul>
</div>
</section>
<section id="hero">
<h4>Trade-in-offer</h4>
<h2>Super Value Deals</h2>
<h1>On all products</h1>
<p>Save more with coupons & upto 70%off</p>
<button>Shop Now</button>
</section>
<section id="feature" class="section-p1">
<div class="fe-box">
<img src="img/features/f1.png">
<h6>Free Shipping</h6>
</div>
<div class="fe-box">
<img src="img/features/f2.png">
<h6>Online Order</h6>
</div>
<div class="fe-box">
<img src="img/features/f3.png">
<h6>Save Money</h6>
</div>
<div class="fe-box">
<img src="img/features/f4.png">
<h6>Promotions</h6>
</div>
<div class="fe-box">
<img src="img/features/f5.png">
<h6>Happy Sell</h6>
</div>
<div class="fe-box">
<img src="img/features/f6.png">
<h6>Support</h6>
</div>
</section>
<section id="product1" class="section-p1">
<h2>Featured Products</h2>
<p>Summer Collections</p>
<div class="pro-container">
<div class="pro">
<img src="img/products/f1.jpg">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Tshirt</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>$78</h4>
</div>
<i class="fal fa-shopping-cart"></i>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
Add Spaces Between your selectors like:
#product1 .pro .des h5{
padding-top: 7px;
color: #1a1a1a;
font-size: 14px;
}
#product1 .pro .des i{
font-size: 25px;
color: rgb(241, 183, 25);
}
Should be .pro > .des or .pro .des (with a space) because .des is a child to .pro.
.pro.des would only be valid if those classes shared the same element.
#import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&family=Spartan:wght#100;200;300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Spartan' sans-serif;
}
h1 {
font-size: 50PX;
line-height: 64px;
color: #222;
}
h2 {
font-size: 46PX;
line-height: 54px;
color: #222;
}
h4 {
font-size: 20PX;
color: #222;
}
h6 {
font-weight: 700;
font-size: 12px
}
p {
font-size: 16PX;
color: #465b52;
margin: 15px 0 20px 0;
}
.section-p1 {
padding: 40px 80px;
}
.section-p1 {
margin: 40px 0;
}
body {
width: 100%;
}
/*header start*/
#header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 80px;
background-color: #e3e6f3;
box-shadow: 0px 5px 15p rgba(0, 0, 0, 0.06);
z-index: 999;
position: sticky;
top: 0;
left: 0;
}
#navbar {
display: flex;
justify-content: center;
align-items: center;
}
#navbar li {
list-style: none;
padding: 0 20px;
position: relative;
}
#navbar li a {
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
transition: 0.3s ease;
}
#navbar li a:hover,
#navbar li a.active {
color: #088178;
}
#navbar li a.active::after,
#navbar li a:hover::after {
content: "";
width: 30%;
height: 2px;
background: #088178;
position: absolute;
bottom: -4px;
left: 20px;
}
#hero {
background-image: url("img/hero4.png");
height: 90vh;
width: 100%;
background-position: top 25 right 0;
background-size: cover;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
#hero h4 {
padding-bottom: 15px;
}
#hero h1 {
color: #088178;
}
#hero button {
background-image: url(img/button.png);
background-color: transparent;
color: #088178;
border: 0;
padding: 14px 80px 14px 65px;
background-repeat: no-repeat;
cursor: pointer;
font-weight: 700;
font-size: 15px;
}
#feature {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
#feature .fe-box {
width: 180px;
text-align: center;
padding: 25px 15px;
box-shadow: 20px 20px 34px rgba(0, 0, 0, 0.03);
border: 1px solid #cce7d0;
border-radius: 4px;
margin: 15px 0;
}
#feature .fe-box:hover {
box-shadow: 10px 10px 34px rgba(0, 0, 0, 0.03);
}
#feature .fe-box h6 {
display: inline-block;
padding: 9px 8px 6px 8px;
line-height: 1;
border-radius: 4px;
color: #088178;
background-color: #fddde4;
}
#feature .fe-box img {
width: 100%;
margin-bottom: 10px;
}
#product1 {
text-align: center;
}
#product1 .pro {
width: 23%;
min-width: 250px;
padding: 10px 12px;
border: 1px solid #cce7d0;
border-radius: 25px;
cursor: pointer;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.02);
margin: 15px 0;
}
#product1 .pro img {
width: 100%;
border-radius: 20px;
}
#product1 .pro>.des {
text-align: start;
padding: 10px 0;
}
#product1.pro>.des span {
color: #606063;
font-size: 50px;
}
#product1 .pro >.des h5 {
padding-top: 7px;
color: #1a1a1a;
font-size: 14px;
}
#product1 .pro >.des i {
font-size: 25px;
color: rgb(241, 183, 25);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ecommerce</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="header">
<img src="img/logo.png" class="logo">
<div>
<ul id="navbar">
<li><a class="active" href="index.html">Home</a></li>
<li>Shop</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
<li><i class="fa-solid fa-cart-arrow-down"></i></li>
</ul>
</div>
</section>
<section id="hero">
<h4>Trade-in-offer</h4>
<h2>Super Value Deals</h2>
<h1>On all products</h1>
<p>Save more with coupons & upto 70%off</p>
<button>Shop Now</button>
</section>
<section id="feature" class="section-p1">
<div class="fe-box">
<img src="img/features/f1.png">
<h6>Free Shipping</h6>
</div>
<div class="fe-box">
<img src="img/features/f2.png">
<h6>Online Order</h6>
</div>
<div class="fe-box">
<img src="img/features/f3.png">
<h6>Save Money</h6>
</div>
<div class="fe-box">
<img src="img/features/f4.png">
<h6>Promotions</h6>
</div>
<div class="fe-box">
<img src="img/features/f5.png">
<h6>Happy Sell</h6>
</div>
<div class="fe-box">
<img src="img/features/f6.png">
<h6>Support</h6>
</div>
</section>
<section id="product1" class="section-p1">
<h2>Featured Products</h2>
<p>Summer Collections</p>
<div class="pro-container">
<div class="pro">
<img src="img/products/f1.jpg">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Tshirt</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>$78</h4>
</div>
<i class="fal fa-shopping-cart"></i>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
Side note: markup was invalid due to missing closing <li> - you had </ll> instead.
I can't get my p tag in section properties in div class="sf sf_2 to become 0 px from the bottom of that div and I'm not sure why? it moves 0 px from top,right,left but not bottom? I tried it position to see if that somehow affected but no results and I also tried changing what did it was in and I'm really not sure what's causing the problem. any suggestions and advice much appreciated.
/* color:#00a786 lighter green */
/* color:#005242 dark green for buttons */
/* color:003027 dark green background */
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html{
background-color: #fff;
}
body{
margin:0 auto;
font-family: arial, helvetica, sans-serif ;
}
a{
text-decoration: none;
color:#fff;
}
li{
display: inline;
padding: 10px;
font-size: 16px;
color:#fff;
}
/* --------------------------------HEADER------------------------------------- */
header{
background-image:linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url(../img/heder_photo_2.jpg);
background-size: cover;
width: 636px auto;
min-height: 110vh;
background-attachment: fixed;
position: relative;
left: -20px;
right: -20px;
z-index: 80;
}
.row{
padding-top: 40px;
border-bottom: 2px solid white;
}
}
/* --------------------------------TOP-LEFT------------------------------------- */
.top-left{
float:left;
}
.top-left ul {
font-size: 16px;
padding-left: 150px;
padding-top: -80px;
padding-bottom: 30px
}
/* -------------------------------SOCIAL-LINKS------------------------------------- */
.social-links ul {
display:inline;
padding-left: 150px;
}
.social-links li{
font-size: 100%;
}
.social-links li:hover,
.social-links li:active{
border-bottom: 2px solid #00a786;
transition: border-bottom 0.2s;
}
/* -------------------------------TOP-RIGHT------------------------------------- */
.top-right{
float:right;
}
.top-right {
float: right;
padding-bottom: 30px;
}
.top-right li {
font-size: 100%;
font-weight: 200;
}
.top-right li:hover,
.top-right li:active{
color:#005242;
transition: color 0.2s;
}
.top-right li:first-child{
border-left: 2px solid #fff;
border-width: thin;
}
.top-right li:last-child{
border-left: 2px solid #fff;
border-width: thin;
}
/* -------------------------------H1------------------------------------- */
.main-header{
padding-top: 30px;
padding-left: 130px;
float:left;
}
.header-text{
display: inline-block;
}
h1{
font-size: 90%;
color:#fff;
font-family: sans-serif;
}
span{
color:#00a786
}
/* -------------------------------MAIN-NAV------------------------------------ */
.main-nav{
float: right;
padding-right: 30px;
padding-top: 40px;
}
.main-nav-links{
display: inline-block;
}
.main-nav-links li:hover,
.main-nav-links li:active{
border-bottom: 2px solid #00a786;
transition: border-bottom 0.2s;
}
/* -------------------------------MAIN-SECTION------------------------------------ */
.main-section{
}
.main-content{
text-align: center;
}
.content{
padding-top: 50px;
color: #fff;
display:inline-block;
}
.content h2{
font-size: 100%;
}
.content p{
font-size: 60%
}
/* -------------------------------BUTTONS------------------------------------ */
.btn:link,
.btn:visited,
input[type=submit]{
display: inline-block;
padding :10px 30px;
margin-top: 60px;
font-size: 60%;
font-weight: 300;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.2s,border 0.2s,color 0.2s;
msargin-right: 15px;
}
.btn-full:link,
.btn-full:visited,
input[type=submit]{
background-color: #00a786;
border: 1px solid #005242;
color: #fff;
}
.btn-full:hover,
.btn-full:active,
input[type=submit]{
background-color: #005242;
border: 1px solid #005242;
color: #fff;
}
.search-btn,
input[type=submit]{
display: block;
padding :15px 20px;
font-size: 60%;
font-weight: 300;
text-decoration: none;
border-radius: 5px;
width: 100px;
height: 40px;
transition: background-color 0.2s,border 0.2s,color 0.2s;
}
.search-btn,
input[type=submit]{
background-color: #00a786;
border: 1px solid #005242;
color: #fff;
}
.search-btn:hover,
.search-btn:active,
input[type=submit]{
border: 0px solid #fff;
color: #fff;
}
/* -------------------------------form search------------------------------------ */
.main-Search{
background-color: #003027;
border: 2px solid #003027;
border-radius: 3px;
position: absolute;
left:200px;
right:20px;
top: 500px;
width: 600px;
/*z-index: 99;*/
}
.main-Search{
padding:30px 10px;
display: inline;
}
/* -------------------------------Section-properties-----------------------------------*/
.section-properties{
position: relative;
top: 150px;
text-align: center;
}
.sf{
position: relative;
top:120px;
height:270px;
width: 330px ;
}
.sf_2{
position: relative;
left:80px;
top:120px;
height:270px;
width: 330px ;
background-image:url(../img/sf-2.jpeg)
}
/* this is the for rent notice class and the common properties*/
.fr{
position: relative;
text-transform: uppercase;
display: inline;
color: #fff;
border:#00a786;
padding: 7px 13px;
border-radius: 2px;
font-size: 12px;
background-color:#00a786;
}
/* fr-notice = for rent notice*/
.fr-notice{
left:-100px;
top:30px;
}
.sf_2 p,
.sf_2 h2 {
font-family: sans-serif;
font-size:1rem;
font-weight: 400;
color:#fff;
float: left;
position: absolute;
top:60px;
}
.sf_2 p{
bottom:0px;
}
/*
.sf-3 p{
position: absolute;
color:#fff;
}
.sf-4 p{
position: absolute;
color:#fff;
}
.sf-5 p{
position: absolute;
color:#fff; */
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styling.css">
<link rel="stylesheet" type="text/css" href="vendors/fonts/Aileron/">
<title>Williams Rental Propertie's</title>
</head>
<body>
<header>
<!--- TOP LEFT-------->
<div class="row">
<div class="top-left">
<ul>
<li> <i class="fas fa-phone-volume icon-contact ">(312)343-8748</i></li>
<li><i class="far fa-envelope icon-contact">WilliamsRentalProperties</i></li>
</ul>
</div>
<!--- SOCIAL LINKS-------->
<div class="social-links">
<ul>
<li><i class="fab fa-facebook-f"> </i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-pinterest-square"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
<!--- TOP RIGHT-------->
<div class="top-right">
<ul>
<li><i class="fas fa-user "> Register</i></li>
<li> <i class="fas fa-sign-in-alt">Login</i></li>
</ul>
</div>
</div>
<!--- main Header-------->
<div class="main-header">
<div class="header-text">
<h1>Williams <span> Rental</span> Properties</h1>
</div>
</div>
<nav class="main-nav">
<div class="main-nav-links">
<ul>
<li> Home</li>
<li> Featured List</li>
<li> About Us</li>
<li> Pages</li>
<li> Blog</li>
<li> contact</li>
</ul>
</div>
</nav>
<section class="main-section">
<div class="main-content">
<div class="content">
<h2>Let Us Find You Your Dream Home!</h2>
<p>Search real estate property records, houses, condos, land and more .
Find property info from the most comprehensive source data.</p>
<a class="btn btn-full" href="#">View Details</a>
<div class="main-Search">
<form class="Search" action="index.html" method="post">
<label for="address"></label>
<!--- city-------->
<input type="text" name="Search" placeholder="keyword,zipcode">
<!--- city-------->
<label for="city"></label>
<select class="city" name="city">
<option value="city">city</option>
</select>
<!--- state------->
<label for="state"></label>
<select class="state" name="state-form">
<option value="state">state</option>
</select>
<!--- search button------->
<button class="search-btn" href="#">Search</button>
</form>
</div>
</div>
</div>
</section>
</header>
<!--- SECTION PROPERTIES------->
<section class="section-properties">
<h2>RECENT PROPERTIES</h2>
<p>Discover how much the latest properties have been rented for</p>
<div
class="sf sf_2">
<div class="fr fr-notice">for rent</div>
<p>Rochester, NY 14626</p>
</div>
</section>
</body>
</html>
Your <p> tag in section-properties is down to the bottom because your header is taking all the height. This is because you have given min-height to header as 110vh.
vh is equal to 1% of the height of the viewport's initial containing block.
You have to set top: auto; to .sf_2 p as you set top: 60px; for it earlier.
Run the snippet below:
.section-properties {
position: relative;
text-align: center;
}
.sf {
position: relative;
height: 270px;
width: 330px;
}
.sf_2 {
position: relative;
height: 270px;
width: 330px;
background-image: url(https://s3-media3.fl.yelpcdn.com/bphoto/Pc6S8vtv9Kk5OXmbPrTxlg/ls.jpg);
background: solid 1px red;
}
/* this is the for rent notice class and the common properties*/
.fr {
position: relative;
text-transform: uppercase;
display: inline;
color: #fff;
border: #00a786;
padding: 7px 13px;
border-radius: 2px;
font-size: 12px;
background-color: #00a786;
font-family: sans-serif;
}
/* fr-notice = for rent notice*/
.fr-notice {
top: 30px;
}
.sf_2 p,
.sf_2 h2 {
font-family: sans-serif;
font-size: 1rem;
font-weight: 400;
color: #fff;
position: absolute;
top: 60px;
}
.sf_2 p {
top: auto;
bottom: 0px;
}
<div class="sf sf_2">
<div class="fr fr-notice">for rent</div>
<p>Rochester, NY 14626</p>
</div>
/* color:#00a786 lighter green */
/* color:#005242 dark green for buttons */
/* color:003027 dark green background */
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html{
background-color: #fff;
}
body{
margin:0 auto;
font-family: arial, helvetica, sans-serif ;
}
a{
text-decoration: none;
color:#fff;
}
li{
display: inline;
padding: 10px;
font-size: 16px;
color:#fff;
}
/* --------------------------------HEADER------------------------------------- */
header{
background-image:linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url(../img/heder_photo_2.jpg);
background-size: cover;
width: 636px auto;
min-height: 110vh;
background-attachment: fixed;
position: relative;
left: -20px;
right: -20px;
z-index: 80;
}
.row{
padding-top: 40px;
border-bottom: 2px solid white;
}
}
/* --------------------------------TOP-LEFT------------------------------------- */
.top-left{
float:left;
}
.top-left ul {
font-size: 16px;
padding-left: 150px;
padding-top: -80px;
padding-bottom: 30px
}
/* -------------------------------SOCIAL-LINKS------------------------------------- */
.social-links ul {
display:inline;
padding-left: 150px;
}
.social-links li{
font-size: 100%;
}
.social-links li:hover,
.social-links li:active{
border-bottom: 2px solid #00a786;
transition: border-bottom 0.2s;
}
/* -------------------------------TOP-RIGHT------------------------------------- */
.top-right{
float:right;
}
.top-right {
float: right;
padding-bottom: 30px;
}
.top-right li {
font-size: 100%;
font-weight: 200;
}
.top-right li:hover,
.top-right li:active{
color:#005242;
transition: color 0.2s;
}
.top-right li:first-child{
border-left: 2px solid #fff;
border-width: thin;
}
.top-right li:last-child{
border-left: 2px solid #fff;
border-width: thin;
}
/* -------------------------------H1------------------------------------- */
.main-header{
padding-top: 30px;
padding-left: 130px;
float:left;
}
.header-text{
display: inline-block;
}
h1{
font-size: 90%;
color:#fff;
font-family: sans-serif;
}
span{
color:#00a786
}
/* -------------------------------MAIN-NAV------------------------------------ */
.main-nav{
float: right;
padding-right: 30px;
padding-top: 40px;
}
.main-nav-links{
display: inline-block;
}
.main-nav-links li:hover,
.main-nav-links li:active{
border-bottom: 2px solid #00a786;
transition: border-bottom 0.2s;
}
/* -------------------------------MAIN-SECTION------------------------------------ */
.main-section{
}
.main-content{
text-align: center;
}
.content{
padding-top: 50px;
color: #fff;
display:inline-block;
}
.content h2{
font-size: 100%;
}
.content p{
font-size: 60%
}
/* -------------------------------BUTTONS------------------------------------ */
.btn:link,
.btn:visited,
input[type=submit]{
display: inline-block;
padding :10px 30px;
margin-top: 60px;
font-size: 60%;
font-weight: 300;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.2s,border 0.2s,color 0.2s;
msargin-right: 15px;
}
.btn-full:link,
.btn-full:visited,
input[type=submit]{
background-color: #00a786;
border: 1px solid #005242;
color: #fff;
}
.btn-full:hover,
.btn-full:active,
input[type=submit]{
background-color: #005242;
border: 1px solid #005242;
color: #fff;
}
.search-btn,
input[type=submit]{
display: block;
padding :15px 20px;
font-size: 60%;
font-weight: 300;
text-decoration: none;
border-radius: 5px;
width: 100px;
height: 40px;
transition: background-color 0.2s,border 0.2s,color 0.2s;
}
.search-btn,
input[type=submit]{
background-color: #00a786;
border: 1px solid #005242;
color: #fff;
}
.search-btn:hover,
.search-btn:active,
input[type=submit]{
border: 0px solid #fff;
color: #fff;
}
/* -------------------------------form search------------------------------------ */
.main-Search{
background-color: #003027;
border: 2px solid #003027;
border-radius: 3px;
position: absolute;
left:200px;
right:20px;
top: 500px;
width: 600px;
/*z-index: 99;*/
}
.main-Search{
padding:30px 10px;
display: inline;
}
/* -------------------------------Section-properties-----------------------------------*/
.section-properties{
position: relative;
top: 150px;
text-align: center;
}
.sf{
position: relative;
top:120px;
height:270px;
width: 330px ;
}
.sf_2{
position: relative;
left:80px;
top:120px;
height:270px;
width: 330px ;
background-image:url(../img/sf-2.jpeg)
}
/* this is the for rent notice class and the common properties*/
.fr{
position: relative;
text-transform: uppercase;
display: inline;
color: #fff;
border:#00a786;
padding: 7px 13px;
border-radius: 2px;
font-size: 12px;
background-color:#00a786;
}
/* fr-notice = for rent notice*/
.fr-notice{
left:-100px;
top:30px;
}
.sf_2 p,
.sf_2 h2 {
font-family: sans-serif;
font-size:1rem;
font-weight: 400;
color:#000;
float: left;
position: absolute;
top:60px;
}
.sf_2 p{
bottom:0px;
}
/*
.sf-3 p{
position: absolute;
color:#fff;
}
.sf-4 p{
position: absolute;
color:#fff;
}
.sf-5 p{
position: absolute;
color:#fff; */
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styling.css">
<link rel="stylesheet" type="text/css" href="vendors/fonts/Aileron/">
<title>Williams Rental Propertie's</title>
</head>
<body>
<header>
<!--- TOP LEFT-------->
<div class="row">
<div class="top-left">
<ul>
<li> <i class="fas fa-phone-volume icon-contact ">(312)343-8748</i></li>
<li><i class="far fa-envelope icon-contact">WilliamsRentalProperties</i></li>
</ul>
</div>
<!--- SOCIAL LINKS-------->
<div class="social-links">
<ul>
<li><i class="fab fa-facebook-f"> </i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-pinterest-square"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
<!--- TOP RIGHT-------->
<div class="top-right">
<ul>
<li><i class="fas fa-user "> Register</i></li>
<li> <i class="fas fa-sign-in-alt">Login</i></li>
</ul>
</div>
</div>
<!--- main Header-------->
<div class="main-header">
<div class="header-text">
<h1>Williams <span> Rental</span> Properties</h1>
</div>
</div>
<nav class="main-nav">
<div class="main-nav-links">
<ul>
<li> Home</li>
<li> Featured List</li>
<li> About Us</li>
<li> Pages</li>
<li> Blog</li>
<li> contact</li>
</ul>
</div>
</nav>
<section class="main-section">
<div class="main-content">
<div class="content">
<h2>Let Us Find You Your Dream Home!</h2>
<p>Search real estate property records, houses, condos, land and more .
Find property info from the most comprehensive source data.</p>
<a class="btn btn-full" href="#">View Details</a>
<div class="main-Search">
<form class="Search" action="index.html" method="post">
<label for="address"></label>
<!--- city-------->
<input type="text" name="Search" placeholder="keyword,zipcode">
<!--- city-------->
<label for="city"></label>
<select class="city" name="city">
<option value="city">city</option>
</select>
<!--- state------->
<label for="state"></label>
<select class="state" name="state-form">
<option value="state">state</option>
</select>
<!--- search button------->
<button class="search-btn" href="#">Search</button>
</form>
</div>
</div>
</div>
</section>
</header>
<!--- SECTION PROPERTIES------->
<section class="section-properties">
<h2>RECENT PROPERTIES</h2>
<p>Discover how much the latest properties have been rented for</p>
<div
class="sf sf_2">
<div class="fr fr-notice">for rent</div>
<p>Rochester, NY 14626</p>
</div>
</section>
</body>
</html>
Check this one.
I am trying to create some icons that overlay the border like this:
However when i try to do this i end up with:
Is there a way i can fix this? Dont worry about the icon color i changed it to black so that it is visible.Is there a way i can achieve this using HTML and CSS.
Here is my work:
https://codepen.io/anon/pen/YLdPjM
body {
margin: 0;
padding: 0;
font-family: 'Oswald', sans-serif;
}
.red {
color: red;
}
.underline {
text-decoration: underline;
}
.nav ul {
list-style: none;
background-color: #0F211E;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
text-transform: uppercase;
}
.hero-image {
background-image: url("1.jpg");
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}
section.hero {
height: 75%;
position: relative;
}
.hero-content {
position: absolute;
top: 50%;
transform: translateY(5%);
width: 100%;
}
.bgimg {
/* The image used */
background-image: url("bg.jpg");
/* Set a specific height */
height: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.back .caption:before{
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: scale(0,1);
}
.back .caption:after{
border-right: 1px solid #fff;
border-left: 1px solid #fff;
transform: scale(1,0);
}
.card.flipped .back .caption:before,
.card.flipped .back .caption:after {
opacity: .9;
transform: scale(1);
}
.back dl{
font-family:'Lato', Arial, sans-serif;
font-weight:300;
bottom:40px;
left:40px;
position: absolute;
opacity: 0;
transition: opacity .35s, transform .35s;
transition-delay: .85s;
transform: translate3d(-40px,0,0);
}
.card.flipped .back dl {
opacity: 1;
transform: translate3d(0,0,0);
}
dl dt{
float: left;
width: 60px;
overflow: hidden;
clear: left;
text-align: right;
font-weight:700;
}
dl dd{
margin-left: 80px;
text-align:left;
}
dl dd:before,
dl dd:after{
display: table;
content: " ";
}
dl dd:after{
clear: both;
}
.front:hover p {
opacity: 1;
transform: translate3d(0,0,0);
}
figure a{
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#media (min-width: 450px) {
.container{
left: 50%;
margin-left:-225px;
}
}
body {
background-color: #0F211E;
}
.recipe-card {
border-top: 15px solid lightblue;
border-bottom: 50px solid red;
background: #fff;
margin: 0 auto;
width: 90%;
max-width: 496px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.card-top {
padding: 30px 15px;
display: flex;
}
.card-top .right {
padding-left: 20px;
}
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</style>
</head>
<body class="news" >
<header>
<div class="nav">
<ul>
<li class="two"> <span>About</span></li>
<li class="three"><a class="active" href="#">Projects</a></li>
<li class="four">Skills</li>
</ul>
</div>
</header>
<section class="hero">
<div class="bgimg">
</div>
<div class="hero-content">
<div class="recipe-card">
<aside>
<div class="card-top">
<div class="left">
<img src="myAvatar.png" class="myavatar">
</div>
<div class="right">
<h1>Hamza Wahbi</h1>
<hr class="hrunder">
<h5 style="color:#8B8B8B " >Web Developer</h5>
<h1>Age: <font color="#8B8B8B">13</font></h1>
<h1>Email: <font color="#8B8B8B">fxgfnxngfx#gmail.com</font></h1>
<h1>Phone: <font color="#8B8B8B">0093836372</font></h1>
</div>
</div>
</aside>
<i class="fab fa-twitter fa-3x" style="color: black;"></i>
<i class="fab fa-instagram fa-3x" style="color: black;"></i>
<i class="fab fa-dribbble fa-3x" style="color: black;"></i>
<i class="fab fa-facebook-f fa-3x" style="color: black;"></i>
<i class="fab fa-snapchat-ghost fa-3x" style="color: black;"></i>
<i class="fab fa-google-plus-g fa-3x" style="color: black;"></i>
<i class="fab fa-youtube fa-3x" style="color: black;"></i>
<i class="fab fa-pinterest-p fa-3x" style="color: black;"></i>
</div>
</div><!-- .hero-content -->
</section>
</div>
</html>
Why are you using a border for this? Just have the icons inside a div and set the background colour of the div to red. See snippet below.
body {
margin: 0;
padding: 0;
font-family: 'Oswald', sans-serif;
}
.red {
color: red;
}
.icon-bar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
background-color: #FC5558;
padding: 5px;
}
.icon-bar i {
color: #fff;
}
.underline {
text-decoration: underline;
}
.nav ul {
list-style: none;
background-color: #0F211E;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
text-transform: uppercase;
}
.hero-image {
background-image: url("1.jpg");
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}
section.hero {
height: 75%;
position: relative;
}
.hero-content {
position: absolute;
top: 50%;
transform: translateY(5%);
width: 100%;
}
.bgimg {
/* The image used */
background-image: url("bg.jpg");
/* Set a specific height */
height: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.back .caption:before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: scale(0, 1);
}
.back .caption:after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
transform: scale(1, 0);
}
.card.flipped .back .caption:before,
.card.flipped .back .caption:after {
opacity: .9;
transform: scale(1);
}
.back dl {
font-family: 'Lato', Arial, sans-serif;
font-weight: 300;
bottom: 40px;
left: 40px;
position: absolute;
opacity: 0;
transition: opacity .35s, transform .35s;
transition-delay: .85s;
transform: translate3d(-40px, 0, 0);
}
.card.flipped .back dl {
opacity: 1;
transform: translate3d(0, 0, 0);
}
dl dt {
float: left;
width: 60px;
overflow: hidden;
clear: left;
text-align: right;
font-weight: 700;
}
dl dd {
margin-left: 80px;
text-align: left;
}
dl dd:before,
dl dd:after {
display: table;
content: " ";
}
dl dd:after {
clear: both;
}
.front:hover p {
opacity: 1;
transform: translate3d(0, 0, 0);
}
figure a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#media (min-width: 450px) {
.container {
left: 50%;
margin-left: -225px;
}
}
body {
background-color: #0F211E;
}
.recipe-card {
border-top: 15px solid lightblue;
background: #fff;
margin: 0 auto;
width: 90%;
max-width: 496px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.card-top {
padding: 30px 15px;
display: flex;
}
.card-top .right {
padding-left: 20px;
}
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</style>
</head>
<body class="news">
<header>
<div class="nav">
<ul>
<li class="two">
<span>About</span>
</li>
<li class="three"><a class="active" href="#">Projects</a></li>
<li class="four">Skills</li>
</ul>
</div>
</header>
<section class="hero">
<div class="bgimg">
</div>
<div class="hero-content">
<div class="recipe-card">
<aside>
<div class="card-top">
<div class="left">
<img src="myAvatar.png" class="myavatar">
</div>
<div class="right">
<h1>Hamza Wahbi</h1>
<hr class="hrunder">
<h5 style="color:#8B8B8B ">Web Developer</h5>
<h1>Age:
<font color="#8B8B8B">13</font>
</h1>
<h1>Email:
<font color="#8B8B8B">fxgfnxngfx#gmail.com</font>
</h1>
<h1>Phone:
<font color="#8B8B8B">0093836372</font>
</h1>
</div>
</div>
</aside>
<div class="icon-bar">
<i class="fab fa-twitter fa-3x"></i>
<i class="fab fa-instagram fa-3x"></i>
<i class="fab fa-dribbble fa-3x"></i>
<i class="fab fa-facebook-f fa-3x"></i>
<i class="fab fa-snapchat-ghost fa-3x"></i>
<i class="fab fa-google-plus-g fa-3x"></i>
<i class="fab fa-youtube fa-3x"></i>
<i class="fab fa-pinterest-p fa-3x"></i>
</div>
</div>
</div>
<!-- .hero-content -->
</section>
</div>
</html>
You can wrap all icons in a DIV (class icon_row in my snippet below), apply position: absolute to that DIV and appy position: relative to the recipe-card DIV to define it as the position anchor for the icon DIV (and optionally use position settings like bottom, left etc. to fine-tune the position):
body {
margin: 0;
padding: 0;
font-family: 'Oswald', sans-serif;
}
.red {
color: red;
}
.underline {
text-decoration: underline;
}
.nav ul {
list-style: none;
background-color: #0F211E;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
text-transform: uppercase;
}
.hero-image {
background-image: url("1.jpg");
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}
section.hero {
height: 75%;
position: relative;
}
.hero-content {
position: absolute;
top: 50%;
transform: translateY(5%);
width: 100%;
}
.bgimg {
/* The image used */
background-image: url("bg.jpg");
/* Set a specific height */
height: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.back .caption:before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: scale(0, 1);
}
.back .caption:after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
transform: scale(1, 0);
}
.card.flipped .back .caption:before,
.card.flipped .back .caption:after {
opacity: .9;
transform: scale(1);
}
.back dl {
font-family: 'Lato', Arial, sans-serif;
font-weight: 300;
bottom: 40px;
left: 40px;
position: absolute;
opacity: 0;
transition: opacity .35s, transform .35s;
transition-delay: .85s;
transform: translate3d(-40px, 0, 0);
}
.card.flipped .back dl {
opacity: 1;
transform: translate3d(0, 0, 0);
}
dl dt {
float: left;
width: 60px;
overflow: hidden;
clear: left;
text-align: right;
font-weight: 700;
}
dl dd {
margin-left: 80px;
text-align: left;
}
dl dd:before,
dl dd:after {
display: table;
content: " ";
}
dl dd:after {
clear: both;
}
.front:hover p {
opacity: 1;
transform: translate3d(0, 0, 0);
}
figure a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#media (min-width: 450px) {
.container {
left: 50%;
margin-left: -225px;
}
}
body {
background-color: #0F211E;
}
.recipe-card {
border-top: 15px solid lightblue;
border-bottom: 50px solid red;
background: #fff;
margin: 0 auto;
width: 90%;
max-width: 496px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
position: relative;
}
.card-top {
padding: 30px 15px;
display: flex;
}
.card-top .right {
padding-left: 20px;
}
.icon_row {
position: absolute;
left: 30px;
}
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</style>
</head>
<body class="news">
<header>
<div class="nav">
<ul>
<li class="two">
<span>About</span>
</li>
<li class="three"><a class="active" href="#">Projects</a></li>
<li class="four">Skills</li>
</ul>
</div>
</header>
<section class="hero">
<div class="bgimg">
</div>
<div class="hero-content">
<div class="recipe-card">
<aside>
<div class="card-top">
<div class="left">
<img src="myAvatar.png" class="myavatar">
</div>
<div class="right">
<h1>Hamza Wahbi</h1>
<hr class="hrunder">
<h5 style="color:#8B8B8B ">Web Developer</h5>
<h1>Age:
<font color="#8B8B8B">13</font>
</h1>
<h1>Email:
<font color="#8B8B8B">fxgfnxngfx#gmail.com</font>
</h1>
<h1>Phone:
<font color="#8B8B8B">0093836372</font>
</h1>
</div>
</div>
</aside>
<div class="icon_row">
<i class="fab fa-twitter fa-3x" style="color: black;"></i>
<i class="fab fa-instagram fa-3x" style="color: black;"></i>
<i class="fab fa-dribbble fa-3x" style="color: black;"></i>
<i class="fab fa-facebook-f fa-3x" style="color: black;"></i>
<i class="fab fa-snapchat-ghost fa-3x" style="color: black;"></i>
<i class="fab fa-google-plus-g fa-3x" style="color: black;"></i>
<i class="fab fa-youtube fa-3x" style="color: black;"></i>
<i class="fab fa-pinterest-p fa-3x" style="color: black;"></i>
</div>
</div>
</div>
<!-- .hero-content -->
</section>
</div>
</html>
Try wrapping icons in a div with position:fixed and bottom: 0
body {
margin: 0;
padding: 0;
font-family: 'Oswald', sans-serif;
}
.red {
color: red;
}
.underline {
text-decoration: underline;
}
.nav ul {
list-style: none;
background-color: #0F211E;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
text-transform: uppercase;
}
.hero-image {
background-image: url("1.jpg");
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}
section.hero {
height: 75%;
position: relative;
}
.hero-content {
position: absolute;
top: 50%;
transform: translateY(5%);
width: 100%;
}
.bgimg {
/* The image used */
background-image: url("bg.jpg");
/* Set a specific height */
height: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.back .caption:before{
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: scale(0,1);
}
.back .caption:after{
border-right: 1px solid #fff;
border-left: 1px solid #fff;
transform: scale(1,0);
}
.card.flipped .back .caption:before,
.card.flipped .back .caption:after {
opacity: .9;
transform: scale(1);
}
.back dl{
font-family:'Lato', Arial, sans-serif;
font-weight:300;
bottom:40px;
left:40px;
position: absolute;
opacity: 0;
transition: opacity .35s, transform .35s;
transition-delay: .85s;
transform: translate3d(-40px,0,0);
}
.card.flipped .back dl {
opacity: 1;
transform: translate3d(0,0,0);
}
dl dt{
float: left;
width: 60px;
overflow: hidden;
clear: left;
text-align: right;
font-weight:700;
}
dl dd{
margin-left: 80px;
text-align:left;
}
dl dd:before,
dl dd:after{
display: table;
content: " ";
}
dl dd:after{
clear: both;
}
.front:hover p {
opacity: 1;
transform: translate3d(0,0,0);
}
figure a{
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#media (min-width: 450px) {
.container{
left: 50%;
margin-left:-225px;
}
}
body {
background-color: #0F211E;
}
.recipe-card {
border-top: 15px solid lightblue;
border-bottom: 50px solid red;
background: #fff;
margin: 0 auto;
width: 90%;
max-width: 496px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.card-top {
padding: 30px 15px;
display: flex;
}
.card-top .right {
padding-left: 20px;
}
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</style>
</head>
<body class="news" >
<header>
<div class="nav">
<ul>
<li class="two"> <span>About</span></li>
<li class="three"><a class="active" href="#">Projects</a></li>
<li class="four">Skills</li>
</ul>
</div>
</header>
<section class="hero">
<div class="bgimg">
</div>
<div class="hero-content">
<div class="recipe-card">
<aside>
<div class="card-top">
<div class="left">
<img src="myAvatar.png" class="myavatar">
</div>
<div class="right">
<h1>Hamza Wahbi</h1>
<hr class="hrunder">
<h5 style="color:#8B8B8B " >Web Developer</h5>
<h1>Age: <font color="#8B8B8B">13</font></h1>
<h1>Email: <font color="#8B8B8B">fxgfnxngfx#gmail.com</font></h1>
<h1>Phone: <font color="#8B8B8B">0093836372</font></h1>
</div>
</div>
</aside>
<div style="position: fixed; bottom:0;">
<i class="fab fa-twitter fa-3x" style="color: black;"></i>
<i class="fab fa-instagram fa-3x" style="color: black;"></i>
<i class="fab fa-dribbble fa-3x" style="color: black;"></i>
<i class="fab fa-facebook-f fa-3x" style="color: black;"></i>
<i class="fab fa-snapchat-ghost fa-3x" style="color: black;"></i>
<i class="fab fa-google-plus-g fa-3x" style="color: black;"></i>
<i class="fab fa-youtube fa-3x" style="color: black;"></i>
<i class="fab fa-pinterest-p fa-3x" style="color: black;"></i>
</div>
</div>
</div><!-- .hero-content -->
</section>
</div>
</html>
body {
margin: 0;
padding: 0;
font-family: 'Oswald', sans-serif;
background-color: #0F211E;
}
.red {
color: red;
}
.icon-div{
background-color: red;
justify-content: space-evenly;
display: flex;
padding: 4px;
}
.icon-div i{
color: #fff;;
}
.underline {
text-decoration: underline;
}
.nav ul {
list-style: none;
background-color: #0F211E;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
text-transform: uppercase;
}
.hero-image {
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}
section.hero {
height: 75%;
position: relative;
}
.hero-content {
position: absolute;
top: 50%;
transform: translateY(5%);
width: 100%;
}
.bgimg {
/* The image used */
background-image: url("bg.jpg");
/* Set a specific height */
height: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.back .caption:before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: scale(0, 1);
}
.back .caption:after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
transform: scale(1, 0);
}
.card.flipped .back .caption:before,
.card.flipped .back .caption:after {
opacity: .9;
transform: scale(1);
}
.back dl {
font-family: 'Lato', Arial, sans-serif;
font-weight: 300;
bottom: 40px;
left: 40px;
position: absolute;
opacity: 0;
transition: opacity .35s, transform .35s;
transition-delay: .85s;
transform: translate3d(-40px, 0, 0);
}
.card.flipped .back dl {
opacity: 1;
transform: translate3d(0, 0, 0);
}
dl dt {
float: left;
width: 60px;
overflow: hidden;
clear: left;
text-align: right;
font-weight: 700;
}
dl dd {
margin-left: 80px;
text-align: left;
}
dl dd:before,
dl dd:after {
display: table;
content: " ";
}
dl dd:after {
clear: both;
}
.front:hover p {
opacity: 1;
transform: translate3d(0, 0, 0);
}
figure a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#media (min-width: 450px) {
.container {
left: 50%;
margin-left: -225px;
}
}
.recipe-card {
border-top: 15px solid lightblue;
background: #fff;
margin: 0 auto;
width: 90%;
max-width: 496px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.card-top {
padding: 30px 15px;
display: flex;
}
.card-top .right {
padding-left: 20px;
}
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</style>
</head>
<body class="news">
<header>
<div class="nav">
<ul>
<li class="two">
<span>About</span>
</li>
<li class="three"><a class="active" href="#">Projects</a></li>
<li class="four">Skills</li>
</ul>
</div>
</header>
<section class="hero">
<div class="bgimg">
</div>
<div class="hero-content">
<div class="recipe-card">
<aside>
<div class="card-top">
<div class="left">
<img src="myAvatar.png" class="myavatar">
</div>
<div class="right">
<h1>Hamza Wahbi</h1>
<hr class="hrunder">
<h5 style="color:#8B8B8B ">Web Developer</h5>
<h1>Age:
<font color="#8B8B8B">13</font>
</h1>
<h1>Email:
<font color="#8B8B8B">fxgfnxngfx#gmail.com</font>
</h1>
<h1>Phone:
<font color="#8B8B8B">0093836372</font>
</h1>
</div>
</div>
</aside>
<div class="icon-div">
<i class="fab fa-twitter fa-3x" ></i>
<i class="fab fa-instagram fa-3x" ></i>
<i class="fab fa-dribbble fa-3x" ></i>
<i class="fab fa-facebook-f fa-3x"></i>
<i class="fab fa-snapchat-ghost fa-3x" ></i>
<i class="fab fa-google-plus-g fa-3x" ></i>
<i class="fab fa-youtube fa-3x" ></i>
<i class="fab fa-pinterest-p fa-3x" ></i>
</div>
</div>
</div>
<!-- .hero-content -->
</section>
</div>
</html>