helloitsdave
New Coder
Hi, I am currently learning web development and I have decided to recreate my CV as a website for a project..
The main page looks good to me on a desktop sized window but as I shorten it, it is becoming weird. I appreciate any help 🙂
Thanks
HUGE APOLOGIES FOR THE MESSY CODE, I'VE ONLY BEEN LEARNING FOR 1 WEEK
HTML CODE
CSS CODE
JS CODE
The main page looks good to me on a desktop sized window but as I shorten it, it is becoming weird. I appreciate any help 🙂
Thanks
HUGE APOLOGIES FOR THE MESSY CODE, I'VE ONLY BEEN LEARNING FOR 1 WEEK
HTML CODE
<!DOCTYPE html>
<head>
<title>My Online CV</title>
<html lang="en">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="index.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
</head>
<body>
<!-- START OF NAVIGATION BAR -->
<nav>
<div class="navcontainer">
<h1 class="navbar">Online <span>CV</span></h1>
<div class="menu">
<a href="index.html" class="is-active">About Me</a>
<a href="workhistory.html">Work History</a>
<a href="qualifications.html">Qualifications</a>
<a href="skillslicenses.html">Skills & Licenses</a>
<a href="hobbies.html">Hobbies</a>
<a href="feedback.html">Feedback</a>
</div>
<div class="tablet-menu">
<a href="index.html" class="is-active">About Me</a>
<a href="workhistory.html">Work History</a>
<a href="qualifications.html">Qualifications</a>
<a href="skillslicenses.html">Skills & Licenses</a>
<a href="hobbies.html">Hobbies</a>
<a href="feedback.html">Feedback</a>
</div>
<div class="mobile-menu">
<a href="index.html" class="is-active">About Me</a>
<a href="workhistory.html">Work History</a>
<a href="qualifications.html">Qualifications</a>
<a href="skillslicenses.html">Skills & Licenses</a>
<a href="hobbies.html">Hobbies</a>
<a href="feedback.html">Feedback</a>
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
<button class="hamburgertwo">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<!-- END OF NAVIGATION BAR -->
<!-- START OF MAIN CONTENT -->
<section class="home"> <!-- DESKTOP VIEW -->
<div class="home-content">
<h3><span>Hello</span>, It's Me</h3>
<h1>John Doe</h1>
<h3>And I'm a <span id="typed-text"></span></h3>
<p>A dedicated and versatile professional with a strong foundation in a wide range of skills and qualifications, including driving licenses, technical expertise, and exceptional communication abilities.
Seeking a role that leverages my experience and commitment to personal development to make a meaningful contribution to an organization. </p>
<a href="#" class="cvbtn">Download CV</a>
</div>
<div class="home-img">
<div class="glowing-circle">
<span></span>
<span></span>
<span></span>
<div class="image">
<img src="images/home.png" alt="">
</div>
</div>
</div>
</section>
<!-- END OF MAIN CONTENT -->
<!-- START OF FOOTER -->
<div class="footer">
<div class="social">
<a href="Facebook - log in or sign up target="_blank"><i class="fab fa-facebook"></i></a>
<a href="https://twitter.com/" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="Instagram" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="LinkedIn: Log In or Sign Up" target="_blank"><i class="fab fa-linkedin"></i></a>
</div>
<p class="footcopyright">Copyright 2023</p>
<a class="footcontactme" href="contactme.html">Contact Me</a>
</div>
<!-- END OF FOOTER -->
<!-- START OF SCRIPTS -->
<script src="main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/typed.min.js"></script>
<script>
var typed = new Typed('#typed-text', {
strings: ["Coach Driver. . .", "Learner Web Developer. . ."],
typeSpeed: 60,
backSpeed: 30,
loop: true
});
</script>
<!-- END OF SCRIPTS -->
</body>
</html>
CSS CODE
/** BACKGROUND **/
body {
background-color: #1a1a1a;
}
/** FONTS **/
* {
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
}
/** NAVIGAION BAR **/
.navcontainer {
max-width: 1280px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 99;
margin: -10px;
padding: -10px;
margin-left: 10px;
}
nav {
position: fixed;
top: 0px;
left: 0;
right: 0;
z-index: 99;
padding: 0px;
margin: 0px;
background: rgb(74, 74, 74);
}
h1.navbar {
color: white;
font-size: 28px;
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
z-index: 99;
font-family: 'Audiowide', Helvetica, Arial, sans-serif;
}
h1.navbar span {
color: cyan;
font-size: 28px;
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
text-shadow: 0 0 20px aqua;
z-index: 99;
font-family: 'Audiowide', Helvetica, Arial, sans-serif;
}
/** TABLET NAVIGATION BUTTON **/
.hamburgertwo {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
margin-right: 10px;
margin-bottom: -4px;
}
.hamburgertwo span {
display: block;
width: 35px;
height: 4px;
margin-bottom: 5px;
position: relative;
background-color: aqua;
border-radius: 20px;
z-index: 30;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburgertwo:hover span:nth-child(3){
transform: translateX(-10px);
background-color: aqua;
}
.hamburgertwo:hover span:nth-child(2) {
transform: translateX(10px);
background-color: rgb(0, 255, 255);
}
.hamburgertwo:hover span:nth-child(1) {
transform: translateX(-10px);
background-color: aqua;
}
.hamburgertwo.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(15px);
}
.hamburgertwo.is-active:hover span {
background-color: aqua;
}
/** MOBILE NAVIGATION BUTTON **/
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
margin-right: 10px;
margin-bottom: -4px;
}
.hamburger span {
display: block;
width: 35px;
height: 4px;
margin-bottom: 5px;
position: relative;
background-color: white;
border-radius: 20px;
z-index: 30;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger:hover span:nth-child(3){
transform: translateX(-10px);
background-color: aqua;
}
.hamburger:hover span:nth-child(2) {
transform: translateX(10px);
background-color: aqua;
}
.hamburger:hover span:nth-child(1) {
transform: translateX(-10px);
background-color: aqua;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(15px);
}
.hamburger.is-active:hover span {
background-color: aqua;
}
/* DESKTOP MENU */
.menu {
display: none;
justify-content: flex-end;
margin: 0 -16px;
}
.menu a {
color: white;
margin: 0 16px;
font-weight: 600;
text-decoration: none;
transition: 0.4s;
padding: 8px 16px;
border-radius: 99px;
}
.menu a.is-active, .menu a:hover {
background-color: aqua;
color: black;
box-shadow: 0 0 10px aqua;
}
/** MOBILE MENU **/
.mobile-menu {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 53%;
z-index: 1;
padding-top: 50px;
opacity: 0;
transform: translateY(-100%);
background-color: rgb(74, 74, 74);
color: #FFF;
transition: 0.3s;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
.mobile-menu.is-open {
opacity: 1;
transform: translateY(0);
}
.mobile-menu a.is-active, .mobile-menu a:hover {
background-color: aqua;
color: black;
padding: 8px;
margin-left: 20%;
margin-right: 20%;
height: 40px;
border-radius: 20px;
}
.mobile-menu a {
display: block;
padding: 1px;
color: #FFF;
height: 47px;
text-align: center;
text-decoration: none;
font-size: 1.25rem;
transition: 0.5s;
font-weight: 600;
margin: 10px;
}
.mobile-menu a:hover {
color: black;
background-color: cyan;
}
/** TABLET MENU **/
.tablet-menu {
position: fixed;
top: 8px;
right: 0;
width: 320px;
height: 55%;
z-index: 1;
padding-top: 50px;
opacity: 0;
transform: translateY(-100%);
background-color: rgb(74, 74, 74);
color: #FFF;
transition: 0.3s;
border-bottom-left-radius: 45px;
}
.tablet-menu.is-open {
opacity: 1;
transform: translateY(0);
}
.tablet-menu a.is-active, .tablet-menu a:hover {
background-color: aqua;
color: black;
padding: 8px;
margin-left: 20%;
margin-right: 20%;
height: 40px;
border-radius: 20px;
}
.tablet-menu a {
display: block;
padding: 5px;
color: #FFF;
margin-top: 20px;
height: 50px;
text-align: center;
text-decoration: none;
font-size: 1.25rem;
transition: 0.5s;
font-weight: 600;
margin: 10px;
}
.tablet-menu a:hover {
color: black;
background-color: cyan;
}
/** FOOTER **/
.footer {
padding: 10px 0;
background-color: rgb(74, 74, 74);
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: inline-flex;
justify-content: center;
border: none;
z-index: 100;
}
.footer .social {
text-align: center;
padding-bottom: 0px;
color: cyan;
border: none;
position: center;
}
.footer .social a {
font-size: 24px;
color: inherit;
border: 1px solid white;
width: 40px;
height: 0px;
line-height: 0px;
display: inline block;
text-align: center;
border-radius: 50%;
margin: 0 8px;
opacity: 1;
border: none;
}
.fab.fa-facebook {
opacity: 1;
color: #3b5998;
}
.fab.fa-twitter {
opacity: 1;
color: #55acee;
}
.fab.fa-instagram {
opacity: 1;
color: #406e94;
}
.fab.fa-linkedin {
opacity: 1;
color: #007bb6;
}
.fab.fa-facebook:hover {
opacity: 1;
color: aqua;
}
.fab.fa-twitter:hover {
opacity: 1;
color: aqua;
}
.fab.fa-instagram:hover {
opacity: 1;
color: aqua;
}
.fab.fa-linkedin:hover {
opacity: 1;
color: aqua;
}
.footcopyright {
color: #aaa;
position: absolute;
left: 15px;
bottom: 0px;
}
.footcontactme {
color: #ffffff;
position: absolute;
right: 15px;
bottom: 12px;
text-decoration: none;
font-weight: 700;
}
.footcontactme:hover {
color: black;
visibility: unset !important;
box-shadow: 0px 0px 1rem aqua;
display: inline-block;
background: aqua;
border-radius: 1rem;
padding: 1px 4px;
}
/** ANIMATIONS **/
@keyframes floatImage {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}
@keyframes circleRotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
/** MEDIA STYLES **/
@media (min-width: 1140px) { /* NAVBAR SIZING (DESKTOP) */
.tablet-menu, .mobile-menu, .hamburger, .hamburgertwo {
display: none;
}
.menu {
display: flex;
}
}
@media (max-width: 1139px) { /* NAVBAR SIZING (TABLET) */
.mobile-menu, .menu, .hamburger {
display: none;
}
.tablet-menu, .hamburgertwo {
display: block;
}
}
@media (max-width: 480px) { /* NAVBAR SIZING (MOBILE) */
.tablet-menu, .menu, .hamburgertwo {
display: none;
}
.mobile-menu, .hamburger {
display: block;
}
}
/* ABOUT ME PAGE (DESKTOP) */
section.home {
color: white;
width: 100%;
height: 100vh;
padding: 9% 6%;
display: flex;
flex-wrap: wrap;
justify-content: space-between, center;
align-items: center;
}
.home-content {
max-width: 690px;
}
.home-content h3 {
font-size: 2rem;
font-weight: 700;
max-width: 650px;
}
.home-content span {
color: aqua;
text-shadow: 0 0 30px aqua;
}
.home-content h1 {
font-size: 3.6rem;
font-weight: 700;
text-shadow: 0 0 40px aqua;
}
.home-content p {
font-size: 1rem;
font-weight: 550;
max-width: 670px;
padding-top: 10px;
}
.home-img {
position: relative;
width: auto;
height: auto;
padding-left: 200px;
animation: floatImage 4s ease-in-out infinite;
}
.home-img .glowing-circle {
width: 410px;
height: 410px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.home-img .glowing-circle::after {
content: '';
position: absolute;
width: 380px;
height: 380px;
background: #1a1a1a;
border-radius: 50%;
}
.glowing-circle .image {
position: relative;
width: 380px;
height: 380px;
background: rgb(255, 0, 0);
border-radius: 50%;
z-index: 1;
overflow: hidden;
}
.glowing-circle span {
position: absolute;
width: 410px;
height: 410px;
background: linear-gradient(aqua, rgb(255, 255, 255), aqua);
border-radius: 50%;
animation: circleRotate 3s linear infinite;
}
.glowing-circle span:nth-child(1) {
filter: blur(20px);
}
.image img {
bottom: -60px;
max-width: 380px;
object-fit: cover;
background-size: contain;
height: auto;
width: auto;
}
.cvbtn {
display: inline-block;
padding: 0.8rem 2.2rem;
background: aqua;
border-radius: 4rem;
visibility: unset !important;
box-shadow: 0px 0px 1rem aqua;
font-size: 1.1rem;
color: black;
font-weight: 600;
transition: 1s;
margin-bottom: 80px;
}
.cvbtn:hover {
box-shadow: none;
}
JS CODE
const hamburger = document.querySelector('.hamburger');
const hamburgertwo = document.querySelector('.hamburgertwo');
const smallcontent = document.querySelector('.smallcontent');
const hamburger_icon = hamburger.querySelector('span');
const mobile = document.querySelector('.mobile-menu');
const tablet = document.querySelector('.tablet-menu');
hamburger.addEventListener('click', () => {
mobile.classList.toggle('is-open');
})
hamburgertwo.addEventListener('click', () => {
tablet.classList.toggle('is-open');
})
