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.
Related
This question already has answers here:
How to remove underline from links?
(2 answers)
Closed last month.
I'm a newbie at html and css, please could someone help me out. I'm trying to get rid of the underline in the header section and in the see my resume section. I also want to make the writing black in the header section. I've tried using 'text-decoration: none; ' to get rid of it but nothing happened. Please explain it in a simple way I could understand.
Below are the images:
enter image description here
enter image description here
Thank You!
HTML CODE:
<!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>""</title>
<link rel="stylesheet" href="">
<link rel="shortcut icon" href=""type="image/jpg">
</div>
</head>
<body>
<nav class="header">
<img src=""alt=""/>
<ul class="menu">
<li>Home</li>
<li> Education</li>
<li> Experience</li>
<li>Projects</li>
<li>Contact Me</li>
</ul>
</nav>
<div id="container">
<img src="" alt="">
<div class="text">
<h1 class="greeting-text" style="color: rgb(0, 28, 85);"> ""
<span class="wave-emoji"><img src="hi wave.png"></span></h1>
<h2 class="greeting-nickname" style="color: rgb(0, 28, 85);">""</h2>
<h3>
<p class="greeting-text-p subTitle" style="color: rgb(122, 122, 145);">""
</p>
</h3>
<p>
<a class="rounded-button" href="">
<ion-icon name="logo-instagram" size="large"></ion-icon> </a>
<a class="rounded-button" href="">
<ion-icon name="logo-linkedin" size="large"></ion-icon> </a>
<a class="rounded-button" href="">
<ion-icon name="logo-github" size="large"></ion-icon>
</a>
<a class="rounded-button" href="mailto:">
<ion-icon name="mail-outline" size="large"></ion-icon> </a>
<div id="contact">
See My Resume
</div>
</P>
<div class="container.two">
<h2 class="heading"> What I Do?</h2>
<img class="new-pic"src="" alt="what I Do">
<h1 class="name" style="color: rgb(3, 2, 8);"> Full Stack Development</h1>
<p class="icon">
<a class="set" href=""><ion-icon name="logo-html5"></ion-icon></a>
<a class="set" href=""><ion-icon name="logo-css3"></ion-icon></a>
<a class="set" href=""><ion-icon name="logo-nodejs"></ion-icon></a>
<a class="set" href=""><ion-icon name="logo-python"></ion-icon></a>
<a class="set" href=""><ion-icon name="logo-javascript"></ion-icon></a>
<a class="set" href=""><ion-icon name="logo-react"></ion-icon></a>
</p>
<ul>
<li class="blue">""</li>
<li class="blue"> ""</li>
</ul>
<div class="container.three">
<h2 class="wex"> Tech interest</h2>
</div>
</div>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
CSS CODE
body
{
margin:0%;
font-family: Hoefler Text;
background-color: rgb(233, 245, 248);
color:rgb(7, 9, 10);
}
header{
margin: 3% 10% 3% 10%;
padding: 37px 161px;
align-items: center;
}
.menu{
list-style-type: none;
margin: 0;
padding: 0;
float: right;
}
.menu li{
display: inline-block;
padding: 20px 40px;
font-size: 20px;
}
.menu li a:hover {
color: rgb(82, 198, 235);
text-decoration: none;
}
#container{
margin: 0 20px 15px 100px;
text-align: right;
float: right;
}
img{
max-width: 400px;
padding: 10px 10px 10px 10px;
}
.heading{
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
column-gap: 1.5rem;
margin-top: 300px;
padding: 0px 0px 0px 100px;
}
.heading::before, .heading::after{
content: "";
height: 2px;
background-color: #03090a;
display: flex;
}
.text{
text-align: justify;
font-family: Hoefler Text;
font-size: 20px;
padding: 10px 600px 5px 2px;
float: left;
position: relative;
bottom: 700px;
}
.rounded-button{
width: 60px;
height: 60px;
background: rgb(37, 198, 235);
color: rgb(246, 250, 250) ;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0 0 0 0;
border-radius: 50%;
border: none;
text-decoration: none;
transition: background 0.2s;
}
.rounded-button:hover{
background: rgb(0, 28, 85);
}
#contact{
margin: 5px;
background-color: rgb(37, 198, 235);
display: inline-block;
padding: 2% 5%;
font-size: 20px;
font-weight: 501;
border-radius: 10px;
cursor: pointer;
border: none;
text-align: left;
text-decoration: none;
transition: background 0.2s;
}
#contact:hover{
background:rgb(0, 28, 85);
}
.new-pic{
max-width: 500px;
padding: 20px 50px 20px 10px;
}
.name{
text-align: right;
font-family: Hoefler Text;
font-size: 37px;
padding: 10px 10px 100px 300px;
width: 100%;
align-items: right;
position: relative;
bottom: 400px;
}
.icon{
text-align: right;
font-size: 37px;
padding: 10px 10px 10px 300px;
width: 100%;
align-items: right;
position: relative;
bottom: 500px;
}
.set{
width: 60px;
height: 60px;
background: rgb(37, 198, 235);
color: rgb(246, 250, 250) ;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: right;
cursor: pointer;
padding: 0 0 0 0;
border-radius: 50%;
border: none;
text-decoration: none;
transition: background 0.2s;
}
.set:hover{
background: rgb(0, 28, 85);
}
.blue{
color: rgb(122, 122, 145);
font-size: 25px;
font-family: Hoefler Text;
list-style: none;
padding: 10px 10px 10px 440px;
text-align: center;
align-items: center;
width: 100%;
position: relative;
bottom: 510px;
}
.blue:not(:last-child){
margin-bottom: 10px;
}
.blue:before{
content: "\1F535";
}
#containerone{
margin: 0 20px 15px 20px;
text-align: left;
float: left;
}
.title{
text-align: justify;
font-family: Hoefler Text;
font-size: 20px;
padding: 10px 20px 20px 700px;
align-items: right;
position: relative;
bottom: 500px;
}
.studies{
font-size: 50px;
position: none;
bottom: 300px;
text-align: center;
}
img{
max-width: 500px;
padding: 10px 10px 10px 10px
}
.wex{
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
column-gap: 1.5rem;
margin-top: 10px;
padding: 0px 0px 0px 100px;
}
.wex::before, .wex::after{
content: "";
height: 2px;
background-color: #03090a;
display: flex;
}
The link tag (anchor tag) can be in 4 different states called pseudo-classes:
a:link: the regular state of the link when it is not active, visited, or hovered on
a:visited: when the link has been clicked by the user, that is, visited
a:hover: when the user is hovering on the link
a:active: when the user is clicking on the link
css to remove underline for each state
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
now your link is black and underline only on mouse hover with color change:
.menu li a {
text-decoration: none;
color: black;
}
.menu li a:hover {
color: rgb(82, 198, 235);
text-decoration: underline;
}
try this
a{text-decoration:none;}
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%;
}
Hello guys I wanted to insert an image inside my box and additionally I wanted to insert texts also below the image as a sort of a description for the supposed image inside the box. How would I implement that?
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#300&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Sen:wght#700&display=swap');
*{
box-sizing: border-box;
}
body{
margin:0;
min-height: 100vh;
display: flex;
}
.content{
background-color: #EFEFEF;
flex-grow: 1;
min-height: 100vh;
}
.banner{
background-image: url("banner.png");
position: relative;
min-width: 100%;
background-position: center;
background-size: cover;
height: 7rem;
box-shadow: inset 0 -20px 50px black;
display: flex;
}
.container-content{
margin-left: auto;
margin-right: auto;
padding: 1rem;
flex-grow: 1;
}
h3{
font-family: 'Raleway', sans-serif;
font-size: 15px;
text-align: center;
color: white;
margin-top: 0;
}
h3:hover{
background-color: #9e9b9b;
color: #1c1c1c;
height: 60px;
margin-top: -17px;
padding-top: 17px;
}
.sidebar{
height: 100vh;
position: sticky;
overflow: auto;
bottom: 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
min-width: 245px;
background-color: #262626;
padding-top: 20px;
}
.sidebarlogo{
max-width: 245px;
}
.header{
height: 60px;
background-color: #5c5b5b;
padding-top: 17px;
}
.menu a{
box-sizing: border-box;
font-family: 'Raleway', sans-serif;
padding: 15px 6px 15px 16px;
text-decoration: none;
font-size: 17px;
color: white;
z-index: 1;
top: 0;
left: 0;
display: flex;
margin: 0;
}
.menu a:hover {
min-width: 100%;
Background-color: #1b1b1b;
text-decoration: underline;
}
.fa-building-columns{
padding-right: 12px;
font-size: 39px;
}
.fa-books{
padding-right: 12px;
font-size: 39px;
}
.fa-users{
padding-right: 12px;
font-size: 32px;
}
.fa-megaphone{
padding-right: 12px;
font-size: 36px;
}
.fa-arrow-right-from-bracket{
padding-right: 12px;
font-size: 39px;
}
.mcm{
background-color: white;
border-radius: 3px;
width: 100%;
height: 10rem;
max-width: 100%;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
<!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="icon" type="image/x=icon" href="form.png">
<link rel="stylesheet" href="IP.css">
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css">
<title>Institution Page</title>
</head>
<body>
<aside class="sidebar">
<span>
<img class="sidebarlogo" src="sidebarlogo1.jpg">
<div class="header">
<h3>Welcome to the Institution Page!</h3>
</div>
<br>
<div class="menu">
<i class="fa-regular fa-building-columns"></i>Institution Page
<i class="fa-light fa-books"></i>Courses
<i class="fa-light fa-users"></i>Student Roster
<i class="fa-regular fa-megaphone"></i>Announcements
<br><br><br><br><br><br>
<i class="fa-light fa-arrow-right-from-bracket"></i>Log out
</div>
</span>
</aside>
<main class="content">
<div class="banner"></div>
<div class="container-content">
<div class="mcm" >
asdfsdfd
</div>
</div>
</main>
</body>
</html>
Ignore the "asdfsdfd". I wanted to insert an image there and have some sort of a title header below the image and finally, add some description text for the image. Any solutions for this is highly appreciated thanks!
itry to answer and help. It might help you. and i share the fiddle link too https://jsfiddle.net/pw7e5Lca/5/
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#300&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Sen:wght#700&display=swap');
*{
box-sizing: border-box;
}
body{
margin:0;
min-height: 100vh;
display: flex;
}
.content{
background-color: #EFEFEF;
flex-grow: 1;
min-height: 100vh;
}
.banner{
background-image: url("banner.png");
position: relative;
min-width: 100%;
background-position: center;
background-size: cover;
height: 7rem;
box-shadow: inset 0 -20px 50px black;
display: flex;
}
.container-content{
margin-left: auto;
margin-right: auto;
padding: 1rem;
flex-grow: 1;
}
h3{
font-family: 'Raleway', sans-serif;
font-size: 15px;
text-align: center;
color: white;
margin-top: 0;
}
h3:hover{
background-color: #9e9b9b;
color: #1c1c1c;
height: 60px;
margin-top: -17px;
padding-top: 17px;
}
.sidebar{
height: 100vh;
position: sticky;
overflow: auto;
bottom: 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
min-width: 245px;
background-color: #262626;
padding-top: 20px;
}
.sidebarlogo{
max-width: 245px;
}
.header{
height: 60px;
background-color: #5c5b5b;
padding-top: 17px;
}
.menu a{
box-sizing: border-box;
font-family: 'Raleway', sans-serif;
padding: 15px 6px 15px 16px;
text-decoration: none;
font-size: 17px;
color: white;
z-index: 1;
top: 0;
left: 0;
display: flex;
margin: 0;
}
.menu a:hover {
min-width: 100%;
Background-color: #1b1b1b;
text-decoration: underline;
}
.fa-building-columns{
padding-right: 12px;
font-size: 39px;
}
.fa-books{
padding-right: 12px;
font-size: 39px;
}
.fa-users{
padding-right: 12px;
font-size: 32px;
}
.fa-megaphone{
padding-right: 12px;
font-size: 36px;
}
.fa-arrow-right-from-bracket{
padding-right: 12px;
font-size: 39px;
}
.mcm{
background-color: white;
border-radius: 3px;
width: 100%;
height: 10rem;
max-width: 100%;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.item__img {
object-fit: cover;
object-position: right;
height: 10rem;
width: 100%;
}
div.desc {
padding: 15px;
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">
<link rel="icon" type="image/x=icon" href="form.png">
<link rel="stylesheet" href="IP.css">
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css">
<title>Institution Page</title>
</head>
<body>
<aside class="sidebar">
<span>
<img class="sidebarlogo" src="sidebarlogo1.jpg">
<div class="header">
<h3>Welcome to the Institution Page!</h3>
</div>
<br>
<div class="menu">
<i class="fa-regular fa-building-columns"></i>Institution Page
<i class="fa-light fa-books"></i>Courses
<i class="fa-light fa-users"></i>Student Roster
<i class="fa-regular fa-megaphone"></i>Announcements
<br><br><br><br><br><br>
<i class="fa-light fa-arrow-right-from-bracket"></i>Log out
</div>
</span>
</aside>
<main class="content">
<div class="banner"></div>
<div class="container-content">
<div class="mcm">
<div class="img_bos">
<img src="https://image.shutterstock.com/z/stock-photo-a-picture-of-the-beautiful-view-of-birds-1836263689.jpg" class="item__img" />
</div>
<div class="desc">Add a description of the image here</div>
<div class="img_bos">
<img src="https://image.shutterstock.com/z/stock-photo-a-picture-of-the-beautiful-view-of-birds-1836263689.jpg" class="item__img" />
</div>
<div class="desc">Add a description of the image here</div>
</div>
</div>
</main>
</body>
</html>
https://sagarj2021.github.io/first-website/
This is my website but it only open fullscreen in destop of my laptop. It does not open in fullscreen in smartphones destop as well as in normal search. (Actully in smartphone right side is 50% of white blank color). I dont know how to fix this issue..
I have given my code also,
so please can you help mi ?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.hero {
height: 100vh;
width: 100%;
background-color: black;
background-size: cover;
background-position: center;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 45px;
padding-left: 8%;
padding-right: 8%;
}
.logo {
color: white;
font-size: 35px;
letter-spacing: 1px;
cursor: pointer;
}
span {
color: red;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 10px 25px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
text-transform: capitalize;
}
nav ul li a:hover {
color: red;
transition: .4s;
}
.btn {
background-color: red;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 10px 25px;
border-radius: 30px;
transition: transform .4s;
}
.btn:hover {
transform: scale(1.2);
}
.content {
position: absolute;
top: 50%;
left: 8%;
transform: translateY(-50%);
}
h1 {
color: white;
margin: 20px 0px 20px;
font-size: 75px;
}
h3 {
color: white;
font-size: 25px;
margin-bottom: 50px;
}
h4 {
color: #fcfc;
letter-spacing: 2px;
font-size: 20px;
}
.newslatter form {
width: 380px;
max-width: 100%;
position: relative;
}
.newslatter form input:first-child {
display: inline-block;
width: 100%;
padding: 14px 130px 14px 15px;
border: 2px solid #f9004d;
outline: none;
border-radius: 30px;
}
.newslatter form input:last-child {
position: absolute;
display: inline-block;
outline: none;
border: none;
padding: 10px 30px;
border-radius: 30px;
background-color: #f9004d;
color: white;
box-shadow: 0px 0px 5px #000, 0px 0px 15px #858585;
top: 6px;
right: 6px;
}
.about {
width: 100%;
padding: 100px 0px;
background-color: #191919;
}
.about img {
height: auto;
width: 430px;
}
.about-text {
width: 550px;
}
.main {
width: 1130px;
max-width: 95%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-around;
}
.about-text h2 {
color: white;
font-size: 75px;
text-transform: capitalize;
margin-bottom: 20px;
}
.about-text h5 {
color: white;
letter-spacing: 2px;
font-size: 22px;
margin-bottom: 25px;
text-transform: capitalize;
}
.about-text p {
color: #fcfc;
letter-spacing: 1px;
line-height: 28px;
font-size: 18px;
margin-bottom: 45px;
}
button {
background-color: #f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 13px 30px;
border-radius: 30px;
transition: .4s;
}
button:hover {
background-color: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
.service {
background: #101010;
width: 100%;
padding: 100px 0px;
}
.title h2 {
color: white;
font-size: 75px;
width: 1130px;
margin: 30px auto;
text-align: center;
}
.box {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
}
.card {
height: 365px;
width: 335px;
padding: 20px 35px;
background: #191919;
border-radius: 20px;
margin: 15px;
position: relative;
overflow: hidden;
text-align: center;
}
.card i {
font-size: 50px;
display: block;
text-align: center;
margin: 25px 0px;
color: #f9004d;
}
h5 {
color: white;
font-size: 23px;
margin-bottom: 15px;
}
.pra p {
color: #fcfc;
font-size: 16px;
line-height: 27px;
margin-bottom: 25px;
}
.card .button {
background-color: #f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 9px 22px;
border-radius: 30px;
transition: .4s;
}
.card .button:hover {
background-color: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
.contact-me {
width: 100%;
height: 290px;
background: #191919;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.contact-me p {
color: white;
font-size: 30px;
font-weight: bold;
margin-bottom: 25px;
}
.contact-me .button-two {
background-color: #f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 13px 30px;
border-radius: 30px;
transition: .4s;
}
.contact-me .button-two:hover {
background-color: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
footer {
position: relative;
width: 100%;
height: 400px;
background: #101010;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
footer p:nth-child(1) {
font-size: 30px;
color: white;
margin-bottom: 20px;
font-weight: bold;
}
footer p:nth-child(2) {
color: white;
font-size: 17px;
width: 500px;
text-align: center;
line-height: 26px;
}
.social {
display: flex;
}
.social a {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
background: #f9004d;
border-radius: 50%;
margin: 22px 10px;
color: white;
text-decoration: none;
font-size: 20px;
}
.social a:hover {
transform: scale(1.3);
transition: .3s;
}
.end {
position: absolute;
color: #f9004d;
bottom: 35px;
font-size: 14px;
}
<!--Sagar personal website-->
<!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="personalprofile.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/34d51c031e.js" crossorigin="anonymous"></script>
<title>Personal website</title>
</head>
<body>
<div class="hero">
<nav>
<h2 class="logo">Portfo<span>lio</span></h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
Blog
</nav>
<div class="content">
<h4>hello, my name is</h4>
<h1>Sagar<span>Jadhav</span></h1>
<h3>I'm a Web Developer.</h3>
<div class="newslatter">
<form action="">
<input type="email" name="email" id="mail" placeholder="Enter Your Email">
<input type="submit" name="submit" value="Let start">
</form>
</div>
</div>
</div>
<!---About section start-->
<section class="about">
<div class="main">
<img src="#" alt="">
<div class="about-text">
<h2>About Me</h2>
<h5>Developer & Designer</h5>
<p>
I am a front-end web developer. I can provide clean code and pixel perfect design. I also make the website more & more interactive with web animations. I can provide clean code and pixel perfect design. I also make the website more & more interactive
with web animations. A responsive design makes your website accessible to all users, regardless of their devices.
</p>
<button type="button">Let's Talk</button>
</div>
</div>
</section>
<!--Service section start-->
<div class="service">
<div class="title">
<h2>Our Services</h2>
</div>
<div class="box">
<div class="card">
<i class="fas fa-bars"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all devices. Secondly, it needs to be fast as possible. </p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
<div class="card">
<i class="fa-regular fa-user"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all devices. Secondly, it needs to be fast as possible. </p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
<div class="card">
<i class="fa-regular fa-bell"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all devices. Secondly, it needs to be fast as possible. </p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
</div>
</div>
<!--Contact Me-->
<div class="contact-me">
<p>For any help.</p>
<a class="button-two" href="#">Contact Me</a>
</div>
<!--Footer start-->
<footer>
<p>Sagar Jadhav</p>
<p>For coding and syber security related update follow my blog chennal - please click on the link below to follow me:
</p>
<div class="social">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-linkedin"></i>
</div>
<p class="end">CopyRight By Sagar Jadhav</p>
</footer>
</body>
</html>
Replace this code in your code
.title h2 {
color: white;
font-size: 75px;
width: 130px;
margin: 30px auto;
text-align: center;
}
I am trying to build my personal webpage but simply cant manage to make my footer not cover the two buttons.
This problem only occurs on my laptop. As soon as I switch to my external monitor, the two buttons arent covered anymore.
I have tried inserting html{overflow-y: scroll;} to my css but it doesnt seem to work :(
Any help would be awesome! Thank you.
HTML:
#import url('https://fonts.googleapis.com/css?family=Roboto:700&display=swap');
* {
padding: 0;
margin: 0;
}
body {
background-color: ghostwhite;
background-size: cover;
padding: 0;
margin: 0;
}
.navbar {
height: 80px;
width: 100%;
background-color: #808080;
}
.logo {
width: 140px;
height: auto;
padding: 15px 50px;
}
.navbar ul {
float: right;
margin-right: 20px;
}
.navbar ul li {
list-style: none;
margin: 0 8px;
display: inline-block;
line-height: 80px;
}
.navbar ul li a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 2px 6px;
font-family: 'Roboto', sans-serif;
transition: .2s;
}
.navbar ul li a:hover {
background: lightsteelblue;
border-radius: 2px;
}
.wrapper .center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: sans-serif;
user-select: none;
}
.center h1 {
color: black;
font-size: 70px;
font-weight: bold;
width: 900px;
text-align: center;
}
.center h2 {
color: black;
font-size: 70px;
font-weight: bold;
width: 885px;
margin-top: 10px;
text-align: center;
}
.center .buttons {
margin: 35px 280px;
}
.buttons button {
height: 50px;
width: 150px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: lightsteelblue;
border: 1px solid #4b79b4;
outline: none;
cursor: pointer;
border-radius: 25px;
transition: .5s;
}
.buttons .btn {
margin-left: 25px;
}
.buttons button:hover {
background: #4b79b4;
}
footer {
position: absolute;
background-color: #808080;
height: auto;
width: 100%;
padding-top: 40px;
color: black;
bottom: 0px;
}
.footer-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-content h3 {
font-size: 1.8rem;
font-weight: 400;
text-transform: capitalize;
line-height: 3rem;
}
.footer-content p {
max-width: 500px;
margin: 10px auto;
line-height: 28px;
font-size: 14px;
}
.socials {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0 3rem 0;
}
.socials li {
margin: 0 10px;
}
.socials a {
text-decoration: none;
color: lightsteelblue;
}
.socials a i {
font-size: 1.1rem;
transition: color .4s ease;
}
.socials a:hover i {
color: #4b79b4;
}
.footer-bottom {
background-color: #737373;
width: 100%;
padding: 20px 0;
text-align: center;
}
.footer-bottom p {
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
}
.footer-bottom span {
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}
<!doctype html>
<html lang="en ">
<head>
<meta charset="utf-8">
<title>Moritz </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<!-- BEGIN NAVBAR -->
<nav class="navbar">
<img class="logo" src="logo.png">
<ul>
<li> <a class="active" href="#">Home</a></li>
<li> About</li>
<li> CV</li>
<li> Favourites</li>
<li> Contact</li>
</ul>
</nav>
<!-- END NAVBAR -->
<!-- BEGIN CONTENT -->
<div class="center">
<h1>Hi, I'm Moritz.</h1>
<h2>I'm a student.</h2>
<div class="buttons">
<button>Explore more</button>
<button class="btn">Contact me</button>
</div>
<!-- END CONTENT -->
</div>
<!-- BEGIN FOOTER -->
<footer>
<div class="footer-content">
<h3>Moritz </h3>
<p>Thank you for browsing. I hope to hear from you soon!</p>
<ul class="socials">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin-square"></i></li>
<li><i class="fa fa-envelope"></i></li>
<li><i class="fa fa-phone"></i></li>
</ul>
</div>
<div class="footer-bottom">
<p> Copyright © 2021 Moritz </p>
</div>
</footer>
<!-- END FOOTER -->
</body>
</html>
What you describe kind of feels like a grid to me using three "rows", one for the "navbar", one for the "content" and one for the "footer" such as:
display: grid;
grid-template-rows: auto 1fr auto;
Now given that we can put the containers for the rows in a wrapper .wrapper
Then we tall it which "row" each of the sections belongs in. grid-row: 2/2; for the content for example in row 2 (start and end)
I took a good bit of liberty with your CSS (it is still a "lot" just for this) specifically, I added borders to show where things are - you will want to remove those but I did it to illustrate where is "is" in the flow.
This is by no means "perfect" but just a very quick place to build from.
#import url('https://fonts.googleapis.com/css?family=Roboto:700&display=swap');
* {
padding: 0;
margin: 0;
}
body {
background-color: ghostwhite;
padding: 0;
margin: 0;
border: solid orange 3px;
}
.wrapper {
display: grid;
grid-template-rows: auto 1fr auto;
border: lime 4px dashed;
}
.navbar-container {
border: red 4px solid;
grid-row: 1/1;
display: flex;
align-items: start;
margin: 0rem;
}
.content-container {
font-family: sans-serif;
display: grid;
place-items: center;
grid-row: 2/2;
border: blue 1px solid;
}
.footer-container {
padding-top: 2rem;
display: grid;
grid-template-rows: auto 1fr auto;
border: cyan 1px solid;
}
.footer-content {
display: grid;
grid-template-rows: 1fr auto 1fr;
align-items: center;
justify-items: center;
}
.footer-bottom {
grid-row: 3/3;
align-text: center;
padding: 0.25rem;
border: dashed blue 1px;
}
.navbar {
height: 5rem;
width: 100%;
background-color: #808080;
font-family: 'Roboto', sans-serif;
}
.navbar>.logo {
width: 140px;
height: auto;
padding-bottom: 15px;
padding-top: 15px;
padding-left: 50px;
padding-right: 50px;
border: solid 1px green;
}
.navbar ul li {
list-style: none;
margin: 0 8px;
display: inline-block;
line-height: 80px;
}
.navbar ul li a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 2px 6px;
transition: 0.2s;
}
.navbar ul li a:hover {
background: lightsteelblue;
border-radius: 2px;
}
.wrapper .center {
user-select: none;
}
.buttons {
display: flex;
flex-direction: row;
margin-top: 1rem;
margin-bottom: 1rem;
}
.buttons button {
margin: 1rem;
}
.buttons button {
flex: auto;
height: 50px;
width: 150px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: lightsteelblue;
border: 1px solid #4b79b4;
outline: none;
cursor: pointer;
border-radius: 25px;
transition: .5s;
}
.buttons button:hover {
background: #4b79b4;
}
.socials {
list-style: none;
display: flex;
align-items: middle;
justify-content: center;
}
.socials li {
margin-right: 10px;
}
.footer-bottom {
font-size: 0.75rem;
background-color: #737373;
text-align: center;
width: 100%;
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}
<!doctype html>
<html lang="en ">
<head>
<meta charset="utf-8">
<title>Moritz </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<nav class="navbar navbar-container">
<img class="logo" src="logo.png">
<ul class="menu-items">
<li> <a class="active" href="#">Home</a></li>
<li> About</li>
<li> CV</li>
<li> Favourites</li>
<li> Contact</li>
</ul>
</nav>
<div class="center content-container">
<h1>Hi, I'm Moritz.</h1>
<h2>I'm a student.</h2>
<div class="buttons">
<button>Explore more</button>
<button class="btn">Contact me</button>
</div>
</div>
<footer class="footer-container">
<div class="footer-content">
<h3>Moritz </h3>
<p>Thank you for browsing. I hope to hear from you soon!</p>
<ul class="socials">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin-square"></i></li>
<li><i class="fa fa-envelope"></i></li>
<li><i class="fa fa-phone"></i></li>
</ul>
</div>
<div class="footer-bottom">
<p> Copyright © 2021 Moritz </p>
</div>
</footer>
</body>
</html>