diff --git a/asset/css/panel.css b/asset/css/panel.css new file mode 100644 index 0000000..b4897d5 --- /dev/null +++ b/asset/css/panel.css @@ -0,0 +1,62 @@ +.style-switcher { + position: fixed; + top: 20px; + right: 0; + z-index: 10; + background-color: #fff; + padding: 15px; + border: 1px solid #d4d4e3; + border-right: none; + border-radius: 0 0 0 5px; + -webkit-transform: translateX(100%); + transform: translateX(100%); + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; +} +.style-switcher.open { + -webkit-transform: translateX(0%); + transform: translateX(0%); +} +.style-switcher h5 { + font-size: 16px; + color: #302e4d; + margin-bottom: 8px; + padding-bottom: 5px; + border-bottom: 1px solid #e8dfec; +} +.style-switcher ul { + margin: 0; + padding: 0; + display: block; + margin-bottom: 5px; + list-style: none; +} +.style-switcher ul li { + display: inline-block; +} +.style-switcher ul li a { + height: 30px; + width: 30px; + display: block; + border-radius: 50%; + cursor: pointer; + text-decoration: none; + margin-right: 3px; +} +.style-switcher .toggle-style-switcher { + position: absolute; + height: 45px; + width: 45px; + background-color: #fff; + left: -46px; + top: -1px; + border: 1px solid #d4d4e3; + border-right: none; + text-align: center; + cursor: pointer; + border-radius: 5px 0 0 5px; +} +.style-switcher .toggle-style-switcher .fa { + font-size: 20px; + line-height: 43px; +} diff --git a/asset/css/skins/pink.css b/asset/css/skins/pink.css new file mode 100644 index 0000000..1adc93f --- /dev/null +++ b/asset/css/skins/pink.css @@ -0,0 +1,41 @@ +.aside .logo a::before{ + border-top: 4px solid #ec1839; + border-left: 4px solid #ec1839; +} +.aside .logo a::after{ + border-right: 4px solid #ec1839; + border-bottom: 4px solid #ec1839; +} +.contact .contact-info-item .icon .fa, +.blog .blog-item-inner .blog-info .blog-tags a, +.lightbox .lightbox-controls .prev-item .fa, +.lightbox .lightbox-controls .next-item .fa, +.portfolio .portfolio-item .portfolio-info .icon .fa, +body.dark .portfolio .portfolio-filter button.active, +.portfolio .portfolio-filter button.active, +.service .service-item .service-item-inner .icon .fa, +.about .about-content .about-text h2 span, +body.dark .aside .nav li a:hover, +body.dark .aside .nav li a.active, +.aside .nav li a:hover, +.aside .nav li a.active{ + color: #ec1839; +} +.blog .blog-item-inner .blog-img .blog-date, +.service .service-item .service-item-inner:hover .icon, +.about .about-content .timeline .circle-dot, +.about .about-content .timeline .timeline-item::before, +.about .about-content .skills .skill-item .progress .progress-in, +.btn, +.section-title h2::after, +.section-title h2::before, +.aside .nav-toggler span, +.aside .nav-toggler span::before, +.aside .nav-toggler span::after, +.home .intro .social-links a{ + background-color: #ec1839; +} + +.portfolio .portfolio-filter button.active{ + border-color: #ec1839; +} \ No newline at end of file diff --git a/asset/css/style.css b/asset/css/style.css new file mode 100644 index 0000000..10cdc99 --- /dev/null +++ b/asset/css/style.css @@ -0,0 +1,94 @@ +@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); +/* General style +======================================================== */ +html { + scroll-behavior: smooth; +} +body { + margin: 0; + line-height: 1.5; + font-size: 16px; + font-family: "Montserrat", sans-serif; + font-weight: 400; +} +::-webkit-scrollbar { + width: 10px; +} + +::-webkit-scrollbar-track { + background: #f1f1f1; +} + +::-webkit-scrollbar-thumb { + background: #bdbdbd00; +} + +::-webkit-scrollbar-thumb:hover { + background: #555; +} +* { + margin: 0; + padding: 0; + outline: none; + text-decoration: none; + box-sizing: border-box; +} +::before, +::after { + box-sizing: border-box; +} + +/* PRELOADER STYLES */ +/* Preloader */ +.preloader { + background-color: #222222; + position: fixed; + left: 0; + top: 0; + height: 100%; + width: 100%; + z-index: 150; + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-transition: all 1s ease; + transition: all 1s ease; +} +.preloader.opacity-0 { + opacity: 0; +} +.preloader .loader { + height: 40px; + width: 40px; + border: 4px solid #e3e3e3; + border-radius: 50%; + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; + -webkit-animation: spin 2s linear infinite; + animation: spin 2s linear infinite; +} +@-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +/* END PRELOADER STYLES */ \ No newline at end of file diff --git a/index.html b/index.html index 42a566c..28d96b6 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,68 @@ - - - - Document - - -

Primer Paso

- - \ No newline at end of file + + + + Sebastian Mira Castro - Portfolio Web + + + + + + + + + + + + +
+
+
+ +
+ + + + +
+ +

Primer Paso

+ + diff --git a/package.json b/package.json index 421c7f8..f079047 100644 --- a/package.json +++ b/package.json @@ -10,5 +10,6 @@ "license": "MIT", "bugs": { "url": "https://github.com/sebastianmiracastro/sebastianmiracastro.github.io/issues" - } + }, + "homepage": "https://sebastianmiracastro.github.io/" }