I have a code for two modals that will eventually be for three buttons. Please note, I am a novice. I can get the code to work for the first button but after the second button is added, neither modals work. I need three different modals with different content. See code below. Please help.
Thank you in advance for your assistance.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.STRATEGY-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close-STRATEGY {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close-STRATEGY:hover,
.close-STRATEGY:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/* Modal Content */
.ANALYZE-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close-ANALYZE {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close-ANALYZE:hover,
.close-ANALYZE:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<!-- Trigger/Open The Modal -->
<button id="STRATEGYBtn">STRATEGIC PLANNING</button>
<!-- The Modal -->
<div id="STRATEGYModal" class="modal">
<!-- Modal content -->
<div class="STRATEGY-content">
<span class="close-STRATEGY">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<!-- Trigger/Open The Modal -->
<button id="ANALYZEBtn">ANALYZE</button>
<!-- The Modal -->
<div id="ANAYLZEModal" class="modal">
<!-- Modal content -->
<div class="ANAYLZE-content">
<span class="close-ANALYZE">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('STRATEGYModal');
var modal = document.getElementById('ANALYZEModal');
// Get the button that opens the modal
var btn = document.getElementById("STRATEGYBtn");
var btn = document.getElementById("ANALYZEBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-STRATEGY")[0];
var span = document.getElementsByClassName("close-ANALYZE")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
Please follow as I am explaining
CSS code for MODAL
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 50%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.background_image{
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
Codes For different Buttons
<span>Make Home Page</span>
<span>Setting</span>
<span id="share">Share</span>
Content for Different Modal you can creat as many you want just change the id
<div id="popup1" class="overlay">
<div class="popup">
<a class="close" href="#">×</a>
<div class="content">
<div> your display</div>
</div>
</div>
</div>
<!--=============================END=POPUP=ONE==============================================-->
<div id="popup2" class="overlay">
<div class="popup">
<a class="close" href="#">×</a>
<div class="content">
your display
</div>
</div>
</div><!--==================================================END=POPUP=TWO===========================================================-->
<div id="setting" class="overlay">
<div class="popup">
<a class="close" href="#">×</a>
<div class="content">
<div>
your Display
</div>
</div>
</div>
</div>
Related
I do not want to use anything except css and html. What can be changed to fix the text from coming outside of the card? My text keeps overflowing outside of my card. I want it all to fit in without compromising the card size as well. I have tried resizing. I am also new to coding. I would accept all and any feedback. If you have links or videos please share those also.
* {
margin:0;
padding: 0;
}
body {
color: #fff;
-webkit-font-smoothing: antialiased;
font-size: 25px;
background-color: #b4b4b4;
}
/* 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;
}
header p {
color: #b4b4b4;
font-family: cursive;
-webkit-font-smoothing: antialiased;
font-size: 50px;
}
.highlight {
color: blue;
-webkit-font-smoothing: antialiased;
}
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: 25px;
-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 */
/* navigation Start */
nav {
background: blue;
border-bottom: solid 2px;
border-bottom-color: white;
}
nav li {
display: inline-block;
margin-left: 30px;
}
nav a {
text-decoration: none;
color: #fff;
}
/* Navigation End */
/* Section About Start */
section {
box-align: center;
}
section h2 {
text-align: center;
margin-top: 100px;
/* border-bottom: solid 3px; */
color: black;
position: relative;
left: 50%;
transform: translateX(-50%)
}
section h2::after {
content:"";
height: 3px;
width: 70px;
position: absolute;
background: #000000;
margin: auto;
bottom: -5px;
left: 0;
right: 0;
}
section p {
padding: 20px;
text-align: center;
position: relative;
margin: auto;
}
/* Section About End */
/* Section Portfolio Start */
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner{
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backgrace-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-back {
background-color: transparent;
color: white;
transform: rotateY(180deg);
}
/* #media screen and (max-width: 600px){ */
/* .column {
width: 100%;
display: block;
margin-bottom: 20px;
}
} */
<!DOCTYPE html>
<html lang="en_US">
<head>
<meta charset="UTF-8" />
<title>Portfolio</title>
<link rel="stylesheet" href="./assets/css/style.css" >
</head>
<body>
<!-- Header Start -->
<div id="vanta-canvas">
<header>
<h1 class="inner_header" class="flex" id="Home">
<p>
Hello, I'm
<span class="highlight">Brian Mojica.</span>
<br>
I'm a full-stack web developer.
<button class="flex" style="vertical-align:middle"><span>
View My Work
</span></button>
</p>
</h1>
</header>
</div>
</header>
<!--Header End-->
<!-- Navigation Start -->
<nav>
<ul>
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
PORTFOLIO
</li>
<li>
BLOG
</li>
<li>
CONTACT
</li>
<li>
RESUME
</li>
</ul>
</nav>
<!--Navigation End-->
<!--Section About-->
<section>
<h2 id="About">ABOUT</h2>
<p>
I'm a full stack developer seeking employment.
I have a passion developing webpages that are responsive, dynamic, and accessbile.
Animations and UI effects are skills I hope to sharpen. I will continually expand my knowledge in different platforms such as Python, JavaScript, and React.
</p>
</section>
<!--Section Portfolio-->
<section>
<h2 id="Portfolio">PORTFOLIO</h2>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="assets/images/run-buddy-card.png" alt="Webpage" style="width:100%" height="100%">
</div>
<div class="flip-card-back">
<h1>Run Buddy</h1>
<p class="highlight"> HTML / CSS</p>
<p>A webpage for Run Buddy. They are a company that matches runners with personal trainers. </p>
<button class="flex" style="vertical-align:middle"><span> View</span></button>
</div>
</div>
</div>
</section>
<!--Section Blog-->
<section>
<h2 id="Blog">BLOG</h2>
<p>Under Construction</p>
</section>
<!--Section Contact-->
<section>
<h2 id="Contact">CONTACT</h2>
</section>
<!--Section Resume-->
<section>
<a id="resume" href="https://drive.google.com/file/d/1uVWXW7AULRBQBeXEblFfHNawPX-pHrJC/view?usp=sharing"></a>
</section>
<!--script for header background Start-->
<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>
<!--script for header background End-->
</body>
</html>
You can use overflow: hidden or overflow: scroll properties in the .flip-card-back class to either hide the content that isn't fitting or make it scrollable. You should also keep in mind the size of the content, it's too much for the card's dimensions. Styling properly the text inside the card would be the best approach.
I changed your code. Please check. the important point is to use font-size: 6vmin in here for #vanta-canvas. I used that instead of h1. It causes a font-size based on screen size.
Note: https://css-tricks.com/viewport-sized-typography/
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
color: #fff;
-webkit-font-smoothing: antialiased;
font-size: 25px;
background-color: #b4b4b4;
}
/* Header Start */
#vanta-canvas {
width: 100%;
height: 50vh;
display: flex;
align-items: center;
border: solid;
font-weight: bold;
font-size: 6vmin; /* here */
}
.inner_header {
width: 100%;
margin: 0 auto;
text-align: center;
}
.flex {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: nowrap;
align-content: normal;
}
.inner_header p {
color: #b4b4b4;
font-family: cursive;
-webkit-font-smoothing: antialiased;
}
.highlight {
color: blue;
-webkit-font-smoothing: antialiased;
}
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: 25px;
-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 */
/* navigation Start */
nav {
background: blue;
border-bottom: solid 2px;
border-bottom-color: white;
}
nav li {
display: inline-block;
margin-left: 30px;
}
nav a {
text-decoration: none;
color: #fff;
}
/* Navigation End */
/* Section About Start */
section {
box-align: center;
}
section h2 {
text-align: center;
margin-top: 100px;
/* border-bottom: solid 3px; */
color: black;
position: relative;
left: 50%;
transform: translateX(-50%)
}
section h2::after {
content: "";
height: 3px;
width: 70px;
position: absolute;
background: #000000;
margin: auto;
bottom: -5px;
left: 0;
right: 0;
}
section p {
padding: 20px;
text-align: center;
position: relative;
margin: auto;
}
/* Section About End */
/* Section Portfolio Start */
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backgrace-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-back {
background-color: transparent;
color: white;
transform: rotateY(180deg);
}
/* #media screen and (max-width: 600px){ */
/* .column {
width: 100%;
display: block;
margin-bottom: 20px;
}
} */
<!-- Header Start -->
<div id="vanta-canvas">
<div class="inner_header" class="flex" id="Home">
<p>
Hello, I'm
<span class="highlight">Brian Mojica.</span>
<br> I'm a full-stack web developer.
<button class="flex" style="vertical-align:middle"><span>
View My Work
</span></button>
</p>
</div>
</div>
</header>
<!--Header End-->
<!-- Navigation Start -->
<nav>
<ul>
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
PORTFOLIO
</li>
<li>
BLOG
</li>
<li>
CONTACT
</li>
<li>
RESUME
</li>
</ul>
</nav>
<!--Navigation End-->
<!--Section About-->
<section>
<h2 id="About">ABOUT</h2>
<p>
I'm a full stack developer seeking employment. I have a passion developing webpages that are responsive, dynamic, and accessbile. Animations and UI effects are skills I hope to sharpen. I will continually expand my knowledge in different platforms such
as Python, JavaScript, and React.
</p>
</section>
<!--Section Portfolio-->
<section>
<h2 id="Portfolio">PORTFOLIO</h2>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="assets/images/run-buddy-card.png" alt="Webpage" style="width:100%" height="100%">
</div>
<div class="flip-card-back">
<h1>Run Buddy</h1>
<p class="highlight"> HTML / CSS</p>
<p>A webpage for Run Buddy. They are a company that matches runners with personal trainers. </p>
<button class="flex" style="vertical-align:middle"><span> View</span></button>
</div>
</div>
</div>
</section>
<!--Section Blog-->
<section>
<h2 id="Blog">BLOG</h2>
<p>Under Construction</p>
</section>
<!--Section Contact-->
<section>
<h2 id="Contact">CONTACT</h2>
</section>
<!--Section Resume-->
<section>
<a id="resume" href="https://drive.google.com/file/d/1uVWXW7AULRBQBeXEblFfHNawPX-pHrJC/view?usp=sharing"></a>
</section>
<!--script for header background Start-->
<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>
<!--script for header background End-->
On larger screen size:
On smaller screen size:
I am making a website and I have chosen to use smooth scroll.
The smooth scrolling effect works, but if (for example) i chose to scroll down to the 'timeline' section, and then scroll back to 'home', it just stops scrolling midway through the home section. Why is this? Below you can see my webiste.
For example I have set this div as section1 (home):
<div id='section1' class="home-info">
Therefore, i thought that smoothscroll would take me to the top of that div. Turns out it only scrolls through half of it. Why is that???
*{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
html {
scroll-behavior: smooth;
}
a {
color: #AEC6CF;
underline: black;
}
.header{
height: 100px;
background: #f1f1f1;
padding: 0 20px;
color: #000000;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
}
.logo{
line-height: 100px;
float: left;
position: fixed;
top: 0;
z-index: 1030;
}
.menu{
float: right;
line-height: 100px;
position: fixed;
right: 0;
top: 0;
z-index: 1030;
font-size: 20px;
}
.menu a{
color: #000000;
text-decoration: none;
padding: 0 10px;
transition: 0.4s;
}
.show-menu-btn,.hide-menu-btn{
transition: 0.4s;
font-size: 30px;
cursor: pointer;
display: none;
}
.show-menu-btn{
float: right;
}
.show-menu-btn i{
line-height: 100px;
}
.menu a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover {
color: #AEC6CF;
}
a:link, i {
color: black;
}
i:hover {
color: #AEC6CF;
transition: 0.4s;
cursor: pointer;
}
#chk{
position: absolute;
visibility: hidden;
z-index: -1111;
}
.footer {
left: 0;
bottom: 0;
width: 100%;
background-color: #f1f1f1;
color: black;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
}
#media screen and (max-width:800px) {
.show-menu-btn,.hide-menu-btn{
display: block;
}
.menu{
position: fixed;
width: 100%;
height: 100vh;
background: #f1f1f1;
right: -100%;
top: 0;
text-align: center;
padding: 80px 0;
line-height: normal;
transition: 0.7s;
}
.menu a{
display: block;
padding: 20px;
}
.hide-menu-btn{
position: absolute;
top: 40px;
right: 40px;
}
#chk:checked ~ .menu{
right: 0;
}
.footer {
left: 0;
bottom: 0;
width: 100%;
background-color: #f1f1f1;
color: black;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 10px;
padding-right: 10px;
}
.header {
height: 103.5px;
}
.header-info h2 {
font-size: 20px;
margin-top: 350px;
}
.header-info h1 {
font-size: 30px;
}
}
* {
box-sizing: border-box;
}
body {
background-color: #fff;
font-family: Helvetica, sans-serif;
}
/* The actual timeline (the vertical ruler) */
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
/* The actual timeline (the vertical ruler) */
.timeline::after {
content: '';
position: absolute;
width: 4px;
background-color: black;
top: 0;
bottom: 0;
left: 50%;
margin-left: -1.2px;
}
/* Container around content */
.container {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
.header-container {
width: 100%;
position: relative;
background-color: inherit;
padding: 10px 40px;
}
/* The circles on the timeline */
.container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: white;
border: 4px solid #AEC6CF;
top: 15px;
border-radius: 50%;
z-index: 1;
}
/* Place the container to the left */
.left {
left: 0;
}
/* Place the container to the right */
.right {
left: 50%;
}
/* Add arrows to the left container (pointing right) */
.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
/* Add arrows to the right container (pointing left) */
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Fix the circle for containers on the right side */
.right::after {
left: -16px;
}
/* The actual content */
.content {
padding: 20px 30px;
background-color: #f1f1f1;
position: relative;
border-radius: 6px;
transition: 0.4s;
}
/* Media queries - Responsive timeline on screens less than 600px wide */
#media screen and (max-width: 600px) {
/* Place the timelime to the left */
.timeline::after {
left: 31px;
}
/* Full-width containers */
.container {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
/* Full-width containers */
.header-container {
width: 100%;
padding-left: 25px;
padding-right: 25px;
}
/* Make sure that all arrows are pointing leftwards */
.container::before {
left: 60px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Make sure all circles are at the same spot */
.left::after, .right::after {
left: 15px;
}
/* Make all right containers behave like the left ones */
.right {
left: 0%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='style.css'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
<title>lunAr-creator</title>
<div class="header" id='pronav'>
<div class='logo' id='logo'>
<h1>lunAr-creator</h1>
</div>
<input type="checkbox" id="chk">
<label for="chk" class="show-menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul class="menu" id='navbar'>
Home
About
Timeline
Projects
Useful Links
<label for="chk" class="hide-menu-btn">
<i class="fas fa-times"></i>
</label>
</ul>
</div>
<div style="margin-top:120px">
<div id='section1' class="home-info">
<h2 style='text-align:center;margin-top:350px;font-size:28px;'>Hi there. I'm lunAr-creator!</h2>
<h1 style='text-align:center;padding-top:20px;font-size:40px;love {color:#AEC6CF}'>& I love programming</h1>
<h3 style='text-align:center;padding-top:30px;padding-bottom:480px;'>Projects<i class="fas fa-chevron-down" style='margin-left:20px;'></i></h3>
</div>
<div class='header-container'>
<div id="section3" class="content">
<h2>About<i style='margin-left:20px;color:#AEC6CF;cursor:default;' class="fas fa-address-card"></i></h2>
<p>This is where i will talk about who I am and what i do :D</p>
</div>
</div>
<div class='header-container'>
<div class="content">
<h2>Timeline<i style='margin-left:20px;color:#AEC6CF;cursor:default;padding-bottom:0px;' class="fas fa-child"></i></h2>
<p>The stages I have been through so far with programming.</p>
</div>
</div>
<br></br>
<div class="timeline">
<div class="container right">
<div class="content">
<h2>2016 - 17</h2>
<p>I joined a Scratch coding camp where I learnt some of the foundations of programming.</p>
<br></br>
<p>My Dad built on the knowledge I had already aquired from the course and used C# to teach us some new concepts.</p>
</div>
</div>
<div class="container left">
<div class="content">
<h2>2018-19</h2>
<p>My school introduced me to HTML and CSS where i made my first website - a Minecraft handbook. I started learning Python aswell after it being recommended to me.</p>
<p>Watched a couple of Youtube tutorials on Python, started applying them to small programs and building up my skills.</p>
<br></br>
<p>Made my first (text-based) game called '9-lives'. Used the book: 'Python in easy steps' to help me understand the logic behind it.</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>2020</h2>
<p>Had lots of spare time on my hands due to Covid. Made some projects such as pong, a simple email client using smtplib, tkinter for the UI and made my second website.</p>
<br></br>
<p>Developed and hosted (and is still hosting) a website for a youth group. I used HTML, CSS and a little Javascript to accomplish this.</p>
<a style='color: #AEC6CF' href="https://a-town-youth.netlify.app">Click here to visit the youth group website</a>
</div>
</div>
<div class="container left">
<div class="content">
<h2>2021</h2>
<p>Created a text-based adventure rpg game for beginners to contribute to (including me). In my opinion it improved my team-working/collaboration skills and helped me learn some new concepts looking at other people code.</p>
<br></br>
<p>Joined GitHub :D </p>
<a style='color: #AEC6CF' href="https://github.com/lunAr-creator">Click here to visit my GitHub</a>
<br></br>
<p>Made my first library (pw-gen) for generating strong randomised passwords.</p>
</div>
</div>
</div>
<br></br>
<div id='section4' class='header-container'>
<div class="content">
<h2>Projects<i style='margin-left:20px;color:#AEC6CF;cursor:default;' class="fas fa-code-branch"></i></h2>
<p>All of my projects are up on my GitHub profile so be sure to check them out</p>
</div>
</div>
<div id='section5' class='header-container'>
<div class="content">
<h2>Useful Links<i style='margin-left:20px;color:#AEC6CF;cursor:default;' class="fas fa-link"></i></h2>
<p>Links to websites and resources that I find helpful whilst I am programming</p>
</div>
</div>
<div id='section6' class='header-container'>
<div class="content">
<h2>Contact<i style='margin-left:20px;color:#AEC6CF;cursor:default;' class="fas fa-pen"></i></h2>
<p>Contact me here for information or collaboration requests</p>
</div>
</div>
<div class='footer'>
<i class="fab fa-github" style='font-size:30px;margin-right:20px;'></i>
<i class="fab fa-stack-overflow" style='font-size:30px'></i>
<br></br>
<p>Copyright © 2021 lunAr-creator - Website Design by me (who else? :D)</p>
</div>
</div>
</body>
</html>
I have placed some media queries into my code to state if the screen resolution is less than 768px; the .sideBar disappears like so, leaving the .main section.
#media (max-width: 768px) {
.sideBar {
display: none !important;
}
}
What I would like to achieve is when the screen resolution is like this, I would like a hamburger icon to appear that allows me to toggle open/close the .sideBar.
How would I go about this in code-wise?
If there are any previous tutorials like this, please attach.
Original Code attached:
/* Copyright (c) myEd (made by students, for students.) 2018. */
body { /* General Body Properties */
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
margin: 0;
overflow: hidden;
}
* { /* Key element to aligning <divs> (DO NOT REMOVE) */
box-sizing: border-box;
}
#wrapper {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0
}
.header { /* Header properties featuring myEd and school emblems */
padding: 30px;
text-align: center; /* Aligns links in the navBar */
background-image: url(/Default/Img/backgroundHeader-4K.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.myEd-reverse {
width: 240px;
height: 70px;
float: left;
margin-left: -60px;
margin-top: -40px;
}
.navBar { /* Sticky navBar, either relative or fixed, depending on the scroll position of the site */
overflow: hidden;
background-color: #333;
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 100000;
}
.navBar a { /* Style the navBar links */
float: left;
display: block;
color: #fff;
text-align: center;
padding: 6px 12px;
text-decoration: none;
}
.navBar a.right { /* Float Quick Links, Help and Log-out navBar directory items to the right of the navBar */
float: right;
}
.navBar a:hover { /* Change color on hover */
background-color: #ddd;
color: #000;
}
.navBar a.active { /* Active Link */
background-color: #666;
color: #fff;
}
.modalDialog { /* Modal Properties for all modals in myEd */
position: fixed;
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target { /* Modal Properties for all modals in myEd */
opacity:1;
pointer-events: auto;
}
.modalDialog > div { /* Modal Properties for all modals in myEd */
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #d7d7d7;
background: -moz-linear-gradient(#ddd, #666);
background: -webkit-linear-gradient(#ddd, #666);
background: -o-linear-gradient(#ddd, #666);
}
.close { /* Modal Properties for all modals in myEd */
background: #606061;
color: #FFFFFF;
line-height: 10px;
position: absolute;
right: -5px;
text-align: center;
top: -10px;
width: -5px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; } /* Modal Properties for all modals in myEd */
.textModalh2 { /* Text preferences of the modal box directed from the navBar */
margin-top: 18px;
margin-bottom: -15px;
}
.textModalh5 { /* Text preferences of the modal box directed from the navBar */
margin-bottom: -15px;
}
.CARTHmodal { /* Image preferences of CARTH in the modal box directed from the navBar */
border-radius: 50%;
height: 130px;
width: 120px;
float: left;
margin-right: 40px;
margin-top: 15px
}
.row { /* Alignment between sideBar and main */
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.sideBar { /* sideBar alignment properties */
-ms-flex: 20%;
flex: 20%;
background-color: #a7a7a7;
padding: 0px;
height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */
overflow-y: scroll; /* Allows myEd news to scroll */
overflow: hidden;
position: relative;
}
#newsmyEd {
position: absolute;
width: 100%;
height: calc(100vh - 120px);
top: 0;
right: 0;
}
.main { /* Main Column */
-ms-flex: 80%;
flex: 80%;
background-color: #a7a7a7;
padding: 0px;
height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */
overflow-y: scroll; /* Allows embedded iFrame to scroll */
position: relative;
overflow: hidden;
}
.frameMain { /* Frame Properties */
position: absolute;
top: 0;
left: 0;
border: 0;
height: calc(100vh - 120px);
}
.footer { /* Footer properties */
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #333;
}
.footer a { /* Footer navBar properties */
float: right;
display: block;
color: #fff;
text-align: center;
padding: 6px 12px;
text-decoration: none;
}
.footer a:hover { /* Change color on hover */
background-color: #ddd;
color: #000;
}
.footer a.active { /* Active Link */
background-color: #666;
color: #fff;
}
#media (max-width: 768px) {
.sideBar {
display: none !important;
}
}
<!DOCTYPE HTML>
<!-- Copyright (c) myEd (made by students, for students.) 2018. -->
<html lang="en">
<head>
<title>Welcome | myEd</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/Home/Welcome/Style/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<link rel="shortcut icon" href="/Default/Img/faviconmyEd-16x16.png">
</head>
<body>
<script> // Required scripts for certain activities on myEd, each entry will be noted for understanding
</script>
<div id="wrapper"> <!-- Wrapper fitting website to all screen resolutions -->
<div class="header"> <!-- Header featuring 4K Background, myEd and school emblems -->
<img src="/Default/Img/myEd-reverse.png" class="myEd-reverse" alt="myEd" title="myEd Software"> <!-- myEd Software -->
</div>
<div class="navBar"> <!-- Main sticky navBar with categories listed -->
<i class="fa fa-home"></i> <!-- Home -->
<i class="fa fa-book"></i> <!-- Learning -->
<i class="fa fa-user"></i> <!-- Student Management -->
<i class="fa fa-globe"></i> <!-- Portals -->
<i class="fas fa-sign-out-alt"></i> <!-- Log-out (right to left) -->
<i class="fa fa-question-circle"></i> <!-- Help (right to left) -->
<i class="fa fa-bookmark"></i> <!-- Quick Links (right to left) -->
<div id="modalQL" class="modalDialog">
<div>
X
<h3>Quick Links</h3>
<h6>SEQTA Learn</h6>
<h6>SEQTA Engage</h6>
<h6>Adventist Schools Australia</h6>
<br>
<h6><em>The links above are not available via the Portal Pages of myEd as they are unable to be embedded into the software.</em></h6>
</div>
</div>
<i class="fas fa-caret-down"></i> <!-- Profile dropDown (right to left) -->
<div id="modalPO" class="modalDialog">
<div>
X
<img class="CARTHmodal" src="/Default/Img/CARTH.jpg" title="Carpenter, Tom" alt="CARTH">
<h2 class="textModalh2">Tom Carpenter</h2>
<h5 class="textModalh5" title="tom.carpenter#kas.nsw.edu.au">tom.carpenter#kas.nsw.edu.au</h5>
<h5 class="textModalh5" title="Student ID: #714020 (CARTH)">#714020 (CARTH)</h5>
<h5 class="textModalh5" title="Year Group: Year 11 (11B)">Year 11 (11B)</h5>
<h5>Kempsey Adventist School</h5>
</div>
</div>
</div>
<div class="row"> <!-- Format for alignment of the sideBar and main panels -->
<div class="main"> <!-- Main learning or collaborative workspace -->
<iframe class="frameMain" width="100%" src="/Home/Welcome/iFrame/index.html"></iframe> <!-- Embedded frame -->
</div>
<div class="sideBar"> <!-- sideBar featuring Profile, myEd News and directory -->
<iframe id="newsmyEd" frameborder="0" src="/Default/News/index.html"></iframe> <!-- myEd News -->
</div>
</div>
<div class="footer"> <!-- Featuring Site Navigation and myEd News navBar links -->
<i class="far fa-newspaper"></i> <!-- myEd News -->
<i class="fa fa-location-arrow"></i> <!-- Site Navigation -->
</div>
</div>
</body>
</html>
Thanks, Tom
I guess this is what you are looking for, to make a clear view I took the google map iframe and wrapper it with a div. Then I am toggling the wrapper for icon clicks.
Here is the codepen
$(document).ready(function() {
$('.mobile-menu-icon i.open').click(function() {
$('.sidebar-wrapper').fadeIn();
$(this).hide();
$('.mobile-menu-icon i.close').fadeIn();
});
$('.mobile-menu-icon i.close').click(function() {
$('.sidebar-wrapper').fadeOut();
$(this).hide();
$('.mobile-menu-icon i.open').fadeIn();
});
});
.mobile-menu-icon i.close {
display: none;
}
#media (min-width:768px) {
.mobile-menu-icon {
display: none;
}
}
#media (max-width:767px) {
.mobile-menu-icon {
display: block;
}
.sidebar-wrapper {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="sideBar">
<!-- sideBar featuring Profile, myEd News and directory -->
<div class="mobile-menu-icon">
<i class="fa fa-bars open" aria-hidden="true"></i>
<i class="fa fa-times close" aria-hidden="true"></i>
</div>
<div class="sidebar-wrapper">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15775.879464660959!2d81.17930883590694!3d8.694411361230227!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3afbbfb5c9304551%3A0xc6d99d1084095189!2sNilaveli!5e0!3m2!1sen!2slk!4v1542627461123"
width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<!-- myEd News -->
</div>
</div>
I have followed a detailed instruction from https://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/ on creating a modal.
I have done everything to plan but when I go to click the modal in the navBar arrow link, it opens stating that #openModal cannot be found.
Attached is my HTML and CSS code:
body { /* General Body Properties */
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
margin: 0;
overflow: hidden;
}
* { /* Key element to aligning <divs> (DO NOT REMOVE) */
box-sizing: border-box;
}
#wrapper {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0
}
.header { /* Header properties featuring myEd and school emblems */
padding: 30px;
text-align: center; /* Aligns links in the navBar */
background-image: url(/Default/Img/backgroundHeader-4K.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.myEd-reverse {
width: 240px;
height: 70px;
float: left;
margin-left: -60px;
margin-top: -40px;
}
.navBar { /* Sticky navBar, either relative or fixed, depending on the scroll position of the site */
overflow: hidden;
background-color: #333;
position: sticky;
position: -webkit-sticky;
top: 0;
}
.navBar a { /* Style the navBar links */
float: left;
display: block;
color: #fff;
text-align: center;
padding: 6px 12px;
text-decoration: none;
}
.navBar a.right { /* Float Quick Links, Help and Log-out navBar directory items to the right of the navBar */
float: right;
}
.navBar a:hover { /* Change color on hover */
background-color: #ddd;
color: #000;
}
.navBar a.active { /* Active Link */
background-color: #666;
color: #fff;
}
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
.row { /* Alignment between sideBar and main */
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.sideBar { /* sideBar alignment properties */
-ms-flex: 20%;
flex: 20%;
background-color: #a7a7a7;
padding: 0px;
height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */
overflow-y: scroll; /* Allows myEd news to scroll */
overflow: hidden;
}
#newsmyEd {
width: 100%;
height: 11.4%;
min-height: 11.4%;
top: 0;
right: 0;
}
.main { /* Main Column */
-ms-flex: 80%;
flex: 80%;
background-color: #a7a7a7;
padding: 0px;
height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */
overflow-y: scroll; /* Allows embedded iFrame to scroll */
position: relative;
overflow: hidden;
}
.frameMain { /* Frame Properties */
position: absolute;
top: 0;
left: 0;
border: 0;
min-height: 11.4%;
}
.footer { /* Footer properties */
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #333;
}
.footer a { /* Footer navBar properties */
float: right;
display: block;
color: #fff;
text-align: center;
padding: 6px 12px;
text-decoration: none;
}
.footer a:hover { /* Change color on hover */
background-color: #ddd;
color: #000;
}
.footer a.active { /* Active Link */
background-color: #666;
color: #fff;
}
#media screen and (max-width: 700px) { /* Responsive Layout - If screen px is less than 700px, make sideBar and main stack on top of each other */
.row {
flex-direction: column;
}
}
#media screen and (max-width: 400px) { /* Responsive Layout - If screen px is less than 400px, make navBar links stack vertically on top of each other */
.navBar a {
float: none;
width: 100%;
}
}
<link rel="stylesheet" type="text/css" href="/Home/Welcome/Style/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<link rel="shortcut icon" href="/Default/Img/faviconmyEd-16x16.png">
<script>
// Required scripts for certain activities on myEd, each entry will be noted for understanding
</script>
<div id="wrapper">
<!-- Wrapper fitting website to all screen resolutions -->
<div class="header">
<!-- Header featuring 4K Background, myEd and school emblems -->
<img src="/Default/Img/myEd-reverse.png" class="myEd-reverse" alt="myEd" title="myEd Software"> <!-- myEd Software -->
</div>
<div class="navBar">
<!-- Main sticky navBar with categories listed -->
<i class="fa fa-home"></i> <!-- Home -->
<i class="fa fa-book"></i> <!-- Learning -->
<i class="fa fa-user"></i> <!-- Student Management -->
<i class="fa fa-globe"></i> <!-- Portals -->
<i class="fas fa-sign-out-alt"></i> <!-- Log-out (right to left) -->
<i class="fa fa-question-circle"></i> <!-- Help (right to left) -->
<i class="fa fa-bookmark"></i> <!-- Quick Links (right to left) -->
<i class="fas fa-caret-down"></i> <!-- Profile dropDown (right to left) -->
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
</div>
<div class="row">
<!-- Format for alignment of the sideBar and main panels -->
<div class="main">
<!-- Main learning or collaborative workspace -->
<iframe class="frameMain" width="100%" height="11.4%" scrolling="yes" src="/Home/Welcome/iFrame/index.html"></iframe> <!-- Embedded frame -->
</div>
<div class="sideBar">
<!-- sideBar featuring Profile, myEd News and directory -->
<iframe id="newsmyEd" frameborder="0" src="/Default/News/index.html"></iframe> <!-- myEd News -->
</div>
</div>
<div class="footer">
<!-- Featuring Site Navigation and myEd News navBar links -->
<i class="far fa-newspaper"></i> <!-- myEd News -->
<i class="fa fa-location-arrow"></i> <!-- Site Navigation -->
</div>
</div>
<i class="fas fa-caret-down"></i>
should be
<i class="fas fa-caret-down"></i>`
<a href="#openModal" class="right" title="Profile Overview">
<i class="fas fa-caret-down"></i>
</a>
You forgot to put '#'
I am doing a popup image with close button and dimmed background. When the popup is displayed and users click outside of it, it supposes to close the popup. It works fine on other browser, but not safari. I found on Z-index problems on ipad that I need to put -webkit-transform: translate3d(0,0,0) to the same DOM level but I am not really sure about the concept. Can someone help me, please?
Here is my code:
/**********************HTMl*********************/
<body id="price">
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<?php include('header.php')?>
<div id="content-border" >
<div id="content">
<h1><strong>Packages</strong></h1>
<P id="package-p"></P>
<div>
<div id="price-col">
<button class="img-circle" id="price-circle" id="myBtn1" onClick="openPopup(1)">
<div>
<h4></h4>
<span id="currency">$</span>
<span id="price-large"></span>
<p id="price-small"></p>
<p></p>
</div>
</button>
</div>
<div id="myModal1" class="popup">
<div class="popup-content">
<img src="images/The-Apprentice_low.jpg" id="popup-content1"><span class="closeBtn" onClick="closePopup()">×</span>
</div>
</div>
<div id="price-col">
<button class="img-circle" id="price-circle" id="myBtn2" onClick="openPopup(2)">
<div>
<h4></h4>
<span id="currency">$</span>
<span id="price-large"></span>
<p id="price-small"></p>
<p></p>
</div>
</button>
</div>
<div id="myModal2" class="popup">
<div class="popup-content">
<img src="images/The-Celebrity-Chef_low.jpg" id="popup-content2"><span class="closeBtn" onClick="closePopup()">×</span>
</div>
</div>
</div>
</div>
</div>
<?php include('footer.php')?>
</div>
</div>
</div>
<?php include('html-body-end.php')?>
</body>
/*************************CSS***********************/
#package-p{
background-color: #fff;
color: #000;
padding: 10 20;
text-shadow: none;
}
#price-col{
margin:0 auto;
width:50%;
float: left;
text-align: center;
}
#price-circle{
margin: 30 auto;
background: #ffffff;
padding: 35px;
text-align: center;
height: 250px;
width: 250px;
display: table;
color: #222222;
box-shadow: 0px 0px 10px 5px rgba(206, 44, 44, 0.5);
border: 0;
transition: all 0.3s;
-moz-transition: all 0.3s; /* Firefox 4 */
-webkit-transition: all 0.3s; /* Safari and Chrome */
-o-transition: all 0.3s; /* Opera */
}
#price-circle > div{
display: table-cell;
vertical-align: middle;
}
#currency{
font-size: 30px;
}
#price-circle:hover{
box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.5);
background-color: #ce2c2c;
color: #fff;
}
/*Popup*/
.popup {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
/* padding-top: 300px; Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
text-align: center;
}
.popup-content {
margin: auto;
color: #ffffff;
display: inline-block;
position: relative;
}
.popup::after, .popup::before{
display: block;
content: "";
height: 5%;
}
.popup-content img{
max-height: 90vh;
max-width: 90vw;
min-height: 170px;
min-width: 240px;
z-index: 10;
}
/* The Close Button */
.closeBtn{
color: rgba(255,255,255,5);
font-size: 36px;
font-weight: bold;
position: absolute;
margin-top: -2.1vh;
right: 0;
display: inline-block;
z-index: 10;
}
.closeBtn:hover, .closeBtn:focus{
color: #000;
cursor: pointer;
}
Thanks.