I'm trying to make this form:
https://imgur.com/CMzcRjp
I have this now but have a few issues.
The hover needs a border-radius
Need font a fontawesome icon on right top corner
How can i change the color of the icon
The there are three different boxes but only one can be selected. What is the right way to program it.
Also need to add php later but how.
/* CHECKOUT FORM */
.selection-box {
width: 255px;
height: 180px;
margin: 20px 0px 20px 0px;
padding: 30px;
border: 1px solid #E3E4EA;
border-radius: 6px;
color: #5A637F;
text-align: center;
font-style: oblique;
font-weight: 600;
background-color: #F7F7FA;
}
.selection-box:hover {
outline: 5px solid #76A7E1;
border-radius: 6px;
}
body {
font-family: 'Raleway', sans-serif;
margin: 0;
-webkit-font-smoothing: antialiased;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
height: 100%;
color: #54637F;
}
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<h1><strong style="font-size: 16px;">Stap 1: kies uw pakket</strong></h1>
<div class="row">
<div class="col-sm-4">
<div class="selection-box"><i class="fa fa-car fa-4x" aria-hidden="true"></i><br>Budget pakket</div>
</div>
<div class="col-sm-4">
<div class="selection-box"><i class="fa fa-fighter-jet fa-4x" aria-hidden="true"></i><br>Budget pakket</div>
</div>
<div class="col-sm-4">
<div class="selection-box"><i class="fa fa-car fa-4x" aria-hidden="true"></i><br>Budget pakket</div>
</div>
</div>
Look this: https://codepen.io/Luis4raujo/pen/JrLRMp
U need hide .icon and with javascript show it.
/* CHECKOUT FORM */
.selection-box {
width: 255px;
height: 180px;
margin: 20px 0px 20px 0px;
padding: 30px;
border: 1px solid #E3E4EA;
border-radius: 6px;
color: #5A637F;
text-align: center;
font-style: oblique;
font-weight: 600;
background-color: #F7F7FA;
}
.selection-box:hover {
border: 5px solid #76A7E1;
border-radius: 6px;
}
body {
font-family: 'Raleway', sans-serif;
margin: 0;
-webkit-font-smoothing: antialiased;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
height: 100%;
color: #54637F;
}
.icon{
border-radius: 15px;
width:30px;
height:30px;
background-color:#76A7E1;
position:relative;
top:40px;
left:235px;
/*display:none;*/
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<h1><strong style="font-size: 16px;">Stap 1: kies uw pakket</strong></h1>
<div class="row">
<div class="col-sm-4">
<div class="icon"></div>
<div class="selection-box">
<i class="fa fa-car fa-4x" aria-hidden="true"></i><br>Budget akket</div>
</div>
<div class="col-sm-4">
<div class="selection-box"><i class="fa fa-fighter-jet fa-4x" aria-hidden="true"></i><br>Budget pakket</div>
</div>
<div class="col-sm-4">
<div class="selection-box"><i class="fa fa-car fa-4x" aria-hidden="true"></i><br>Budget pakket</div>
</div>
</div>
you may try this it may help you No need to use Javascript for this case
<ul id="theme-options1" class="nav nav-pills custom">
<li class="active">
<a data-toggle="tab" id="theme1" data-id="1">
<i class="fa fa-check them-Selected" aria-hidden="true" ></i>
</a>
</li>
<li>
<a data-toggle="tab" id="theme2" data-id="2">
<i class="fa fa-check them-Selected" aria-hidden="true"></i>
</a>
</li>
<li>
<a data-toggle="tab" id="theme3" data-id="3">
<i class="fa fa-check them-Selected" aria-hidden="true"></i>
</a>
</li>
<li>
<a data-toggle="tab" id="theme4" data-id="4">
<i class="fa fa-check them-Selected" aria-hidden="true"></i>
</a>
</li>
</ul>
Here is the Working fiddle
Related
I'm trying to display the data from the database, but whenever I connect it the whole page gets repeated - from the head title to a row and then it shows the head title again as if I had split the page, and another row from the database.
I want to show the data like the products page next to each other but it only shows one and then repeats the whole page.
This is my code that I tried - the page gets repeated from the main-container and shows one row, then repeats the main container again.
<?php
require_once 'opp_data.php';
$sql ="SELECT * FROM college_opp";
$allopp =$conn->query($sql);
?>
//i dont know if i have to show the whole code but this is only the code part where everything gets repeated
<?php
while ($row = mysqli_fetch_assoc($allopp)) {
?>
<div class="main-container">
<h2>تصفح الفرص التطوعية </h2>
<div class="post-collect">
<div class="post-main-container">
<div class="all sports">
<div class="post-img">
<img src="imgs/<?php echo $row["images"]; ?>">
<span class="category-name" data-name="sporty">كلية علوم الرياضة </span>
</div>
<div class="post-content">
<div class="post-content-top">
<span>
<i class="fa-solid fa-users-line"></i><?php echo $row["volunteer_num"]; ?>
</span>
<span><i class="fa-regular fa-calendar-days"></i><?php echo $row["Date"]; ?></span>
</div>
<h2>"<?php echo $row["Title"]; ?>"</h2>
<p>"<?php echo $row["Description"]; ?>"</p>
</div>
<div class="button-btn">
التفاصيل والتسجيل
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
</body>
for the style.css\\
.main-container{
width: 90vw;
margin: 0 auto;
padding: 40px 0;
}
.main-container h2{
text-align: center;
padding: 90px 0;
font-size: 32px;
color: #fff;
}
.main-container p{
font-weight: 300;
padding: 10px 0;
opacity: 0.7;
text-align: center;
}
.post-main-container{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 60px;
}
.post-main-container div{
box-shadow: 0px 8px 27px -12px rgba(0, 0, 0, 0.64);
}
.post-img{
position: relative;
width: 2vw;
height: 19vw;
}
.post-img img{
position: absolute;
left: 20px;
width: 17vw;
height: 19vw;
}
.post-content{
padding: 25px;
}
.post-content-top{
background: #2b1055;
color: #fff;
opacity: 0,9;
padding: 5px 0 5px 15px;
}
.post-content-top span{
padding-right: 20px;
}
.post-content h2{
font-size: 22px;
padding: 12px 0;
font-weight: 400;
}
.post-content p{
opacity: 0.7;
font-size: 15px;
line-height: 1.8;
color: ghostwhite;
}
.button-btn a {
padding: 8px 15px;
display: block;
font-family:'Almarai', sans-serif ;
font-size: 15px;
cursor: pointer;
background: transparent;
border-radius: 20px;
width: 50%;
border: 2px solid #fff;
color: #fff;
margin: 5px auto;
padding: 0.4rem;
text-decoration: none;
font-weight: 600;
transition: all 0.2s ease-in-out;
}
.button-btn a:hover{
background:#2b1055;
}
Because your entire page is in the while loop it will duplicate the whole page multiple times. I don't know if this is exactly what you want but I suggest you doing it something like this:
<?php
require_once 'opp_data.php';
$sql ="SELECT * FROM college_opp";
$allopp =$conn->query($sql);
?>
<div class="main-container">
<h2>تصفح الفرص التطوعية </h2>
<div class="post-collect">
<?php while ($row = mysqli_fetch_assoc($allopp)) { ?>
<div class="post-main-container">
<div class="all sports">
<div class="post-img">
<img src="imgs/<?php echo $row[" images "]; ?>">
<span class="category-name" data-name="sporty">كلية علوم الرياضة </span>
</div>
<div class="post-content">
<div class="post-content-top">
<span>
<i class="fa-solid fa-users-line"></i><?php echo $row["volunteer_num"]; ?>
</span>
<span><i class="fa-regular fa-calendar-days"></i><?php echo $row["Date"]; ?></span>
</div>
<h2>"
<?php echo $row["Title"]; ?>"</h2>
<p>"
<?php echo $row["Description"]; ?>"</p>
</div>
<div class="button-btn">
التفاصيل والتسجيل
</div>
</div>
</div>
<?php } ?>
</div>
</div>
This will only loop the post-main-container.
This is the code you are looking for
<div class="main-container">
<h2>تصفح الفرص التطوعية </h2>
<div class="post-collect">
<div class="post-main-container">
<?php
while ($row = mysqli_fetch_assoc($allopp)) {
?>
<div class="all sports">
<div class="post-img">
<img src="imgs/<?php echo $row["images"]; ?>">
<span class="category-name" data-name="sporty">كلية علوم الرياضة </span>
</div>
<div class="post-content">
<div class="post-content-top">
<span>
<i class="fa-solid fa-users-line"></i><?php echo $row["volunteer_num"]; ?>
</span>
<span>
<i class="fa-regular fa-calendar-days"></i><?php echo $row["Date"]; ?>
</span>
</div>
<h2>"<?php echo $row["Title"]; ?>"</h2>
<p>"<?php echo $row["Description"]; ?>"</p>
</div>
<div class="button-btn">
التفاصيل والتسجيل
</div>
</div>
<?php
}
?>
</div>
</div>
</div>
I am triying to figure out why my toggle icon is not showed,and why the nav bar is not showing the menu elements when I use the mobile view.
I have created a border to see if the icon is there,and I can see the red frame,but when I click on it,does not work,and is not showing any content.
Can someone please help me.
This is my code so far:
<header>
<div class="jumbotron">
<div class="container text-center">
<div class="intro-video">
<video class="videobaner" id="video" preload autoplay="true" loop="loop" muted="muted" volume="0">
<source src="img/background.mp4" type="video/mp4">
<source type="video/webm" src="img/theremin2.mp4"></source>
</video>
</div>
</div>
</header>
<nav class="navbar navbar-expand-md" style="width:auto;background-color:black;">
<div class="container-fluid mb-2 mt-2">
<div class="navbar-collapse collapse flex justify-content-md-center">
<ul class="navbar-nav mr-auto align-center">
<li class="nav-item">
<a class="nav-link" href="music.php"> MUSIC </a>
</li>
<li class="nav-item">
<a class="nav-link" href="events.php"> EVENTS </a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">FEATURED</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="arts.php">ARTS</a></li>
<li><a class="dropdown-item" href="blog.php">BLOG</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SUBSCRIPTION </a>
</li>
</ul>
</div>
<div class="d-flex flex-md-fill flex-shrink-1 d-md-none">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapsenav">
<span class="navbar-toggler-icon"style="color:white;border:2px solid red;"></span>
</button>
</div>
</div>
</div>
</nav>
<style>
header .jumbotron{
position: relative;
background-color: black;
height: 100%;
min-height: 40rem;
width: 100%;
overflow: hidden;
}
nav {
opacity: 80%;
padding: 20px;
/* position: relative; */
z-index: 9999;
margin: 0;
width: 50%;
left: 0px;
right: 0px;
bottom:0px;
border-radius: 1px;
color: white !important;
}
.container-fluid {
height:30px;
}
nav ul {
text-transform: uppercase;
padding:20px 35px;
margin: 0;
font-size: .450rem;
font-weight: 400;
color: white!important;
}
nav ul li {
display:inline-block;
text-align: center;
padding:20px 35px;
height: 1%;
}
nav ul a {
height:35px;
line-height:20px;
padding:16px 32px;
margin: 4px 2px;
color:white !important;
font-size: 20px;
letter-spacing: 2px;
font-weight: 700;
text-transform: uppercase;
text-decoration:none;
}
nav ul a:hover {
padding: 20px;
border-radius: 15px;
color: white!important;
}
</style>
Bootstrap5 uses data-bs-toggle and data-bs-target for the toggler. Change
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapsenav">
<span class="navbar-toggler-icon"style="color:white;border:2px solid red;"></span>
</button>
to
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".collapsenav">
<span class="navbar-toggler-icon" style="color:white;border:2px solid red;"></span>
</button>
More on the Bootstrap5 toggler
href is not able to clickable on carousel due to jQuery
Carousel is using jQuery for automated sliding and when I'm placing an element with a href tag it's not working, also as the project is using multiple JavaScript files for fast uploading. I'm not able to identify how to make href clickable on carousel.
How can I overwrite existing jQuery to make only that particular href clickable?
<li class="ds cover-image animated scaleAppear">
<img src="<?php echo $Domain;?>img/slide2.jpg" alt="img">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row text-center" style="text-align:center;">
<div id="arrow-left" class="arrow">
<div class="col-sm-6 ">
<h6 id="firstLineh6"><span style="font-size:50px;">■</span>Farming-as-a-Service</h6>
<h1 id="firstLineh1">Advance,Affordable,<br>Accessible</h1>
<div class="vertical">
<p id="contP">
We are making advanced farm mechanization services affordable to farmers through the
Pay and Use Model
</p>
</div>
<a id="carbtn1" href="https://google.com">Traxi Customer</a>
<a id="carbtn2" href="https://google.com">Traxi Partner</a>
<div class="col-sm-6 fade-in text-center" style="text-align:right;"></div>
</div>
<div class="intro_layers_wrapper">
<div class="intro_layers">
<!-- <div class="intro_layer">
<p class="intro_before_featured_word pTextSize">Looking For Mechanized Crop Cultivation? </p>
<p class="text-capitalize intro_featured_word pTextSize"> We are the "Solution" </p>
<br>
Tell Us Your Farming Need
</div> -->
</div>
</div>
</div>
</div>
</div>
</li>
Hey there as I got that your all links working with above code.
https://imgur.com/a/DeZd2K9
But if you still facing issue with your Code you can try given below code for slider-
.bs-fullscreen {
height: 100%;
}
.bs-fullscreen .carousel,
.bs-fullscreen .item,
.bs-fullscreen .active {
height: 100%;
}
.bs-fullscreen .carousel-inner {
height: 100%;
}
.carousel-bg .carousel-inner .item {
background-color: darkslategrey;
background-size: cover;
background-position: center;
min-height: 664px;
}
.banner-text {
position: absolute !important;
top: 215px;
left: 12%;
background: rgba(0, 0, 0, 0.5);
padding: 47px 80px;
}
.banner-text p {
font-size: 16px;
font-family: 'Roboto';
color: #fff;
font-weight: 600;
}
.banner-text h2 {
font-size: 42px;
font-family: 'Poppins';
font-weight: 600;
color: #fff;
line-height: 44px;
}
.banner-text a {
font-size: 16px;
color: #000;
font-weight: 800;
background: #fff;
padding: 10px 20px;
font-family: 'Roboto';
}
.banner-text span {
font-size: 48px !important;
}
#media only screen and (max-width:600px) {
.banner-text span {
font-size: 34px !important;
}
}
#media only screen and (max-width:400px) {
.banner-text {
position: center;
}
}
<!doctype html>
<html>
<body>
<div class="bs-fullscreen">
<div id="carousel-example" class="carousel slide carousel-bg" data-ride="carousel" data-interval="3000">
<!-- Bottom dots {indicators} -->
<div class="carousel-inner" role="listbox">
<div class="item active"
style="background-image: url(https://www.ashleyandalvis.com/wp-content/uploads/4-3-1.jpg);">
<div class="banner-text">
<p>Eco Friendly | Feathery Light Perfect Fit</p>
<h2>50 WASH <br><span>UNDERWEARS</span></h2>
Shop Collection
</div>
</div>
<div class="item mob-banner"
style="background-image: url(https://www.ashleyandalvis.com/wp-content/uploads/Desktop-View-Home-Page-banner-1280x720px-1.jpg);">
<div class="banner-text">
<p>Memory Stretch | Skinny Soft Modal</p>
<h2>CONFIDENCE <br><span>INSIDE</span></h2>
Shop Collection
</div>
</div>
<div class="item mob-banner1"
style="background-image: url(https://www.ashleyandalvis.com/wp-content/uploads/Confidence-INSIDE-MOBILE-SLIDER-1280-%C3%97-720px.png);">
<div class="banner-text">
<p>Memory Stretch | Skinny Soft Modal</p>
<h2>CONFIDENCE <br><span>INSIDE</span></h2>
Shop Collection
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
<a class="right carousel-control" href="#carousel-example" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
</div>
</div>
</body>
</html>
Hope you like the answer.
I have a ul that contains a set of lis and divs created by a for each loop, The uls and lis are there so that the lis are sortable, i.e drag and drop is enabled, the images are displaying on the next line not close to each other, please what may be the cause
This is my code
.img-w {
position: relative;
background-size: cover;
background-position: center;
cursor: pointer;
height: 150px;
width: 200px;
}
<ul class="reorder-photos-list">
#foreach ($images_ext as $image)
<div style="width: auto;height: auto">
<li id="{{$image->id}}">
<div class="img-w " id="{{$image->id}}"style="background-image: url('{{$image->filename}}')"data-src="{{$image->filename}}">
{{-- <img class="mb-2 uploaded-photos " src="{{$image->filename}}" alt="">!--}}
</div>
</li>
<span style="color: #333333;position: relative;width: 100%;text-align: justify;
display: inline;">{{$image->description}} <i class="fa fa-upload"
style="margin-left: 10px; color:#333333;"></i><br/> <br/></span>
</div>
#endforeach
</ul>
Div and li are block element, so naturally will display on the next line.. Unless you want to float them or change the display to inline.
try to edit your html and css code as below;
<style>
.img-box{
float: left;
}
.img-w {
position: relative;
background-size: cover;
background-position: center;
cursor: pointer;
height: 150px;
width: 200px;
}
.clearfix{
clear: both;
}
</style>
#foreach ($images_ext as $image)
<div class="img-box">
<div class="img-w" id="{{$image->id}}"style="background-image: url('{{$image->filename}}')"data-src="{{$image->filename}}">
{{-- <img class="mb-2 uploaded-photos " src="{{$image->filename}}" alt="">!--}}
</div>
<span style="color: #333333;position: relative;width: 100%;text-align: justify;
display: inline;">{{$image->description}} <i class="fa fa-upload" style="margin-left: 10px; color:#333333;"></i></span>
</div>
#endforeach
Then use clearfix to clear the float
To include UL and Li, use the code below;
<ul>
#foreach ($images_ext as $image)
<li class="img-box">
<div class="img-w" id="{{$image->id}}"style="background-image: url('gig.png')"data-src="{{$image->filename}}">
{{-- <img class="mb-2 uploaded-photos " src="{{$image->filename}}" alt="">!--}}
</div>
<span style="color: #333333;position: relative;width: 100%;text-align: justify;
display: inline;">{{$image->description}} <i class="fa fa-upload" style="margin-left: 10px; color:#333333;"></i></span>
</li>
#endforeach
</ul>
This is my HTML code
<div>
<div class="text-center col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-md-3 col-sm-3 animate-box">
<div class="team-section-grid" style="background-image: url(assets/img/image-bg.jpg);">
<div class="overlay-section">
<div class="desc">
<i class="icon icon-wallet2"></i> Buy Now
</div>
</div>
</div>
<div class="text-center add-cart">
<a href="" title="">
<i class="icon icon-cart"></i> Add To Cart
</a>
<a href="" title="">
<i class="icon icon-heart" style="margin-left: 10px;"></i> Add To Wishlist
</a>
</div>
</div>
View More..
</div>
What i am trying to achieve through JQUery is whenever click the view more.. or whenever the focus is on that button I want the following div appended to the current div so that I can dynamically load products from the DB and append it.
Can anyone help me with that code? Thanks in advance..
Did you tried: http://api.jquery.com/append/ ?
A very simple example:
jQuery('.wrapper a').on('click', function(e){
e.preventDefault;
jQuery('.wrapper').append('<div class="item"></div>');
});
.wrapper{
position: relative;
background: #e6e6e6;
padding: 10px 10px 50px 10px;
}
.wrapper a{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px 0;
background: #aaa;
color: white;
text-align: center;
border-top: 3px solid #fff;
}
.item{
display: block;
width: 100%;
height: 20px;
background: #ccc;
margin: 0 0 5px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
show more
<div class="item"></div>
</div>
Instead of append('<div class="item"></div>') you can append html-templates, too. It could be more comfortable to use a template engine here ...