[
]
(https://i.stack.imgur.com/8qIQ4.png)
As you can see in the images on this post, my website running locally versus on codepen are mysteriously displaying two seperate results to nearly the same exact code. The only difference being that the images on the site's html are different between my local machine and codepen. I was originally going to make a post about how the items on my site, namely the first two images below the navbar and the carousel were locking to a particular width and not shrinking beyond that. However, when I ported the site over to codepen, the code suddenly started to work there. I'm very confused as to why this is. Any help would be greatly appreciated.
And just as a small follow up question, the second image below the navbar is supposed to constantly be on top of the bottom border of the hero section video. With the bottom border of the hero section video touching the vertical center of the second image as seen when you expand the page. However, upon shrinking the page the image moves upward into the hero section video. How would I fix this as well? Thanks again.
Here is the codepen: https://codepen.io/COMMANDERY11/full/mdapvrq
Codepen HTML Code:
`<!DOCTYPE html>
<html>
<head>
<title>Adam's Website</title>
<link rel="stylesheet" href="./home.css">
<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=Barlow:wght@300&display=swap" rel="stylesheet">
<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=Anton&display=swap" rel="stylesheet">
</head>
<body>
<div class="navbar">
<a href="./home.html"><img class="navbar_logo" src="https://cf-s3.petcoach.co/uploads/petcondition/81/1528917460-ObeseDog.jpg"/></a>
<div class="navbar_buttons">
<button class="blue_button">Sign Up</button>
<button class="blue_button">Log In</button>
</div>
</div>
<div class="home_banner">
<img class="home_video" src="https://25.media.tumblr.com/770251242458d4f24f94442e2ce1838f/tumblr_msj4n7179W1sgc5tho1_500.gif"/>
<img class="home_image" src="https://cf-s3.petcoach.co/uploads/petcondition/81/1528917460-ObeseDog.jpg"/>
<img class="about_us_adam" src="https://cf-s3.petcoach.co/uploads/petcondition/81/1528917460-ObeseDog.jpg"/>
</div>
<div class="personal_package_container">
<h2>Personalized Packages</h2>
<div class="personal_packages_navigation_manual">
<label for="personal_packages_radio1" class="manual_btn">Creative Design</label>
<label for="personal_packages_radio2" class="manual_btn">Tools and Equip</label>
<label for="personal_packages_radio3" class="manual_btn">Hire Members</label>
</div>
<div class="personal_packages">
<div class="personal_packages_slides">
<input type="radio" name="radio_btn" id="personal_packages_radio1">
<input type="radio" name="radio_btn" id="personal_packages_radio2">
<input type="radio" name="radio_btn" id="personal_packages_radio3">
<div class="four_personal_packages first" id="creative_design">
<a href="./creative_design.html#site_redesign"><div class="personal_package">
<img class="personal_package_image" src="C:\Users\izaya\OneDrive\Documents\HTML Documents\My Projects\Adam's Website\AdamsWebsiteRepo\Adam's Assets\Home Page\Package Videos\Pack 1.jpg"/>
<h3>Site Re-design</h3>
</div></a>
<a href="./creative_design.html#creative_consultations"><div class="personal_package">
<img class="personal_package_image" src="C:\Users\izaya\OneDrive\Documents\HTML Documents\My Projects\Adam's Website\AdamsWebsiteRepo\Adam's Assets\Home Page\Package Videos\Pack 2.png"/>
<h3>Creative Consultations</h3>
</div></a>
<a href="creative_design.html#asset_creation"><div class="personal_package">
<img class="personal_package_image" src="C:\Users\izaya\OneDrive\Documents\HTML Documents\My Projects\Adam's Website\AdamsWebsiteRepo\Adam's Assets\Home Page\Package Videos\Pack 3.jpg"/>
<h3>Asset Creation</h>
</div></a>
<a href="./creative_design.html#no_code_websites"><div class="personal_package">
<video autoplay muted loop class="personal_package_video">
<source src="C:\Users\izaya\OneDrive\Documents\HTML Documents\My Projects\Adam's Website\AdamsWebsiteRepo\Adam's Assets\Home Page\Package Videos\Pack 4.mp4" type="video/mp4"/>
</video>
<h3>No-Code Websites</h3>
</div></a>
</div>
<div class="four_personal_packages" id="tools_n_equip">
<a href="./tools n equip.html#editing_bay"><div class="personal_package">
<video autoplay muted loop class="personal_package_video">
<source src="C:\Users\izaya\OneDrive\Documents\HTML Documents\My Projects\Adam's Website\AdamsWebsiteRepo\Adam's Assets\Home Page\Package Videos\Pack 5.mp4" type="video/mp4"/>
</video>
<h3>Editing Bay</h3>
</div></a>
<a href="./tools n equip.html#music_creation"><div class="personal_package">
<img class="personal_package_image" src="C:\Users\izaya\OneDrive\Documents\HTML Documents\My Projects\Adam's Website\AdamsWebsiteRepo\Adam's Assets\Home Page\Package Videos\Pack 6.jpg"/>
<h3>Music Creation</h3>
</div></a>
<a href="./tools n equip.html#photo_booth"><div class="personal_package">
<video autoplay muted loop class="personal_package_video">
<source src="C:\Users\izaya\OneDrive\Documents\HTML Documents\My Projects\Adam's Website\AdamsWebsiteRepo\Adam's Assets\Home Page\Package Videos\Pack 7.mp4" type="video/mp4"/>
</video>
<h3>Photo Booth</h3>
</div></a>
<a href="./tools n equip.html#green_screen"><div class="personal_package">
<img class="personal_package_image" src="C:\Users\izaya\OneDrive\Documents\HTML Documents\My Projects\Adam's Website\AdamsWebsiteRepo\Adam's Assets\Home Page\Package Videos\Pack 8.jpg"/>
<h3>Green Screen</h3>
</div></a>
</div>
<div class="four_personal_packages" id="hire_members">
<a href="./hire members.html#cinema_video"><div class="personal_package">
<img class="personal_package_image" src="C:\Users\izaya\OneDrive\Documents\HTML Documents\My Projects\Adam's Website\AdamsWebsiteRepo\Adam's Assets\Home Page\Package Videos\Pack 9.gif"/>
<h3>Cinema Video</h3>
</div></a>
<a href="./hire members.html#assistant_director_short_films"><div class="personal_package">
<img class="personal_package_image" src="C:\Users\izaya\OneDrive\Documents\HTML Documents\My Projects\Adam's Website\AdamsWebsiteRepo\Adam's Assets\Home Page\Package Videos\Pack 10.png"/>
<h3>Assistant Director Short Films</h3>
</div></a>
<a href="./hire members.html#photography"><div class="personal_package">
<img class="personal_package_image" src="C:\Users\izaya\OneDrive\Documents\HTML Documents\My Projects\Adam's Website\AdamsWebsiteRepo\Adam's Assets\Home Page\Package Videos\Pack 11.jpg"/>
<h3>Photography</h3>
</div></a>
<a href="./hire members.html#cinema_audio"><div class="personal_package">
<img class="personal_package_image" src="C:\Users\izaya\OneDrive\Documents\HTML Documents\My Projects\Adam's Website\AdamsWebsiteRepo\Adam's Assets\Home Page\Package Videos\Pack 12.jpg"/>
<h3>Cinema Audio</h3>
</div></a>
</div>
</div>
</div>
</div>
<div class="footer_container">
<div class="social_logos">
<img class="social_logo" src="https://cf-s3.petcoach.co/uploads/petcondition/81/1528917460-ObeseDog.jpg"/>
<img class="social_logo" src="https://cf-s3.petcoach.co/uploads/petcondition/81/1528917460-ObeseDog.jpg"/>
<img class="social_logo" src="https://cf-s3.petcoach.co/uploads/petcondition/81/1528917460-ObeseDog.jpg"/>
<img class="social_logo" src="https://cf-s3.petcoach.co/uploads/petcondition/81/1528917460-ObeseDog.jpg"/>
<img class="social_logo" src="https://cf-s3.petcoach.co/uploads/petcondition/81/1528917460-ObeseDog.jpg"/>
</div>
</div>
</body>
</html>
Codepen CSS Code:
/*Base Code*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Barlow", sans-serif;
font-weight: bold;
color: black;
scroll-behavior: smooth;
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
img {
width: 100%;
}
/*Utility Classes*/
.blue_button {
background-color: #b8eefc;
border-radius: 6px;
font-family: "Barlow", sans-serif;
font-weight: bold;
font-size: clamp(0.9rem, 1.5vw, 1.1rem);
padding: 1em 1.25em;
transition-duration: 0.2s;
}
.blue_button:hover {
font-size: 1.25rem;
background-color: white;
cursor: pointer;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
/*Navbar*/
.navbar {
width: 100%;
display: flex;
justify-content: space-between;
position: fixed;
align-items: center;
top: 0;
left: 0;
z-index: 999;
padding: 0% 5%;
pointer-events: none;
}
.navbar_logo {
width: clamp(70px, 10vw, 90px);
transition-duration: 0.2s;
pointer-events: auto;
}
.navbar_logo:hover {
width: clamp(80px, 12.5vw, 100px);
cursor: pointer;
}
.navbar_buttons {
display: flex;
justify-content: space-between;
align-items: center;
pointer-events: auto;
gap: 50px;
}
/*Home Banner*/
.home_banner {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
background-size: cover;
width: 100%;
height: 1000px;
border-bottom: 1px black solid;
}
.home_video {
position: absolute;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
z-index: -1;
}
.home_image {
position: relative;
width: 100%;
max-width: 1000px;
aspect-ratio: 10/4;
top: 200px;
}
.about_us_adam {
position: relative;
width: 100%;
max-width: 1000px;
border-radius: 15px;
aspect-ratio: 144/83;
bottom: -300px;
}
.personal_package_container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
border-bottom: 1px black solid;
z-index: -1;
padding: 100px 0;
gap: 50px;
margin-top: 225px;
}
.personal_package_container h2 {
position: relative;
font-family: "Anton", sans-serif;
font-weight: normal;
font-size: clamp(2rem, 4.5vw, 5rem);
bottom: 40px;
}
.personal_packages {
width: 90%;
max-width: 1250px;
overflow: hidden;
}
.personal_packages_slides {
width: 500%;
display: flex;
}
.personal_packages_slides input {
display: none;
}
.four_personal_packages {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
transition: 2s;
width: 20%;
}
.four_personal_packages a {
width: 250px;
height: 550px;
}
.personal_package {
position: relative;
width: 100%;
height: 100%;
font-size: 2rem;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
/*margin-right: 83.35px;*/
z-index: 1;
border-radius: 15px;
transition-duration: 0.3s;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.personal_package:hover {
cursor: pointer;
font-size: 200%;
}
.personal_package:hover > .personal_package_image {
filter: brightness(100%);
}
.personal_package:hover > .personal_package_video {
filter: brightness(100%);
}
.personal_package_image {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
z-index: 0;
filter: brightness(25%);
border-radius: 15px;
transition-duration: 0.5s;
}
.personal_package_video {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
z-index: 0;
filter: brightness(25%);
border-radius: 15px;
transition-duration: 0.5s;
}
.personal_package h3 {
position: absolute;
color: white;
font-family: "Anton", sans-serif;
font-weight: normal;
text-shadow: 5px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
z-index: 1;
}
.personal_packages_navigation_manual {
width: 90%;
max-width: 1250px;
margin-top: -70px;
display: flex;
justify-content: center;
}
.manual_btn {
border-radius: 15px;
font-family: "Barlow", sans-serif;
font-weight: bold;
font-size: clamp(0.9rem, 1.5vw, 1.1rem);
padding: 1em 1.25em;
transition-duration: 0.2s;
background-color: #ca74fc;
border: 2px solid black;
}
.manual_btn:not(:last-child) {
margin-right: 40px;
}
.manual_btn:hover {
background: white;
}
#personal_packages_radio1:checked ~ .first {
margin-left: 0;
}
#personal_packages_radio2:checked ~ .first {
/*margin-left: -21.33%;*/
margin-left: -20%;
}
#personal_packages_radio3:checked ~ .first {
/*margin-left: -42.68%;*/
margin-left: -40%;
}
.footer_container {
background-color: #b8eefc;
width: 100%;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.social_logos {
display: flex;
justify-content: space-between;
align-items: center;
width: 50%;
}
.social_logo {
width: 100px;
height: 100px;
transition: width 0.4s, height 0.4s;
}
.social_logo:hover {
width: 115px;
height: 115px;
cursor: pointer;
}/*# sourceMappingURL=home.css.map */