Skip to content

Commit

Permalink
Improvements in design, navbar now on the right
Browse files Browse the repository at this point in the history
  • Loading branch information
@FornesBorja
FornesBorja committed Jun 1, 2024
1 parent 79e310c commit 5a15916
Show file tree
Hide file tree
Showing 4 changed files with 240 additions and 307 deletions.
41 changes: 39 additions & 2 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Caveat:[email protected]&display=swap');

* {
padding: 0;
Expand All @@ -14,6 +15,7 @@
font-size: 1.2em;
border-radius: 4px;
}

#beverages-menu,
#food-menu {
display: grid;
Expand All @@ -22,41 +24,56 @@
padding: 0.5em;
border-radius: 6em;
}

body {
height: 100vh;
width: 100vw;
}

.bg-dogwood {
background-color: #c9ada7;
}

.bg-isabelline {
background-color: #f2e9e4;
}

.bg-ultra-violet {
background-color: #4a4e69;
}

.btn-rose-quartz {
background-color: #9a8c98;
}

.btn-rose-quartz:hover {
background-color: #746471;
}

.btn-send {
background-color: #22223b;
color: #f2e9e4;
}

.btn-send:hover {
background-color: #3e3e6b;
color: #f2e9e4;
}

.caveat {
font-family: "Caveat", cursive;
font-optical-sizing: auto;
font-style: normal;
}

#content-description {
margin-top: 2em;
}

.container-general {
height: 100vh;
width: 100vw;
overflow-x: hidden;
}

#description {
Expand All @@ -68,33 +85,53 @@ body {
#footer {
border-radius: 1em;
}

.full-height {
min-height: 100vh;
display: flex;
flex-direction: column;
}

.lobster-two-regular {
font-family: "Lobster Two", sans-serif;
font-weight: 400;
font-style: normal;
}

#local {
border-radius: 3em;
}

#main-logo {
width: 2.5em;
height: 2.5em;
}

.menu {
width: auto;
height: 10em;
object-fit: contain;
}

.menu-text {
font-size: 2em;
font-weight: bold;
}

#us {
font-size: 3em;
color: #22223b;
text-shadow: -0.1em -0.3em 1em #9a8c98;
}
#text-contact{

#text-contact {
background-color: #9a8c98;
padding:1em;
padding: 1em;
border-radius: 2em;
}

@media (min-width: 768px) {
.navbar-nav {
order: -1;
}
}
117 changes: 50 additions & 67 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="./imgs/logo.png" type="image/x-icon" />

<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<link href="./css/styles.css" rel="stylesheet" />
<title>Home</title>
</head>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="./imgs/logo.png" type="image/x-icon" />

<body>
<div class="container-general full-height">
<nav class="navbar navbar-expand-lg bg-isabelline">
<div class="container-fluid">
<a class="navbar-brand" href="#"
><img src="./imgs/logo.png" id="main-logo"
/></a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="./pages/contact.html">Contact</a>
<a class="nav-link" href="./pages/menu.html">Menu</a>
</div>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
<link href="./css/styles.css" rel="stylesheet" />
<title>Home</title>
</head>

<body>
<div class="container-general full-height">
<nav class="navbar navbar-expand-lg bg-isabelline ">
<div class="container-fluid">
<a class="navbar-brand" href="./index.html"><img src="./imgs/logo.png" id="main-logo" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active " aria-current="page" href="#">Home</a>
<a class="nav-link" href="./pages/contact.html">Contact</a>
<a class="nav-link" href="./pages/menu.html">Menu</a>
</div>
</div>
</nav>
<div id="content-home" class="container-fluid h-100 bg-dogwood">
<div class="row h-100">
<div id="content-home-left" class="col-lg-3 col-md-none"></div>
<div id="content-home-center" class="col-lg-6 col-md-12">
<div class="row">
<div class="col"></div>
<div class="col lobster-two-regular" id="us">¿Quienes somos?</div>
</div>
<div id="image" class="row">
<div class="col-12 text-center">
<img
class="img-fluid"
src="./imgs/vibran-tea.png"
alt="Nuestro local"
id="local"
/>
</div>
</div>
</nav>
<div id="content-home" class="container-fluid h-100 bg-dogwood">
<div class="row h-100">
<div id="content-home-left" class="col-lg-3 col-md-none"></div>
<div id="content-home-center" class="col-lg-6 col-md-12">
<div class="row">
<div class="col"></div>
<div class="col lobster-two-regular" id="us">¿Quienes somos?</div>
</div>
<div id="image" class="row">
<div class="col-12 text-center">
<img class="img-fluid" src="./imgs/vibran-tea.png" alt="Nuestro local" id="local" />
</div>
<div class="row" id="content-description">
<div class="col-lg-4 col-md-12 bg-isabelline" id="description">
<div class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorem iusto aperiam laborum repudiandae </div>
</div>
</div>
<div class="row" id="content-description">
<div class="col-lg-4 col-md-12 bg-isabelline" id="description">
<div class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorem iusto aperiam laborum
repudiandae </div>
</div>
</div>
<div id="content-home-right" class="col-lg-3 col-md-none"></div>
</div>
<div id="content-home-right" class="col-lg-3 col-md-none"></div>
</div>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
</body>
</html>
</html>
Loading

0 comments on commit 5a15916

Please sign in to comment.