Hey guys so I just recently developed a site for myself to host all my content.
I have two massive questions I cannot seem to figure out.
Question 1: I am using the AOS (Animate On Scroll) library. But on some browsers when I scroll down only two out of the seven divs or stories show, but on mobile it shows completely fine on scroll.
Question 2: On smaller screens, I notice that when on smaller screens (example: MacBook Pro 13in) my 'Gallery Section' essentially becomes undone - it looks terrible. I'm in desperate need for these two issues to be fixed. I am aware the codes formatting is off, I will fix that soon. Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap" rel="stylesheet">
<title>Joshua Deosaran's Portfolio</title>
<link rel="shortcut icon" type="image/png" href="./resources/images/favicon.svg">
</head>
<body>
<div class="progress" style="height: 5px;">
<div class="progress-bar bg-warning" id="progressbar" role="progressbar" style="width: 0%;" aria-valuenow="25"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="container">
<div class="nav-wrapper">
<div class="left-side">
<div class="nav-link-wrapper">
<a href="index.html">Home</a>
</div>
<div class="nav-link-wrapper">
<a href="about.html">About</a>
</div>
</div>
<div class="right-side">
<div class="brand">
<div>Joshua Deosaran</div>
</div>
</div>
</div>
</div>
<div class="gallery-section" data-aos-duration="3000">
<h1>GALLERY</h1>
<h2>Harlem Globetrotters</h2>
<div class="feature-story">
<div class="main-story">
<video src="./resources/videos/Harlem Globetrotters - Rube Goldberg Daily Planet.mp4" controls
poster="./resources/images/globtrottersRubegoldberg.png"></video>
</div>
</div>
<!--MOVIE 1-->
<div class="feature-stories">
<h4>Mt. Everst climb</h4>
<div class="movie-1" data-aos="fade-right" data-aos-duration="3000">
<video src="./resources/videos/John Farnworth - Mt. Everest - Daily Planet.mp4" controls
poster="./resources/images/John-Farnworth.jpg"></video>
<div class="movie1-text" data-aos="fade-left" data-aos-duration="3000">
<div class="movie-text-header" id="moveleft">Mt.Everest</div>
<div class="sizer">
*TEXT*
</div>
</div>
</div>
</div>
<div class="mobiledescription" data-aos="fade-left" data-aos-duration="3000">
*TEXT*
</div>
<!--MOVIE2-->
<div class="feature-stories">
<h4>Mantis wears 3D glasses</h4>
<div class="movie-2" data-aos="fade-left" data-aos-duration="3000">
<div class="movie1-text" data-aos="fade-right" data-aos-duration="3000">
<div class="movie-text-header">Manits wears 3D-Glasses</div>
*TEXT*
</div>
<video src="./resources/videos/Praying Mantis Stereovision - Daily Planet.mp4" controls
poster="./resources/images/mantis3d.jpg"></video>
</div>
</div>
<div class="mobiledescription" data-aos="fade-right" data-aos-duration="3000">
*TEXT*
</div>
<!--MOVIE3-->
<div class="feature-stories">
<h4>Dyson Orchestra</h4>
<div class="movie-1" data-aos="fade-right" data-aos-duration="3000">
<video src="./resources/videos/Dyson Orchestra - Daily Planet.mp4" controls
poster="./resources/images/dysonorchestra.jpg"></video>
<div class="movie1-text" data-aos="fade-left" data-aos-duration="3000">
<div class="movie-text-header" id="moveleft">Dyson Orchestra</div>
<div class="sizer">
*TEXT*
</div>
</div>
</div>
</div>
<div class="mobiledescription" data-aos="fade-left" data-aos-duration="3000">
Dyson's engineers make instruments from their vacuum tubes and other components.
</div>
<!--MOVIE4-->
<div class="feature-stories">
<h4>Twilight Zone discovered</h4>
<div class="movie-2" data-aos="fade-left" data-aos-duration="3000">
<div class="movie1-text" data-aos="fade-right" data-aos-duration="3000">
<div class="movie-text-header">Twilight zone discovered</div>
*TEXT*
</div>
<video src="./resources/videos/Rariphotic Zone Discovery Smithsonian - Daily Planet.mp4" controls
poster="./resources/images/TwilightZone.jpg"></video>
</div>
</div>
<div class="mobiledescription" data-aos="fade-right" data-aos-duration="3000">
*TEXT*
</div>
<!--MOVIE5-->
<div class="feature-stories">
<h4>Little Tikes car flies</h4>
<div class="movie-1" data-aos="fade-right" data-aos-duration="3000">
<video src="./resources/videos/Little Tikes - Flite Test - Daily Planet.mp4" controls
poster="./resources/images/littletikes.png"></video>
<div class="movie1-text" data-aos="fade-left" data-aos-duration="3000">
<div class="sizer">
<div class="movie-text-header">Little Tikes car flies</div>
*TEXT*
</div>
</div>
</div>
</div>
<div class="mobiledescription" data-aos="fade-left" data-aos-duration="3000">
*TEXT*
</div>
<!--MOVIE6-->
<div class="feature-stories">
<h4>Stephen Hawking - Life in numbers</h4>
<div class="movie-2" data-aos="fade-left" data-aos-duration="3000">
<div class="movie1-text" data-aos="fade-right" data-aos-duration="3000">
<div class="movie-text-header">Stephen Hawking - Life in numbers</div>
*TEXT*
</div>
<video src="./resources/videos/Stephen Hawking Life in Numbers - Daily Planet.mp4" controls
poster="./resources/images/shawking.jpg"></video>
</div>
</div>
<div class="mobiledescription" data-aos="fade-right" data-aos-duration="3000">
*TEXT*
</div>
<!--MOVIE7-->
<div class="feature-stories">
<h4>Was it a UFO?</h4>
<div class="movie-1" data-aos="fade-right" data-aos-duration="3000">
<video src="./resources/videos/ESA CLUSTER UFO - Daily Planet.mp4" controls
poster="./resources/images/ESAcluster.jpg"></video>
<div class="movie1-text" data-aos="fade-left" data-aos-duration="3000">
<div class="movie-text-header" id="moveleft">Was it a UFO?</div>
<div class="sizer">
*TEXT*
</div>
</div>
</div>
</div>
<div class="mobiledescription" data-aos="fade-left" data-aos-duration="3000">
</div>
</div>
<h3 class="splitheader">top10</h3>
<div class="top10">
<div class="top10-header">
<h1>TOP 10's</h1>
</div>
<div class="top10-videos">
<div class="first-two">
<div class="top10-1"><video src="./resources/videos/Top 10 - Things astronauts do in space.mp4" controls
poster="./resources/images/astronautsinspacethumbnail.jpg"
poster="./resources/images/astroSpinner.jpg"></video>
</div>
<div class="top10-1"><video
src="./resources/videos/Top 10 - World's Biggest Displays - Daily Planet.mp4" controls
poster="./resources/images/displaysthumbnails.jpg"></video>
</div>
</div>
<div class="second-two">
<div class="top10-1"><video src="./resources/videos/Top 10 - Extreme Adventures - Daily Planet.mp4"
controls poster="./resources/images/extremeadventuresthumbnail.jpg"></video></div>
<div class="top10-1"><video src="./resources/videos/Top 10 - Holograms - Daily Planet.mp4" controls
poster="./resources/images/holothumbnail.jpg"></video>
</div>
</div>
<div class="third-two">
<div class="top10-1"><video src="./resources/videos/Top 10 - High Tech Sneakers - Daily Planet.mp4"
controls poster="./resources/images/Hightechsneakersthumbnail.png.jpg"></video></div>
<div class="top10-1"><video src="./resources/videos/Top 10 - Robots that play sports - Daily Planet.mp4"
controls poster="./resources/images/robotsthumbnail.jpg"></video></div>
</div>
</div>
</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script src="main.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body>
</html>
CSS
/* GALLERY PAGE ------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.gallery-section {
min-height: 100vh;
overflow-x: hidden;
/*width: 94%*/
background-color: #fff;
}
.gallery-section h1 {
font-family: 'Bebas Neue', cursive;
font-size: 7rem;
padding-left: 1rem;
}
.feature-story {
height: 70vh;
display: flex;
justify-content: center;
}
.gallery-section h2 {
display: flex;
justify-content: center;
font-family: 'Bebas Neue', cursive;
font-size: 3rem;
}
.gallery-section .feature-story .main-story video {
padding-bottom: 4rem;
height: 100%;
}
.feature-stories h4 {
display: none;
}
.mobiledescription {
display: none;
}
.feature-stories .movie1-text {
width: 60%;
margin: 100px;
padding-right: 200px;
text-align: center;
}
.feature-stories .movie2-text {
width: 60%;
margin: 100px;
padding-left: 200px;
text-align: center;
}
.movie-text-header {
font-family: 'Bebas Neue', cursive;
font-size: 3rem;
color: silver;
}
#moveleft {
margin-left: 25rem;
}
.sizer {
width: 100%;
margin-left: 12rem;
}
.movie-1 {
display: flex;
justify-content: flex-start;
padding-left: 100px;
}
.movie-2 {
display: flex;
justify-content: flex-end;
padding-right: 100px;
}
.movie-3 {
display: flex;
justify-content: flex-start;
padding-left: 100px;
}
.movie-4 {
display: flex;
justify-content: flex-end;
padding-right: 100px;
}
Aucun commentaire:
Enregistrer un commentaire