mirror of
https://github.com/Rushilwiz/mooreyoga.git
synced 2025-04-03 19:40:16 -04:00
feat: added about and WIP on other sections
This commit is contained in:
parent
2b2de10f21
commit
6e99ed7bda
|
|
@ -14,7 +14,7 @@ nav
|
|||
width: 100%
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: space-between
|
||||
justify-content: space-around
|
||||
align-items: center
|
||||
|
||||
.box
|
||||
|
|
@ -22,5 +22,26 @@ nav
|
|||
width: 100%
|
||||
background-color: #fffdfdb4
|
||||
border-radius: 25px
|
||||
display: none
|
||||
|
||||
#menu-box
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
|
||||
.hamburger
|
||||
width: 50%
|
||||
height: 50%
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: space-around
|
||||
align-items: center
|
||||
|
||||
@each $index in [1,2,3]
|
||||
.line-#{$index}
|
||||
height: 8px
|
||||
width: 100%
|
||||
background: black
|
||||
border-radius: 8px
|
||||
|
||||
|
||||
|
|
@ -2,52 +2,65 @@ html, body {
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
margin-left: 45px;
|
||||
height: 100vh;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
nav .menu {
|
||||
margin: auto auto;
|
||||
height: 75%;
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav .menu .box {
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
background-color: #fffdfdb4;
|
||||
background-color: rgba(255, 253, 253, 0.7058823529);
|
||||
border-radius: 25px;
|
||||
display: none;
|
||||
}
|
||||
nav .menu #menu-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
nav .menu #menu-box .hamburger {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
nav .menu #menu-box .hamburger .line-1 {
|
||||
height: 8px;
|
||||
width: 100%;
|
||||
background: black;
|
||||
border-radius: 8px;
|
||||
}
|
||||
nav .menu #menu-box .hamburger .line-2 {
|
||||
height: 8px;
|
||||
width: 100%;
|
||||
background: black;
|
||||
border-radius: 8px;
|
||||
}
|
||||
nav .menu #menu-box .hamburger .line-3 {
|
||||
height: 8px;
|
||||
width: 100%;
|
||||
background: black;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -75,30 +88,73 @@ section {
|
|||
}
|
||||
|
||||
.hero {
|
||||
z-index: -1;
|
||||
background: #242828;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero div {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero .background {
|
||||
background: #242828 url("/css/res/img/background.png") bottom no-repeat;
|
||||
}
|
||||
|
||||
.hero .foreground {
|
||||
background: url("/css/res/img/foreground.png") bottom no-repeat;
|
||||
}
|
||||
|
||||
.hero .text {
|
||||
.hero .text #moore {
|
||||
position: fixed;
|
||||
background: url("/css/res/img/text.png") center no-repeat;
|
||||
background: url("/css/res/img/moore.png") left no-repeat;
|
||||
background-position: 15% 10%;
|
||||
background-size: 35%;
|
||||
}
|
||||
.hero .text #yoga {
|
||||
position: fixed;
|
||||
background: url("/css/res/img/yoga.png") right no-repeat;
|
||||
background-position: 80% 60%;
|
||||
background-size: 30%;
|
||||
}
|
||||
|
||||
.intro {
|
||||
background: yellow;
|
||||
.about {
|
||||
z-index: 999;
|
||||
background: #DBD7CB;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
.about .row {
|
||||
height: 100%;
|
||||
width: 90%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.about .row img {
|
||||
width: 30%;
|
||||
}
|
||||
.about .row .info {
|
||||
display: inline-block;
|
||||
height: 70%;
|
||||
width: -webkit-fit-content;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
.about .row .info h1 {
|
||||
font-size: 4em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.video {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.video iframe {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}/*# sourceMappingURL=main.css.map */
|
||||
|
|
@ -2,9 +2,10 @@ section
|
|||
height: 100vh
|
||||
|
||||
.hero
|
||||
z-index: -1
|
||||
background: #242828
|
||||
width: 100%
|
||||
// position:
|
||||
position: relative
|
||||
|
||||
div
|
||||
position: absolute
|
||||
|
|
@ -18,9 +19,52 @@ section
|
|||
background: url('/css/res/img/foreground.png') bottom no-repeat
|
||||
|
||||
.text
|
||||
position: fixed
|
||||
background: url('/css/res/img/text.png') center no-repeat
|
||||
#moore
|
||||
position: fixed
|
||||
background: url('/css/res/img/moore.png') left no-repeat
|
||||
background-position: 15% 10%
|
||||
background-size: 35%
|
||||
|
||||
#yoga
|
||||
position: fixed
|
||||
background: url('/css/res/img/yoga.png') right no-repeat
|
||||
background-position: 80% 60%
|
||||
background-size: 30%
|
||||
|
||||
.about
|
||||
z-index: 999
|
||||
background: #DBD7CB
|
||||
display: flex
|
||||
flex-direction: row
|
||||
justify-content: flex-end
|
||||
|
||||
.intro
|
||||
background: yellow
|
||||
.row
|
||||
height: 100%
|
||||
width: 90%
|
||||
display: flex
|
||||
flex-direction: row
|
||||
justify-content: center
|
||||
align-items: center
|
||||
|
||||
img
|
||||
width: 30%
|
||||
|
||||
.info
|
||||
display: inline-block
|
||||
height: 70%
|
||||
width: fit-content
|
||||
|
||||
h1
|
||||
font-size: 4em
|
||||
margin-top: 0
|
||||
|
||||
.video
|
||||
position: relative
|
||||
overflow: hidden
|
||||
|
||||
iframe
|
||||
height: 100%
|
||||
width: 100%
|
||||
position: absolute
|
||||
left: 0
|
||||
top: 0
|
||||
|
|
|
|||
BIN
site/css/res/img/moore.png
Normal file
BIN
site/css/res/img/moore.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
site/css/res/img/profile.png
Normal file
BIN
site/css/res/img/profile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 485 KiB |
BIN
site/css/res/img/yoga.png
Normal file
BIN
site/css/res/img/yoga.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
|
|
@ -12,7 +12,13 @@
|
|||
<div class="menu">
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box" id="menu-box">
|
||||
<div class="hamburger">
|
||||
<div class="line-1"></div>
|
||||
<div class="line-2"></div>
|
||||
<div class="line-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
|
|
@ -20,15 +26,29 @@
|
|||
|
||||
<section class="hero">
|
||||
<div class="background"></div>
|
||||
<div class="text">Moore Yoga</div>
|
||||
<div class="text">
|
||||
<div id="moore"></div>
|
||||
<div id="yoga"></div>
|
||||
</div>
|
||||
<div class="foreground"></div>
|
||||
</section>
|
||||
<!-- <section class="intro">
|
||||
<h1>hi! I'm denise</h1>
|
||||
|
||||
<section class="about">
|
||||
<div class="row">
|
||||
<img src="css/res/img/profile.png" alt="Image of Denise Moore." class="profile">
|
||||
<div class="info">
|
||||
<h1>Hi. I'm <span class="name">Denise</span></h1>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique, eligendi dolorum? Id repellat consectetur cumque inventore eos doloribus? Ipsam numquam culpa nisi sequi earum quibusdam quis, quo fugiat deserunt aliquid! Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, sint optio. Aliquam voluptates id nesciunt quod! Numquam, officiis harum tempora nesciunt exercitationem corrupti velit, aliquam natus facere dignissimos, quas nisi.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer>
|
||||
<p>© 2022 Moore Yoga</p>
|
||||
</footer> -->
|
||||
<script src="app.js"></script>
|
||||
|
||||
<section class="video">
|
||||
<iframe src="https://www.youtube.com/embed/ja8pA2B0RR4" frameborder="0" allowfullscreen></iframe>
|
||||
</section>
|
||||
<section class="testimonials"></section>
|
||||
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
4
site/js/app.js
Normal file
4
site/js/app.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
$(window).scroll(() => {
|
||||
let percent = $(document).scrollTop() / ($(document).height() - $(window).height());
|
||||
$('.text').css('opacity', .9 - percent)
|
||||
})
|
||||
2
site/js/jquery.min.js
vendored
Normal file
2
site/js/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user