Skip to content

Commit

Permalink
add responsive for menu
Browse files Browse the repository at this point in the history
  • Loading branch information
unknown committed Mar 16, 2019
1 parent d104ce5 commit 6c2b35c
Show file tree
Hide file tree
Showing 6 changed files with 433 additions and 145 deletions.
155 changes: 155 additions & 0 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
* {
box-sizing: border-box;
padding: 0;
margin: 0;
list-style: none;
text-decoration: none; }

body {
background-image: url(../images/BGimage.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
font-family: 'Playfair Display', serif;
overflow: hidden; }

header {
position: relative; }

.mycontainer {
max-width: 1230px;
padding: 0 30px;
margin: 0 auto; }

nav {
background-color: rgba(52, 58, 64, 0.8);
color: white;
font-size: 1.5em; }

.navbar {
background-color: rgba(20, 27, 37, 0.34);
padding: 0 15px; }

.navbar-toggler {
margin: auto;
border: none; }

.navbar-dark .navbar-toggler-icon {
background-image: url(../images/icon/burger.svg); }

.close-img {
background-image: url(../images/icon/close.svg) !important; }

.nav-link {
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
padding: 30px 15px !important;
color: white !important; }

.header__top {
background-color: #2d3b50;
display: flex;
width: 100%;
justify-content: space-between;
position: relative; }
.header__top:before {
position: absolute;
content: url(../images/icon/triangle.svg);
left: -40px;
top: -54px;
transform: rotate(-45deg);
z-index: -1; }
.header__top:after {
position: absolute;
content: url(../images/icon/triangle.svg);
right: -40px;
top: -54px;
transform: rotate(-45deg);
z-index: -1; }
.header__top-wrapper {
background-color: rgba(45, 59, 80, 0.6);
width: 100%; }

.header__bottom {
display: flex;
width: 100%;
justify-content: space-between; }

.header__icon {
color: white;
padding-right: 10px; }

.header__link {
font-weight: 700;
color: white;
padding: 12px;
font-size: 12px; }

.logo {
background-image: url(../images/Polygon1.svg);
width: 350px;
text-align: center;
z-index: 10;
height: 130px;
margin: 0 auto;
padding-top: 25px;
position: absolute;
transform: translateX(-50%);
left: 50%; }

.left,
.right {
display: flex; }

.isbefore {
position: relative;
margin-left: 20px; }
.isbefore::before {
content: "";
position: absolute;
left: -10px;
top: 14px;
background-color: #515e70;
width: 1px;
height: 18px; }

@media only screen and (max-width: 992px) {
.mycontainer {
padding: 0 10px; }
.navbar {
padding: 0;
background-color: #2d3b50;
text-align: center; }
.logo {
z-index: 0;
padding-top: 50px; }
.logo img {
transform: scale(0.8); }
.left,
.right,
.header__top {
flex-direction: column; }
.isbefore {
margin-left: 0px; }
.isbefore::before {
width: 0;
height: 0; }
.nav-link {
padding: 5px 0 10px 0 !important; }
.header__top {
padding-bottom: 20px; }
.header__link {
border-bottom: 1px solid #515e70;
padding: 10px;
display: block; }
.socials {
border-bottom: 1px solid #515e70;
padding-bottom: 10px; }
.logon,
.lang {
width: 100%; }
.navbar-collapse {
padding: 8%; } }
5 changes: 5 additions & 0 deletions images/icon/burger.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions images/icon/close.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 9 additions & 11 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,19 +20,19 @@
<div class="logo">
<img src="./images/logo.png" alt="Yacht Marine">
</div>
<nav class=" navbar navbar-expand-lg navbar-dark ">
<button class="navbar-toggler " type="button " data-toggle="collapse " data-target="#navbarCollapse " aria-controls="navbarNav " aria-expanded="false " aria-label="Toggle navigation ">
<span class="navbar-toggler-icon "></span>
<nav class="navbar navbar-expand-lg navbar-dark">
<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="navbarCollapse ">
<div class="collapse navbar-collapse flex-column " id="navbarSupportedContent">
<div class="header__top-wrapper ">
<div class="header__top mycontainer ">
<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 ">
<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>
Expand Down Expand Up @@ -81,17 +81,15 @@

</nav>



</header>

<!-- Optional JavaScript -->

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js " integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin=" anonymous "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js " integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49 " crossorigin="anonymous "></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js " integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy " crossorigin="anonymous "></script>
<!-- <script src="script.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="script.js "></script>

</body>

Expand Down
Loading

0 comments on commit 6c2b35c

Please sign in to comment.