├── Modal ├── .vscode │ └── settings.json ├── images │ ├── menu.svg │ ├── close.svg │ ├── success.svg │ └── illustration.svg ├── js │ └── modal.js ├── index.html └── estilos.css ├── Slider ├── .vscode │ └── settings.json ├── assets │ ├── picture1.jpg │ ├── picture2.jpg │ ├── picture3.jpg │ ├── leftarrow.svg │ └── rightarrow.svg ├── sliders.js ├── estilos.css └── index.html └── Menu desplegable ├── .vscode └── settings.json ├── assets ├── menu.svg └── arrow.svg ├── js └── app.js ├── index.html └── css └── estilos.css /Modal/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /Slider/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /Menu desplegable/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /Slider/assets/picture1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexCGDesign/3-proyectos-css/HEAD/Slider/assets/picture1.jpg -------------------------------------------------------------------------------- /Slider/assets/picture2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexCGDesign/3-proyectos-css/HEAD/Slider/assets/picture2.jpg -------------------------------------------------------------------------------- /Slider/assets/picture3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexCGDesign/3-proyectos-css/HEAD/Slider/assets/picture3.jpg -------------------------------------------------------------------------------- /Modal/images/menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Menu desplegable/assets/menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Menu desplegable/assets/arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Slider/assets/leftarrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Slider/assets/rightarrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Modal/images/close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Modal/js/modal.js: -------------------------------------------------------------------------------- 1 | const closeModal = document.querySelector('.modal__close'); 2 | const openModal = document.querySelector('.hero__cta'); 3 | const modal = document.querySelector('.modal'); 4 | 5 | openModal.addEventListener('click', (e)=>{ 6 | e.preventDefault(); 7 | modal.classList.add('modal--show'); 8 | }); 9 | 10 | closeModal.addEventListener('click', (e)=>{ 11 | e.preventDefault(); 12 | modal.classList.remove('modal--show'); 13 | }); -------------------------------------------------------------------------------- /Slider/sliders.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | const sliders = [...document.querySelectorAll('.slider__body')]; 3 | const arrowNext = document.querySelector('#next'); 4 | const arrowBefore = document.querySelector('#before'); 5 | let value; 6 | 7 | arrowNext.addEventListener('click', ()=>changePosition(1)); 8 | 9 | arrowBefore.addEventListener('click', ()=>changePosition(-1)); 10 | 11 | function changePosition(change){ 12 | const currentElement = Number(document.querySelector('.slider__body--show').dataset.id); 13 | // 4+1 = 5 14 | value = currentElement; 15 | value+= change; 16 | 17 | console.log(sliders.length) 18 | if(value === 0 || value == sliders.length+1){ 19 | value = value === 0 ? sliders.length : 1; 20 | } 21 | 22 | sliders[currentElement-1].classList.toggle('slider__body--show'); 23 | sliders[value-1].classList.toggle('slider__body--show'); 24 | } 25 | })() -------------------------------------------------------------------------------- /Menu desplegable/js/app.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | const listElements = document.querySelectorAll('.menu__item--show'); 3 | const list = document.querySelector('.menu__links'); 4 | const menu = document.querySelector('.menu__hamburguer'); 5 | 6 | const addClick = ()=>{ 7 | listElements.forEach(element =>{ 8 | element.addEventListener('click', ()=>{ 9 | 10 | 11 | let subMenu = element.children[1]; 12 | let height = 0; 13 | element.classList.toggle('menu__item--active'); 14 | 15 | 16 | if(subMenu.clientHeight === 0){ 17 | height = subMenu.scrollHeight; 18 | } 19 | 20 | subMenu.style.height = `${height}px`; 21 | 22 | }); 23 | }); 24 | } 25 | 26 | const deleteStyleHeight = ()=>{ 27 | listElements.forEach(element=>{ 28 | 29 | if(element.children[1].getAttribute('style')){ 30 | element.children[1].removeAttribute('style'); 31 | element.classList.remove('menu__item--active'); 32 | } 33 | 34 | }); 35 | } 36 | 37 | 38 | window.addEventListener('resize', ()=>{ 39 | if(window.innerWidth > 800){ 40 | deleteStyleHeight(); 41 | if(list.classList.contains('menu__links--show')) 42 | list.classList.remove('menu__links--show'); 43 | 44 | }else{ 45 | addClick(); 46 | } 47 | }); 48 | 49 | if(window.innerWidth <= 800){ 50 | addClick(); 51 | } 52 | 53 | menu.addEventListener('click', ()=> list.classList.toggle('menu__links--show')); 54 | 55 | 56 | 57 | })(); 58 | 59 | -------------------------------------------------------------------------------- /Modal/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Landing Page CSS Grid 8 | 9 | 10 | 11 | 12 |

13 | 26 | 27 |

28 |

29 |

Hello!, My name is Jordan

30 |

Let me hep you grow your business with CSS Grid

31 | Join us! 32 |

33 | 34 |

35 |

36 | 37 |

38 | 39 |

40 |

41 | 42 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /Slider/estilos.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;700&display=swap'); 2 | 3 | 4 | * { 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | } 9 | 10 | body{ 11 | font-family: 'Raleway', sans-serif; 12 | } 13 | 14 | .container{ 15 | width: 90%; 16 | min-height: 100vh; 17 | max-width: 1200px; 18 | margin: 0 auto; 19 | overflow: hidden; 20 | } 21 | 22 | .slider{ 23 | background-color: #f2f2f2; 24 | padding: 40px 0; 25 | } 26 | 27 | .slider__container{ 28 | display: grid; 29 | grid-template-columns: 50px 1fr 50px; 30 | align-items: center; 31 | gap: 1em; 32 | } 33 | 34 | .slider__body{ 35 | grid-column: 2/3; 36 | grid-row: 1/2; 37 | opacity: 0; 38 | pointer-events: none; 39 | display: grid; 40 | background-color: #f2f2f2; 41 | grid-template-columns: 1fr max-content; 42 | align-items: center; 43 | transition: opacity 1.5s; 44 | } 45 | 46 | .slider__body--show{ 47 | opacity: 1; 48 | pointer-events: unset; 49 | } 50 | 51 | .slider__texts{ 52 | max-width: 600px; 53 | } 54 | 55 | .subtitle{ 56 | font-size: 2.5rem; 57 | margin-bottom: 20px; 58 | } 59 | 60 | .slider__review{ 61 | font-weight: 300; 62 | font-size: 20px; 63 | line-height: 1.7; 64 | } 65 | 66 | .slider__img{ 67 | width: 230px; 68 | height: 230px; 69 | border-radius: 50%; 70 | object-fit: cover; 71 | display: block; 72 | margin: 0 auto; 73 | } 74 | 75 | .slider__arrow{ 76 | cursor: pointer; 77 | width: 90%; 78 | } 79 | 80 | .slider__arrow:nth-of-type(2){ 81 | justify-self: end; 82 | } 83 | 84 | @media (max-width:768px){ 85 | .slider__body{ 86 | grid-template-columns: 1fr; 87 | grid-template-rows: max-content 1fr; 88 | gap: 1em; 89 | } 90 | 91 | .slider__picture{ 92 | grid-row: 1/2; 93 | } 94 | 95 | .slider__img{ 96 | width: 210px; 97 | height: 210px; 98 | } 99 | } 100 | 101 | @media (max-width:425px){ 102 | .slider__container{ 103 | grid-template-columns: 25px 1fr 25px; 104 | } 105 | 106 | .slider__arrow{ 107 | width: 100%; 108 | } 109 | 110 | .slider__img{ 111 | width: 180px; 112 | height: 180px; 113 | } 114 | 115 | .subtitle{ 116 | font-size: 2rem; 117 | margin-bottom: 15px; 118 | } 119 | 120 | .slider__review{ 121 | font-size: 1rem; 122 | line-height: 1.6; 123 | } 124 | } -------------------------------------------------------------------------------- /Menu desplegable/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Menu desplegable 8 | 9 | 10 | 11 |

12 |

13 |

Jordan Alex.

14 | 15 |

17 | Home 18 |
21 | About 22 | 23 |
- 25 | About 1 26 |
- 28 | About 2 29 |
- 31 | About 3 32 |
34 |
37 | Projects 38 | 39 |
- 41 | Projects 1 42 |
- 44 | Projects 2 45 |
- 47 | Projects 3 48 |
50 |
53 | Contact 54 |

57 | 58 |

59 |

60 |

61 |

62 | 63 | 64 |

65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /Slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Sliders 9 | 10 | 11 | 12 | 13 |

14 |

15 |

16 | 17 |

18 |

19 |

¡Hola! Mi nombre es Jordan Alexander

20 |

21 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed atque officiis totam modi, non 22 | maiores. 23 |

24 |

25 | 26 |

29 |

30 | 31 |

32 |

33 |

¡Hola! Mi nombre es Alejandra Perez

34 |

35 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam nesciunt odio, nihil quibusdam autem nam in veritatis voluptas nobis. 36 |

37 |

38 | 39 |

42 |

43 | 44 |

45 |

46 |

¡Hola! Mi nombre es Pablo Gonzales

47 |

48 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis quis accusantium perferendis vel cumque illum quia totam repellendus! 49 |

50 |

51 | 52 |

55 |

56 | 57 |

58 |

59 |

¡Hola! Mi nombre es Pablo Gonzales 4

60 |

61 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis quis accusantium perferendis vel cumque illum quia totam repellendus! 62 |

63 |

64 | 65 |

68 |

69 | 70 |

71 |

72 |

73 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /Menu desplegable/css/estilos.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap'); 2 | 3 | 4 | *{ 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | } 9 | 10 | body{ 11 | font-family: 'Poppins', sans-serif; 12 | } 13 | 14 | .menu{ 15 | background-color: #1A202C; 16 | color: #fff; 17 | height: 70px; 18 | } 19 | 20 | .menu__container{ 21 | display: flex; 22 | justify-content: space-between; 23 | align-items: center; 24 | width: 90%; 25 | max-width: 1200px; 26 | height: 100%; 27 | margin: 0 auto; 28 | } 29 | 30 | .menu__links{ 31 | height: 100%; 32 | transition: transform .5s; 33 | display: flex; 34 | } 35 | 36 | .menu__item{ 37 | list-style: none; 38 | position: relative; 39 | height: 100%; 40 | --clip: polygon(0 0, 100% 0, 100% 0, 0 0); 41 | --transform: rotate(-90deg); 42 | } 43 | 44 | .menu__item:hover{ 45 | --clip: polygon(0 0, 100% 0, 100% 100%, 0% 100%); 46 | --transform: rotate(0); 47 | } 48 | 49 | .menu__link{ 50 | color: #fff; 51 | text-decoration: none; 52 | padding: 0 30px; 53 | display: flex; 54 | height: 100%; 55 | align-items: center; 56 | } 57 | 58 | .menu__link:hover{ 59 | background-color: #5e7094; 60 | } 61 | 62 | 63 | .menu__arrow{ 64 | transform: var(--transform); 65 | transition: transform .3s; 66 | display: block; 67 | margin-left: 3px; 68 | } 69 | 70 | .menu__nesting{ 71 | list-style: none; 72 | transition:clip-path .3s; 73 | clip-path: var(--clip); 74 | position: absolute; 75 | right: 0; 76 | bottom: 0; 77 | width: max-content; 78 | transform: translateY(100%); 79 | background-color: #000; 80 | } 81 | 82 | .menu__link--inside{ 83 | padding: 30px 100px 30px 20px; 84 | } 85 | 86 | .menu__link--inside:hover{ 87 | background-color: #798499; 88 | } 89 | 90 | .menu__hamburguer{ 91 | height: 100%; 92 | display: flex; 93 | align-items: center; 94 | padding: 0 15px; 95 | cursor: pointer; 96 | display: none; 97 | } 98 | 99 | .menu__img{ 100 | display: block; 101 | width: 36px; 102 | } 103 | 104 | @media (max-width:800px){ 105 | .menu__hamburguer{ 106 | display: flex; 107 | } 108 | 109 | .menu__item{ 110 | --clip:0; 111 | overflow:hidden ; 112 | } 113 | 114 | .menu__item--active{ 115 | --transform: rotate(0); 116 | --background: #5e7094; 117 | } 118 | 119 | .menu__item--show{ 120 | background-color: var(--background); 121 | } 122 | 123 | 124 | .menu__links{ 125 | position: fixed; 126 | max-width: 400px; 127 | width: 100%; 128 | top: 70px; 129 | bottom: 0; 130 | right: 0; 131 | background-color: #000; 132 | overflow-y: auto; 133 | display: grid; 134 | grid-auto-rows: max-content; 135 | transform: translateX(100%); 136 | } 137 | 138 | .menu__links--show{ 139 | transform: unset; 140 | width: 100%; 141 | } 142 | 143 | .menu__link{ 144 | padding: 25px 0; 145 | padding-left: 30px; 146 | height: auto; 147 | } 148 | 149 | .menu__arrow{ 150 | margin-left: auto; 151 | margin-right: 20px; 152 | } 153 | 154 | .menu__nesting{ 155 | display: grid; 156 | position: unset; 157 | width: 100%; 158 | transform: translateY(0); 159 | height: 0; 160 | transition: height .3s; 161 | } 162 | 163 | .menu__link--inside{ 164 | width: 90%; 165 | margin-left: auto; 166 | border-left: 1px solid #798499; 167 | } 168 | } -------------------------------------------------------------------------------- /Modal/estilos.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@300;400;500;700&display=swap'); 2 | 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body{ 10 | font-family: 'Urbanist', sans-serif; 11 | } 12 | 13 | .container{ 14 | width: 90%; 15 | max-width: 1200px; 16 | margin: 0 auto; 17 | overflow: hidden; 18 | } 19 | 20 | .hero{ 21 | background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%); 22 | color: #fff; 23 | display: grid; 24 | grid-template-rows:max-content 1fr; 25 | grid-template-areas: 26 | "nav" 27 | "content"; 28 | min-height: 100vh; 29 | } 30 | 31 | .nav{ 32 | grid-area: nav; 33 | display: grid; 34 | justify-content: space-between; 35 | grid-auto-flow: column; 36 | gap: 1em; 37 | align-items: center; 38 | height: 90px; 39 | } 40 | 41 | .nav__list{ 42 | list-style: none; 43 | display: grid; 44 | grid-auto-flow: column; 45 | gap: 1em; 46 | } 47 | 48 | .nav__link{ 49 | color:#fff; 50 | text-decoration: none; 51 | } 52 | 53 | .nav__logo{ 54 | font-size: 1.8rem; 55 | font-weight: 300; 56 | } 57 | 58 | .nav__menu{ 59 | display: none; 60 | } 61 | 62 | .nav__icon{ 63 | width: 30px; 64 | } 65 | 66 | /* Hero main */ 67 | 68 | .hero__main{ 69 | grid-area: content; 70 | display: grid; 71 | gap: 2em; 72 | /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */ 73 | grid-template-columns: 1fr 1fr; 74 | padding-bottom: 180px; 75 | align-items: center; 76 | } 77 | 78 | .hero__waves{ 79 | grid-area: content; 80 | align-self: end; 81 | } 82 | 83 | .hero__title{ 84 | font-size: 2.6rem; 85 | letter-spacing: 2px; 86 | } 87 | 88 | .hero__subtitle{ 89 | margin-top:1rem; 90 | margin-bottom: 1.5rem; 91 | font-size: 1.5rem; 92 | font-weight: 300; 93 | } 94 | 95 | .hero__cta{ 96 | text-decoration: none; 97 | color: #fff; 98 | padding: 15px 60px; 99 | border: 1px solid; 100 | border-radius: 6px; 101 | display: inline-block; 102 | font-weight: 500; 103 | transition: background-color .3s; 104 | } 105 | 106 | .hero__cta:hover{ 107 | background-color: #fff; 108 | color: #1e3c72; 109 | } 110 | 111 | .hero__img{ 112 | width: 100%; 113 | } 114 | 115 | 116 | .modal{ 117 | position: fixed; 118 | top: 0; 119 | left: 0; 120 | background-color: #111111bd; 121 | width: 100%; 122 | height: 100%; 123 | display: flex; 124 | opacity: 0; 125 | pointer-events: none; 126 | transition: opacity .6s .9s; 127 | --transform: translateY(-100vh); 128 | --transition: transform .8s; 129 | } 130 | 131 | .modal--show{ 132 | opacity: 1; 133 | pointer-events: unset; 134 | transition: opacity .6s; 135 | --transform: translateY(0); 136 | --transition: transform .8s .8s; 137 | } 138 | 139 | 140 | .modal__container{ 141 | margin: auto; 142 | width: 90%; 143 | max-height: 90%; 144 | max-width: 600px; 145 | background-color: #fff; 146 | border-radius: 6px; 147 | padding: 3em 2.5em; 148 | text-align: center; 149 | display: grid; 150 | place-items: center; 151 | grid-auto-columns: 100%; 152 | gap: 1em; 153 | position: relative; 154 | transform: var(--transform); 155 | transition: var(--transition); 156 | } 157 | 158 | .modal__title{ 159 | font-size: 2.5rem; 160 | } 161 | 162 | .modal__paragraph{ 163 | margin-bottom: 10px; 164 | } 165 | 166 | .modal__img{ 167 | width: 90%; 168 | max-width: 300px; 169 | display: block; 170 | } 171 | 172 | .modal__close{ 173 | text-decoration: none; 174 | color: #fff; 175 | padding: 15px 50px; 176 | border: 1px solid; 177 | border-radius: 6px; 178 | display: inline-block; 179 | font-weight: 500; 180 | 181 | background-color: #F26250; 182 | transition: background-color .3s; 183 | } 184 | 185 | .modal__close:hover{ 186 | background-color: #fff; 187 | color: #F26250; 188 | } 189 | 190 | 191 | 192 | @media (max-width:800px) { 193 | .nav__list{ 194 | display: none; 195 | } 196 | 197 | .nav__menu{ 198 | display: block; 199 | } 200 | 201 | .hero__main{ 202 | grid-template-columns: 1fr; 203 | grid-template-rows:max-content max-content ; 204 | text-align: center; 205 | } 206 | 207 | .hero__picture{ 208 | grid-row: 1/2; 209 | } 210 | 211 | .hero__img{ 212 | max-width: 500px; 213 | display: block; 214 | margin: 0 auto; 215 | } 216 | 217 | 218 | 219 | .modal__container{ 220 | 221 | padding: 2em 1.5em; 222 | 223 | } 224 | 225 | .modal__title{ 226 | font-size: 2rem; 227 | } 228 | 229 | 230 | } -------------------------------------------------------------------------------- /Modal/images/success.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Modal/images/illustration.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------

¡Bienvenido al sitio!

¡Hola! Mi nombre es Jordan Alexander

¡Hola! Mi nombre es Alejandra Perez

¡Hola! Mi nombre es Pablo Gonzales

¡Hola! Mi nombre es Pablo Gonzales 4