Skip to content

Commit

Permalink
add optomisation for accesibility and seo
Browse files Browse the repository at this point in the history
  • Loading branch information
unknown committed Mar 17, 2019
1 parent d189910 commit a7196f2
Show file tree
Hide file tree
Showing 4 changed files with 109 additions and 106 deletions.
2 changes: 2 additions & 0 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -292,6 +292,8 @@ option {
.socials {
border-bottom: 1px solid #515e70;
padding-bottom: 10px; }
.socials a:hover .header__link {
transform: scale(1.2); }
.logon,
.lang {
width: 100%; }
Expand Down
197 changes: 99 additions & 98 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,112 +17,113 @@
<body>
<div class="preloader">
<div class="logo-anim">
<img src="./images/logo.png"></div>
<img src="./images/logo.png">
</div>
</div>
<header>
<header class="header">
<div class="logo">
<img src="./images/logo.png" alt="Yacht Marine">
</div>
<nav class="navbar navbar-expand-lg navbar-dark p-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

<header class="header">
<div class="logo">
<img src="./images/logo.png" alt="Yacht Marine">
</div>
<nav class="navbar navbar-expand-lg navbar-dark p-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-column " id="navbarSupportedContent">
<div class="header__top-wrapper p-0">
<div class="header__top mycontainer p-0">
<div class="contacts left ">
<a href="tel:+9965553453 " class="header__link "><img src="./images/icon/fa-mobile-phone.svg " alt="phone number " class="header__icon ">996 - 5553 - 453</a>
<a href="mailto:info@shopy.com " class="header__link isbefore"> <img src="./images/icon/fa-envelope.svg " alt="email " class="header__icon isbefore">info@shopy.com</a>
<div class="collapse navbar-collapse flex-column " id="navbarSupportedContent">
<div class="header__top-wrapper p-0">
<div class="header__top mycontainer p-0">
<div class="contacts left ">
<a href="tel:+9965553453 " class="header__link "><img src="./images/icon/fa-mobile-phone.svg " alt="phone number " class="header__icon ">996 - 5553 - 453</a>
<a href="mailto:info@shopy.com " class="header__link isbefore"> <img src="./images/icon/fa-envelope.svg " alt="email " class="header__icon isbefore">info@shopy.com</a>
</div>
<div class="right ">
<div class="socials">
<a href="#"><img src="./images/icon/fa-facebook-square.svg " alt="facebook icon " class="header__icon "></a>
<a href="#"><img src="./images/icon/fa-twitter-square.svg " alt="twitter icon " class="header__icon "></a>
<a href="#"><img src="./images/icon/fa-youtube-play.svg " alt="youtube icon " class="header__icon "></a>
</div>
<div class="login isbefore">
<a href="#" class="header__link "><img src="./images/icon/fa-key.svg " alt="login icon " class="header__icon">Login</a>
</div>
<div class="right ">
<div class="socials">
<a href="#"><img src="./images/icon/fa-facebook-square.svg " alt="facebook icon " class="header__icon "></a>
<a href="#"><img src="./images/icon/fa-twitter-square.svg " alt="twitter icon " class="header__icon "></a>
<a href="#"><img src="./images/icon/fa-youtube-play.svg " alt="youtube icon " class="header__icon "></a>
</div>
<div class="login isbefore">
<a href="#" class="header__link "><img src="./images/icon/fa-key.svg " alt="login icon " class="header__icon">Login</a>
</div>
<div class="lang isbefore">
<a href="#" class="header__link "><img src="./images/icon/fa-globe.svg " alt="globe icon " class="header__icon">EN</a>
</div>
<div class="lang isbefore">
<a href="#" class="header__link "><img src="./images/icon/fa-globe.svg " alt="globe icon " class="header__icon">EN</a>
</div>
</div>
</div>
<ul class="navbar-nav header__bottom mycontainer ">
<div class="left ">
<li class="nav-item">
<a class="nav-link " href="# ">Home <span class="sr-only ">(current)</span></a>
</li>
<li class="nav-item ">
<a class="nav-link " href="# ">Our fleet</a>
</li>
<li class="nav-item ">
<a class="nav-link " href="# ">Drivers</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="# ">Locations</a>
</li>
</div>
<div class="right ">
<li class="nav-item ">
<a class="nav-link " href="# ">About<span class="sr-only ">(current)</span></a>
</li>
<li class="nav-item ">
<a class="nav-link " href="# ">Testimonials</a>
</li>
<li class="nav-item ">
<a class="nav-link " href="# ">News</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="# ">Contact</a>
</li>
</div>
</ul>
</div>
</nav>
</header>
<section class="hero mycontainer">
<div class="hero__main">
<h1 class="hero__title anim">Luxury crewed catamaran fllet</h1>
<span class="anchor"><img src="./images/icon/fa-anchor.svg" alt="anchor icon"></span>
<div class="hero__text anim">Yacht charter and yacht investments in Spain. Luxury crewed and bareboat catamarans. Charter in Spain. Lagoon catamarans. Bali catamarans. Monofleet More 55 ft.</div>
<button type="button" class="details-btn anim">details</button>
<ul class="navbar-nav header__bottom mycontainer ">
<div class="left ">
<li class="nav-item">
<a class="nav-link " href="# ">Home <span class="sr-only ">(current)</span></a>
</li>
<li class="nav-item ">
<a class="nav-link " href="# ">Our fleet</a>
</li>
<li class="nav-item ">
<a class="nav-link " href="# ">Drivers</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="# ">Locations</a>
</li>
</div>
<div class="right ">
<li class="nav-item ">
<a class="nav-link " href="# ">About<span class="sr-only ">(current)</span></a>
</li>
<li class="nav-item ">
<a class="nav-link " href="# ">Testimonials</a>
</li>
<li class="nav-item ">
<a class="nav-link " href="# ">News</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="# ">Contact</a>
</li>
</div>
</ul>
</div>
<div class="search anim">
<div class="search__wrap">
<select class="search__name">
</nav>
</header>
<section class="hero mycontainer">
<div class="hero__main">
<h1 class="hero__title anim">Luxury crewed catamaran fllet</h1>
<span class="anchor"><img src="./images/icon/fa-anchor.svg" alt="anchor icon"></span>
<div class="hero__text anim">Yacht charter and yacht investments in Spain. Luxury crewed and bareboat catamarans. Charter in Spain. Lagoon catamarans. Bali catamarans. Monofleet More 55 ft.</div>
<button type="button" class="details-btn anim">details</button>
</div>
<div class="search anim">
<div class="search__wrap">
<select class="search__name" aria-label="searchByName">
<option selecteded>YACHT NAME</option>
<option>name1</option>
<option>name2</option>
<option>name3</option>
</select>
</div>
<div class="search__price">
<div class="search__currency">
PRICE &nbsp;<span class="funt">£</span> /<span class="funt"></span> €</span> / <span class="funt"></span>$</span>
</div>
<div class="search__price">
<div class="search__currency">
PRICE &nbsp;<span class="funt">£</span> /<span class="funt"></span> €</span> / <span class="funt"></span>$</span>
</div>
<span class="search__rangePrice rangePrice">0 M - 200 M</span>
<input type="range" multiple value="10,200" step="1" max="200" min="0">
</div>
<div class="search__charact-wrap">
<input type="search" placeholder="SEARCH" class="search__charact">
<button type="button" class="search__btn"></button>
</div>
<div>
<button type="button" class="search__detailed">DETAILED SEARCH &nbsp;&nbsp;<img src="./images/icon/Shape 1.svg"></button>
</div>
<span class="search__rangePrice rangePrice">0 M - 200 M</span>
<input type="range" multiple value="10,200" step="1" max="200" min="0" aria-label="search-by-price">
</div>
<div class="search__charact-wrap">
<input type="search" placeholder="SEARCH" class="search__charact" aria-label="searchByCharact">
<button type="button" class="search__btn" aria-label="button for search by characters"></button>
</div>
<div>
<button type="button" class="search__detailed">DETAILED SEARCH &nbsp;&nbsp;<img src="./images/icon/Shape 1.svg" alt="search button"></button>
</div>
<div class="hero__adapt anim">
<button type="button" class="hero__adapt-btn" data-toggle="modal" data-target="#exampleModal3">YACHT SEARCH</button>
<!-- Button trigger modal -->
<!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal3">
</div>
<div class="hero__adapt anim">
<button type="button" class="hero__adapt-btn" data-toggle="modal" data-target="#exampleModal3">YACHT SEARCH</button>
<!-- Button trigger modal -->
<!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal3">
Launch demo modal
</button>
<!-- Modal -->
<!-- <div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModal3Label" aria-hidden="true">
<!-- <div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModal3Label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
Expand All @@ -139,19 +140,19 @@ <h5 class="modal-title" id="exampleModal3Label">Modal title</h5>
</div> -->


<button type="button" class="hero__adapt-btn isbefore">YACHT NAME</button>
</div>
<div>
<button type="button" class="hero__btn">Scroll Down &nbsp;&nbsp;<img src="./images/icon/fa-long-arrow-up.svg" alt="arrow down"></button>
</div>
</section>
<button type="button" class="hero__adapt-btn isbefore">YACHT NAME</button>
</div>
<div>
<button type="button" class="hero__btn">Scroll Down &nbsp;&nbsp;<img src="./images/icon/fa-long-arrow-up.svg" alt="arrow down"></button>
</div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="multirange.js"></script>
<script src="script.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="multirange.js"></script>
<script src="script.js "></script>

</body>

Expand Down
8 changes: 4 additions & 4 deletions sass/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -361,6 +361,9 @@
.socials {
border-bottom: 1px solid #515e70;
padding-bottom: 10px;
a:hover .header__link {
transform: scale(1.2);
}
}
.logon,
.lang {
Expand Down Expand Up @@ -462,7 +465,4 @@
transform: translateY(-200%);
visibility: hidden;
z-index: -1;
}

// .logo-anim {
// }
}
8 changes: 4 additions & 4 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
burgerCloseIcon();
animation();


//change burger close icon

function burgerCloseIcon() {
Expand All @@ -33,14 +32,14 @@
};


//show text in example of portfolio
//animation after loading

function animation() {

let tl = new TimelineMax();
tl
.from(".header", 1, {
y: '-300%',
delay: 2
y: '-300%'
}, )
.staggerFrom(".anim", .5, {
y: '150',
Expand All @@ -51,4 +50,5 @@
}, "-=1.6")

}

})();

0 comments on commit a7196f2

Please sign in to comment.