Estoy aprendiendo y no he logrado encontrar solución a mi problema. Estoy utilizando Bootstrap en su ultima versión en mi proyecto de Angular, pero he tenido algunos problemas con los estilos que ya tenia definidos en mi style.css.
Uno de ellos es el grosor y tamaño de la fuente.
Y otro de mis problemas es con el diseño de la barra de los skills que no se cargaron completamente:
Adjunto mi intex.html
:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selene Chavez -- Portfolio</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!--Box Icons-->
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<!--Box Icons-->
<!--Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
<!--Mis estilos CSS-->
<link rel="stylesheet" href="src/styles.css">
</head>
<body>
<app-root></app-root>
</body>
</html>
Mi estilo en CSS:
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
* {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
scroll-padding-top: 2rem;
}
/* Variables */
:root {
--main-color: #F24822;
--body-color: #090a1a;
--container-color: #171b3c;
--heading-color: #222231;
--box-color: #0d0f26;
--bg-color: #fff;
}
body {
color: var(--bg-color);
background: var(--body-color);
}
html::-webkit-scrollbar {
width: 0.5rem;
background: transparent;
}
html::-webkit-scrollbar-thumb {
background: var(--heading-color)
}
img {
width: 100%;
}
section {
padding: 3rem 0 2rem;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
.container {
max-width: 960px;
margin: auto;
width: 100%;
}
/* Header */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}
.header-active {
background: var(--box-color);
transition: 0.4s;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0;
}
.navbar-logo {
display: inline-block;
vertical-align: middle;
width: 90px;
}
.navbar-logo img {
display: block;
width: 100%;
height: auto;
}
.navbar {
display: flex;
align-items: center;
column-gap: 1.5rem;
}
.nav-link {
font-size: 0.94rem;
padding: 4px 8px;
border-radius: 0.2rem;
color: var(--bg-color);
}
.nav-link:hover {
color: var(--main-color);
background: var(--container-color);
transition: 0.3s all linear;
}
/* Menu Icon */
.menu-icon {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
row-gap: 5px;
cursor: pointer;
z-index: 200;
transition: 0.3s;
}
.menu-icon div {
display: block;
background: var(--bg-color);
height: 2px;
width: 24px;
transition: 0.3s;
}
.move .line1 {
transform: rotate(-45deg) translate(-5px, 5px);
}
.move .line2 {
opacity: 0;
}
.move .line3 {
transform: rotate(45deg) translate(-5px, -5px);
}
.home {
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
padding-top: 7rem;
}
.home-content {
position: relative;
max-width: 600px;
width: 100%;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.home-img {
width: 180px;
height: 180px;
border-radius: 50%;
background-color: #fd7051;
overflow: hidden;
margin-bottom: 2rem;
}
.home-img {
width: 180px;
height: 180px;
object-fit: cover;
object-position: center;
}
.home-text {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.home-text h3 {
position: relative;
display: flex;
align-items: center;
column-gap: 0.5rem;
font-size: 1.1rem;
color: var(--main-color);
}
.home-text h3::before {
content: '';
position: absolute;
top: 50%;
transform: translate(-50%);
left: -15px;
width: 20px;
height: 2px;
background: var(--main-color);
}
.home-text h3::after {
content: '';
position: absolute;
top: 50%;
transform: translate(-50%);
right: -35px;
width: 20px;
height: 2px;
background: var(--main-color);
}
.home-text h2 {
font-size: 3.5rem;
line-height: 4.8rem;
}
.home-text p {
font-size: 0.938rem;
margin-bottom: 1.5rem;
}
.home-text .color {
color: var(--main-color);
}
.social {
display: flex;
align-items: center;
column-gap: 0.5rem;
}
.social .bx {
font-size: 1.3rem;
padding: 10px;
border-radius: 50%;
color: var(--bg-color);
background: var(--container-color);
}
.social .bx:hover {
background: var(--main-color);
transition: 0.3s all linear;
}
/* Heading */
.heading {
font-size: 5rem;
text-transform: uppercase;
color: var(--heading-color);
text-align: center;
margin-bottom: 2rem;
}
.about-content {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.about-data span {
font-size: 1rem;
font-weight: 500;
text-transform: uppercase;
color: var(--main-color);
}
.about-data h2 {
font-size: 2rem;
line-height: 2.6rem;
font-weight: 700;
margin: 1rem 0;
}
.btn {
font-size: 0.97rem;
display: inline-flex;
align-items: center;
column-gap: 0.5rem;
color: var(--bg-color);
background: var(--main-color);
padding: 12px 16px;
border-radius: 0.4rem;
margin-top: 1rem;
}
.btn .bx {
font-size: 1.2rem;
}
.btn:hover {
background: #fd7051;
transition: 0.3s all linear;
}
.about-text p {
font-size: 0.938rem;
letter-spacing: 1px;
text-align: justify;
margin-bottom: 1.5rem;
}
/* Skills */
.skills {
padding: 50px 20px;
}
.skills .content-section {
max-width: 1100px;
margin: auto;
}
.skills .row {
display: flex;
}
.skills .row .col {
width: 50%;
padding: 0 20px;
}
.skills .row .col h3 {
font-size: 28px;
margin-bottom: 25px;
}
.skills .skill>span {
font-weight: bold;
display: block;
margin-bottom: 10px;
}
.skills .skill .skills-bar {
height: 8px;
width: 80%;
background-color: var(--heading-color);
position: relative;
margin-bottom: 30px;
}
.skills .skill .progress {
background-color: var(--main-color);
position: absolute;
top: 0;
left: 0;
height: 8px;
}
.skills .skill .skills-bar span {
position: absolute;
height: 40px;
width: 40px;
background-color: var(--main-color);
border-radius: 50px;
line-height: 40px;
text-align: center;
top: -17px;
right: -15px;
font-size: 14px;
}
.skills .skill .javascript {
width: 0%;
animation: 2s javascript forwards;
}
@keyframes javascript {
0% {
width: 0%;
}
100% {
width: 75%;
}
}
.skills .skill .htmlcss {
width: 0%;
animation: 2s htmlcss forwards;
}
@keyframes htmlcss {
0% {
width: 0%;
}
100% {
width: 89%;
}
}
.skills .skill .python {
width: 0%;
animation: 2s python forwards;
}
@keyframes python {
0% {
width: 0%;
}
100% {
width: 85%;
}
}
.skills .skill .mysql {
width: 0%;
animation: 2s mysql forwards;
}
@keyframes mysql {
0% {
width: 0%;
}
100% {
width: 70%;
}
}
.skills .skill .photoshop {
width: 0%;
animation: 2s photoshop forwards;
}
@keyframes photoshop {
0% {
width: 0%;
}
100% {
width: 90%;
}
}
.skills .skill .comunicacion {
width: 0%;
animation: 2s comunicacion forwards;
}
@keyframes comunicacion {
0% {
width: 0%;
}
100% {
width: 80%;
}
}
.skills .skill .trabajoequipo {
width: 0%;
animation: 2s trabajoequipo forwards;
}
@keyframes trabajoequipo {
0% {
width: 0%;
}
100% {
width: 75%;
}
}
.skills .skill .creatividad {
width: 0%;
animation: 2s creatividad forwards;
}
@keyframes creatividad {
0% {
width: 0%;
}
100% {
width: 65%;
}
}
.skills .skill .autodidacta {
width: 0%;
animation: 2s autodidacta forwards;
}
@keyframes autodidacta {
0% {
width: 0%;
}
100% {
width: 95%;
}
}
.skills .skill .productividad {
width: 0%;
animation: 2s productividad forwards;
}
@keyframes productividad {
0% {
width: 0%;
}
100% {
width: 90%;
}
}
/* Curriculum */
.estudios {
padding: 50px 20px;
}
.estudios .content-section {
max-width: 1100px;
margin: auto;
}
.estudios .row {
display: flex;
justify-content: space-between;
}
.estudios .row .col {
width: 49%;
padding: 0 20px;
}
.estudios .row .col h3 {
font-size: 28px;
margin-bottom: 25px;
}
.estudios .row .left {
border-right: 2px solid var(--container-color);
}
.estudios .row .right {
border-left: 2px solid var(--container-color);
}
.estudios .row .item {
padding: 25px;
margin-bottom: 30px;
background-color: var(--heading-color);
position: relative;
}
.estudios .row .item h4 {
font-size: 20px;
margin-bottom: 10px;
}
.estudios .row .item .institucion {
color: var(--main-color);
font-size: 18px;
font-weight: bold;
display: block;
}
.estudios .row .item .fecha {
display: block;
color: var(--main-color);
margin-bottom: 10px;
}
.estudios .row .item p {
line-height: 24px;
}
.estudios .row .left {
border-right: 2px solid var(--heading-color);
margin-right: 20px;
}
.estudios .row .right {
border-left: 2px solid var(--heading-color);
margin-left: 20px;
}
.estudios .row .item .connectori {
height: 2px;
background-color: var(--main-color);
width: 47px;
position: absolute;
top: 50%;
right: -47px;
z-index: 5;
}
.estudios .row .item .connectori .circlei {
display: block;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: var(--main-color);
float: right;
position: relative;
bottom: 4px;
}
.estudios .row .item .connectord {
height: 2px;
background-color: var(--main-color);
width: 47px;
position: absolute;
top: 50%;
left: -47px;
z-index: 5;
}
.estudios .row .item .connectord .circled {
display: block;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: var(--main-color);
float: left;
position: relative;
bottom: 4px;
}
/* Portfolio */
.portfolio-content {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.portfolio-box {
position: relative;
width: 100%;
height: 320px;
border-radius: 1rem;
overflow: hidden;
}
.portfolio-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.portfolio-overlay {
position: absolute;
top: -100%;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(59, 40, 22, 0.7);
}
.portfolio-overlay h2 {
font-size: 1.6rem;
font-weight: 600;
margin-bottom: 10px;
}
.portfolio-overlay .bx {
font-size: 24px;
padding: 10px;
background: var(--main-color);
color: var(--bg-color);
border-radius: 4px;
}
.portfolio-overlay .bx:hover {
background: #fd7051;
transition: 0.3s all linear;
}
.portfolio-box:hover .portfolio-overlay {
top: 0;
transition: 0.3s all ease;
}
/* Contact Form */
.contact-form {
max-width: 600px;
margin: auto;
width: 100%;
display: grid;
row-gap: 1rem;
}
.contact-form input,
.contact-form textarea {
border: none;
outline: none;
font-size: 0.9rem;
padding: 15px;
color: var(--bg-color);
background: var(--box-color);
border-radius: 0.4rem;
}
.contact-form .send-btn {
width: 120px;
font-size: 1rem;
letter-spacing: 1px;
font-weight: 500;
text-transform: uppercase;
padding: 12px;
background: var(--main-color);
cursor: pointer;
}
.contact-form .send-btn:hover {
background: #fd7051;
transition: 0.3s all linear;
}
/* Footer */
.footer {
display: flex;
align-items: center;
flex-direction: column;
row-gap: 1.4rem;
padding: 30px 0;
}
.footer p {
font-size: 0.9rem;
}
/* Scroll Top */
.scroll-top {
position: fixed;
bottom: -100%;
right: 1.5rem;
}
.scroll-top .bx {
padding: 8px;
font-size: 1.3rem;
color: var(--bg-color);
background: var(--box-color);
border-radius: 0.2rem;
}
.scroll-top .bx:hover {
background: var(--container-color);
transition: 0.3s;
}
.scroll-active {
bottom: 2rem;
transition: 0.3s;
}
/* Responsive */
@media (max-width:990px) {
.container {
margin: 0 auto;
width: 90%;
}
}
@media (max-width:892px) {
section {
padding: 2rem 0;
}
.nav {
padding: 12px 0;
}
.heading {
font-size: 4rem;
}
.portfolio-box {
height: 257px;
}
}
@media (max-width:775px) {
.nav {
padding: 10px 0;
}
.logo {
font-size: 1.1rem;
}
.home {
min-height: 500px;
padding-top: 6rem;
}
.home-text h3 {
font-size: 1rem;
}
.home-text h2 {
font-size: 3rem;
line-height: 3.8rem;
}
.home-text p {
font-size: 0.825rem;
}
.skills {
padding: 10px 50px;
}
.skills .row .col h3 {
font-size: 1rem;
}
.estudios .content-section {
max-width: 600px;
margin: auto;
}
.portfolio-box {
height: 245px;
}
.menu-icon {
display: flex;
}
.navbar {
position: absolute;
top: 0;
right: -100%;
width: 300px;
height: 100vh;
background: var(--box-color);
display: flex;
flex-direction: column;
align-items: center;
padding: 50px 20px;
transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
.open-menu {
right: 0;
transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
.nav-link {
display: block;
margin: 1rem 0;
}
}
@media (max-width:635px) {
.about-content {
grid-template-columns: 1fr;
}
.about-data span {
font-size: 0.9rem;
}
.about-data h2 {
font-size: 1.7rem;
line-height: 2.3rem;
font-weight: 600;
margin: 0.8rem 0;
}
.about-text p {
font-size: 0.825rem;
margin-bottom: 1.3rem;
}
.estudios .row {
display: block;
}
.estudios .row .col {
width: 90%;
}
.estudios .row .right {
margin-left: 20px;
}
}
@media (max-width:450px) {
.home {
min-height: 485px;
padding-top: 5rem;
}
.home-img {
width: 120px;
height: 120px;
}
.home-img img {
width: 120px;
height: 160px;
}
.home-text h2 {
font-size: 2.1rem;
line-height: 3.2rem;
}
.home-text p br {
display: contents;
}
.heading {
font-size: 3rem;
}
.about-data h2 {
font-size: 1.5rem;
line-height: 2.1rem;
margin: 0.6rem 0;
}
.skills .row {
display: block;
}
.skills .row .col {
width: 100%;
}
.skills .row .col .skills-bar {
width: 100%;
}
.portfolio-content {
grid-template-columns: 1fr;
}
}
@media (max-width:325px) {
.navbar {
width: 100%;
}
.portfolio-box {
height: 190px;
}
}
Las rutas en el Test de **Angular.json
**:
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
}
}
}
}
},
Y por ultimo, dejo parte de la estructura de los ficheros: