Skip to content
Permalink
Browse files

Added animation and some other random shit

  • Loading branch information...
LJEsp committed Apr 2, 2018
1 parent 9e8ec7b commit 7f274b5b3c609193cff5f0d3c877654462558d5c
Showing with 83 additions and 27 deletions.
  1. +71 −16 css/main.css
  2. +7 −7 css/mq-900-plus.css
  3. +5 −4 index.html
@@ -99,30 +99,30 @@ header section section {

/* LEFT SIDE */

header section section.contact {
header section.contact {
display: none;
}

header section section.contact svg {
header section.contact svg {
width: 1rem;
height: 1rem;

/* vertical-align: middle; */
}

header section section.contact svg#email-fix {
header section.contact svg#email-fix {
position: relative;
top: 3px;
}

/* RIGHT SIDE */

header section section.social {
header section.social {
display: flex;
flex-flow: row nowrap;
}

header section section.social .social-icons {
header section.social .social-icons {
width: 1.5rem;
height: 1.5rem;
margin: 0 0.5rem;
@@ -156,20 +156,20 @@ header > nav > ul a {
text-align: center;
color: white;
background-color: lightseagreen;
border: 1px solid white;
border-right: 1px solid white;

font-size: 0.9rem;

transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}

header > nav > ul a:hover {
background-color: rgb(32, 158, 145);
}

header > nav > ul a:first-child {
border-left: unset;
}
header > nav > ul a:last-child {
border-right: unset;
border: none;
}

.sticky {
@@ -204,28 +204,61 @@ header > nav > ul a:last-child {
font-weight: 800;
margin-top: 6rem;
margin-bottom: 1rem;

animation: moveInRight 1s 0.5s both;
}

#discover h2 {
font-size: 1.5rem;
animation: moveInRight 1s 1s both;
}

@keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(2rem);
}

100% {
opacity: 1;
transform: 0;
}
}

#discover a {
color: white;
background-color: rgba(177, 80, 0, 0.6);
box-shadow: 0 0.2rem 0.6rem 0 rgba(105, 105, 105, 0.5);
border: 2px solid white;
border-radius: 1rem;
border-radius: 100rem;

padding: 0.6rem 1rem;
margin: 0.5rem auto;
margin-top: 1rem;

transition-duration: 0.1s;
transition-timing-function: ease-in-out;

animation: moveInBottom 1s 1.5s both;
}

@keyframes moveInBottom {
0% {
opacity: 0;
transform: translateY(2rem);
}

100% {
opacity: 1;
transform: 0;
}
}

#discover a:hover {
background-color: rgba(177, 80, 0, 0.9);
box-shadow: 0 0.2rem 0.3rem 0 rgba(105, 105, 105, 0.5);

position: relative;
top: 0.1rem;
transform: translateY(0.1rem);
}

/* //////////////////////// DESTINATIONS //////////////////////// */
@@ -260,6 +293,12 @@ header > nav > ul a:last-child {
margin-right: 1rem;

object-fit: cover;
transition: all 0.1s;
}

#destinations article img:hover {
transform: scale(1.1);
box-shadow: 0 0.2rem 0.7rem 0 rgba(105, 105, 105, 0.6);
}

#destinations article div {
@@ -282,20 +321,22 @@ header > nav > ul a:last-child {
font-weight: 700;
color: lightseagreen;
border: 2px solid lightseagreen;
border-radius: 1rem;
border-radius: 100rem;

height: fit-content;

padding: 0.6rem 1rem;
margin: 0.5rem auto;
margin-bottom: 2rem;

transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}

#destinations button:hover {
box-shadow: 0 0.2rem 0.3rem 0 rgba(105, 105, 105, 0.5);

position: relative;
top: 0.1rem;
transform: translateY(0.1rem);
}

/* //////////////////////// INQUIRE/ABOUT //////////////////////// */
@@ -421,11 +462,25 @@ textarea {
margin-bottom: 0.5rem;
background-color: white;
box-shadow: 0 0.3rem 1rem 0 rgba(16, 92, 88, 0.8);

transition: 0.1s;
}

#about-us section#team img:hover {
border: 0.25rem solid white;
transform: scale(1.1);
box-shadow: 0 0.3rem 1.3rem 0 rgba(16, 92, 88, 0.5);
}

#about-us section#team img:hover + h2 {
transform: translateY(0.3rem);
}

#about-us section#team h2 {
font-size: 1rem;
margin-bottom: 1rem;

transition: 0.1s 0.2s;
}

#about-us h2#amazing {
@@ -10,8 +10,10 @@ body {
background-size: cover;
background-origin: border-box;
background-attachment: fixed;
}

box-shadow: 0 0 3rem 0 dimgray;
header, body > section, footer {
/* box-shadow: 0 0 1rem 0 dimgray; */
}

/* //////////////////////// HEADER //////////////////////// */
@@ -26,7 +28,7 @@ body {
padding: 2rem;
}

header section section.contact {
header section.contact {
display: initial;
}

@@ -53,10 +55,9 @@ header section section.contact {
}

#destinations button {
padding: 0.6rem 1rem;
margin: 1rem auto;
margin-bottom: 1.5rem;

padding: 0.6rem 1rem;
margin: 1rem auto;
margin-bottom: 1.5rem;
}

/* //////////////////////// INQUIRE/ABOUT //////////////////////// */
@@ -65,7 +66,6 @@ header section section.contact {
padding: 1rem 6rem;
}


#about-us section#team img {
width: 11rem;
height: 11rem;
@@ -138,7 +138,7 @@ <h1>Swooping&nbspEagles</h1>

<nav>
<ul>
<a href="#discover">
<a href="#discover" id="home">
<li>Home</li>
</a>
<a href="#destinations-bm">
@@ -362,10 +362,12 @@ <h2>Mark</h2>
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem quidem repellendus iure esse eos officiis illo vitae
perferendis maxime reiciendis tempore facilis labore natus culpa tenetur asperiores, molestias delectus iusto?</p>
perferendis maxime reiciendis tempore facilis labore natus culpa tenetur asperiores, molestias delectus iusto?
</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem quidem repellendus iure esse eos officiis illo vitae
perferendis maxime reiciendis tempore facilis labore natus culpa tenetur asperiores, molestias delectus iusto?</p>
perferendis maxime reiciendis tempore facilis labore natus culpa tenetur asperiores, molestias delectus iusto?
</p>

<h2>Connect with us!</h2>
<section class="social">
@@ -397,7 +399,6 @@ <h2>Connect with us!</h2>
<footer>
<p>Copyright © 2018 Swooping Eagles</p>
</footer>

</body>

</html>

0 comments on commit 7f274b5

Please sign in to comment.
You can’t perform that action at this time.