Web-Development-test1/Devbrk.txt at main · Alexander-Salvador/Web-Development-test1 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
/*--------------------------------------------------------------
# VARIABLE CSS
--------------------------------------------------------------*/
:root {
    --header-height: 80px;

    /* BREAKPOINTS */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

    /* COLORS */
    --background-color: #;
    --btn-color: #;
    --primary-color: #;
    --secondary-color: #;
    --white-color: #fff;

    /* FONT SIZE */
    /* 5rem = 8px  |  1rem = 16px */
    --fontsize-a: ;
    --fontsize-h1: ;
    --fontsize-h2: ;
    --fontsize-h3: ;
    --fontsize-h4: ;
    --fontsize-paragraph: ;

    /* FONT WEIGHT */
    --fontweight-a: ;
    --fontweight-h1: ;
    --fontweight-h2: ;
    --fontweight-h3: ;
    --fontweight-h4: ;
    --fontweight-paragraph: ;

    /* LINE HEIGHT */
    --lineheight-h1: ;
    --lineheight-h2: ;
    --lineheight-h3: ;
    --lineheight-paragraph: ;

    /* PADDING SECTION */
    --padding-primary: ;

    /* TYPOGRAPHY */
    --ffamily-main: "Montserrat", sans-serif;
    --ffamily-secundary: "Montserrat", sans-serif;
}

/*--------------------------------------------------------------
# BASE CSS
--------------------------------------------------------------*/
* {
    padding: ;
    margin: ;
    box-sizing: ;
}

/*--------------------------------------------------------------
# PREDEFINE STYLES
--------------------------------------------------------------*/
a {
    text-decoration: ;
}

ol,ul {
    list-style: ;
}

h1 {
    color: ;
    font-weight: ;
    font-size: ;
    line-height: ;
}

h2 {
    color: ;
    font-size: ;
    line-height: ;
    font-weight: ;
}

h3 {
    color: ;
    font-size: ;
    line-height: ;
}

h4 {
    font-size: ;
    font-weight: ;
}

p {
    color: var(--paragraph-color);
    font-size: var(--fontsize-paragraph);
    line-height: var(--line-paragraph);
}

.btn-primary {
    background-color:;
    border-radius: ;
    box-shadow: 1px 0.1rem 0.5rem 0px rgb(60 60 60 / 39%);
    color: ;
    height: fit-content; /* para que use solo el alto utilizado */
    width: fit-content; /* para que use solo el ancho utilizado */
    display: ;
    padding: ;
}

/*--------------------------------------------------------------
# TIPS:
--------------------------------------------------------------*/
/* HOVER EFFECT */
& .nav-links:not(is(hover, active)) {
    text-decoration: none;
}
# probar cuando tengamos paginas dentro de "HOME" "SERVICES" entre otros la funcion es cuando no este en hover o activa se aplica text-decoration none. y si se cumple y estan en hover o active se muestra underline.

/* CONTAINER SECTION */
.container {
    max-width: 1280px;
    margin: 0 auto;
}

/* MIN Y MAX WIDTH */
En media queries el orden de MIN-WIDTH es de menor a mayor ejem:
Minwidth (740px)
Minwidth (1400px)

En media queries el orden de MAX-WIDTH es de mayor a menor ejem:
Maxwidth (1400px)
Maxwidth (740px)

# INVESTIGATION
/* SUB GRID */
/* FONT SIZE: CLAMP (MIN IDEAL MAX) */

TIPSemas super interesantes el primero para alinear elementos en la grid.
el 2° para hacer el texto responsive sin media queries.


/* .services-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.services-item {
  margin-bottom: 30px;

  & img {
    min-height: 230px;
    max-width: 100%;
    display: block;
  }
} */