├── assets ├── css │ └── styles.css ├── img │ ├── about.jpg │ ├── app1.png │ ├── app2.png │ ├── dish.svg │ ├── home.png │ ├── movil-app.png │ ├── pizza.svg │ ├── plate1.png │ ├── plate2.png │ ├── plate3.png │ └── truck.svg ├── js │ └── main.js └── scss │ └── styles.scss └── index.html /assets/css/styles.css: -------------------------------------------------------------------------------- 1 | number of correct digits is not guaranteed. Conversely, to achieve the 2 | desired `atol` set `rtol` such that ``rtol * abs(y)`` is always smaller 3 | than `atol`. If components of y have different scales, it might be 4 | beneficial to set different `atol` values for different components by 5 | passing array_like with shape (n,) for `atol`. Default values are 6 | 1e-3 for `rtol` and 1e-6 for `atol`. 7 | vectorized : bool, optional 8 | Whether `fun` is implemented in a vectorized fashion. Default is False. 9 | 10 | Attributes 11 | ---------- 12 | n : int 13 | Number of equations. 14 | status : string 15 | Current status of the solver: 'running', 'finished' or 'failed'. 16 | t_bound : float 17 | Boundary time. 18 | direction : float 19 | Integration direction: +1 or -1. 20 | t : float 21 | Current time. 22 | y : ndarray 23 | Current state. 24 | t_old : float 25 | Previous time. None if no steps were made yet. 26 | step_size : float 27 | Size of the last successful step. None if no steps were made yet. 28 | nfev : int 29 | Number evaluations of the system's right-hand side. 30 | njev : int 31 | Number of evaluations of the Jacobian. Is always 0 for this solver as it does not use the Jacobian. 32 | nlu : int 33 | Number of LU decompositions. Is always 0 for this solver. 34 | 35 | References 36 | ---------- 37 | .. [1] J. R. Dormand, P. J. Prince, "A family of embedded Runge-Kutta 38 | formulae", Journal of Computational and Applied Mathematics, Vol. 6, 39 | No. 1, pp. 19-26, 1980. 40 | .. [2] L. W. Shampine, "Some Practical Runge-Kutta Formulas", Mathematics 41 | of Computation,, Vol. 46, No. 173, pp. 135-150, 1986. 42 | """ 43 | order = 5 44 | error_estimator_order = 4 45 | n_stages = 6 46 | C = np.array([0, 1/5, 3/10, 4/5, 8/9, 1]) 47 | A = np.array([ 48 | [0, 0, 0, 0, 0], 49 | [1/5, 0, 0, 0, 0], 50 | [3/40, 9/40, 0, 0, 0], 51 | [44/45, -56/15, 32/9, 0, 0], 52 | [19372/6561, -25360/2187, 64448/6561, -212/729, 0], 53 | [9017/3168, -355/33, 46732/5247, 49/176, -5103/18656] 54 | ]) 55 | B = np.array([35/384, 0, 500/1113, 125/192, -2187/6784, 11/84]) 56 | E = np.array([-71/57600, 0, 71/16695, -71/1920, 17253/339200, -22/525, 57 | 1/40]) 58 | # Corresponds to the optimum value of c_6 from [2]_. 59 | P = np.array([ 60 | [1, -8048581381/2820520608, 8663915743/2820520608, 61 | -12715105075/11282082432], 62 | [0, 0, 0, 0], 63 | [0, 131558114200/32700410799, -68118460800/10900136933, 64 | 87487479700/32700410799], 65 | [0, -1754552775/470086768, 14199869525/1410260304, 66 | -10690763975/1880347072], 67 | [0, 127303824393/49829197408, -318862633887/49829197408, 68 | 701980252875 / 199316789632], 69 | [0, -282668133/205662961, 2019193451/616988883, -1453857185/822651844], 70 | [0, 40617522/29380423, -110615467/29380423, 69997945/29380423]]) 71 | 72 | 73 | class DOP853(RungeKutta): 74 | """Explicit Runge-Kutta method of order 8. 75 | 76 | This is a Python implementation of "DOP853" algorithm originally written 77 | in Fortran [1]_, [2]_. Note that this is not a literate translation, but 78 | the algorithmic core and coefficients are the same. 79 | 80 | Can be applied in the complex domain. 81 | 82 | Parameters 83 | ---------- 84 | fun : callable 85 | Right-hand side of the system. The calling signature is ``fun(t, y)``. 86 | Here, ``t`` is a scalar, and there are two options for the ndarray ``y``: 87 | It can either have shape (n,); then ``fun`` must return array_like with 88 | shape (n,). Alternatively it can have shape (n, k); then ``fun`` 89 | must return an array_like with shape (n, k), i.e. each column 90 | corresponds to a single column in ``y``. The choice between the two 91 | options is determined by `vectorized` argument (see below). 92 | t0 : float 93 | Initial time. 94 | y0 : array_like, shape (n,) 95 | Initial state. 96 | t_bound : float 97 | Boundary time - the integration won't continue beyond it. It also 98 | determines the direction of the integration. 99 | first_step : float or None, optional 100 | Initial step size. Default is ``None`` which means that the algorithm 101 | should choose. 102 | max_step : float, optional 103 | Maximum allowed step size. Default is np.inf, i.e. the step size is not 104 | bounded and determined solely by the solver. 105 | rtol, atol : float and array_like, optional 106 | Relative and absolute tolerances. The solver keeps the local error 107 | estimates less than ``atol + rtol * abs(y)``. Here `rtol` controls a 108 | relative accuracy (number of correct digits), while `atol` controls 109 | absolute accuracy (number of correct decimal places). To achieve the 110 | desired `rtol`, set `atol` to be smaller than the smallest value that 111 | can be expected from ``rtol * abs(y)`` so that `rtol` dominates the 112 | allowable error. If `atol` is larger than ``rtol * abs(y)`` the 113 | number of correct digits is not guaranteed. Conversely, to achieve the 114 | desired `atol` set `rtol` such that ``rtol * abs(y)`` is always smaller 115 | than `atol`. If components of y have different scales, it might be 116 | beneficial to set different `atol` values for different components by 117 | passing array_like with shape (n,) for `atol`. Default values are 118 | 1e-3 for `rtol` and 1e-6 for `atol`. 119 | vectorized : bool, optional 120 | Whether `fun` is implemented in a vectorized fashion. Default is False. 121 | 122 | Attributes 123 | ---------- 124 | n : int 125 | Number of equations. 126 | status : string 127 | Current status of the solver: 'running', 'finished' or 'failed'. 128 | t_bound : float 129 | Boundary time. 130 | direction : float 131 | Integration direction: +1 or -1. 132 | t : float 133 | Current time. 134 | y : ndarray 135 | Current state. 136 | t_old : float 137 | Previous time. None if no steps were made yet. 138 | step_size : float 139 | Size of the last successful step. None if no steps were made yet. 140 | nfev : int 141 | Number evaluations of the system's right-hand side. 142 | njev : int 143 | Number of evaluations of the Jacobian. Is always 0 for this solver 144 | as it does not use the Jacobian. 145 | nlu : int 146 | Number of LU decompositions. Is always 0 for this solver. 147 | 148 | References 149 | ---------- 150 | .. [1] E. Hairer, S. P. Norsett G. Wanner, "Solving Ordinary Differential 151 | Equations I: Nonstiff Problems", Sec. II. 152 | .. [2] `Page with original Fortran code of DOP853 153 | `_. 154 | """ 155 | n_stages = dop853_coefficients.N_STAGES 156 | order = 8 157 | error_estimator_order = 7 158 | A = dop853_coefficients.A[:n_stages, :n_stages] 159 | B = dop853_coefficients.B 160 | C = dop853_coefficients.C[:n_stages] 161 | E3 = dop853_coefficients.E3 162 | E5 = dop853_coefficients.E5 163 | D = dop853_coefficients.D 164 | 165 | A_EXTRA = dop853_coefficients.A[n_stages + 1:] 166 | C_EXTRA = dop853_coefficients.C[n_stages + 1:] 167 | 168 | def __init__(self, fun, t0, y0, t_bound, max_step=np.inf, 169 | rtol=1e-3, atol=1e-6, vectorized=False, 170 | first_step=None, **extraneous): 171 | super().__init__(fun, t0, y0, t_bound, max_step, rtol, atol, 172 | vectorized, first_step, **extraneous) 173 | self.K_extended = np.empty((dop853_coefficients.N_STAGES_EXTENDED, 174 | self.n), dtype=self.y.dtype) 175 | self.K = self.K_extended[:self.n_stages + 1] 176 | 177 | def _estimate_error(self, K, h): # Left for testing purposes. 178 | err5 = np.dot(K.T, self.E5) 179 | err3 = np.dot(K.T, self.E3) 180 | denom = np.hypot(np.abs(err5), 0.1 * np.abs(err3)) 181 | correction_factor = np.ones_like(err5) 182 | mask = denom > 0 183 | correction_factor[mask] = np.abs(err5[mask]) / denom[mask] 184 | return h * err5 * correction_factor 185 | 186 | def _estimate_error_norm(self, K, h, scale): 187 | err5 = np.dot(K.T, self.E5) / scale 188 | err3 = np.dot(K.T, self.E3) / scale 189 | err5_norm_2 = np.linalg.norm(err5)**2 190 | err3_norm_2 = np.linalg.norm(err3)**2 191 | if err5_norm_2 == 0 and err3_norm_2 == 0: 192 | return 0.0 193 | denom = err5_norm_2 + 0.01 * err3_norm_2 194 | return np.abs(h) * err5_norm_2 / np.sqrt(denom * len(scale)) 195 | 196 | def _dense_output_impl(self): 197 | K = self.K_extended 198 | h = self.h_previous 199 | for s, (a, c) in enumerate(zip(self.A_EXTRA, self.C_EXTRA), 200 | start=self.n_stages + 1): 201 | dy = np.dot(K[:s].T, a[:s]) * h 202 | K[s] = self.fun(self.t_old + c * h, self.y_old + dy) 203 | 204 | F = np.empty((dop853_coefficients.INTERPOLATOR_POWER, self.n), 205 | dtype=self.y_old.dtype) 206 | 207 | f_old = K[0] 208 | delta_y = self.y - self.y_old 209 | 210 | F[0] = delta_y 211 | F[1] = h * f_old - delta_y 212 | F[2] = 2 * delta_y - h * (self.f + f_old) 213 | F[3:] = h * np.dot(self.D, K) 214 | 215 | return Dop853DenseOutput(self.t_old, self.t, self.y_old, F) 216 | 217 | 218 | class RkDenseOutput(DenseOutput): 219 | def __init__(self, t_old, t, y_old, Q): 220 | super().__init__(t_old, t) 221 | self.h = t - t_old 222 | self.Q = Q 223 | self.order = Q.shape[1] - 1 224 | self.y_old = y_old 225 | 226 | def _call_impl(self, t): 227 | x = (t - self.t_old) / self.h 228 | if t.ndim == 0: 229 | p = np.tile(x, self.order + 1) 230 | p = np.cumprod(p) 231 | else: 232 | p = np.tile(x, (self.order + 1, 1)) 233 | p = np.cumprod(p, axis=0) 234 | y = self.h * np.dot(self.Q, p) 235 | if y.ndim == 2: 236 | y += self.y_old[:, None] 237 | else: 238 | y += self.y_old 239 | 240 | return y 241 | 242 | 243 | class Dop853DenseOutput(DenseOutput): 244 | def __init__(self, t_old, t, y_old, F): 245 | super().__init__(t_old, t) 246 | self.h = t - t_old 247 | self.F = F 248 | -------------------------------------------------------------------------------- /assets/img/about.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sayjun0505/responsive-html/aae43f08f60f1084f737196a942d9af58d8287b3/assets/img/about.jpg -------------------------------------------------------------------------------- /assets/img/app1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sayjun0505/responsive-html/aae43f08f60f1084f737196a942d9af58d8287b3/assets/img/app1.png -------------------------------------------------------------------------------- /assets/img/app2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sayjun0505/responsive-html/aae43f08f60f1084f737196a942d9af58d8287b3/assets/img/app2.png -------------------------------------------------------------------------------- /assets/img/dish.svg: -------------------------------------------------------------------------------- 1 | 2 | 17 | 28 | 31 | 34 | 38 | 43 | 48 | 50 | 55 | 61 | 62 | -------------------------------------------------------------------------------- /assets/img/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sayjun0505/responsive-html/aae43f08f60f1084f737196a942d9af58d8287b3/assets/img/home.png -------------------------------------------------------------------------------- /assets/img/movil-app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sayjun0505/responsive-html/aae43f08f60f1084f737196a942d9af58d8287b3/assets/img/movil-app.png -------------------------------------------------------------------------------- /assets/img/pizza.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 63 | 89 | 93 | 97 | 101 | 105 | 109 | 113 | 117 | 121 | 125 | 128 | 131 | 135 | 138 | 143 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | -------------------------------------------------------------------------------- /assets/img/plate1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sayjun0505/responsive-html/aae43f08f60f1084f737196a942d9af58d8287b3/assets/img/plate1.png -------------------------------------------------------------------------------- /assets/img/plate2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sayjun0505/responsive-html/aae43f08f60f1084f737196a942d9af58d8287b3/assets/img/plate2.png -------------------------------------------------------------------------------- /assets/img/plate3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sayjun0505/responsive-html/aae43f08f60f1084f737196a942d9af58d8287b3/assets/img/plate3.png -------------------------------------------------------------------------------- /assets/img/truck.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | /*==================== SHOW MENU ====================*/ 2 | const showMenu = (toggleId, navId) =>{ 3 | const toggle = document.getElementById(toggleId), 4 | nav = document.getElementById(navId) 5 | 6 | // Validate that variables exist 7 | if(toggle && nav){ 8 | toggle.addEventListener('click', ()=>{ 9 | // We add the show-menu class to the div tag with the nav__menu class 10 | nav.classList.toggle('show-menu') 11 | }) 12 | } 13 | } 14 | showMenu('nav-toggle','nav-menu') 15 | 16 | /*==================== REMOVE MENU MOBILE ====================*/ 17 | const navLink = document.querySelectorAll('.nav__link') 18 | 19 | function linkAction(){ 20 | const navMenu = document.getElementById('nav-menu') 21 | // When we click on each nav__link, we remove the show-menu class 22 | navMenu.classList.remove('show-menu') 23 | } 24 | navLink.forEach(n => n.addEventListener('click', linkAction)) 25 | 26 | /*==================== SCROLL SECTIONS ACTIVE LINK ====================*/ 27 | const sections = document.querySelectorAll('section[id]') 28 | 29 | function scrollActive(){ 30 | const scrollY = window.pageYOffset 31 | 32 | sections.forEach(current =>{ 33 | const sectionHeight = current.offsetHeight 34 | const sectionTop = current.offsetTop - 50; 35 | sectionId = current.getAttribute('id') 36 | 37 | if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){ 38 | document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link') 39 | }else{ 40 | document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link') 41 | } 42 | }) 43 | } 44 | window.addEventListener('scroll', scrollActive) 45 | 46 | /*==================== CHANGE BACKGROUND HEADER ====================*/ 47 | function scrollHeader(){ 48 | const nav = document.getElementById('header') 49 | // When the scroll is greater than 200 viewport height, add the scroll-header class to the header tag 50 | if(this.scrollY >= 200) nav.classList.add('scroll-header'); else nav.classList.remove('scroll-header') 51 | } 52 | window.addEventListener('scroll', scrollHeader) 53 | 54 | /*==================== SHOW SCROLL TOP ====================*/ 55 | function scrollTop(){ 56 | const scrollTop = document.getElementById('scroll-top'); 57 | // When the scroll is higher than 560 viewport height, add the show-scroll class to the a tag with the scroll-top class 58 | if(this.scrollY >= 560) scrollTop.classList.add('show-scroll'); else scrollTop.classList.remove('show-scroll') 59 | } 60 | window.addEventListener('scroll', scrollTop) 61 | 62 | /*==================== DARK LIGHT THEME ====================*/ 63 | const themeButton = document.getElementById('theme-button') 64 | const darkTheme = 'dark-theme' 65 | const iconTheme = 'bx-sun' 66 | 67 | // Previously selected topic (if user selected) 68 | const selectedTheme = localStorage.getItem('selected-theme') 69 | const selectedIcon = localStorage.getItem('selected-icon') 70 | 71 | // We obtain the current theme that the interface has by validating the dark-theme class 72 | const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light' 73 | const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'bx-moon' : 'bx-sun' 74 | 75 | // We validate if the user previously chose a topic 76 | if (selectedTheme) { 77 | // If the validation is fulfilled, we ask what the issue was to know if we activated or deactivated the dark 78 | document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme) 79 | themeButton.classList[selectedIcon === 'bx-moon' ? 'add' : 'remove'](iconTheme) 80 | } 81 | 82 | // Activate / deactivate the theme manually with the button 83 | themeButton.addEventListener('click', () => { 84 | // Add or remove the dark / icon theme 85 | document.body.classList.toggle(darkTheme) 86 | themeButton.classList.toggle(iconTheme) 87 | // We save the theme and the current icon that the user chose 88 | localStorage.setItem('selected-theme', getCurrentTheme()) 89 | localStorage.setItem('selected-icon', getCurrentIcon()) 90 | }) 91 | 92 | /*==================== SCROLL REVEAL ANIMATION ====================*/ 93 | const sr = ScrollReveal({ 94 | origin: 'top', 95 | distance: '30px', 96 | duration: 2000, 97 | reset: true 98 | }); 99 | 100 | sr.reveal(`.home__data, .home__img, 101 | .about__data, .about__img, 102 | .services__content, .menu__content, 103 | .app__data, .app__img, 104 | .contact__data, .contact__button, 105 | .footer__content`, { 106 | interval: 200 107 | }) -------------------------------------------------------------------------------- /assets/scss/styles.scss: -------------------------------------------------------------------------------- 1 | /*===== GOOGLE FONTS =====*/ 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); 3 | 4 | /*===== VARIABLES CSS =====*/ 5 | :root{ 6 | --header-height: 3rem; 7 | 8 | /*========== Colors ==========*/ 9 | --first-color: #069C54; 10 | --first-color-alt: #048654; 11 | --title-color: #393939; 12 | --text-color: #707070; 13 | --text-color-light: #A6A6A6; 14 | --body-color: #FBFEFD; 15 | --container-color: #FFFFFF; 16 | 17 | /*========== Font and typography ==========*/ 18 | --body-font: 'Poppins', sans-serif; 19 | 20 | --biggest-font-size: 2.25rem; 21 | --h1-font-size: 1.5rem; 22 | --h2-font-size: 1.25rem; 23 | --h3-font-size: 1rem; 24 | --normal-font-size: .938rem; 25 | --small-font-size: .813rem; 26 | --smaller-font-size: .75rem; 27 | 28 | @media screen and (min-width: 768px){ 29 | --biggest-font-size: 4rem; 30 | --h1-font-size: 2.25rem; 31 | --h2-font-size: 1.5rem; 32 | --h3-font-size: 1.25rem; 33 | --normal-font-size: 1rem; 34 | --small-font-size: .875rem; 35 | --smaller-font-size: .813rem; 36 | } 37 | 38 | /*========== Font weight ==========*/ 39 | --font-medium: 500; 40 | --font-semi-bold: 600; 41 | 42 | /*========== Margenes ==========*/ 43 | --mb-1: .5rem; 44 | --mb-2: 1rem; 45 | --mb-3: 1.5rem; 46 | --mb-4: 2rem; 47 | --mb-5: 2.5rem; 48 | --mb-6: 3rem; 49 | 50 | /*========== z index ==========*/ 51 | --z-tooltip: 10; 52 | --z-fixed: 100; 53 | } 54 | 55 | /*========== BASE ==========*/ 56 | *,::before,::after{ 57 | box-sizing: border-box; 58 | } 59 | html{ 60 | scroll-behavior: smooth; 61 | } 62 | 63 | /*========== Variables Dark theme ==========*/ 64 | body.dark-theme{ 65 | --title-color: #F1F3F2; 66 | --text-color: #C7D1CC; 67 | --body-color: #1D2521; 68 | --container-color: #27302C; 69 | } 70 | 71 | /*========== Button Dark/Light ==========*/ 72 | .change-theme { 73 | position: absolute; 74 | right: 1rem; 75 | top: 1.8rem; 76 | color: var(--text-color); 77 | font-size: 1rem; 78 | cursor: pointer; 79 | } 80 | 81 | body{ 82 | margin: var(--header-height) 0 0 0; 83 | font-family: var(--body-font); 84 | font-size: var(--normal-font-size); 85 | background-color: var(--body-color); 86 | color: var(--text-color); 87 | line-height: 1.6; 88 | } 89 | h1,h2,h3,ul,p{ 90 | margin: 0; 91 | } 92 | 93 | ul{ 94 | padding: 0; 95 | list-style: none; 96 | } 97 | a{ 98 | text-decoration: none; 99 | } 100 | img{ 101 | max-width: 100%; 102 | height: auto; 103 | } 104 | 105 | /*========== CLASS CSS ==========*/ 106 | .section{ 107 | padding: 4rem 0 2rem; 108 | 109 | &-title, &-subtitle{ 110 | text-align: center; 111 | } 112 | 113 | &-title{ 114 | font-size: var(--h1-font-size); 115 | color: var(--title-color); 116 | margin-bottom: var(--mb-3); 117 | } 118 | &-subtitle{ 119 | display: block; 120 | color: var(--first-color); 121 | font-weight: var(--font-medium); 122 | margin-bottom: var(--mb-1) 123 | } 124 | } 125 | 126 | /*========== LAYOUT ==========*/ 127 | .bd-container{ 128 | max-width: 960px; 129 | width: calc(100% - 2rem); 130 | margin-left: var(--mb-2); 131 | margin-right: var(--mb-2); 132 | } 133 | 134 | .bd-grid{ 135 | display: grid; 136 | gap: 1.5rem; 137 | } 138 | 139 | .l-header{ 140 | width: 100%; 141 | position: fixed; 142 | top: 0; 143 | left: 0; 144 | z-index: var(--z-fixed); 145 | background-color: var(--body-color); 146 | } 147 | 148 | /*========== NAV ==========*/ 149 | .nav{ 150 | max-width: 1024px; 151 | height: var(--header-height); 152 | display: flex; 153 | justify-content: space-between; 154 | align-items: center; 155 | 156 | &__menu{ 157 | @media screen and (max-width: 768px){ 158 | position: fixed; 159 | top: -100%; 160 | left: 0; 161 | width: 100%; 162 | padding: 1.5rem 0 1rem; 163 | text-align: center; 164 | background-color: var(--body-color); 165 | transition: .4s; 166 | box-shadow: 0 4px 4px rgba(0,0,0,.1); 167 | border-radius: 0 0 1rem 1rem; 168 | z-index: var(--z-fixed); 169 | } 170 | } 171 | &__item{ 172 | margin-bottom: var(--mb-2); 173 | } 174 | &__link, &__logo, &__toggle{ 175 | color: var(--text-color); 176 | font-weight: var(--font-medium); 177 | } 178 | &__logo{ 179 | &:hover{ 180 | color: var(--first-color); 181 | } 182 | } 183 | &__link{ 184 | transition: .3s; 185 | 186 | &:hover{ 187 | color: var(--first-color); 188 | } 189 | } 190 | &__toggle{ 191 | font-size: 1.3rem; 192 | cursor: pointer; 193 | } 194 | } 195 | 196 | /* Show menu */ 197 | .show-menu{ 198 | top: var(--header-height); 199 | } 200 | /* Active menu */ 201 | .active-link{ 202 | color: var(--first-color); 203 | } 204 | 205 | /* Change background header */ 206 | .scroll-header{ 207 | box-shadow: 0 2px 4px rgba(0,0,0,.1); 208 | } 209 | 210 | /* Scroll top */ 211 | .scrolltop{ 212 | position: fixed; 213 | right: 1rem; 214 | bottom: -20%; 215 | display: flex; 216 | justify-content: center; 217 | align-items: center; 218 | padding: .3rem; 219 | background: rgba(6, 156, 84, .5); 220 | border-radius: .4rem; 221 | z-index: var(--z-tooltip); 222 | transition: .4s; 223 | visibility: hidden; 224 | 225 | &:hover{ 226 | background-color: var(--first-color-alt); 227 | } 228 | 229 | &__icon{ 230 | font-size: 1.8rem; 231 | color: var(--body-color); 232 | } 233 | } 234 | 235 | .show-scroll{ 236 | visibility: visible; 237 | bottom: 1.5rem; 238 | } 239 | 240 | /*========== HOME ==========*/ 241 | .home{ 242 | &__container{ 243 | height: calc(100vh - var(--header-height)); 244 | align-content: center; 245 | } 246 | &__title{ 247 | font-size: var(--biggest-font-size ); 248 | color: var(--first-color); 249 | margin-bottom: var(--mb-1); 250 | } 251 | &__subtitle{ 252 | font-size: var(--h1-font-size); 253 | color: var(--title-color); 254 | margin-bottom: var(--mb-4); 255 | } 256 | &__img{ 257 | width: 300px; 258 | justify-self: center; 259 | } 260 | } 261 | 262 | /*========== BUTTONS ==========*/ 263 | .button{ 264 | display: inline-block; 265 | background-color: var(--first-color); 266 | color: #FFF; 267 | padding: .75rem 1rem; 268 | border-radius: .5rem; 269 | transition: .3s; 270 | 271 | &:hover{ 272 | background-color: var(--first-color-alt); 273 | } 274 | } 275 | 276 | 277 | /*========== ABOUT ==========*/ 278 | .about{ 279 | &__data{ 280 | text-align: center; 281 | } 282 | &__description{ 283 | margin-bottom: var(--mb-3); 284 | } 285 | &__img{ 286 | width: 280px; 287 | border-radius: .5rem; 288 | justify-self: center; 289 | } 290 | } 291 | 292 | /*========== SERVICES ==========*/ 293 | .services{ 294 | &__container{ 295 | row-gap: 2.5rem; 296 | grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 297 | } 298 | &__content{ 299 | text-align: center; 300 | } 301 | &__img{ 302 | width: 64px; 303 | height: 64px; 304 | fill: var(--first-color); 305 | margin-bottom: var(--mb-2); 306 | } 307 | &__title{ 308 | font-size: var(--h3-font-size); 309 | color: var(--title-color); 310 | margin-bottom: var(--mb-1); 311 | } 312 | &__description{ 313 | padding: 0 1.5rem; 314 | } 315 | } 316 | 317 | /*========== MENU ==========*/ 318 | .menu{ 319 | &__container{ 320 | grid-template-columns: repeat(2, 1fr); 321 | justify-content: center; 322 | } 323 | &__content{ 324 | position: relative; 325 | display: flex; 326 | flex-direction: column; 327 | background-color: var(--container-color); 328 | border-radius: .5rem; 329 | box-shadow: 0 2px 4px rgba(3, 74, 40, 0.15); 330 | padding: .75rem; 331 | } 332 | &__img{ 333 | width: 100px; 334 | align-self: center; 335 | margin-bottom: var(--mb-2); 336 | } 337 | &__name, &__preci{ 338 | font-weight: var(--font-semi-bold); 339 | color: var(--title-color); 340 | } 341 | &__name{ 342 | font-size: var(--normal-font-size); 343 | } 344 | &__detail, &__preci{ 345 | font-size: var(--small-font-size); 346 | } 347 | &__detail{ 348 | margin-bottom: var(--mb-1); 349 | } 350 | &__button{ 351 | position: absolute; 352 | bottom: 0; 353 | right: 0; 354 | display: flex; 355 | font-size: 1.25rem; 356 | padding: .625rem .813rem; 357 | border-radius: .5rem 0 .5rem 0; 358 | } 359 | } 360 | 361 | /*========== APP ==========*/ 362 | .app{ 363 | &__data{ 364 | text-align: center; 365 | } 366 | &__description{ 367 | margin-bottom: var(--mb-5); 368 | } 369 | &__stores{ 370 | margin-bottom: var(--mb-4); 371 | } 372 | &__store{ 373 | width: 120px; 374 | margin: 0 var(--mb-1); 375 | } 376 | &__img{ 377 | width: 230px; 378 | justify-self: center; 379 | } 380 | } 381 | 382 | /*========== CONTACT ==========*/ 383 | .contact{ 384 | &__container{ 385 | text-align: center; 386 | } 387 | &__description{ 388 | margin-bottom: var(--mb-3); 389 | } 390 | } 391 | 392 | /*========== FOOTER ==========*/ 393 | .footer{ 394 | &__container{ 395 | grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 396 | row-gap: 2rem; 397 | } 398 | &__logo{ 399 | font-size: var(--h3-font-size); 400 | color: var(--first-color); 401 | font-weight: var(--font-semi-bold); 402 | } 403 | &__description{ 404 | display: block; 405 | font-size: var(--small-font-size); 406 | margin: .25rem 0 var(--mb-3); 407 | } 408 | &__social{ 409 | font-size: 1.5rem; 410 | color: var(--title-color); 411 | margin-right: var(--mb-2); 412 | } 413 | &__title{ 414 | font-size: var(--h2-font-size); 415 | color: var(--title-color); 416 | margin-bottom: var(--mb-2); 417 | } 418 | &__link{ 419 | display: inline-block; 420 | color: var(--text-color); 421 | margin-bottom: var(--mb-1); 422 | 423 | &:hover{ 424 | color: var(--first-color); 425 | } 426 | } 427 | &__copy{ 428 | text-align: center; 429 | font-size: var(--small-font-size); 430 | color: var(--text-color-light); 431 | margin-top: 3.5rem; 432 | } 433 | } 434 | 435 | /*========== MEDIA QUERIES ==========*/ 436 | @media screen and (min-width: 576px){ 437 | .home__container, 438 | .about__container, 439 | .app__container{ 440 | grid-template-columns: repeat(2, 1fr); 441 | align-items: center; 442 | } 443 | 444 | .about__data, .about__initial, 445 | .app__data, .app__initial, 446 | .contact__container, .contact__initial{ 447 | text-align: initial; 448 | } 449 | 450 | .about__img, .app__img{ 451 | width: 380px; 452 | order: -1; 453 | } 454 | 455 | .contact{ 456 | &__container{ 457 | grid-template-columns: 1.75fr 1fr; 458 | align-items: center; 459 | } 460 | &__button{ 461 | justify-self: center; 462 | } 463 | } 464 | } 465 | 466 | @media screen and (min-width: 768px){ 467 | body{ 468 | margin: 0; 469 | } 470 | 471 | .section{ 472 | padding-top: 8rem; 473 | } 474 | 475 | .nav{ 476 | height: calc(var(--header-height) + 1.5rem); 477 | 478 | &__list{ 479 | display: flex; 480 | } 481 | &__item{ 482 | margin-left: var(--mb-5); 483 | margin-bottom: 0; 484 | } 485 | &__toggle{ 486 | display: none; 487 | } 488 | } 489 | 490 | .change-theme{ 491 | position: initial; 492 | margin-left: var(--mb-2); 493 | } 494 | 495 | .home__container{ 496 | height: 100vh; 497 | justify-items: center; 498 | } 499 | 500 | .services__container, 501 | .menu__container{ 502 | margin-top: var(--mb-6); 503 | } 504 | 505 | .menu{ 506 | &__container{ 507 | grid-template-columns: repeat(3, 210px); 508 | column-gap: 4rem; 509 | } 510 | &__content{ 511 | padding: 1.5rem; 512 | } 513 | &__img{ 514 | width: 130px; 515 | } 516 | } 517 | 518 | .app__store{ 519 | margin: 0 var(--mb-1) 0 0; 520 | } 521 | } 522 | 523 | @media screen and (min-width: 960px){ 524 | .bd-container{ 525 | margin-left: auto; 526 | margin-right: auto; 527 | } 528 | 529 | .home__img{ 530 | width: 500px; 531 | } 532 | 533 | .about__container, .app__container{ 534 | column-gap: 7rem; 535 | } 536 | } 537 | 538 | /* For tall screens on mobiles y desktop*/ 539 | @media screen and (min-height: 721px) { 540 | .home__container { 541 | height: 640px; 542 | } 543 | } 544 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Responsive website food 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 44 | 45 |
46 | 47 |
48 |
49 |
50 |

Tasty food

51 |

Try the best food of
the week.

52 | View Menu 53 |
54 | 55 | 56 |
57 |
58 | 59 | 60 |
61 |
62 |
63 | About us 64 |

We cook the best
tasty food

65 |

We cook the best food in the entire city, with excellent customer service, the best meals and at the best price, visit us.

66 | Explore history 67 |
68 | 69 | 70 |
71 |
72 | 73 | 74 |
75 | Offering 76 |

Our amazing services

77 | 78 |
79 |
80 | 81 | 96 | 107 | 110 | 113 | 117 | 122 | 127 | 129 | 134 | 140 | 141 |

Excellent food

142 |

We offer our clients excellent quality services for many years, with the best and delicious food in the city.

143 |
144 | 145 |
146 | 147 | 148 | 208 | 234 | 238 | 242 | 246 | 250 | 254 | 258 | 262 | 266 | 270 | 273 | 276 | 280 | 283 | 288 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 |

Fast food

299 |

We offer our clients excellent quality services for many years, with the best and delicious food in the city.

300 |
301 | 302 |
303 | 304 | 305 | 310 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 |

Delivery

355 |

We offer our clients excellent quality services for many years, with the best and delicious food in the city.

356 |
357 |
358 |
359 | 360 | 361 | 391 | 392 | 393 |
394 |
395 |
396 | App 397 |

App is aviable

398 |

Find our application and download it, you can make reservations, food orders, see your deliveries on the way and much more.

399 |
400 | 401 | 402 |
403 |
404 | 405 | 406 |
407 |
408 | 409 | 410 |
411 |
412 |
413 | Let's talk 414 |

Contact us

415 |

If you want to reserve a table in our restaurant, contact us and we will attend you quickly, with our 24/7 chat service.

416 |
417 | 418 |
419 | Contact us now 420 |
421 |
422 |
423 |
424 | 425 | 426 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | --------------------------------------------------------------------------------