diff --git a/Team_Section/Screenshots/01.png b/Team_Section/Screenshots/01.png new file mode 100644 index 00000000..4f7ad1d5 Binary files /dev/null and b/Team_Section/Screenshots/01.png differ diff --git a/Team_Section/Screenshots/02.png b/Team_Section/Screenshots/02.png new file mode 100644 index 00000000..989adfaa Binary files /dev/null and b/Team_Section/Screenshots/02.png differ diff --git a/Team_Section/Screenshots/03.png b/Team_Section/Screenshots/03.png new file mode 100644 index 00000000..68361b6b Binary files /dev/null and b/Team_Section/Screenshots/03.png differ diff --git a/Team_Section/images/Harsh.png b/Team_Section/images/Harsh.png new file mode 100644 index 00000000..d5fe78ab Binary files /dev/null and b/Team_Section/images/Harsh.png differ diff --git a/Team_Section/index.html b/Team_Section/index.html new file mode 100644 index 00000000..d3488d26 --- /dev/null +++ b/Team_Section/index.html @@ -0,0 +1,134 @@ + + + + + + + + + + + + Team Section + + + +
+ + +
+
+
+
+
+ +
+
+
Harsh Baldaniya
+
Web Designer
+
+
+ + + + +
+
+
+
+
+
+ +
+
+
Harsh Baldaniya
+
UI Designer
+
+
+ + + + +
+
+
+
+
+
+ +
+
+
Harsh Baldaniya
+
Web Devloper
+
+
+ + + + +
+
+
+
+
+
+
+
+ +
+
+
Harsh Baldaniya
+
Web Designer
+
+
+ + + + +
+
+
+
+
+
+ +
+
+
Harsh Baldaniya
+
UI Designer
+
+
+ + + + +
+
+
+
+
+
+ +
+
+
Harsh Baldaniya
+
Web Devloper
+
+
+ + + + +
+
+
+
+
+
+ + +
+
+ + + \ No newline at end of file diff --git a/Team_Section/style.css b/Team_Section/style.css new file mode 100644 index 00000000..d7963153 --- /dev/null +++ b/Team_Section/style.css @@ -0,0 +1,168 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"); +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} +body { + display: flex; + min-height: 100vh; + align-items: center; + justify-content: center; + background: #f2f2f2; + position: relative; +} +body::before { + content: ""; + position: absolute; + width: 100%; + background: #ff676d; + /* background: linear-gradient(to top, #f2f2f2, #ff676d); */ + clip-path: inset(47% 0 0 0); + z-index: -1; + height: 100%; +} +::selection { + background: #ff676d; + color: #fff; +} +.container { + max-width: 950px; + width: 100%; + overflow: hidden; + padding: 80px 0; +} +.container .main-card { + display: flex; + justify-content: space-evenly; + width: 200%; + transition: 1s; +} +#two:checked ~ .main-card { + margin-left: -100%; +} +.container .main-card .cards { + width: calc(100% / 2 - 10px); + display: flex; + flex-wrap: wrap; + margin: 0 20px; + justify-content: space-between; +} +.main-card .cards .card { + width: calc(100% / 3 - 10px); + background: #fff; + border-radius: 12px; + padding: 30px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25); + transition: all 0.4s ease-in-out; + box-shadow: 0px 0px 5px 4px black; +} +.main-card .cards .card:hover { + transform: translateY(-15px); +} +.cards .card .content { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; +} +.cards .card .content .img { + height: 130px; + width: 130px; + border-radius: 50%; + padding: 3px; + background: #ff676d; + margin-bottom: 14px; +} +.card .content .img img { + box-shadow: 0px 0px 5px 4px #ff676d; + height: 100%; + width: 100%; + border: 3px solid #ffff; + border-radius: 50%; + object-fit: cover; + transition: ease-in-out box-shadow .5s; +} +.card .content .img img:hover{ + box-shadow: 0px 0px 5px 4px black; +} +.card .content .name { + font-size: 20px; + font-weight: 500; +} +.card .content .job { + font-size: 20px; + color: #ff676d; +} +.card .content .media-icons { + margin-top: 10px; + display: flex; +} +.media-icons a { + text-align: center; + line-height: 33px; + height: 35px; + width: 35px; + margin: 0 4px; + font-size: 14px; + color: #fff; + border-radius: 50%; + border: 2px solid transparent; + background: #ff676d; + transition: all 0.3s ease; +} +.media-icons a:hover { + color: #ff676d; + background-color: #fff; + border-color: #ff676d; +} +.container .button { + width: 100%; + display: flex; + justify-content: center; + margin: 20px; +} +.button label { + height: 15px; + width: 15px; + border-radius: 20px; + background: #fff; + margin: 0 4px; + cursor: pointer; + transition: all 0.5s ease; +} +.button label:hover{ + box-shadow: 0px 0px 8px 7px black inset; +} +.button label.active { + width: 35px; +} +#one:checked ~ .button .one { + width: 35px; +} +#one:checked ~ .button .two { + width: 15px; +} +#two:checked ~ .button .one { + width: 15px; +} +#two:checked ~ .button .two { + width: 35px; +} +input[type="radio"] { + display: none; +} +@media (max-width: 768px) { + .main-card .cards .card { + margin: 20px 0 10px 0; + width: calc(100% / 2 - 10px); + } +} +@media (max-width: 600px) { + .main-card .cards .card { + width: 100%; + } +}