Minor Project

MINOR PROJECT
HTML CODE -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"href="Basic.css">
<link
href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css"
rel="stylesheet"
/>
<title>Document</title>
</head>
<body>
<div id="main">
<div id="nav">
<h1>Premier<sup> ©</sup></h1>
<h2>Models</h2>
<h2>Women/man</h2>
<h2>Agency/Blog/Information</h2>
<h2><i class="ri-search-line"></i></h2>
</div>
<div id="center">
<div id="content">
<video autoplay muted loop src="C:\Users\Harsh\Desktop\DIOR Fashion Film
2020 _ Directed by VIVIENNE & TAMAS.mp4"></video>
<div id="overlay">
<div id="over1">
<h1>Photography <br>and films</h1>
<h2>01</h2>
</div>
<div id="over2">
<h2>Explore</h2>
<h2><i class="ri-arrow-right-line"></i></h2>
</div>
</div>
</div>
</div>
<div id="scroll">
<div id="container">
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?
q=80&w=1964&auto=format&fit=crop&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="model">
<img src="https://images.unsplash.com/photo-1492106087820-71f1a00d2b11?
w=500&auto=format&fit=crop&q=60&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bW9kZWwlMjBwb3RyYWl0fGVufDB8fDB8fHww"
alt="model">
<img src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bW9kZWwlMjBwb3RyYWl0fGVufDB8fDB8fHww"
alt="model">
<img src="https://images.unsplash.com/photo-1441786485319-5e0f0c092803?
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fG1vZGVsJTIwcG90cmFpdHxlbnwwfHwwfHx8MA%3D
%3D" alt="model">
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fG1vZGVsJTIwcG90cmFpdHxlbnwwfHwwfHx8MA%3D
%3D" alt="model">
<img src="https://plus.unsplash.com/premium_photo-1710378174519-
45b81c0eebfb?w=500&auto=format&fit=crop&q=60&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMDR8fHxlbnwwfHx8fHw%3D" alt="model">
</div>
<div id="container">
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="model">
<img src="https://images.unsplash.com/photo-1492106087820-71f1a00d2b11?
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bW9kZWwlMjBwb3RyYWl0fGVufDB8fDB8fHww"
alt="model">
<img src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bW9kZWwlMjBwb3RyYWl0fGVufDB8fDB8fHww"
alt="model">
<img src="https://images.unsplash.com/photo-1441786485319-5e0f0c092803?
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fG1vZGVsJTIwcG90cmFpdHxlbnwwfHwwfHx8MA%3D
%3D" alt="model">
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fG1vZGVsJTIwcG90cmFpdHxlbnwwfHwwfHx8MA%3D
%3D" alt="model">
<img src="https://plus.unsplash.com/premium_photo-1710378174519-
45b81c0eebfb?w=500&auto=format&fit=crop&q=60&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMDR8fHxlbnwwfHx8fHw%3D" alt="model">
</div>
</div>
<div id="alphabat">
<h5>All</h5>
<h6>a</h6>
<h6>b</h6>
<h6>c</h6>
<h6>d</h6>
<h6>e</h6>
<h6>f</h6>
<h6>g</h6>
<h6>h</h6>
<h6>i</h6>
<h6>j</h6>
<h6>k</h6>
<h6>l</h6>
<h6>m</h6>
<h6>n</h6>
<h6>o</h6>
<h6>p</h6>
<h6>q</h6>
<h6>r</h6>
<h6>s</h6>
<h6>t</h6>
<h6>u</h6>
<h6>v</h6>
<h6>w</h6>
<h6>x</h6>
<h6>y</h6>
<h6>z</h6>
</div>
<div id="page2">
<div id="page2-part1">
<img src="https://images.unsplash.com/photo-1467632499275-7a693a761056?
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTF8fG1vZGVsJTIwYmVhY2h8ZW58MHx8MHx8fDA%3D">
<div id="h">
<h1>vogue/ shot</h1>
</div>
</div>
<img src="https://images.unsplash.com/photo-1543096222-72de739f7917?
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzB8fG1vZGVsJTIwYmVhY2h8ZW58MHx8MHx8fDA%3D"
alt="model">
<div id="hp">
<h3>Hannah Motler<br>features in a <br>fashion story by<br>the alke
for<br>Vogue new shoot</h3>
<p>Lorem ipsum dolor sit amet consectetur<br>adipisicing elit. Laborum
suscipit,<br>nulla ab repudiandae, tempora nesciunt <br>eos velit officia molestias
earum sequi <br>ipsum vero. Rerum, at.</p>
</div>
</div>
</div>
<div id="page3">
<div id="page3-left">
<img src="https://www.mockofun.com/wp-content/uploads/2020/03/circular-text-
3674.jpg">
<h2>Lorem ipsum dolor amet.<br> Molestiae tempore.<br>quos. Illo possimus
iste.<br>mollitia laudantium amet.</h2>
</div>
<div id="page3-right">
<img src="https://images.unsplash.com/photo-1678801868998-65a88613748a?
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8Z2lybCUyMGNhcnJ5aW5nJTIwYmFnJTIwb24lMjBoZWFk
fGVufDB8fDB8fHww" alt="bag">
</div>
</div>
<div id="page4">
<img src="https://img.freepik.com/free-photo/young-woman-black-smokes-
electronic-cigarette-dark-wall_231208-3620.jpg?
w=1060&t=st=1710953176~exp=1710953776~hmac=1c3b0e53c2a20c66f2dd3b464fb879691491c62b
55dc7beae771cf0a7c78011e" alt="black-model">
</div>
<div id="page5">
<h1>Updates</h1>
<div class="elem">
<h4>Men Fashion</h4>
<img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="men">
<div class="elem-part2">
<h1>Khadim & Tom Ford</h1>
<h5>25th March 2020</h5>
</div>
</div>
<div class="elem">
<h4>Women Fashion</h4>
<img src="https://images.unsplash.com/photo-1610276198568-eb6d0ff53e48?
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cG90cmFpdHxlbnwwfHwwfHx8MA%3D%3D"
alt="girl">
<h1>Arena homme</h1>
<h5>3rd February 2020</h5>
</div>
</div>
<div class="elem">
<h4>Special View</h4>
<img src="https://images.unsplash.com/photo-1493106819501-66d381c466f1?
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fHBvdHJhaXR8ZW58MHx8MHx8fDA%3D" alt="">
<h1>Jing for wonderland</h1>
<h5>14th January 2020</h5>
</div>
</div>
<div class="elem">
<h4>Models Talks</h4>
<img src="https://images.unsplash.com/photo-1618151313441-bc79b11e5090?
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fHBvdHJhaXR8ZW58MHx8MHx8fDA%3D" alt="">
<h1>Glass x Belle</h1>
<h5>08th January 2020</h5>
</div>
</div>
</div>
<div id="page6">
<img src="https://images.unsplash.com/photo-1519058082700-08a0b56da9b4?
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDJ8fHxlbnwwfHx8fHw%3D" alt="man">
</div>
<h1>Movie Shot</h1>
<h3>Lorem ipsum, dolor sit <br> amet consectetur <br>adipisicing elit
Ipsa.</h3>
<p>Lorem ipsum dolor sit, amet consectetur igreat minima deleniti aliquid
<br> debitis saepe asperiores repellendus ratione fugit, veroth<br> voluptatibus
tempora dolores tenetur quaerat.</p>
<div class="page6-part2-partb">
<img src="https://images.unsplash.com/photo-1517841416045-94ed85a4e7bd?
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDExfHx8ZW58MHx8fHx8" alt="">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
</div>
</div>
</div>
<div id="part7">
<img src="https://images.unsplash.com/photo-1590649880765-91b1956b8276?
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHdvbWVufGVufDB8fDB8fHww" alt="wide">
</div>
<div id="part8">
<div id="part8-left">
<img src="https://images.unsplash.com/photo-1588516903720-8ceb67f9ef84?
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fHdvbWVufGVufDB8fDB8fHww" alt="man">
</div>
<div id="part8-right">
<img src="https://images.unsplash.com/photo-1610509528015-e4c30d95a5cf?
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8ZmVtYWxlJTIwbW9kZWx8ZW58MHx8MHx8fDA%3D"
alt="women">
<div id="part8-rigth-hp">
<h2>Lorem ipsum dolor <br> sit amet consectetur<br> adipisicing elit.
Iure<br> velit modi officiit.</h2>
<p>Lorem ipsum dolor sit amet <br>consectetur adipisicing elit. Ut
cum<br>neque deleniti laudantium itaque.<br>necessitatibus nemo numquam.<br> quas
at molestiae architecto eius.</p>
</div>
</div>
</div>
<div id="part9">
<div id="navs">
<h1>Premier model 2020</h1>
</div>
<div id="part9-top">
<h1>BLOG</h1>
<h2>Lorem ipsum dolor sit amet <br> consectetur adipisicing elit.<br> Rem
veniam eaque in enim.<br> impedit hic ex dolorem error sunt.</h2>
<h2>Lorem ipsum dolor sit amet <br> consectetur adipisicing elit.<br> Rem
veniam eaque in enim.<br> impedit hic.</h2>
</div>
<div id="navy">
<h1>Premier<sup> ©</sup></h1>
<h2>Models</h2>
<h2>Women/man</h2>
<h2>Agency/Blog/Information</h2>
<h2><i class="ri-search-line"></i></h2>
</div>
</div>
</div>
</body>
</html>

