Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

Responsive website help!

H

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 :blush:


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>
Click to expand...

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;
}
Click to expand...


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');
})
Click to expand...
 
Sort by date Sort by votes
helloitsdave said:
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 :blush:


HTML CODE


CSS CODE



JS CODE
Click to expand...
Hi there,
Could you post some screenshots pointing out the issues? Might make it easier for the community to spot where you're having the issue
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom