I am trying to create a Donation card for my site with the help of this. I am Almost done with code changes but unable to set the layout, it's not showing properly. All contents are overlapping. I tried to set a margin but that is not working.
$(function () {
// Whitelist buttons in popovers
var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList
myDefaultWhiteList.button = [];
// Customizer popover
var $tip = $('.btn-donate').popover({
trigger: 'manual', // We don't want popover to launch when we don't need it :)
html: true,
offset: '-100px, 0',
container: 'body',
content: function () {
return '<p>' + $(this).data('description') + '</p><button class="btn btn-sm btn-dismiss white-text z-depth-0 pr-0">Got it</button>';
},
template: '<div class="popover popover-blue" role="tooltip"><div class="arrow"></div><div class="popover-body"></div></div>'
});
// Manually show popover
$tip.popover('show');
// Handle popover dismiss
$('.btn-dismiss').on('click', function () {
$tip.popover('hide');
});
});
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex-direction: column;
background: #F0F0F0;
}
:root {
--yt-blue: #ea5b18; /* This is a custom color used by YouTube */
}
/* Custom card header */
.card-header {
display: flex;
position: relative;
justify-content: space-between;
padding-left: 16px !important;
align-items: center;
height: 48px;
overflow: hidden;
}
.donate-icon {
display: flex;
align-self: stretch;
align-items: center;
position: relative;
padding-right: 1.2rem;
float: right;
background: #ea5b18;
}
.donate-icon:before {
content: "";
position: absolute;
display: block;
width: 48px;
height: 48px;
transform: rotate(45deg) translate(-50%,50%);
background: #ea5b18;
}
.donate-icon i {
color: #187415;
background: #fff;
padding: 8px;
z-index: 1;
border-radius: 50%;
}
.avatar {
max-width: 50px;
}
.fundraiser {
display: flex;
align-items: flex-start;
}
.fundraiser .name {
font-size: 1rem;
}
.fundraiser .creator {
font-size: 1rem;
}
.fundraiser .details {
flex: 1;
}
/* Ugly workaroung - sorry :( */
.btn-donate, .btn-donate:hover, .btn-donate:active, .btn-donate:focus {
background: var(--yt-blue);
position: relative;
color: #fff;
}
.sum {
text-align: center;
font-weight: 500;
}
.card-footer a {
font-size: .785rem;
font-weight: 500;
}
/* Popover styles */
.popover-blue {
background: var(--yt-blue);
border-radius: 1;
}
.popover-blue .arrow:after {
border-bottom-color: var(--yt-blue) !important;
}
.popover-blue .popover-body {
color: #fff;
font-size: 1rem;
}
.btn-dismiss {
float: right;
box-shadow: none;
}
<div class="card mt-4 mx-auto" style="max-width: 25rem;">
<div class="card-header p-0">
<span class="d-inline-block card-title mb-0">Donate now</span>
<span class="donate-icon">
<i class="fas fa-hand-holding-heart"></i>
</span>
</div>
<div class="card-body">
<div class="fundraiser">
<img src="https://t3.ftcdn.net/jpg/04/06/35/70/360_F_406357077_MWIAoFRKa7qmoLhr44pTraEzmF5rTFhf.jpg" class="avatar" />
<div class="details px-2">
<h3 class="name mb-0"><strong>Magic Logic</strong></h3>
<span class="creator text-muted">paypal.me/MagicLogic</span>
</div><a href="https://www.paypal.com/paypalme/MagicLogic" title="Donate">
<button class="btn btn-md btn-donate z-depth-0" data-toggle="popover" data-placement="bottom"
data-description="You can buy me a cup of Coffee or something via PayPal.">Donate</button></a>
</div>
Trying to create something like this:
You almost had it. Just needed to update the layout details in your Flexbox containers. This should get you going in the right direction. I will leave it up to you to figure out where you went wrong with displaying the circular hand with heart icon in the top right corner.
Secondly, you didn't provide the <script> tag to include jQuery in your project or a <link> to Bootstrap. Which the page you provided here uses to create the tooltip. After adding the jQuery <script>'s right before the closing <body> tag and including the Bootstrap <link> in the <head>, the tooltip displays correctly.
$(function () {
// Whitelist buttons in popovers
var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList
myDefaultWhiteList.button = [];
// Customizer popover
var $tip = $('.btn-donate').popover({
trigger: 'manual', // We don't want popover to launch when we don't need it :)
html: true,
offset: '-100px, 0',
container: 'body',
content: function () {
return '<p>' + $(this).data('description') + '<button class="btn btn-sm btn-dismiss white-text z-depth-0 pr-0">Got it</button></p>';
},
template: '<div class="popover popover-blue" role="tooltip"><div class="arrow"></div><div class="popover-body"></div></div>'
});
// Manually show popover
$tip.popover('show');
// Handle popover dismiss
$('.btn-dismiss').on('click', function () {
$tip.popover('hide');
});
});
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex-direction: column;
background: #F0F0F0;
}
:root {
--yt-blue: #ea5b18; /* This is a custom color used by YouTube */
}
/* Custom card header */
.card-header {
display: flex;
position: relative;
justify-content: space-between;
padding-left: 16px !important;
align-items: center;
height: 48px;
overflow: hidden;
background: rgb(249, 249, 249);
border: .1rem solid lightgray;
}
.card-title {
padding: .25rem .6rem;
}
.donate-icon {
display: flex;
align-self: stretch;
align-items: center;
position: relative;
padding-right: 1.2rem;
float: right;
background: #ea5b18;
}
.donate-icon:before {
content: "";
position: absolute;
display: block;
width: 48px;
height: 48px;
transform: rotate(45deg) translate(-50%,50%);
background: #ea5b18;
}
.donate-icon i {
color: #187415;
background: #fff;
padding: 8px;
z-index: 1;
border-radius: 50%;
}
.avatar {
max-width: 50px;
}
.fundraiser {
display: flex;
align-items: center;
background: #fff;
border-radius: .1rem;
}
.fundraiser .details.px-2 {
margin: 0 1rem 0 .5rem;
}
.fundraiser .name {
font-size: 1rem;
margin: .15rem 0;
}
.fundraiser .creator {
font-size: 1rem;
color: #555;
}
.fundraiser .details {
flex: 1;
}
.btn-donate {
margin-top: .1rem;
padding: .75rem 1.25rem;
border: none;
text-transform: uppercase;
font-size: .8rem !important;
border-radius: .1rem;
background: #ea5b18 !important;
color: #fff !important;
}
.btn-donate, .btn-donate:hover, .btn-donate:active, .btn-donate:focus {
position: relative;
color: #fff;
cursor: pointer;
}
.sum {
text-align: center;
font-weight: 500;
}
.card-footer a {
font-size: .785rem;
font-weight: 500;
}
/* Popover styles */
.popover-blue {
border-radius: 1;
}
.popover-blue .arrow:after {
border-bottom-color: var(--yt-blue) !important;
}
.popover-blue .popover-body {
color: #fff;
background-color: #ea5b18;
font-size: 1rem;
height: 6rem;
}
.btn-dismiss {
margin-top: 1.5rem;
color: #fff !important;
float: right;
box-shadow: none;
}
.bs-popover-top > .arrow::after {
border-top-color: #ea5b18 !important;
}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="card mt-4 mx-auto" style="max-width: 25rem;">
<div class="card-header p-0">
<span class="d-inline-block card-title mb-0">Donate now</span>
<span class="donate-icon">
<i class="fas fa-hand-holding-heart"></i>
</span>
</div>
<div class="card-body">
<div class="fundraiser">
<img src="https://t3.ftcdn.net/jpg/04/06/35/70/360_F_406357077_MWIAoFRKa7qmoLhr44pTraEzmF5rTFhf.jpg" class="avatar" />
<div class="details px-2">
<h3 class="name mb-0"><strong>Magic Logic</strong></h3>
<span class="creator text-muted">paypal.me/MagicLogic</span>
</div><a href="https://www.paypal.com/paypalme/MagicLogic" title="Donate">
<button class="btn btn-md btn-donate z-depth-0" data-toggle="popover" data-placement="bottom"
data-description="You can buy me a cup of Coffee or something via PayPal.">Donate</button></a>
</div>
<!-- You must include the jQuery and Bootstrap scripts -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
Related
I want to separate the text styling from my header and body. How can I achieve this? I also want to keep the text in the heading inside my hero/background. I also need to add the appropriate media queries or flex's I assume? I am new to coding so please be weary that I am unfamiliar with all the terminology and coding elements. I am in coding bootcamp. I appreciate your help and tips.
* {
margin:0;
padding: 0;
}
/* Header Start */
#vanta-canvas {
width: 100vw;
height: 50vh;
}
.inner_header {
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
position: relative;
top: 75px;
}
.flex {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: nowrap;
align-content: normal;
}
.highlight {
color: blue;
font-family: cursive;
-webkit-font-smoothing: antialiased;
}
body {
color: #fff;
font-family: cursive;
-webkit-font-smoothing: antialiased;
font-size: 25px;
background-color: #b4b4b4;
}
button {
background-color: transparent;
border-radius: 45% 3px;
color: #b4b4b4;
padding: 10px 20px;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
margin: 0 auto;
text-align: center;
position: relative;
top: 90px;
-webkit-font-smoothing: antialiased;
transition: all 0.3s;
}
button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.3s;
}
button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.3s;
}
button:hover, button:focus{
background-color: grey;
color: blue;
}
button:hover span {
padding-right: 25px;
}
button:hover span:after{
opacity: 1;
right: 0;
}
/* Header End */
<!DOCTYPE html>
<html lang="en_US">
<head>
<meta charset="UTF-8" />
<title>Portfolio</title>
<link rel="stylesheet" href="./assets/css/style.css" >
</head>
<body>
<div id="vanta-canvas">
<header>
<h1 class="inner_header" class="flex">
Hello, I'm
<span class="highlight">Brian Mojica.</span>
<br>
I'm a full-stack web develop.
</h1>
<button class="flex" style="vertical-align:middle"><span>
View My Work
</span></button>
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta#latest/dist/vanta.waves.min.js"></script>
<script>
VANTA.WAVES({
el: "#vanta-canvas",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 100.00,
minWidth: 100.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x102
})
</script>
</div>
<nav>
Test
</nav>
</body>
</html>
If what you want is a line divider, you can use the <hr> tag.
There are different style attributes you can add, too.
<hr class="dashed">
<hr class="dotted">
<hr class="solid">
<hr class="rounded">
I hope this helps.
Edit:
Sorry, I didn't read your question close enough.
You can add
header {
(css)
}
Just like you have
body {
(css)
}
I'm trying to figure out a solution where i can select which toggle is displayed on page load. At the minute, when the page loads, it is set to Pay Annually. How would i change my code so that it is set to Pay Monthly on page load?. I want the ability to quickly swap them for a/b tests.
I've attached my CodePen also - CodePen
$(document).ready(function() {
var checkBoxes = $("input[name='toggle']");
toggle();
$("#toggle").click(function() {
toggle();
});
function toggle() {
if (checkBoxes.prop("checked")) {
$('#coreMonthlyText,#coreMonthlyPrice').show();
$('#coreAnnuallyText,#coreAnnuallyPrice').hide();
} else {
$('#coreMonthlyText,#coreMonthlyPrice').hide();
$('#coreAnnuallyText,#coreAnnuallyPrice').show();
}
}
});
.pricing-box {
background: red;
padding: 25px;
width: 30%;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}
.toggle-switch {
cursor: pointer;
background-color: gray;
display: inline-block;
border: 0;
padding-left: 0;
padding-right: 0;
}
.toggle-switch input {
display: none;
}
.toggle-switch,
.toggle-switch span {
border-radius: 35px;
border-style: solid;
border-color: transparent;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.toggle-switch span {
border-width: 2px;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.toggle-switch input:checked+span+span,
.toggle-switch input+span {
border-color: #444;
background-color: white;
}
.toggle-switch input+span+span,
.toggle-switch input:checked+span {
background-color: transparent;
border-color: transparent;
}
#coreMonthlyText,
#coreMonthlyPrice,
#coreAnnuallyText,
#coreAnnuallyPrice {
display: none;
}
#proMonthlyText,
#proMonthlyPrice,
#proAnnuallyText,
#proAnnuallyPrice {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pricing-box">
<div class="row">
<div class="column">
<div class="core">
<h2>Core</h2>
</div>
</div>
<div class="column">
<div id="coreAnnuallyPrice" class="coreAnnuallyPrice">
$2,399/yr<br /> Normally $3,588/yr
</div>
<div id="coreMonthlyPrice" class="coreMonthlyPrice">
$299/pm<br /> first 2 months free
</div>
</div>
</div>
<label for="toggle" class="toggle-switch">
<input class="toggle-button" id="toggle" type="checkbox" name="toggle" data-checked="coreAnnuallyPrice,coreAnnuallyText" data-not-checked="coreMonthlyPrice,coreMonthlyText">
<span>pay annually</span>
<span>pay monthly</span>
</label>
</div>
I have a problem with an <i> element that must be seen only in a media query. The problem is I can see everything works fine in my inspector, but despite <i> takes the right font-size, and takes the right space, it doesn't take the color I gave it. The inspector even shows the right color without problems, but the element doesn't take it, it takes the background color of the section, making it impossible to be seen.
The one I want to show in the media query is id="footer-left-options", the other two above not.
Here some code to help
/*footer-left*/
.footer-section-left {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.footer-album-cover {
width: 50px;
min-width: 40px;
cursor: pointer;
}
.footer-album-cover img {
width: 100%;
}
.footer-album-info {
margin-left: 10px;
margin-right: 30px;
cursor: pointer;
}
.footer-album-info-artist a {
font-size: 10px;
color: #8d8d8d;
text-decoration: none;
}
.footer-album-info-artist a:hover {
text-decoration: underline;
}
.footer-icon-left>i {
color: #797979;
font-size: 16px;
font-weight: 500;
padding-right: 10px;
cursor: pointer;
}
.footer-icon-left>i:hover {
color: white;
}
#footer-left-options {
display: none;
}
#media all and (max-width: 532px) {
.footer-section-left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.footer-album-cover {
width: 30px;
min-width: 30px;
}
.footer-album-info {
margin-left: 0;
margin-right: 0;
}
.footer-icon-left>i {
display: none;
}
#footer-left-options {
padding-right: 0;
display: block;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<!--footer-left-->
<div class="footer-section-left">
<div class="footer-album-cover">
<img src="img/sinister.jpeg" alt="Sinister">
</div>
<div class="footer-album-info">
<div class="footer-album-info-title">Sinister</div>
<div class="footer-album-info-artist">
Brano nome
</div>
</div>
<div class="footer-icon-left">
<i class="far fa-heart"></i>
<i class="far fa-folder"></i>
<i id="footer-left-options" class="fas fa-ellipsis-h"></i>
</div>
</div>
The problem is the font-weight, since the <i> inherited the font-weight:500 from the previous rule:
.footer-icon-left>i {
color: #797979;
font-size: 16px;
font-weight: 500;
padding-right: 10px;
cursor: pointer;
}
Thanks to this site https://www.amp-blogger.com/2019/01/font-awesome-5-not-working-on-css.html I've found the answer. The <i> I've token from Font Awesome was this https://fontawesome.com/icons/ellipsis-h?style=solid and opening the link you can see that the icon is described as "solid" and has two pro version both in "regular" and "light" font-weight. Now, since 500 isn't solid (bold), the icon took the color I wanted for it, but didn't display at all! Changing font-weight to font-weight:800 solves the problem, the icon shows itself regularly and the color is correct.
Thanks everybody for the help!
/*footer-left*/
.footer-section-left {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.footer-album-cover {
width: 50px;
min-width: 40px;
cursor: pointer;
}
.footer-album-cover img {
width: 100%;
}
.footer-album-info {
margin-left: 10px;
margin-right: 30px;
cursor: pointer;
}
.footer-album-info-artist a {
font-size: 10px;
color: #8d8d8d;
text-decoration: none;
}
.footer-album-info-artist a:hover {
text-decoration: underline;
}
.footer-icon-left>i {
color: #797979;
font-size: 16px;
font-weight: 500;
padding-right: 10px;
cursor: pointer;
}
.footer-icon-left>i:hover {
color: red;
}
#footer-left-options {
display: none;
}
#media all and (max-width: 532px) {
.footer-section-left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.footer-album-cover {
width: 30px;
min-width: 30px;
}
.footer-album-info {
margin-left: 0;
margin-right: 0;
}
#footer-left-options {
padding-right: 0;
display: block;
}
}
<script src="https://kit.fontawesome.com/f10f36656a.js" crossorigin="anonymous"></script>
<!--footer-left-->
<div class="footer-section-left">
<div class="footer-album-cover">
<img src="img/sinister.jpeg" alt="Sinister">
</div>
<div class="footer-album-info">
<div class="footer-album-info-title">Sinister</div>
<div class="footer-album-info-artist">
Brano nome
</div>
</div>
<div class="footer-icon-left">
<i class="far fa-heart"></i>
<i class="far fa-folder"></i>
<i id="footer-left-options" class="fas fa-ellipsis-h"></i>
</div>
</div>
Hi i am going to create small app, using jquery, but I have problem and can't solve it, when i will click on number box i want to select only one, but now it selects multiple boxes, for example if i click on 36 and then click to 41 it will select both of them, i want to select last one :/ any solution?
$(".checkbox_child").click(function(){
$(this).toggleClass("clickedcolor")
})
.checkbox_child:not(:first-child){
margin-left: 15px;
}
.checkbox_child span{
font-family: firagoregular;
font-size: 24px;
}
.clickedcolor{
color: #056304;
border-color: #056304;
}
.checkbox_main_header p{
font-family: firagomedium;
color: #707070;
opacity: 1;
font-size: 24px;
}
.checkbox_main_header p{
margin: 0 0 18px 0;
}
.checkbox_child{
display: flex;
flex-wrap: wrap;
width: 61px;
height: 48px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #A1A1A1;
border-radius: 10px;
opacity: 1;
justify-content: space-around;
align-items: center;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="costum_checkbox_main_parent">
<div class="checkbox_child"><span>36</span></div>
<div class="checkbox_child"><span>37</span></div>
<div class="checkbox_child"><span>38</span></div>
<div class="checkbox_child"><span>39</span></div>
<div class="checkbox_child"><span>40</span></div>
<div class="checkbox_child"><span>41</span></div>
<div class="checkbox_child"><span>42</span></div>
<div class="checkbox_child"><span>43</span></div>
</div>
</div>
You can use the following:
$(".checkbox_child").click(function() {
$(".clickedcolor").not($(this)).removeClass("clickedcolor")
$(this).toggleClass("clickedcolor")
})
I've also added a background color to clickedcolor just for the visual effect
Demo
$(".checkbox_child").click(function() {
$(".clickedcolor").not($(this)).removeClass("clickedcolor")
$(this).toggleClass("clickedcolor")
})
.checkbox_child:not(:first-child) {
margin-left: 15px;
}
.checkbox_child span {
font-family: firagoregular;
font-size: 24px;
}
.clickedcolor {
color: #056304;
background-color:blue!important;
border-color: #056304;
}
.checkbox_main_header p {
font-family: firagomedium;
color: #707070;
opacity: 1;
font-size: 24px;
}
.checkbox_main_header p {
margin: 0 0 18px 0;
}
.checkbox_child {
display: flex;
flex-wrap: wrap;
width: 61px;
height: 48px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #A1A1A1;
border-radius: 10px;
opacity: 1;
justify-content: space-around;
align-items: center;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="costum_checkbox_main_parent">
<div class="checkbox_child"><span>36</span></div>
<div class="checkbox_child"><span>37</span></div>
<div class="checkbox_child"><span>38</span></div>
<div class="checkbox_child"><span>39</span></div>
<div class="checkbox_child"><span>40</span></div>
<div class="checkbox_child"><span>41</span></div>
<div class="checkbox_child"><span>42</span></div>
<div class="checkbox_child"><span>43</span></div>
</div>
</div>
When I resize my browser window the input field is cut off a bit. I am using percentages but it still is being cut off and I do not know why. I have provided a screenshot below. If I am using percentages shouldn't it resize automatically? Thank you!
Here is my css code:
body {
margin: 0;
padding: 0;
background-color: #EFEFEF;
font-family: sans-serif;
}
.homepage-window {
height: 100vh;
display: flex;
}
.nav-bar {
width: 18%;
background-color: #2E3E4E;
}
.bar-manager {
width: 100%;
}
.top-bar {
display: flex;
align-items: center;
width: 100%;
height: 7%;
background-color: white;
border-bottom: 0.5px solid lightgrey;
}
.top-bar p {
margin-left: 10px;
font-weight: lighter;
}
.user-search-input-field {
margin-left: 70%;
width: 190px;
background-color: red;
}
.bottom-bar {
width: 100%;
height: 40px;
display: flex;
align-content: center;
line-height: 40%;
background-color: white;
border-bottom: 1px solid lightgrey;
}
.bottom-bar h1 {
font-size: 12px;
margin-left: 10px;
font-weight: 500;
}
.bottom-bar p {
font-size: 12px;
margin-left: 10px;
font-weight: lighter;
}
Here is my HTML code:
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="CSS/Homepage.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
<title>Cold-Ops Homepage</title>
</head>
<body>
<div class="homepage-window">
<div class="nav-bar">
</div>
<div class="bar-manager">
<div class="top-bar">
<p>Homepage</p>
<div class="user-search-input-field">
<form action="Login.php" method="POST">
<input type="text" name="userPost" placeholder="Search users..." required>
<i class = "fa fa-search" aria-hidden = "true"></i>
</form>
</div>
</div>
<div class="bottom-bar">
<div class="bottom-bar-texts">
<div><h1>Welcome, Omard2000</h1></div>
<div><p>Administrator</p></div>
</div>
</div>
</div>
</div>
</body>
</html>
Thank you!
You've positioned the element.
It's possible that the left is pushing it off the visible screen
Also, mixing view units and pixels is dangerous.
Updated Post:
becouse of this user-search-input-field not enough space. top-bar divide into two parts,part1 for p and part2 for user-search-input-field with more space. like this:
body {
margin: 0;
padding: 0;
background-color: #EFEFEF;
font-family: sans-serif;
}
.homepage-window {
height: 100vh;
display: flex;
}
.nav-bar {
width: 18%;
background-color: #2E3E4E;
}
.bar-manager {
width: 100%;
}
.top-bar {
display: flex;
align-items: center;
width: 100%;
height: 7%;
background-color: white;
border-bottom: 0.5px solid lightgrey;
}
.top-bar p {
margin-left: 10px;
font-weight: lighter;
}
.bottom-bar {
width: 100%;
height: 40px;
display: flex;
align-content: center;
line-height: 40%;
background-color: white;
border-bottom: 1px solid lightgrey;
}
.bottom-bar h1 {
font-size: 12px;
margin-left: 10px;
font-weight: 500;
}
.bottom-bar p {
font-size: 12px;
margin-left: 10px;
font-weight: lighter;
}
.user-search-input-field {
width: 100%;
}
form {
background-color: red;
display: inline-block;
float: right;
}
.top-bar p {
width: 20%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="homepage-window">
<div class="nav-bar"></div>
<div class="bar-manager">
<div class="top-bar">
<p>Homepage</p>
<div class="user-search-input-field">
<form action="Login.php" method="POST">
<input type="text" name="userPost" placeholder="Search users..." required>
<i class = "fa fa-search" aria-hidden = "true"></i>
</form>
</div>
</div>
<div class="bottom-bar">
<div class="bottom-bar-texts">
<div><h1>Welcome, Omard2000</h1></div>
<div><p>Administrator</p></div>
</div>
</div>
</div>
</div>