.destination {
width: 100%;
height: 130vh;
background-color: #f8f8f8;
margin: 0 auto;
}
.destination-inner {
margin: 0 auto;
padding: 100px 0px 0 0;
}
.destination-inner h1 {
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 29px;
color: #555555;
text-transform: uppercase;
text-align: center;
}
.destination-inner h1 span {
font-weight: 600;
}
.destination-inner h2 {
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 16px;
color: #555555;
text-transform: uppercase;
text-align: center;
padding-bottom: 25px;
}
.destination-inner h3 {
list-style: none;
color: #fff;
font-family: 'Roboto', sans-serif;
vertical-align: middle;
font-size: 28px;
font-weight: 300;
text-transform: uppercase;
line-height: 1.4;
padding-top: 80px;
}
.destination-inner p {
font-size: 16px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
line-height: 1.7;
color: #555555;
text-align: center;
margin-bottom: 50px;
}
.destination-inner hr {
width: 14%;
color: #fe0103;
margin-top: 50px;
margin-bottom: 50px;
}
.destination-inner ul {
max-width:90%;
padding: 0px 30px;
margin: 0 auto;
text-align: center;
padding:10px 25px;
cursor: pointer;
list-style: none;
}
.destination-inner li {
background-color: #32374a;
display: inline-block;
width: 250px;
height: 320px;
cursor: pointer;
transition: all 0.3s ease 0s;
padding: 70px 40px;
margin-right: 15px;
list-style: none;
}
.destination-inner li a {
text-decoration: none;
}
.destination-inner li:hover {
background-color: #393F55;
transition: all 0.3s ease 0s;
}
<section class="destination" id="travels">
<div class="destination-inner">
<h2>STEP 01</h2>
<h1>Choose your <span>Destination</span></h1>
<hr>
<p>They are innovative and carefully researched and curated.<br> They guides are also hand picked, and are highly experienced, very often with a special expertise.<br> The vehicles are able to be adapted to more active days of touring.</p>
<ul data-grid="Grid 3">
<li>
<a href="#">
<h3>City & <br>Table Mountain</h3>
</a>
</li>
<li>
<a href="#">
<h3>The Cape <br>Peninsula</h3>
</a>
</li>
<li>
<a href="#">
<h3>The <br>Winelands</h3>
</a>
</li>
<li>
<a href="#">
<h3>The <br>Overberg</h3>
</a>
</li>
</ul>
</div>
</section>
I trust we are all good. I am trying to create a content sliding effect for the section of blocks(refer to img attached).
Is it possible to create something where, when a user clicks on any block out of the 4, a new section of 4 blocks slides in to replace the current block?
I'm still a baby when it comes to JavaScript and I have been looking for tuts but no luck. I'd really appreciate some help.
Thanks in advance.
I presume you are trying to achieve a wizard kind of feature here, like from step 1 to step 2 to step 3 and so on and show some results in the end. You may also want to go back and forth with these steps.
jQuery Smart Wizard - http://techlaboratory.net/jquery-smartwizard is all you need.
You can easily customize this plugin as per your need. For example, you can go the next step when user clicks on any of the four cards. All you have to do is to simply write this:
$('#smartwizard').smartWizard("next");
You can write this code when we click on any of the four cards. So you can provide same class names to all four cards and use above code on clicking.
For example:
$(".card").click(function() { $('#smartwizard').smartWizard("next"); });
This plugin will surely help you and will take most of the overhead, like going back one step and making changes.
If you need any help with the implementation, please reach out, however, the site has super helpful documentation.
Please note that there are plenty of other plugins also and we can also write this code on our own, but I really like this one.
Specifics: The animation you wanted to achieve here, like clicking on one card will bring 4 new cards will happen with ease here.
You just have to write the HTML as mentioned on the plugin site.
Best,
Sumit
Related
How do make my home page responsive? i tried using meta but not working, this is my home.js page which contains what i want to make responsive, needs to add or remove anything?
import React from "react";
import "../css/Home.css";
import { Link } from "react-router-dom"
import logo from '../images/logo2.jpg';
function HomePage(){
return(
<div className="background">
<div className="navbar">
<div className="header"><br />
<img src={logo} alt="logo"/>
<h3>MyChat</h3>
</div>
<nav>
<ul>
<li><input type="text" placeholder="Search News" /></li>
<li><Link to = '/'>HOME</Link></li>
<li><Link to = ''>NEWS</Link></li>
<li><Link to = ''>TIMELINE</Link></li>
<li><Link to = ''>CONTACT</Link></li>
</ul>
</nav>
</div>
<div className = "backform">
<div className="info">
<h2>Make Cool Friends !!!</h2>
<p>Friend Finder is a social network template that can be used to <br />
connect people. The template offers Landing pages, <br />
News Feed, Image/Video Feed, Chat Box, Timeline and lot more. <br /><br />
What are you waiting for? Join Now.
</p>
</div>
<div className="holdback">
<form>
<Link to =''>Login</Link>
<Link to = ''>Register</Link>
</form>
</div>
</div>
</div>
);
}
export default HomePage;
This is my css file for home.js design that contains background, image, navbar, header, text styling and fonts, i tried using meta device display for my css as well but not working.
#font-face {
font-family: 'Pacifico';
src: url('../fonts/Pacifico.ttf');
}
#font-face {
font-family: 'Lobster';
src: url('../fonts/Aladin-Regular.ttf');
}
#font-face {
font-family: 'Neo';
src: url('../fonts/Nunito-SemiBoldItalic.ttf');
}
.background{
background-image: url("../images/home-background1.png");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 680px;
}
.header{
display: inline-block;
margin: 0 2rem 0 20px;
padding: 0 5rem 10px ;
}
.header h3{
font-size: larger;
font-family: 'Pacifico';
font-stretch: expanded;
color: #764CDF;
margin: 5px 5rem 10px;
padding: 0 5rem;
position: static;
}
.header img{
border-radius: 50%;
width: 40px;
height: 40px;
margin-left: 7rem;
position: absolute;
}
.navbar{
background-color: #5EECFF;
width: 100%;
height: 5rem;
}
.navbar ul{
list-style: none;
float: right;
padding: 0 3rem;
margin: 0;
text-decoration: none;
}
.navbar ul li{
display: inline;
padding: 1rem;
font-size: larger;
font-family: 'Lobster';
}
.navbar ul li input{
border-radius: 10px;
background-color: #F0F0F0;
width: 200px;
height: 20px;
text-indent: 1rem;
transition: width 0.4s ease-in-out;
opacity: 0.5;
font-family: 'Times New Roman', Times, serif;
font-size: small;
}
a:link,
a:hover{
text-decoration: none;
color: white;
}
a:active{
color: #764CDF;
}
a:focus{
color: white;
background-color: #764CDF;
}
.info{
color: white;
padding-left: 15rem;
padding-top: 8rem;
font-family: 'Neo';
}
.backform{
display: inline-flex;
}
.holdback{
margin: 0;
padding-left: 2rem;
margin-left: 5rem;
margin-top: 5rem;
border-radius: 5px;
background-color: #F0F0F0;
width: 500px;
height: 300px;
text-align: left;
display: inline-block;
}
Your CSS must have different styles for each breakpoint you want to make it responsive.
There are two ways to achieve that:
You write it by yourself. As in the comments, there are already several guides for you to learn how to do it. Example
There are some frameworks/libraries out there that people are using it to achieve such thing. It makes our lives easier. You can search and study them and then choose by yourself which one you want to use. To name a few (popular ones), Bootstrap and Tailwind.
I am working on a small app and have found a strange bug. I am currently using anchor tags to represent buttons in my app, I could change these to actual buttons instead, but I've decided to stick with anchors for now.
However, I've noticed that the anchor tags are clickable across the entire width of the screen. Could someone please point out why this is occurring? I am assuming it is something wrong with my CSS.
Please see below for an example.
#commentList {
list-style-type: none;
padding: 0;
margin: 0;
display:block;
}
#commentList li a {
width: 364px;
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: black;
display: block;
}
<ul id="commentList">
<li onclick=functionA() title="Activate function A."><a href="#" >Function A</a></li>
<li onclick=functionB() title="Activate function B."><a href="#" >Function B</a></li>
<li onclick=functionC() title="Activate function B."><a href="#" >Function C</a></li>
</ul>
That's because your onclick=functionA() is on the li tag, not on the anchor tag, and the lis span the whole width since they are block elements without a width setting.
I think this is your issue:
Change:
#commentList li a {
width: 364px;
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: black;
display: block;
}
To:
#commentList li a {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: black;
display: block;
}
#commentList li {
width: 364px;
}
The width is being applied to the <a> tag, not the <li>. You can make it so the width of the <li> is still 346px and still have the <a> tag work correctly within it.
See the JSFiddle: https://jsfiddle.net/d4g8f59h/
On the a tag, instead of display: block; do display: inline-block;
I am using a master page and creating content pages from it for my website. Trying to show a drop-down menu in the navigation bar, but not working when I add data into the context placeholder.
I have been trying to do this for a long time and tried to use the drop down menu on click instaed of hover, but that doens't work too.
<!--this is the masters page-->
<style>
.navbar {
overflow: hidden;
background-color: black;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<!--the body part-->
<div class="auto-style3 navbar">
Home
Vehicles
<div class="dropdown">
<button class="dropbtn">Finance
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
About Finance
Apply For Finance
</div>
</div>
Reviews
FAQ
Contact Us
About Us
</div>
<!--working in a plain content page (with no data)-->
<%# Page Title="" Language="C#" MasterPageFile="~/HomeMaster.Master" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="BootstrapDemo.WebForm4" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
<!--But not in another content page with data-->
<div class="container">
<h1 style="color: #FF0000; font-weight: bold; font-family: Calibri; font-size: xx-large">About Trend Motors:</h1>
<p> <span>Trend motors was started by Bhuvnesh in 2016 who’s dream is to supply quality cars at competitive prices. He set about gathering like minded people to form a team of dedicated and experienced co-workers to help him on his mission. So the correct mix of people, experience, and huge industry knowledge now forms the tight compact team that is Trend Motors.</span></p>
<p><span>Selling good cars at better prices throughout New Zealand from the North cape to bluff our experienced team can help you all the way, from the first enquiry to the delivery of the vehicle. We pride ourselves on stocking a wide range of vehicles from the top end to the family cars and the cutest fuel efficient cars. We will always have a selection and a car for you.</span></p>
<br />
<h2 style="font-size: xx-large; font-family: Calibri; font-weight: bold; color: #FF0000"> How to Find Us?</h2>
<div id="map_populate" style="width:100%; height:500px; border: 5px solid #5E5454;">
</div>
</div>
How do I make this work? I keep fiddling around with the codes but I get no luck. I'm trying to make a responsive mobile menu. I tried searching google and can't find any solution. Thanks
<div class="sidenav" id="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×
</a>
Home
Order
About
</div>
<div class="main_header">
<div class="main_nav">
<span onlick="openNav()">☰</span>
</div>
<h1>Treat your tastebuds</h1>
Order a coffee
</div>
<script type="text/javascript">
function openNav() {
document.getElementById("main_nav").style.width = "100%";
}
function closeNav(){
document.getElementById("closeNav").style.width="0";
}
</script>
Here is the CSS
.sidenav{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition:0.5s;
}
sidenav a{
color: white;
text-decoration: none;
display: block;
transition: 0.3s;
font-size: 16px;
font-weight: 100;
text-align: center;
padding: 1em 0;
}
.main_header{
background-image: url(coffee1.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
text-align: left;
color: white;
width: 100%;
height: 750px;
}
.main_header h1{
font-size: 36px;
font-weight: 900;
margin-left: 2em;
margin-top: 8em;
}
.btn_one{
margin-left: 11em;
color: white;
background-color: darkslategray;
text-decoration: none;
padding: 1em 2.5em;
}
.main_nav{
height: 40px;
}
.main_nav span{
color: white;
font-size: 30px;
text-decoration: none;
line-height: 40px;
margin-left: 0.25em;
float: left;
cursor: pointer;
}
Utilizing the bootstrap framework is an option.
Here is an example that provides a side navigation.
https://blackrockdigital.github.io/startbootstrap-simple-sidebar/
You have various typos in your code as well as undefined elements that you're attempting to manipulate.
Firstly, you have:<span onlick="openNav()">☰</span> which contains a typo. It's 'onclick', not 'onlick'.
Next, you're attempting to manipulate an element "main_nav", but in your HTML and CSS, you defined main_nav as a class (using a period). So, if you change your html to <div class="main_nav"> your issue for that will be fixed.
I'm unsure what your final menu design will be, but those changes will fix the problems you're running into.
I'm trying to retain the hover style state on my links when I click on them, kind of like a tabbing effect. It doesn't seem to be working, hoping someone can help me with it.
CSS:
.nav {
position: absolute;
z-index: 1000;
font-family: Asap;
right: 100px;
top: 70px;
}
.nav a, .nav a:active, .nav a:visited {
font-family: 'Asap', sans-serif;
color: #fff;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: black 0.1em 0.1em 0.2em;
}
.nav a:hover {
font-family: Asap;
color: #fff;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
border-top: 2px solid #fff;
padding-top: 5px;
}
.nav2 a {
font-family: Asap;
color: #fff;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
border-top: 2px solid #fff;
padding-top: 5px;
}
Script:
$('div.nav > a').click(function(){
$(this).parent().removeClass('nav').addClass('nav2');
});
HTML:
<div class="nav" onclick="javascript:showlayer('myName')">
<span class="btn1">Design </span>
<span class="btn2">Neighbourhood
</span>
<span class="btn3">Media </span>
<span class="btn4">Developer </span>
<span class="btn5">Contact </span>
<br><br><br><br><br><br><br><br><br><br>
</div>
You could just do something purely Javascript by declaring a different style onClick.
var change = document.getElementById("Link Id"); //Define the link in a variable
change.onClick=function() { //Activate the function when clicked
change.style.fontFamily=("Asap");
change.style.color=("#fff");
change.style.fontSize=("12px");
change.style.textDecoration=("none"); //Change the link attributes
change.style.textTransform=("uppercase");
change.style.letterSpacing=("1px");
change.style.borderTop=("2px solid #fff");
change.style.paddingTop= ("5px");
}
This should change the link style to the hover style after you click the link. Just make sure you assign your link an id. Make sure you know basic Javascript like the src tag to call it:
<script type = "text/javascript" src = "externaljavascript.js"></script>
And don't forget to refrain from using the tags in the external script.