CSS CODE ---->
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
html,body{
height: 100%;
width: 100%;
}
#main{
height: 100%;
width: 100%;
background-color:#f8f8f8;
position: relative;
padding-top: 1px;
}
#nav{
height: 10vh;
width: 100%;
/* background-color: gray; */
margin-top: 25px;
border-top: 2px solid black;
border-bottom: 2px solid black;
display: flex;
justify-content: space-between;
align-items: center;
}
#nav h1{
font-size: 40px;
height: 100%;
width: 16%;
display: flex;
justify-content: center;
font-family: Monument;
letter-spacing: -3px;
}
#nav h2{
font-size: 15px;
/* background-color: chartreuse; */
height: 100%;
width: 16%;
display: flex;
border-right: 3px solid black ;
padding-right: 40px;
}
#nav h2:nth-last-child(1){
width: 10%;
}
#nav h2:nth-last-child(2){
width: 20%;
}
#center{
height: 90vh;
width: 100%;
/* background-color: violet; */
/* border: 3px solid black; */
padding: 3vw;
position: relative;
}
#content{
height: 100%;
width: 100%;
/* background-color: yellow; */
position: relative;
}
#content video{
height: 100%;
width: 100%;
object-fit: cover;
}
#overlay{
height: 55%;
width: 100%;
position:absolute;
bottom: 0;
color: white;
padding: 3%;
}
#over1{
display: flex;
margin-bottom: 2vw;
}
#over2{
border-top: 2px solid #ffffff;
display: flex;
padding: 1.5vw 0;
}
#over1 h1{
font-size:6.5vh;
font-weight: 300px;
mix-blend-mode: difference;
}
#over1 h2{
font-size: 1vw;
padding: 1.8vw 2vw;
border: 2px solid white;
border-radius: 50%;
/* background-color: blue; */
}
#over2 h2{
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 4vh;
font-weight: 500px;
}
#scroll{
height: 40vh;
width: 100%;
/* background-color: red; */
white-space: nowrap;
overflow-x: hidden;
overflow-y: hidden;
}
#scroll img{
height: 95%;
border-radius: 50%;
width: 14.8%;
object-fit: cover;
object-position: 30% 30%;
margin: 1vw;
}
#container{
height: 100%;
width: 110%;
display: inline-block;
padding: 2vw;
animation-name: anime;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes anime {
from{
transform:translateX(0);
}
to{
transform: translateX(-100%);
}
}
#alphabat{
/* background-color: blueviolet; */
height: 10vh;
width: 100%;
display: flex;
gap:1vh;
}
#alphabat h5{
font-size: 1.7vw;
text-transform: uppercase;
font-weight: 400;
font-style: italic;
border-bottom: 2px solid rgb(0, 0, 0);
letter-spacing: 2px;
}
#alphabat h6{
font-size: 1vw;
font-weight: 400;
font-style: italic;
padding: 0.5vw 0.7vw;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0);
cursor: pointer;
margin-right: .6vh;
}
#alphabat h6:hover{
border: 2px solid rgba(0, 0, 0, 0);
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.218);
}
#page2{
height: 100%;
width: 100%;
display: flex;
padding:2vw 5vw;
}
#page2-part1{
height: 100%;
width: 50%;
/* background-image: url("https://images.unsplash.com/photo-1467632499275-
7a693a761056?w=500&auto=format&fit=crop&q=60&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTF8fG1vZGVsJTIwYmVhY2h8ZW58MHx8MHx8fDA%3D"); */
/* background-size: cover;
background-position: center; */
}
#page2-part1 img{
height: 86%;
width: 100%;
object-fit: cover;
object-position: top;
}
#h h1{
font-weight: 900;
padding-top: 10px;
}
#page2-part2{
height: 100%;
width: 46%;
}
#page2-part2 img{
height: 60%;
width: 100%;
object-fit: cover;
}
#hp{
display: flex;
/* padding: 15px; */
}
#hp h3{
padding-top: 15px;
font-weight: 600px;
}
#hp p{
padding-top: 15px;
font-size: 2.5vh;
font-weight: 600px;
}
#page3{
height: 100%;
width: 100%;
/* background-color: lightgreen; */
display: flex;
position: relative;
}
#page3-left{
height: 80%;
width: 50%;
justify-content: flex-start;
position: relative;
padding: 7vh;
}
#page3-left img{
height: 80%;
width:90%;
object-fit: cover;
padding: 10vh 0 0 15vh;
margin-left: 15vh;
margin-bottom: 10vh;
}
#page3-left h2{
font-size: 3vh;
font-weight: 700;
padding-left: 24vh;
}
#page3-right{
height: 90%;
width: 90%;
display: flex;
justify-content: flex-end;
margin-right: 15vh;
}
#page3-right img{
height: 90%;
width: 80%;
object-fit: cover;
}
#page4{
height: 100%;
width: 100%;
/* background-color: cadetblue; */
display: flex;
}
#page4 img{
height: 90%;
width: 90%;
object-fit: cover;
padding: 5vh;
}
#page5{
height: 100%;
width: 100%;
position: relative;
padding: 5vw 4vw;
}
#page5>h1{
text-align: center;
font-size: 3vw;
font-weight: 900;
margin-bottom: 7vh;
}
.elem{
height: 15vh;
width: 100%;
/* background-color: coral; */
display: flex;
padding: 0 2vw;
position: relative;
}
.elem h4{
font-size: 1.5vw;
font-weight: 500;
width: 6%;
}
.elem img{
height: 13vh;
width: 13vh;
object-fit: cover;
border-radius: 50%;
position: absolute;
left: 12%;
opacity: 0;
transition: all ease 0.7s;
}
.elem:hover img{
opacity: 1;
left: 25%;
}
.elem .elem-part2{
width: 45%;
}
.elem-part2 h1{
font-size: 3vw;
font-weight: 500;
}
.elem-part2 h5{
font-size: 1vw;
font-weight: 600;
}
.elem:nth-last-child(1){
border-bottom:2px solid black;
}
#page6{
height: 100%;
width: 100%;
/* background-color: aquamarine; */
display: flex;
}
#page6-part1{
height: 100%;
width: 50%;
padding: 8vh;
}
#page6-part1 img{
height: 100%;
width: 100%;
object-fit: cover;
padding-left: 5vh;
}
#page6-part2 h1{
padding: 6vh 0 1vh 5vh;
font-weight: 900;
}
#page6-part2 h3{
font-weight: 500;
line-height: 4vh;
}
#page6-part2 p{
font-size: 2.5vh;
font-weight: 500;
}
.page6-part2-partb{
height: 50%;
width: 40%;
display: flex;
}
.page6-part2-partb img{
height: 80%;
width: 80%;
object-fit: cover;
margin: 6vh;
display: flex;
}
#part7{
height: 100%;
width: 100%;
padding: 6vh;
}
#part7 img{
height: 100%;
width: 100%;
object-fit: cover;
}
#part8{
height: 100%;
width: 100%;
/* background-color: beige; */
position: relative;
display: flex;
}
#part8-left{
height: 90%;
width: 50%;
display: flex;
padding-left: 5vh;
}
#part8-left img{
height: 90%;
width: 90%;
object-fit: cover;
}
#part8-right{
height: 90%;
width: 50%;
/* display: flex;
align-items: center; */
padding-right: 5vh;
}
#part8-right img{
height: 80%;
width: 80%;
object-fit: cover;
padding: 5vh;
}
#part8-rigth-hp{
height: 12%;
width: 100%;
display: flex;
}
#part8-rigth-hp h2{
font-size: 3vh;
padding-left: 5vh;
font-weight: 500;
}
#part8-rigth-hp p{
font-size: 2.2vh;
padding-right: 24vh;
}
#part9{
height: 100%;
width: 100%;
/* background-color: violet; */
}
#navs{
height: 10%;
width: 100%;
/* background-color: deepskyblue; */
border: 2px solid black;
/* display: inline-block;
align-items: center; */
white-space: nowrap;
overflow-x: hidden;
overflow-y: hidden;
}
#navs h1{
display: inline-block;
-webkit-text-stroke: 2px black;
color: transparent;
font-weight: 900;
animation-name: move;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes move {
from{
transform: translate(0);
}
to{
transform: translate(calc(-100% - 4px));
}
}
#part9-top{
height: 40%;
width: 100%;
display: flex;
padding: 20vh;
}
#part9-top h1{
font-weight: 900;
padding: 0vh 0vh 13vh 8vh;
}
#part9-top h2{
font-size: 3.1vh;
padding: 10vh;
}
#navy{
height: 10vh;
width: 100%;
/* background-color: gray; */
margin-top: 40vh;
display: flex;
}
#navy h1{
font-size: 40px;
height: 100%;
width: 16%;
display: flex;
font-family: Monument;
}
#navy h2{
font-size: 15px;
height: 100%;
width: 16%;
display: flex;
border-right: 3px solid black ;
padding-right: 40px;
}
#navy h2:nth-last-child(1){
width: 10%;
}
#navy h2:nth-last-child(2){
width: 20%;
}

Minor Project

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Minor Project

Uploaded by

Copyright:

Available Formats

MINOR PROJECT

HTML CODE -->

CSS CODE ---->

You might also like