I want to display a button in my project and I have created a button.css file that stores all the CSS for creating the button. Initially, I used the whole code from a different source but have managed to copy and paste the css code into the button.css file except the HTML code. I am having issues with the html code and don't know where to paste it in my index.html file. I tried working with it but it would produce a totally different output with just a simple and plain box that says "Check Out My Blogs!"
The HTML Code I want To Paste In My index.html file:
<head>
<link type="text/css" rel="stylesheet" href="css/button.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<div id="container">
<button class="learn-more">
<span class="circle" aria-hidden="true">
<span class="icon arrow"></span>
</span>
<span class="button-text">Check Out My Blogs!</span>
</button>
</div>
My Main index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title >Hussain Omer</title>
<meta content="" name="descriptison">
<meta content="" name="keywords">
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
<link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-180664536-1">
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-180664536-1');
</script>
</head>
<body>
<!-- ======= Mobile nav toggle button ======= -->
<!-- ======= Header ======= -->
<header id="header" class="d-flex flex-column justify-content-center">
<nav class="nav-menu">
<ul>
<li class="active"><i class="bx bx-home"></i> <span>Home</span></li>
<li><i class="bx bx-user"></i> <span>About Me</span></li>
<li><i class="bx bx-file-blank"></i> <span>Resume</span></li>
<li><i class="bx bx-book-content"></i> <span>Projects</span></li>
<li><i class="bx bx-server"></i> <span>Blogs</span></li>
<li><i class="bx bx-server"></i> <span>Skills</span></li>
<li><i class="bx bx-envelope"></i> <span>Contact</span></li>
</ul>
</nav><!-- .nav-menu -->
</header><!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex flex-column justify-content-center">
<div class="container" data-aos="zoom-in" data-aos-delay="100">
<h1>Hussain Omer</h1>
<p>I'm a <span class="typed" data-typed-items="Coder, Leader, Team-Player, Blog Writer, Adventurer"></span></p>
<div class="social-links">
<!--<i class="bx bxl-twitter"></i>
<i class="bx bxl-facebook"></i>-->
<a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/kaustubh-prabhakar/" class="linkedin"><i class="bx bxl-linkedin"></i></a>
<a target="_blank" rel="noopener noreferrer" href="https://github.com/SantaKaus" class="github"><i class="bx bxl-github"></i></a>
<a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/h.s.z_11/" class="instagram"><i class="bx bxl-instagram"></i></a>
</div>
</div>
</section><!-- End Hero -->
<main id="main">
<!-- ======= About Section ======= -->
<section id="about" class="about portfolio services">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>My Story</h2>
</div>
<div class="row portfolio-container" data-aos="fade-up" data-aos-delay="200">
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-1.jpg" class="img-fluid">
<div class="portfolio-info">
<h4>Lahore, Pakistan (2003-2010)</h4>
<p>I was born in Lahore, the second largest city of Pakistan. This is where I did most of my education and developed many memories. I enjoyed the very bit of the city; from the diverse culture and to the beautiful greenary. I haven't visited Pakistan in over 5 years, and I hope to go back some day 😀
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-3.jpg" class="img-fluid">
<div class="portfolio-info">
<h4>Helsinki, Finland (2007-2010)</h4>
<p>From a very unique and enjoyable Finnish school syst
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-2.jpg" class="img-fluid">
<div class="portfolio-info">
<h4>Helsinki, Finland (2007-2010)</h4>
<p>From a very unique and enjoyable Finnish school syst
</div>
</div>
</div>
</div>
</div>
<div class="section-title">
<h2>About ME</h2>
<p>I am a 17 year old with a enthusiastic drive to working with technology, and using my prowess in Computers to make a positive impact on this world. </p>
</div>
<img src="https://mail.google.com/mail/u/1?ui=2&ik=79098a413c&attid=0.1&permmsgid=msg-f:1687893372595235455&th=176c9a145c466a7f&view=att&disp=safe&realattid=176c9a0f10e523984941" align="left" width="370" height="500">
<!-- <div style="display:inline-block;"> to put text under something or start new -->
<div class="aligned">
<div class="p">
<p>Motivated by my love for numbers, I started to explore the many ways I can use my Mathematical knowledge and implement it into different areas. I was introduced to Computer Science in my junior years of high school, and I came to know that I was genuinely passionated about learning it. It offers a holistic approach to solve problems which I admire, and since then, I have transformed my interest into a personal hobby!</p>
<p>I would always like to challenge myself and learn new programming langauges to increase the size of my toolbox. I was inspired by one of my friends to take my programming skills and put it into a good use; thus, I was introduced to competitive programming and large coding events such as hackathons!</p>
<p>The intellectual challenges, creativity, and logic programming offers has always further strengthened the inevitable bond between us.</p>
<p>Challenging myself allows me to not only grow outside my comfort zone, but gives a new perspective towards life, and how there is no limitations/boundaries that halt you from growing! It is everlasting. Once you develop the growth mindset, your journey just never comes to a complete stop! You keep on growing outside your comfort zone, and being able to easily push through any obstacles.</p>
<blockquote>
Nothing Is Impossible. The Word Itself Says 'IM Possible'
<cite>Audrey Hepburn</cite>
</blockquote>
</div>
</section><!-- End About Section -->
<!-- ======= Facts Section ======= -->
<section id="facts" class="facts">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>What I am upto 😃</h2>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up">
<h4 class="title">7CUPS.com</h4>
<p class="description">I am currently on the pursuit to make a positive impact on the world. To do this, I started volunteering with 7Cups as a trained listener to support people having emotional distress by interacting with them and resolving any concerns they might have. Especially in these unprecendented times (a.k.a when COVID hit), it is important to guide and support the ones that require additional assistance</p>
</div>
<div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up" data-aos-delay="100">
<h4 class="title">School Clubs</h4>
<p class="description">Being part of school clubs is personally my favourite thing:) Interacting with people, coming up with ideas and implementing it with various activities is a fun on its own! I am currently an active member of over 5 clubs and hold a Vice-President position at my school's STEM Club. I am also the Technical Team Member for our school's Student Tech Hub</p>
</div>
<div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up" data-aos-delay="200">
<h4 class="title">Blog Writing</h4>
<p class="description">This is my new favourite thing to do when I am bored:) You may wonder what kind of blogs I write and specifically about what genre I write about. The answer is everything! I write about what is on my mind, and what I learn from my experiences. Basically self-reflections. I also tend to give general advices to people through my blogs!</p>
</div>
</div>
</div>
</div>
</section><!-- End Facts Section -->
</body>
</html>
The html code may look very long but I want the button to be displayed after "This is my new favourite thing to do when I am bored........" which is near the very bottom
So where should the HTML code go for it to display the button right after the line I said above? I tried putting the code after the line but it wouldnt work for some reason. Could you guys please help?
Here is the Button.css file which has the css for my button:
#import url("https://fonts.googleapis.com/css?family=Mukta:700");
* {
box-sizing: border-box;
}
*::before, *::after {
box-sizing: border-box;
}
body {
font-family: "Mukta", sans-serif;
font-size: 1rem;
line-height: 1.5;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100vh;
background: #f3f8fa;
}
button {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
background: transparent;
padding: 0;
font-size: inherit;
font-family: inherit;
}
button.learn-more {
width: 12rem;
height: auto;
}
button.learn-more .circle {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: relative;
right: 25px;
display: block;
margin: 0;
width: 3rem;
height: 3rem;
background: #282936;
border-radius: 1.625rem;
}
button.learn-more .circle .icon {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #fff;
}
button.learn-more .circle .icon.arrow {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
left: 0.625rem;
width: 1.125rem;
height: 0.125rem;
background: none;
}
button.learn-more .circle .icon.arrow::before {
position: absolute;
content: "";
top: -0.25rem;
right: 0.0625rem;
width: 0.625rem;
height: 0.625rem;
border-top: 0.125rem solid #fff;
border-right: 0.125rem solid #fff;
transform: rotate(45deg);
}
button.learn-more .button-text {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0.75rem 0;
margin: 0 0 0 1.85rem;
color: #282936;
font-weight: 700;
line-height: 1.6;
text-align: center;
text-transform: uppercase;
}
button:hover .circle {
width: 125%;
}
button:hover .circle .icon.arrow {
background: #fff;
transform: translate(1rem, 0);
}
button:hover .button-text {
color: #fff;
}
#supports (display: grid) {
body {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 0.625rem;
grid-template-areas: ". main main ." ". main main .";
}
#yes {
grid-area: main;
align-self: center;
justify-self: center;
}
}
Related
im making my profile websites want make scroll transition like here https://olaolu.dev,how can I do that?There will be 5 pages, and transition between them should be like in link above, also it should relater to buttons as well, when I press button it should have this scroll effect too
my html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="/b/cs.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<section class="section-top active">
<div class="details">
<div class="top">
<h2>Faxraddin</h2>
<div class="lists">
<button><i class="bi bi-list-check"></i></button>
</div>
</div>
<div class="first-info">
<div class="first-sec">
<h1>Frontend</br> Developer.</h1>
<h3 class="profession-info">I like to craft solid and scalable frontend products with great user experiences.</h3>
</div>
<img class="my-img" src="/b/images/Screenshot 2022-11-04 at 19.35.20.png">
</div>
<div class="some-info">
<div class="a1">
<span>Highly skilled at progressive
enhancement, design systems &
UI Engineering.
</span>
<span>Over a decade of experience
building products for clients
across several countries.
</span>
</div>
<div class="btn-container">
<ul>
<button class="btn active"><i class="bi bi-app"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
</ul>
</div>
</div>
</div>
</section>
<section class="what-do" id="s2">
</section>
<script src="/b/js.js"></script>
</body>
</html>
HTML + CSS can be achieved, but the scrolling effect is slow
body {
margin: 0;
height: 100vh;
overflow-x: hidden;
}
.wrap {
scroll-behavior: smooth;
overflow-x: hidden;
height: 100%;
scroll-snap-type: y mandatory;
}
.section {
color: #fff;
font-size: 30px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: start;
}
.section1 {
background-color: #111;
}
.section2 {
background-color: #333;
}
.section3 {
background-color: #555;
}
.section4 {
background-color: #777;
}
.section5 {
background-color: #999;
}
.point {
position: absolute;
bottom: 30px;
right: 30px;
display: flex;
flex-direction: column;
}
.point a {
display: block;
width: 8px;
height: 8px;
margin: 8px 0;
background-color: #fff;
}
<div class="wrap">
<section id="s1" class="section section1">page 1</section>
<section id="s2" class="section section2">page 2</section>
<section id="s3" class="section section3">page 3</section>
<section id="s4" class="section section4">page 4</section>
<section id="s5" class="section section5">page 5</section>
<div class="point">
</div>
</div>
I am developing a project for school and I am pretty new to Bootstrap and I keep having some problems with scaling the website for different resolutions. When I change it to mobile the images go on top of the text. If anybody could help me I would appreciate it.
I have tried everything and still cant find a solution.
<body>
<div class="container">
<nav class="navbar-fixed-top sticky-top navbar" style="width: 100%; background-color: white; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);">
<div class="navbar-header">
<a class="navbar-brand"><img src="transferir.png" alt="" style="height: 65; width: 60px"></a>
</div>
<div>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Features</li>
<li>Contacta-nos</li>
</ul>
</div>
</nav>
<div class="site-index">
<div id="home" class="block home-block">
<div class="container">
<div class="col-sm-6 left-block">
<div class="text-centered">
<h1>Texter</h1>
<p class="info-text">Send text messages, voice messages, video messages or video call with all your friends and family easily, quickly and securely.</p>
<p class="Medium-text">Download Em Breve</p>
<img src="playstore.png" alt="Playstore" class="d-img">
<img src="appstore.png" alt="Apple App Store" class="d-img">
</div>
</div>
<div class="col-sm-5 right-block">
<img src="phones.png" style="height: 350px; float: right; vertical-align: middle; width: auto !important; position: relative">
</div>
</div>
<hr class="sombra">
</div>
</div>
Css
html{
scroll-behavior: smooth;
}
body{
padding-top: 1%;
font-family: 'Lato', sans-serif;
}
.block{
padding: 35px;
}
.home-block{
min-height: calc(100vh - 90px);
}
#home .container{
height: 500px;
}
.left-block{
text-align: center;
top: 30%;
}
.right-block{
bottom: 35%;
margin-left: 25%;
}
.container{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Desktop
When i squish the page
First of all, you probably forgot to include <div class="row"></div> wrapper inside your <div class="container">...</div> element, just as it says here.
Secondly, I strongly recommend you to not play too much with CSS properties such as position: relative/absolute, top: ...; left: ...; right: ...; bottom: ..., because most of them break the CSS native document flow and they should be used only when other tools do not help much.
I suggest you reading this series of articles if you have enough time: CSS layout
I turned off most of the properties of that kind and it already looks much nicer:
This answer would be just be a massive advice if I wouldn't provide some code help, so here it is.
Start by disabling these properties in DevTools:
.home-block{
/* min-height: calc(100vh - 90px); */
}
#home .container{
/* height: 500px; */
}
.left-block{
/* text-align: center; */
/* top: 30%; */
}
.right-block{
/* bottom: 35%; */
/* margin-left: 25%; */
}
Fixing Bootstrap markup:
<div id="home" class="block home-block">
<div class="container">
<!-- Added this wrapper, changed .col-* classes to responsive -->
<div class="row">
<!-- Removed .left-block class -->
<div class="col-sm-12 col-lg-6 left-block">
<div class="text-centered">
<h1>Texter</h1>
<p class="info-text">Send text messages, voice messages, video messages or video call with all your friends and family easily, quickly and securely.</p>
<p class="Medium-text">Download Em Breve</p>
<img src="playstore.png" alt="Playstore" style="height: 40px;">
<img src="appstore.png" alt="Apple App Store" style="height: 40px">
</div>
</div>
<!-- Removed .right-block class, added .text-centered class -->
<div class="col-sm-12 col-lg-6 text-centered">
<!-- Removed inline styles (bad practice), changed "height" to be an attribute -->
<img src="phones.png" height="350">
</div>
</div>
</div>
</div>
Then you would get this picture (no interval between image and the button on the top):
This one is solved by applying margin-top: ...px; to the image block, wrapped in #media query at .col-md-* resolutions and lower. For the exact values see Bootstrap grid options. For more info on applying #media queries see MDN docs
As for navigation bar, I first suggest you disabling padding-left on ul#menu element:
#menu {
padding-left: 0;
}
Although it fixes it on sm resolutions, the navigation menu still wraps under the logo on resolutions less than about 520px. I suggest you imagine what to do with this occasion in your mind or in some markup service like https://app.diagrams.net/ and then develop what you decided to.
You can use
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
See this and this
So I'm relatively new to coding and have been working on a project. At its current state I'm finding difficulty combining off-screen navigation with parallax scrolling. I have tried making a div inside the wrapper (ineffective), changing the location of where the parallax scrolling is in the HTML (makes one feature work, or the other), and changing the css positioning (generally just makes the page melt, with a few outliers)
The goal, ultimately, is to have the parallax scrolling run underneath the navigation square and the side menu move the background as well.
The code is below, with placeholder pictures and info some dashed out modifications of things I've tried and failed. Like I said, I'm quite new so if there is anything amiss I would deeply appreciate the help.
I'm guessing I'm overlooking something moronic, or am trying the wrong combination of solutions.
Thank you for any assistance.
HTML:
<head>
<meta charset="utf-8"/>
<title>What is Reality?</title>
<link rel="stylesheet" href="websitebasefinal.css"/>
<link rel="stylesheet" href="tennants.css"/>
<script language="javascript" src="websitefinal.js"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu">
<script src="jquery-3.3.1.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body>
<div id="side-menu" class="side-menu">
Home
hai
mark
!
<br>
<br>
Contact Us
</div>
<div id="search-menu" class="search-menu">
<p>What are you <br>looking for?<br>
<input type="text" placeholder="...?">
</div>
<div id="wrapper">
<div id="insidewrapper">
<div id="container-one">
<div id="container-menu" onclick="openmenuside()">
<i class="fas fa-align-left fa-lg" id="menubutton" style="color:#f1f1f1"></i>
<script>
$('#container-menu').click(function(){
$('#menubutton').toggleClass('fas fa-align-left fa-lg fas fa-times fa-lg')
});
</script>
</div>
<div id="container-search" onclick="opensearchside()">
<i class="fas fa-search fa-lg" id="searchbutton" style="color:#f1f1f1"></i>
<script>
$('#container-search').click(function(){
$('#searchbutton').toggleClass('fas fa-search fa-lg fas fa-times fa-lg')
});
</script>
</div>
</div>
<div id="tenantcontainer">
<div class="bgimage1">
<div class="caption">
<span class="border">Scroll down</span>
<div class="content"><p>Here's where we talk about what's what daddy-o</div>
</div>
</div>
<div class="bgimage2">
<div class="caption">
<span class="border">Scroll down</span>
<div class="content"><p>Here's where we talk about what's what daddy-o</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
.bgimage1, .bgimage2, .bgimage3{
position:relative;
/*background-attachment:fixed;*/
background-position:center;
/*background-repeat:no-repeat;*/
background-size:cover;
z-index:0;
top:0;
left:0;
}
.bgimage1{
background-image:url("evelynnteaser-1920X1080.jpg");
height:100%;
}
.bgimage2{
background-image:url("2017-eclipse-photos-01.jpg");
height:100%;
}
.bgimage3{
background-image:url("evelynnteaser-1920X1080.jpg");
height:100%;
}
.caption {
position: absolute;
left: 0;
top: 25%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
.content, .content p{
position: absolute;
margin-top:70px;
color:white;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color:#f1f1f1;
}
JS:
function openmenuside(){
var side=document.getElementById("side-menu");
var container=document.getElementById("wrapper");
if (side.style.width=='320px'){
side.style.width="0px";
container.style.marginLeft="-620px";
}else{
side.style.width="320px";
container.style.marginLeft="-340px";
}
}
function opensearchside(){
var side=document.getElementById("search-menu");
var container=document.getElementById("wrapper");
if (side.style.width=='320px'){
side.style.width="0px";
container.style.marginLeft="-620px";
}else{
side.style.width="320px";
container.style.marginLeft="-900px";
}
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
Here's the mobile website of it, and please try it on mobile phones as it looks all right on desktop and tablets. For CSS, I tried putting 100% width for body first, but doesn't seem to help. Then I made the HTML's width 100%, still doesn't work.
I'm stumped and getting more confused. Please help!
And here's my HTML:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="icon" href="../../favicon.ico">
<title>Việt Nam Care</title>
<!-- Google Fonts Arvo and Font Awesome -->
<link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">
<!-- Normalize -->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".navbar-collapse" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"
><img src="img/vietnamcare3.png" alt="Viet Nam Care"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">WHO WE ARE</li>
<li>GET INVOLVED</li>
<li>CONTACT US</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1>Doing anything necessary to Preserve<br>Việt Nam's Future</h1>
<!-- <p>This initiative is conducted to help create a more sustainable and enriching lifestyle among Vietnamese families and--most importantly--the children. </p> -->
<p><a class="btn btn-danger btn-lg" href="#" role="button">Learn More »</a></p>
</div>
</div>
<div id="who">
<div class="container homepage">
<h2>Who we Are</h2>
<hr>
<p>We are Việt Nam Care. We exist to help create a more sustainable life among Vietnamese children. </p>
</div>
</div>
<div id="get-involved">
<div class="container homepage">
<h2>Get Involved</h2>
<hr>
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<span class="fa-stack fa-4x"> <!-- Money Icon -->
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-money fa-stack-1x fa-inverse"></i>
</span>
<h3>Donations</h3>
<p>Want to contribute and make a difference? Donations--money, food, clothes, and school supplies--to disadvantaged children and families are most appreciated! </p>
<p><a class="btn btn-default" href="#" role="button">Donate now »</a></p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x"> <!-- Building Icon -->
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-building fa-stack-1x fa-inverse"></i>
</span>
<h3>Projects</h3>
<p>Volunteer in meaningful projects that ranges from helping build small infrastructures for local communities to teaching English to disadvantaged childlren. </p>
<p><a class="btn btn-default" href="#" role="button">Volunteer now »</a></p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x"> <!-- users Icon -->
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-users fa-stack-1x fa-inverse"></i>
</span>
<h3>Sponsors</h3>
<p>Give a child the opportunity to have a better life through sponsorship. Readily available resources made for the child will help shape their futures!</p>
<p><a class="btn btn-default" href="#" role="button">Help now »</a></p>
</div>
</div>
</div> <!-- /container -->
</div>
<footer>
<div class="container">
<p><img src="img/vietnamcare5.png" alt="vietnamcare_logo"></p>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
And here's my CSS:
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
width: auto;
height: 80%;
}
/* Top Left Viet Nam Care Word */
/* a.navbar-brand img {
margin: 0px;
padding: 0px;
position: relative;
top: -30px;
left: -10px;
} */
/* Vietnamese Children Jumbotron Image */
nav div div a img {
position: relative;
display: inline-block;
top: -10px;
width: 90%;
}
ul.nav, .jumbotron h1 {
font-family: 'Arvo', courier, serif;
}
ul.nav {
font-size: 13px;
}
footer {
background-color: #f74c3c;
padding-top: 150px;
padding-bottom: 30px;
}
#get-involved {
background-color: #f5f5f5;
}
.jumbotron {
text-align: center;
margin-bottom: 0;
background-image:url("../img/vietkids.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: fixed;
color: white;
height: 98%;
}
.jumbotron h1 {
margin-top: 0;
margin-bottom: 50px;
}
.jumbotron p {
margin-bottom: 30px;
font-weight: 100;
padding: 0px 50px;
}
.jumbotron img {
margin: 0;
padding: 0;
height: 200px;
width: 120px;
}
/* .jumbo_paragraph {
color: red;
border: 1px solid green;
width: 90%;
margin: 0 auto;
} */
.btn-lg {
font-size: 2.25empx;
}
nav img {
position: relative;
bottom: 10px;
left: 10px;
}
.homepage {
text-align: center;
padding: 30px 0px;
}
.homepage h2, .homepage h3 {
color: #e74c3c;
font-family: 'Arvo', courier, serif;
text-transform: uppercase;
}
.homepage h2 {
font-size: 30px;
}
.homepage h3 {
font-size: 26px;
}
.homepage p {
font-size: 19px;
}
.homepage a {
color: #e74c3c;
}
.homepage a:hover {
color: #e74c3c;
text-decoration: none;
opacity: 0.8;
}
/* All Horizontal Lines in class Homepage */
.homepage hr {
border-top: 1px solid #e74c3c;
width: 160px;
margin-top: 15px;
}
/* Responsive Styling */
#media (max-width: 1199px) {
.jumbotron h1 {
font-size: 56px;
margin-bottom: 30px;
}
}
#media (max-width: 991px) {
.jumbotron h1 {
font-size: 44px;
}
.jumbotron p {
padding: 0 10px;
}
#get-involved .col-md-4 {
padding-top: 20px;
padding-bottom: 20px;
}
}
#media (max-width: 767px) {
.jumbotron h1 {
font-size: 24px;
}
.jumbotron p {
font-size: 16px;
padding: 0;
}
.btn-lg {
font-size: 18px;
}
.homepage p {
font-size: 18px;
}
footer img {
width: 80%;
}
}
Update
I believe I found the problem. Follow theses steps:
Comment out or remove the following tags located in the <head>:
<!-- Google Fonts Arvo and Font Awesome -->
<link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">
<!-- Normalize -->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
Add this to the <head>:
<!-- Normalize, Bootstrap, and Font Awesome core CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/g/normalize#3.0.3,bootstrap#3.3.6(css/bootstrap.min.css),fontawesome#4.5.0">
<!-- Google Fonts Arvo -->
<link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
Remove width: auto; from this ruleset:
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
/*width: auto;<==[Remove this]*/
height: 80%;
}
Clear browser cache and refresh.
When using normalize.css or reset.css place the <link> tag before any other <link> tag. The first new <link> combines Normalize, Bootstrap, and Font Awesome CSS files as one file served by jsDelivr CDN. This will cut down your HTTP requests by 2 which will decrease your overall latency (page will load faster.)
width: auto is a property that has a higher priority than min-width: 100vw; because it's farther down the CSS file. Although width and min-width are different properties, they both affect the the vertical length of the body.
Try vw
1vw = 1/100 of the current viewport width, i.e. 1% of the width
html, body {
min-width: 100vw;
}
BTW, you'll probably want to pick px or em not both of them:
.btn-lg {
font-size: 2.25empx;
} ^---^======[ px or em, not both]
Add the following as the last line of your CSS:
div { max-width: 100%; }
Likely you have a div somewhere that is defined as 100% width, plus additional padding, so some element on the page has a width greater than 100% causing the gap on the right side. This CSS will override that.
I removed the divs on your page one at a time - if you remove all but the footer div, the gap disappears. So the issue can be found somewhere in one of the elements before the footer div on the page.
Edit: If you're not already, it can be helpful to use a simulator (like Xcode's simulator) with your browser inspector to help debug this issue on mobile.
I ran this in the browser inspector to see that this CSS fix would in fact fix the problem:
$("div").css("max-width","100%")
I am writing a civil war journal for my 8th grade Social Studies class and I am presenting it as an HTML file that had the title of each journal and the date. When I click in each entry, it is supposed to open the actual journal entry and close any other open ones. I am having a problem with making the journal entries open up once you click on the journal. Here's my code. (P.S. All of the journal entries aren't finished yet.)
EDIT: Code is working in JSFiddle, but not in the browser.
HTML
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link rel='stylesheet' href='journal.css'/>
<title>Pericby Zarby Journal</title>
</head>
<body>
<div id='container'>
<div class='entry current'>
<div class='item row'>
<div class="col-xs-3">
<p class='date'>July 22, 1861</p>
</div>
<div class='col-xs-6'>
<p class='title'>The Battle of Bull Run</p>
</div>
</div>
<div class='description row'>
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<p>As I step through the door of the steel mill, I overhear the conversation that my boss and one of my co-workers are having.
I hear something about a battle and the start of a civil war. I walk by and suddenly my friend Joe runs up to me and says, 'Did ya hear?'
I give him a funny look that shows how confused I am. He proceeds to tell me about the Battle of Bull Run.
He says that a small skirmish between the Union and Confederate armies happened in Virginia. He also says that the Union lost.
That last part really surprises me. The North is supposed to have a lot more men than the South and should have destroyed the South.
Hopefully the rest of the war does not go like this.</p>
</div>
<div class='col-xs-3'> </div>
</div>
</div>
<div class='entry'>
<div class='item row'>
<div class='col-xs-3'>
<p class='date'>December 15, 1862</p>
</div>
<div class='col-xs-6'>
<p class='title'>Fredericksburg</p>
</div>
</div>
<div class='description row'>
<div class='col-xs-3'> </div>
<div class='col-xs-6'>
<p>While I am drinking and talking with some of the other blacks in the 86th regiment, I spot a small man running up to Colonel Smith
and telling him that General Burnside needs reinforcements. Smith shouts for everyone to get into formation and begin marching towards
Fredericksburg. After about an hour of marching I am finally able to see a battlefield, but it does not look pretty.
A group of Union soldiers is charging towards a Confederate barricade. One by one, each soldier is getting killed.
No progress is made by the soldiers. My regiment begins to line up in formation for another charge. As Burnside begins to realize that the
charge before is proving futile he barks a command to retreat. My regiment marches in an orderly fashion back to the nearest Union camp.</p>
</div>
<div class='col-xs-3'> </div>
</div>
</div>
<div class='entry'>
<div class='item row'>
<div class='col-xs-3'>
<p class='date'>January 2, 1863</p>
</div>
<div class='col-xs-6'>
<p class='title'>Emancipation Proclamation</p>
</div>
</div>
<div class='description row'>
<div class='col-xs-3'> </div>
<div class='col-xs-6'>
<p>It’s official. Lincoln has released the Emancipation Proclamation. Slaves from states in rebellion are now free.
Southern plantations won’t let that happen though. No slaves are going to be freed, yet. The best thing about the Emancipation Proclamation
is that now slaves have something to fight for. They will begin to help win this war, in big and small ways.
Also, France and Great Britain can’t help the South anymore because they are slave-free countries.
Lincoln may have just given the Union the boost they need to win this civil war. I know it has given me hope.</p>
</div>
<div class='col-xs-3'> </div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="journal.js"></script>
</body>
</html>
CSS
body {
position: fixed;
background-image: url("http://housedivided.dickinson.edu/grandreview/wp-content/uploads/2010/02/HD_4USCinfantryDetail.preview.jpg");
background-size: cover;
}
#container {
height: 700px;
width: 600px;
border-right: 3px black solid;
border-left: 3px black solid;
border-bottom: 3px black solid;
position: fixed;
margin: 10px auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.row {
margin: 0;
}
.current .item{
background-color: rgba(112,112,112,0.7);
}
.entry {
background-color: rgba(216, 209, 209, 0.7);
border-top: 3px solid black;
}
.item {
cursor: pointer;
padding-top: 7px;
padding-bottom: 18px;
}
.description {
display: none;
padding-top: 10px;
padding-bottom: 10px;
}
.item .date {
margin-left: 20px;
font-weight: bold;
font-style: italic;
}
.item .title {
font-weight: bold;
font-size: 20px;
text-align: center;
}
Javascript
var main = function() {
$('.entry').click(function() {
$('.entry').removeClass('current');
$('.description').hide();
$(this).addClass('current');
$(this).children('.description').show();
});
}
$(document).ready(main);
If you're working locally, you may need to change this line:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
to:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>