From 43f4cff34cc16862cc5ab2dab8190e365f195343 Mon Sep 17 00:00:00 2001 From: Saswat Date: Thu, 27 May 2021 09:29:33 +0530 Subject: [PATCH 1/4] ADDED THE SLIDING FUNCTION AND MADE IT RESPONSIVE --- css/style.css | 78 +++++++++++++++++++++++++-------------------------- index.html | 52 ++++++++++++++++++++-------------- 2 files changed, 69 insertions(+), 61 deletions(-) diff --git a/css/style.css b/css/style.css index 5e0684d..aef5dc9 100644 --- a/css/style.css +++ b/css/style.css @@ -344,57 +344,55 @@ hr { /******about end ******** */ /********Section-Sharpen your skills starts*********/ -.skills-section table { - border-collapse: collapse; - border-spacing: 0; - width: 90%; - border: 1px solid #ddd; - align: centre; +.slide1{ + display: flex !important; + justify-content: space-between!; + align-items: center; } -.skills-section th:hover { - cursor: pointer; - background-color: #27d8a3; +.slide1 a div{ + margin: 15px 120px; + width:200px; + height: 100px; + text-align: center; + padding: 35px; + background-color: #05272e; + border-radius: 15px; + box-shadow: 5px 5px 10px rgba(13, 87, 13, 0.384); } -.skills-section th, -td { - text-align: left; - padding: 30px; - font-weight: bold; - font-size: 20px; - text-shadow: 2px 2px #0000; +.slide1 a div:hover{ + background-color: #123840; } -.skills-section a { - color: #05272e; +.slide1 a{ + text-decoration: none; + color: white; + font-weight: 700; + font-size: 16px; } -.skills-section tr:nth-child(odd) th { - background-color: #49b1ad; -} -.skills-section tr:nth-child(odd) th:hover{ - background-color: #1e918d; - transition-delay: 100ms; - border-top: 2px solid #0c3b3a; -} -.skills-section tr:nth-child(even) th:hover{ - background-color: #a6adad; - transition-delay: 100ms; - border-top: 2px solid #0c3b3a; +.slide1 a:hover{ + color: var(--teal); } -.skills-section hr { - border: 0.5px solid #49b1ad; - display: block; - width: 80px; - margin: auto; -} -.skills-section h1 { - font-size: 50px; - font-weight: bold; - backdrop-filter: blur(20px); +.carousel-indicators{ + position: absolute; + height: 20px; + width: 110px; + margin: -100px auto; + background-color: #05272e; + border-radius: 5px; + box-shadow: 1px 20px 20px rgba(13, 87, 13, 0.384); } + +@media (max-width: 1456px){ + .slide1{ + flex-direction: column; + justify-content: center; + } +} + .span { display: block; margin-bottom: 10em; diff --git a/index.html b/index.html index 298c4fa..f9f88ee 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,9 @@ + + + @@ -194,30 +197,37 @@

About Us

-
+

Sharpen Your Skills



- - - - - - - - - - - - - - - - -
  Data Structures  Algorithms  Python
  C  C++  Java
  Ruby  Golang  Swift
-
-
- + + + + From 6f7d846a23d23a81d8445872297f0c8bdddbe12c Mon Sep 17 00:00:00 2001 From: Saswat Date: Thu, 27 May 2021 10:14:04 +0530 Subject: [PATCH 2/4] sliding function,responsiveness,link to whole --- css/style.css | 64 +++++++++++++++++++++++++++++++++++++ index.html | 87 +++++++++++++++++++-------------------------------- 2 files changed, 96 insertions(+), 55 deletions(-) diff --git a/css/style.css b/css/style.css index 092cfc3..10605a2 100644 --- a/css/style.css +++ b/css/style.css @@ -582,6 +582,70 @@ HEAD .round-2 { color: #ffffff90; } +/* skills section */ + +.skills-section{ + height: 375px; +} + +.text-center{ + font-weight: bolder; +} + +.slide1{ + display: flex !important; + justify-content: space-between!; + align-items: center; +} + +.slide1 a div{ + margin: 15px 120px; + width:200px; + height: 100px; + text-align: center; + padding: 35px; + background-color: #05272e; + border-radius: 15px; + box-shadow: 5px 5px 10px rgba(13, 87, 13, 0.384); + +} + +.slide1 a div:hover{ + background-color: #123840; +} + +.slide1 a{ + text-decoration: none; + color: white; + font-weight: 700; + font-size: 16px; +} + +.slide1 a:hover{ + color: var(--teal); +} + +.carousel-indicators{ + position: absolute; + height: 20px; + width: 110px; + margin: -100px auto; + background-color: #05272e; + border-radius: 5px; + box-shadow: 1px 20px 20px rgba(13, 87, 13, 0.384); +} + +@media (max-width: 1456px){ + .slide1{ + flex-direction: column; + justify-content: center; + } + + .skills-section{ + height: 600px; + } +} + /*********** footer ***********/ .email { diff --git a/index.html b/index.html index 9b2b9d7..51501df 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,9 @@ + + +