Hi there,
I'm adding a search bar to my website, but when it add the
magnifying glass from font awesome, it doesn't show.
I only included the css for the search bar since I have
everything else set up nicely
What is the problem?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>OnTop Servers</title>
</head>
<body>
<nav class="topnav">
<div class="topnav-right">
<a class="active" href="index.html">Home</a>
Search
Servers
</div>
<h2 class="title">
OnTop Servers
</h2>
</nav>
<center>
<div class="welcome">
<div class="centered-text">
<div class="welcome-body-inner">
<h2 class="head">
DISCOVER
<span class="discord-logo">discord1</span>
SERVERS
</h2>
<h3 class="body">
Find amazing servers to interact with and make friends
</h3>
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Search..">
<a class="search-btn" href="">
<i class="fas fa-search"></i>
</a>
</div>
</div>
</div>
</div>
</center>
Heres is the css for the search bar:
.search-box {
position: absolute;
top: 100%;
left: 35%;
transform: translate(-50%, -50%);
background: #2c2c2c;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-btn {
color: #fff;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2c2c2c;
display: flex;
justify-content: center;
align-items: center;
}
Your problem with the code is that you did not include the Font Awesome Files or CDN or Icons to be exact. You have to fetch it from somewhere like Downloading the Font Awesome Icon or Simply use the CDN (Recommended)
I am giving you the CDN of font awesome and put this line of code in the <head> part of the code
The CDN is: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" /> or you can follow a tutorial in youtube and download those Icons
For Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
<title>OnTop Servers</title>
</head>
<body>
<nav class="topnav">
<div class="topnav-right">
<a class="active" href="index.html">Home</a>
Search
Servers
</div>
<h2 class="title">
OnTop Servers
</h2>
</nav>
<center>
<div class="welcome">
<div class="centered-text">
<div class="welcome-body-inner">
<h2 class="head">
DISCOVER
<span class="discord-logo">discord1</span>
SERVERS
</h2>
<h3 class="body">
Find amazing servers to interact with and make friends
</h3>
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Search..">
<a class="search-btn" href="">
<i class="fas fa-search"></i>
</a>
</div>
</div>
</div>
</div>
</center>
Hope you have a great day!
Related
Whats up friends, great friday for yous!
So I been rebuilding the website for the company I work to learn HTML+CSS.
Just doing a replica of the original website and its been going great.
So I am having some issues on the the footer right now, the items are mixing on smaller screens.
On the image below you can see (1) how it is and the desired result and (2) what is happening with me.
Here is my code:
.footer {
color: #fff;
height: 140px;
background: linear-gradient(180deg, #130936, #130936) no-repeat center;
font-family: 'Open Sans', sans-serif;
}
.container {
width: 70%;
}
p, p a {
text-decoration:none;
color: hsla(0, 0%, 100%, 0.72);
letter-spacing: 0.3px;
font-size:14px;
}
.footer-brand {
width: 136px;
background: url(https://i.ibb.co/zbq2q4D/pngwing-com-1.png) left center no-repeat;
border: 0;
text-indent: -99999px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
i {
color: #fff;
font-size: 30px;
padding-left: 4px;
padding-right: 4px;
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>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
</head>
<body>
<footer class="footer">
<div class="container-md h-100">
<div class="row align-items-center h-100 row-cols-4">
<div class="col-3"><img class="footer-brand" src="https://i.ibb.co/zbq2q4D/pngwing-com-1.png" alt=""></div>
<div class="col-3">
<p class="p1">+44 (0) 700 677 1336</p>
<p>info#companyIwork.com</p>
</div>
<div class="col-3 text-center">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter"></i>
<i class="bi bi-instagram"></i>
<i class="bi bi-linkedin"></i>
</div>
<div class="col-3">
<p>© 2022 - TheCompanyIWork Limited</p>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
I do appreciate your help.
I think what you're missing is the use of the responsiveness prefixes for the col class, when you declare col or col-x as a class it means that the class would automatically be with a fixed size in relation to the other grids, to overcome content overlapping you'll need to the prefixed to determine the screen size from which the content is being displayed upon i.e col-sm-x, col-md-x etc
Read more about bootstrap grid from here https://getbootstrap.com/docs/5.3/layout/grid/
<!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>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css"
/>
</head>
<body>
<footer class="footer">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-xs-12 col-md-3 text-center">
<img
class="footer-brand image-fluid"
src="https://i.ibb.co/zbq2q4D/pngwing-com-1.png"
alt=""
style="width:80px"
/>
</div>
<div class="col-xs-12 col-md-3 text-center">
<p class="p1">
+44 (0) 700 677 1336
</p>
<p>
info#companyIwork.com
</p>
</div>
<div class="col-xs-12 col-md-3 text-center">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter"></i>
<i class="bi bi-instagram"></i>
<i class="bi bi-linkedin"></i>
</div>
<div class="col-xs-12 col-md-3 text-center">
<p>© 2022 - TheCompanyIWork Limited</p>
</div>
</div>
</div>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"
></script>
</body>
</html>
NOTE: The snippet above does not consider your stylesheet, so be cautious your stylesheet might override some bootstrap styles
SUGGESTION: Also consider reading bootstrap colors from https://getbootstrap.com/docs/5.0/utilities/colors/
I have the following code on my _Layout.cshtml page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - FeeCalc</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/FeeCalc.styles.css" asp-append-version="true" />
</head>
<body style="background-color:cadetblue">
<header>
<nav class="navbar" style="background-color: #264653; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:100%; ">
<div class="container-fluid">
<span class="navbar-brand" style="display:flex;">
<a href="https://www.google.com/">
<img src="~/Img/Infoorange.png" alt="ACR" width="80" height="80" class="d-inline-block align-middle mr-2" runat="server" />
</a>
<span style="font-size:25px;color:white;"><span style="color:#e9c46a">SpringField</span><br />company Name</span>
</span>
</div>
</nav>
</header>
<div class="container-bg">
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
</div>
This page looks like this:
I want to put a container in center of white color just like this:
so that I can put HTML control inside the white space. In order to achieve this. I tried to write the following code:
<div style="margin-top: 70px;position:relative;top:50px">
<div style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:100%;" class="container" >
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
</div>
nothing seems to appear on the page. the page looks the same with no color on the container. How can I make a white color center container on this blue color page.
Any help will be greatly appreciated.
I checked your code, and it seems your container-bg class with the white colored background under navbar-brand class.
Add margin-top: 100px; to container-bg class.
<div class="container-bg">
<div style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:100%; margin-top: 100px; height: 90px;" class="container">
<main role="main" class="pb-3">#RenderBody()</main>
</div>
</div>
#home::before
{
content: "";
position: absolute;
background: url(1a.jpg) no-repeat center center/cover;
/* opacity: 1; */
height: 100%;
width: 100%;
z-index: -1;
filter: blur(1.5px);
}
here's my code but I want to include only a specific part of image to cover the whole background ..any suggestions/
<!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>cakes by nandani</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Allura&display=swap" rel="stylesheet">
</head>
<body>
<nav id="navbar">
<div id="leftpor">
<ul>
<li class="items">Home</li>
<li class="items">About us</li>
<li class="items">Items</li>
</ul>
</div>
<!-- <div id="logo"><img src="logo.png" alt="Cakes by nandani"></div> -->
<div id="rightpor">
<ul>
<li class="items">Contact</li>
<li class="items">Gallery</li>
<li class="items">Our Story</li>
</ul>
</div>
</nav>
<section id="home">
<a class="Brand center"> Cakes By Nandani</a>
<a class="Tag center"> Many Emotiions One delight</a>
<button class="btn">Order Now</button>
</section>
<section id="services-container">
<h1 class="hprimary center">Our services</h1>
<div id="services">
<div class="box">
<img src="Oreo.jpg" alt="">
<p class="center">Oreo</p>
</div>
<div class="box">
<img src="Oreo.jpg" alt="">
<p class="center">Oreo</p>
</div>
<div class="box">
<img src="Oreo.jpg" alt="">
<p class="center">Oreo</p>
</div>
</div>
</section>
</body>
</html>
enter code here
only some part of image is cropped and used ....how to stop that
I have a 3 sections in my html
textarea
lable and below 2 buttons
road button
How can I make everything resizible and have seconds section fixed so it doesn't resize (label and below 2 buttons) and have 3 button Road go on the right and doesn't move, it should be fixed.
So in the nutshell, textarea should be resizible and seconds section and button the right should be fixed.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="main_section" class="container">
<div class="cstm-item d-flex">
<div class="">
<textarea name=""></textarea>
</div>
<div class="h-100 text-center">
<span>LEFT RIGHT</span>
<div>
<button><i class="fa fa-minus"></i></button>
<button><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
<div>
<button><i class="fa fa-road"></i></button>
</div>
</div>
</body>
</html>
This solution would work. Let me know if there is anything wrong in UI alignment.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
.solution {
display: flex;
align-items: center;
}
.solution > div {
padding: 0 10px;
}
.solution > div:first-of-type {
flex-grow: 1;
}
textarea {
width: 100%;
}
</style>
<body>
<div id="main_section" class="container">
<div class="solution">
<div>
<textarea class="item-text-area" name=""></textarea>
</div>
<div>
<span>LEFT RIGHT</span>
<div>
<button><i class="fa fa-minus"></i></button>
<button><i class="fa fa-plus"></i></button>
</div>
</div>
<div>
<button><i class="fa fa-road"></i></button>
</div>
</div>
</div>
</body>
</html>
When i zoom in and out on my website, the navigation bar and my "Open Touch" text seems to go out of the div and float down and for my navigation bar, it seems to disappear word by word when i zoom in. I've been trying to fix this for the past 2days and researching on this website and nothing seems to work.
My code and codepen will be available as well
How can I keep the "Open Touch" Text from overlapping the navigation bar?
Demo: http://codepen.io/anon/pen/xqLLeJ
html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="magicstyle.css">
<body>
<!-- Section for Jobs Popup -->
<div id="job-popup">
<div class="x-div"><img class="x-icon1" id="fadeX" src="web%20x%20icon%20white.png"></div>
<div id="job-content">
<h1 id="jobWords">Test</h1>
</div>
</div>
<!-- Section for Contact Popup -->
<div id="contact-popup">
<div class="x-div2"><img class="x-icon2" id="fadeX2" src="web%20x%20icon%20white.png"></div>
<div id="contact-content">
<h1 id="contactWords">Test</h1>
</div>
</div>
<!-- Section for Press Popu -->
<div id="press-popup">
<div class="x-div3"><img class="x-icon3" id="fadeX3" src="web%20x%20icon%20white.png"></div>
<div id="press-content">
<h1 id="pressWords">Test</h1>
</div>
</div>
<div id="legal-popup">
<div class="x-div4"><img class="x-icon4" id="fadeX4" src="web%20x%20icon%20white.png"></div>
<div id="legal-content">
<h1 id="legalWords">Test</h1>
</div>
</div>
<div id="support-popup">
<div class="x-div5"><img class="x-icon5" id="fadeX5" src="web%20x%20icon%20white.png"></div>
<div id="support-content">
<h1 id="supportWords">Test</h1>
</div>
</div>
<div id="top-bar">
<a class="burger-nav"></a>
<div id="nav-menu">
<span id="job">Jobs</span>
<span id="contact">Contact</span>
<span id="press">Press</span>
<span id="legal">Legal</span>
<span id="support">Support</span>
</div>
</div>
<div id="container">
<div id="name-div">
<h1 id="name">Open Touch</h1>
</div>
<ul class="bubbles">
<li id="firstCircle"></li>
<li id="secondCircle"></li>
<li id="thirdCircle"></li>
<li id="fourthCircle"></li>
<li id="fifthCircle"></li>
<li id="sixthCircle"></li>
</ul>
</div>
</body>
</head>
</html>
Any help is appreciated,
Thank You
Take out overflow: hidden from
#nav-menu {
width: 50%;
height: 70%;
position: absolute;
z-index: 101;
word-wrap: break-word;
/* overflow: hidden; */
left: 15%;
top: 20%;
}