So I am creating a website for myself and am having a bit of an issue trying to hyperlink. I am aware that I need to wrap the entire text in an anchor element , however, despite doing this and having my contact page ready, I am unable to click on the hyperlink. Attached below is the main HTML code that I have been using and the CSS code as well in order to illustrate what I am doing.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Fire Sans', sans-serif;
text-decoration: none;
list-style: none;
color: #FFF;
}
.app{
display: flex;
min-height: 100vh;
}
.sidebar{
flex: 1 1 0;
max-width: 300px;
padding: 2rem 1rem;
background-color: #051427;
}
.sidebar h3{
color: #707793;
font-size: 0.75rem;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.sidebar .menu{
margin: 0 -1rem;
}
.sidebar .menu .menu-item{
display: block;
padding: 1rem;
color: #FFF;
text-decoration: none;
transition: 0.2s linear;
}
.sidebar .menu .menu-item:hover,
.sidebar .menu .menu-item.is-active{
color #6f6d72;
border-right: 5px solid #6f6d72;
}
.content{
flex: 1 1 0;
padding: 2rem;
}
.content h1{
color: #D8BFD8;
font-size: 2.5rem;
font-family: papyrus;
margin-bottom: 1rem;
}
.content p{
color: #C8C8C8;
font-family: papyrus;
}
.menu-toggle{
display: none;
position: fixed;
top: 2rem;
right: 2rem;
width: 60px;
height: 60px;
border-radius: 99px;
background-color: #051427;
cursor: pointer;
}
.hamburger{
position: relative;
top: calc(50% - 2px);
left: 50%;
transform: translate(-50%, -50%);
width: 32px;
}
.hamburger > span,
.hamburger > span::before,
.hamburger > span::after{
display: block;
position: absolute;
width: 100%;
height: 4px;
border-radius: 99px;
background-color: #FFF;
transition-duration: .25s;
}
.hamburger > span::before{
content: '';
top:-8px;
}
.hamburger > span:after{
content: '';
top: 8px;
}
.menu-toggle.is-active .hamburger > span{
transform: rotate(45deg);
}
.menu-toggle.is-active .hamburger > span::before{
top: 0;
transform: rotate(0deg);
}
.menu-toggle.is-active .hamburger > span::after{
top: 0;
transform: rotate(90deg);
}
#media (max-width: 1024px){
.sidebar{
max-width: 200px;
}
}
#media (max-width: 768px){
.menu-toggle{
display: block;
}
.content{
padding-top: 8rem;
}
.sidebar{
position: fixed;
top: 0;
left: -300px;
height: 100vh;
width: 100%;
max-width: 300px;
transition: 0.2s linear
}
.sidebar.is-active{
left: 0;
}
}
body{
font-family: papyrus;
background-image: url(AstroImg.jpg);
background-size: cover;
background-position: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content= "IE-edge">
<meta name= "viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://kit.fontawesome.com/4767153995.js" crossorigin="anonymous"></script>
<title> MAP | Astrophotography </title>
</head>
<body>
<div class="app">
<div class= "menu-toggle">
<div class= "hamburger">
<span></span>
</div>
</div>
<aside class="sidebar">
<h3>Menu</h3>
<nav class= "menu">
<i class="fa-solid fa-house"></i> Home
<i class="fa-solid fa-user"></i> About Me <i class="fa solid fa-gears"></i> My Equipment
<i class="fa-solid fa-star"></i> Image Gallery
<a href="#" class="menu-item"><i class="fa-regular fa-address-book"></i>Contact</a>
</nav>
</aside>
<main class="content">
<h1> Mapping Astronomical Points </h1>
<p>Your guide to the sky</p>
</main>
</div>
<script>
const menu_toggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');
menu_toggle.addEventListener('click', () => {
menu_toggle.classList.toggle('is-active');
sidebar.classList.toggle('is-active');
})
</script>
</body>
</html>
Below is the example I am struggling to fix. If I remove the class tag, the hyperlink works fine, but then it begins to distort the layout of the website, and if I keep the class tag, then hyperlink does not work at all. What can I do to fix this issue? Any help is appreciated.
<a href="#" class="menu-item"><i class="fa-regular fa-address-book"></i>Contact</a>
Remove the nested anchor and add the class to the outer anchor.
<i class="fa-regular fa-address-book"></i>Contact
Change this line:
<a href="#" class="menu-item"><i class="fa-regular fa-address-book"></i>Contact</a>
With this:
<i class="fa-regular fa-address-book"></i>Contact
EXPLANATION: You should not have an anchor tag inside an anchor tag.
Related
This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed 11 months ago.
I am newbie with html css and here is my problem.
I want to hide a block, then when I use an animation, it will show this block.
I refer a website and it tell me that I should use a CSS Pseudo Classes.
I tried it and at my 1st animation, I successfully to display the image.
Here is the code of the 1st animation
html code :
<div class="header__qr">
<img src="./assets/img/QRcode.png" alt="QR code" class="header__qr-img">
<div class="header__qr-apps">
<a href="" class="header__qr-link">
<img src="./assets/img/Googleplay.png" alt="Google play" class="header__qr-download-img">
</a>
<a href="" class="header__qr-link">
<img src="./assets/img/apple store.png" alt="App store" class="header__qr-download-img">
</a>
</div>
</div>
css code :
.header__qr {
width: 190px;
position: absolute;
left: 0;
top: 110%;
padding: 8px;
display: none;
animation: fadeIn ease-in 1s;
}
.header__qr::before {
position: absolute;
left: 0;
top: -16px;
width: 100%;
height: 20px;
content: "";
display: block;
}
and here is my 2nd animation code
<div class="header__notify">
<div class="header__img">
<img src="./assets/img/xemthongbao.png" alt="xemthongbao" class="header__notify-img">
</div>
<div class="header__notify-info">
<span class="header__notify-name">Đăng nhập để xem Thông báo</span>
</div>
<div class="register-info">
<div class="child register-register">Đăng ký</div>
<div class="child register-login">Đăng nhập</div>
</div>
</div>
css code is here
.header__notify {
background-color: white;
width: 400px;
position: absolute;
left: 0;
top: 110%;
padding: 20px;
display: none;
animation: fadeIn ease-in 1s;
}
.header__notify::before {
position: absolute;
left: 0;
top: -16px;
width: 100%;
height: 20px;
content: "";
display: block;
}
As you can see, the second code is very same as the first code, and when I delete the display:none, it display the image ? So I think that the CSS Pseudo Classes must be actived ? But it does not active as I wish.
Here is all of my code
https://github.com/anhquanjp/bai110headernotification
Could you please give me some ideas for this problem ? Thank you very much for your time.
Because that animation fadeIn set opacity 0 to 1 and header__notify has display none properity.
Add .header__navbar-item:hover .header__notify { display: block; } to your main Thong bao dropdown will work.
.header {
height: 120px;
background-image: linear-gradient(0, #fe6433, #f7482e);
}
.header__navbar {
display: flex;
justify-content: space-between;
}
.header__navbar-list {
list-style: none;
padding-left: 0;
margin-top: 14px;
}
.header__navbar-item {
margin: 0 8px;
position: relative;
min-height: 26px;
}
.header__navbar-item,
.header__navbar-item-link {
display: inline-block;
font-size: 1.3rem;
color: var(--white-color);
text-decoration: none;
font-weight: 3;
}
.header__navbar-item,
.header__navbar-item-link,
.header__navbar-icon-link {
display: inline-flex;
align-items: center;
}
.header__navbar-item:hover,
.header__navbar-icon-link:hover,
.header__navbar-item-link:hover {
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
}
.header__navbar-item--bold {
font-weight: 500;
}
.header__navbar-item--separate::after {
content: "";
display: block;
position: absolute;
border-left: 1px solid #ffffff;
height: 16px;
right: -9px;
top: 50%;
transform: translateY(-50%);
}
.header__navbar-icon-link {
color: var(--white-color);
text-decoration: none;
}
.header__navbar-icon {
font-size: 1.8rem;
margin: 0 4px;
}
.header__navbar-title--no-pointer {
cursor: text;
color: var(--white-color);
}
.header__qr {
width: 190px;
position: absolute;
left: 0;
top: 110%;
padding: 8px;
display: none;
animation: fadeIn ease-in 1s;
}
.header__qr::before {
position: absolute;
left: 0;
top: -16px;
width: 100%;
height: 20px;
content: "";
display: block;
}
.header__navbar-item--has-qr:hover .header__qr {
display: block;
}
.header__qr-img {
}
.header__qr-apps {
display: flex;
justify-content: space-between;
}
.header__qr-download-img {
height: 18px;
}
.header__notify {
background-color: white;
width: 400px;
position: absolute;
left: 0;
top: 110%;
padding: 20px;
display: none;
animation: fadeIn ease-in 1s;
}
.header__notify::before {
position: absolute;
left: 0;
top: -16px;
width: 100%;
height: 20px;
content: "";
display: block;
}
.header__navbar-item:hover .header__notify {
display: block;
}
.header__img {
display: flex;
align-items: center;
justify-content: center;
height: 300px;
}
.header__notify-img {
width: 100px;
height: 100px;
display: block;
margin-left: auto;
margin-right: auto;
}
.header__notify-name {
color: black;
margin-top: 100px;
}
.register-info {
display: flex;
align-items: center;
justify-content: center;
}
.header__notify-info {
font-size: 14px;
font-weight: bold;
text-align: center;
}
.register-login,
.register-register {
font-size: 14px;
font-weight: bold;
background-color: rgb(248, 245, 245);
color: black;
float: left;
flex: 1;
text-align: center;
height: 30px;
width: 300px;
}
.register-login:hover,
.register-register:hover {
color: red;
background-color: rgb(238, 227, 227);
height: 30px;
}
:root {
--white-color: #fff;
--black-color: #000;
--text-color: #333;
}
* {
box-sizing: inherit;
}
html {
font-size: 100%;
line-height: 1.6rem;
font-family: "Roboto", sans-serif;
box-sizing: border-box;
}
.grid {
width: 1200px;
max-width: 100%;
margin: 0 auto;
}
.grid__full-width {
width: 100%;
}
.grid__row {
display: flex;
flex-wrap: wrap;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeInNotify {
from {
display: none;
}
to {
display: unset;
}
}
<!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.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="./assets/css/base.css">
<link rel="stylesheet" href="./assets/css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="assets/fonts/fontawesome-free-6.1.0-web/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;1,100&display=swap" rel="stylesheet">
</head>
<body>
<!-- Block element modifier -->
<div class="app">
<header class="header">
<div class="grid">
<nav class="header__navbar">
<ul class="header__navbar-list">
<li class="header__navbar-item header__navbar-item--separate">Kênh Người Bán</li>
<li class="header__navbar-item header__navbar-item--separate">Trở thành Người bán Shopee</li>
<li class="header__navbar-item header__navbar-item--has-qr header__navbar-item--separate">Tải ứng dụng
<div class="header__qr">
<img src="./assets/img/QRcode.png" alt="QR code" class="header__qr-img">
<div class="header__qr-apps">
<a href="" class="header__qr-link">
<img src="./assets/img/Googleplay.png" alt="Google play" class="header__qr-download-img">
</a>
<a href="" class="header__qr-link">
<img src="./assets/img/apple store.png" alt="App store" class="header__qr-download-img">
</a>
</div>
</div>
</li>
<li class="header__navbar-item">
<span class="header__navbar-title--no-pointer">Kết nối</span>
<a href="" class="header__navbar-icon-link">
<i class="header__navbar-icon fa-brands fa-facebook-square"></i>
</a>
<a href="" class="header__navbar-icon-link">
<i class="header__navbar-icon fa-brands fa-instagram"></i>
</a>
</li>
</ul>
<ul class="header__navbar-list">
<li class="header__navbar-item">
<a href="" class="header__navbar-item-link">
<i class="header__navbar-icon fa-solid fa-bell"></i> Thong bao
<div class="header__notify">
<div class="header__img">
<img src="./assets/img/xemthongbao.png" alt="xemthongbao" class="header__notify-img">
</div>
<div class="header__notify-info">
<span class="header__notify-name">Đăng nhập để xem Thông báo</span>
</div>
<div class="register-info">
<div class="child register-register">Đăng ký</div>
<div class="child register-login">Đăng nhập</div>
</div>
</div>
</a>
</li>
<li class="header__navbar-item">
<a href="" class="header__navbar-item-link">
<i class="header__navbar-icon fa-solid fa-circle-question"></i> Ho tro</a>
</li>
<li class="header__navbar-item header__navbar-item--bold header__navbar-item--separate">Tro giup</li>
<li class="header__navbar-item header__navbar-item--bold">Dang nhap</li>
</ul>
</nav>
</div>
</header>
<div class="container">
</div>
<footer class="footer">
</footer>
</div>
</body>
</html>
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'm not sure how to add a grid below the current background picture and continue adding info. When I try adding a grid now, it just creates one below the navbar and not below the current background.
/**********BODY GENERAL**********/
body {
margin: 0;
}
/* Fix this one day */
.bg-img {
background: url('https://images.unsplash.com/photo-1508781015212-46d58946bb05?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39b69f4b9e54ea449f90e3d714bf9215&auto=format&fit=crop&w=1951&q=80') no-repeat center center;
background-size: cover;
height: 100vh;
}
strong {
font-weight: bold;
}
/*********NAVIGATION*********/
nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 1em;
grid-auto-rows: auto;
text-align: center;
align-items: center;
background: /*rgba(255, 51, 0, .95);
*/
z-index: 10;
}
#media screen and (max-width: 900px) {
nav {
grid-template-columns: 100%;
grid-template-rows: auto;
grid-gap: 1em;
}
}
.menu1 {
grid-column: 1;
}
.menu2 {
grid-column: 2;
}
.logo {
grid-column: 3;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
font-size: 28px;
width: 500px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 7vh;
margin-bottom: 25px;
color: #000;
text-transform: uppercase;
letter-spacing: 3px;
}
.menu3 {
grid-column: 4;
}
.menu4 {
grid-column: 5;
}
/**************HOVER ANIMATION**************/
div>a {
font-family: 'Raleway';
text-transform: uppercase;
text-decoration: none;
color: #000;
position: relative;
font-size: 0.8rem;
}
div>a:hover {
color: #000;
}
div>a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -4px;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
div>a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/**********MAIN HEADER***********/
header {
color: white;
justify-content: center;
align-content: center;
top: 0;
bottom: 0;
left: 0;
}
/**********BODY*****************/
.Minfo {
color: red;
width: 100%;
padding-top: 100px;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
}
.subtitle {
padding-left: 4em;
padding-top: 29em;
font-size: 100%;
color: #fff;
}
.title {
font-size: 3em;
text-align: left;
color: #FFF;
padding-bottom: 0px;
}
.subtext {
padding-top: 0px;
color: #FFF;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Centennial It's Academic</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<header>
<nav class="container">
<div class="menu1">
<a class="navLinks" href="#home">Home</a>
</div>
<div class="menu2">
<a class="navLinks" href="#upcoming">Tournaments</a>
</div>
<div class="logo">
<p>It's Academic</p>
</div>
<div class="menu3">
<a class="navLinks" href="#history">History</a>
</div>
<div class="menu4">
<a class="navLinks" href="#faq">Contact Info</a>
</div>
</nav>
<!-- This cluster of info -->
<div class="Minfo">
<div class="subtitle">CENTENNIAL
<br>
<div class="title"> It's Academic</div>
<br>
<div class="subtext">Meets every Tuesday in Room 506</div>
</div>
</div>
</header>
<!--Don't even -->
</div>
</body>
</html>
codepen (Please open in full page mode):
An example of how I would want it to look is like on this website, where all the info is under that background.
I'm not sure what you mean. There are 2 options in my mind:
Push the grid below the image. In this case, just move the header tag from .bg-img and put it after. https://codepen.io/moshfeu/pen/ERWVdZ
You want the fixed effect (just like the website you attached). In this case, you need to use position: fixed on the header.
https://codepen.io/moshfeu/pen/aKJvXW
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport
https://developer.mozilla.org/en-US/docs/Web/CSS/position
I want a sidebar which takes the full height of the screen and doesn't change when scrolling down.
So when I scroll only the contents changes but the navbar stays always the same.
I made a first example: http://jsfiddle.net/CwSD6/
But the none-scroll functionality is missing...
Regards
EDIT:
You need to use position: fixed, and top, bottom, left with value 0.
http://jsfiddle.net/CwSD6/1/
it can be done by doing position: fixed; in <aside>
see this fiddle jsfiddle
Try this:
aside
{
position: fixed;
width: 200px;
height: 100%;
top: 0;
left: 0;
border: 1px solid #111;
}
Hope this helps
I use the jQuery method as using fixed or absolute usually screws with my grid layout. In the example below my grid collapses when under 990px width so you would need to change this assuming you are doing responsive.
$(window).resize(function() {
var doc_height = $(document).height();
var doc_width = $(document).width()
if (doc_width > 990) {
$('#sidebar').css("height", doc_height);
} else {
$('#sidebar').css("height", 'auto');
}
});
Although this may not be the most efficient way, you don't need to set variables. I find it helps with readability.
Kind Regards,
M
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
p {
font-size: 1.125rem;
}
label {
display: flex;
align-items: center;
font-size: 1.125rem;
margin-bottom: 0.5rem;
}
HTML code start here
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="css/adminhome.css">
<link href=”https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU” crossorigin=”anonymous”>
<link href="https://allfont.net/allfont.css?fonts=montserrat-bold" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<title>home</title>
</head>
<body>
<header>
<div class="tpe">
<p>Admin</p>
</div>
<div class="headbar">
<a href="adminallusers.html" class="allusers">
<i class="fas fa-users"></i>
<span class="users">All Users</span>
</a>
<a href="#" class="admin">
<i class="fas fa-user"></i>
<span class="user">Admin</span>
</a>
</div>
</header>
<nav>
<ul>
<li>
<a href="#">
<i class="fas fa-home"></i>
<span class="nav-item">Home</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-ticket-alt"></i>
<span class="nav-item">Tickets</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-upload"></i>
<span class="nav-item">Upload</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-tasks"></i>
<span class="nav-item">Status</span>
</a>
</li>
<li>
<a href="#" class="logout">
<i class="fas fa-sign-out-alt"></i>
<span class="nav-item">Log out</span>
</a>
</li>
</ul>
</nav>
</body>
</html>
HTML end here
CSS start from here
#import url('https://allfont.net/allfont.css?fonts=montserrat-bold');
*{
margin: 0;
padding:0;
outline: none;
border: none;
text-decoration: none;
box-sizing: border-box;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
body{
background-color: white;
}
header{
position: fixed;
background:#404258;
height: 45px;
width: 100%;
overflow: hidden;
transition: width 0.2s linear;
}
header .tpe p{
font-size: 28px;
font-weight:900;
float: left;
color:white;
text-transform: uppercase;
margin-left:130px;
}
header a{
position: relative;
color: white;
font-size: 15px;
font-weight: 600;
display: table;
width: 300px;
padding: 10px;
}
header:hover{
background-color: none;
}
.admin{
padding:1px;
background:none;
text-decoration: none;
float: right;
margin-top:0px;
width:10%;
margin-right:-10px;
font-size: 15px;
font-weight:550;
color: white;
}
.allusers{
padding:1px;
background:none;
text-decoration: none;
float: right;
width:20%;
margin-top:0px;
margin-right:-100px;
font-size: 15px;
font-weight:550;
color: white;
}
.user{
position:relative;
top:10px;
margin-right:-50px;
width: 250px;
}
.users{
position:relative;
top:10px;
margin-right:auto;
width: 250px;
}
nav{
position: fixed;
top:45px;
bottom:-60px;
height: 100%;
left: 0;
background:#404258;
width: 90px;
overflow: hidden;
transition: width 0.2s linear;
}
nav a{
position: relative;
color: white;
font-size: 14px;
font-weight:600;
display: table;
width: 300px;
padding: 10px;
}
.fas{
position: relative;
width: 70px;
height: 40px;
top: 14px;
font-size: 20px;
text-align: center;
}
.nav-item{
position:relative;
top:12px;
margin-left:10px;
}
nav a:hover{
background: #A6ADC2;
}
nav:hover{
width: 200px;
transition: all 0.5s ease;
}
.logout{
position: absolute;
bottom: -20;
}
CSS end here