Skip to content

Commit 2d33716

Browse files
nawazdevxnawazdevx
committed
Add responsive for all devices
1 parent a97105a commit 2d33716

File tree

1 file changed

+316
-0
lines changed

1 file changed

+316
-0
lines changed

‎assets/css/style.css‎

Lines changed: 316 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -666,3 +666,319 @@ textarea.input-field {
666666
.social-link {
667667
font-size: 17px;
668668
}
669+
670+
/** ───────────────────────────────────── Media Queries /*/
671+
/**
672+
* ────── responsive for large than 576px screen
673+
*/
674+
675+
@media (min-width: 576px) {
676+
/* === Reused Styles === */
677+
.scrollbar-item {
678+
min-width: calc(50% - 20px);
679+
}
680+
681+
/* === Hero === */
682+
.exp-list {
683+
display: flex;
684+
justify-content: flex-start;
685+
gap: 50px;
686+
}
687+
688+
.exp-list .list-item:not(:last-child) {
689+
margin-block-end: 0;
690+
}
691+
692+
/* === Pricing === */
693+
.pricing-card {
694+
display: flex;
695+
justify-content: flex-start;
696+
align-items: center;
697+
gap: 10px;
698+
}
699+
700+
.pricing-card .card-title {
701+
margin-block: 0;
702+
margin-inline-end: auto;
703+
}
704+
}
705+
706+
/**
707+
* ────── responsive for larger than 768px screen
708+
*/
709+
710+
@media (min-width: 768px) {
711+
/* === Custom Property === */
712+
:root {
713+
/* === Typography === */
714+
--fs-30: 3.5rem;
715+
--fs-25: 3rem;
716+
}
717+
718+
/* === Reused Styles === */
719+
.h3 {
720+
--fs-18: 2rem;
721+
}
722+
723+
.card-content {
724+
padding: 30px 35px;
725+
}
726+
727+
.card-content > ion-icon {
728+
top: 30px;
729+
right: 30px;
730+
}
731+
732+
/* === Timeline === */
733+
.timeline-item {
734+
grid-template-columns: repeat(3, 1fr);
735+
gap: 30px;
736+
}
737+
738+
/* === Pricing === */
739+
.pricing-card,
740+
.contact-link {
741+
font-size: var(--fs-18);
742+
}
743+
744+
/* === Footer === */
745+
.footer .container {
746+
display: flex;
747+
justify-content: space-between;
748+
align-items: center;
749+
}
750+
751+
.copyright {
752+
margin-block-end: 0;
753+
}
754+
}
755+
756+
/**
757+
* ────── responsive for larger than 992px screen
758+
*/
759+
760+
@media (min-width: 992px) {
761+
/* === Custom Property === */
762+
:root {
763+
/* === Typography === */
764+
--fs-35: 4.5rem;
765+
766+
/* === Spacing === */
767+
--section-padding: 120px;
768+
}
769+
770+
/* === Reused Styles === */
771+
.container {
772+
padding-inline: 50px;
773+
}
774+
775+
/* === Header === */
776+
.header {
777+
background-color: transparent;
778+
border-block-end: none;
779+
padding-block: 25px;
780+
transition: var(--transition);
781+
}
782+
783+
.header.active {
784+
background-color: var(--white);
785+
padding-block: 20px;
786+
}
787+
788+
.navbar,
789+
.navbar.active {
790+
all: unset;
791+
margin-inline-start: auto;
792+
transition: var(--transition);
793+
}
794+
795+
.navbar {
796+
visibility: hidden;
797+
}
798+
799+
.navbar.active {
800+
visibility: visible;
801+
}
802+
803+
.navbar-list {
804+
display: flex;
805+
gap: 20px;
806+
margin-block: 0;
807+
}
808+
809+
.navbar-link {
810+
opacity: 0;
811+
transform: translateX(20px);
812+
font-weight: var(--fw-400);
813+
transition: var(--transition);
814+
}
815+
816+
.navbar.active .navbar-link {
817+
opacity: 1;
818+
transform: translateX(0);
819+
}
820+
821+
.navbar-link:is(:hover, :focus) {
822+
color: var(--theme-color);
823+
}
824+
825+
/* === Hero === */
826+
.hero {
827+
--section-padding: 70px;
828+
padding-block-start: calc(var(--section-padding) + 60px);
829+
min-height: 100vh;
830+
display: grid;
831+
align-items: center;
832+
}
833+
834+
.hero .container {
835+
display: grid;
836+
grid-template-columns: 1fr 1fr;
837+
align-items: center;
838+
gap: 150px;
839+
}
840+
841+
.hero-banner {
842+
order: 1;
843+
width: 250px;
844+
margin-inline: auto 80px;
845+
margin-block-end: 0;
846+
overflow: visible;
847+
transform: rotate(7deg);
848+
}
849+
850+
.hero-banner .img-cover {
851+
border-radius: inherit;
852+
}
853+
854+
.hero-banner::before {
855+
bottom: -40px;
856+
left: -95px;
857+
width: 90%;
858+
height: 100%;
859+
background-color: var(--theme-color);
860+
z-index: -1;
861+
transform: rotate(-15deg);
862+
border-radius: var(--radius-10);
863+
}
864+
865+
.exp-list .span {
866+
--fs-13: 1.4rem;
867+
}
868+
869+
.slide-down-btn {
870+
display: block;
871+
color: var(--black);
872+
font-size: 40px;
873+
max-width: max-content;
874+
margin-block-start: 40px;
875+
transition: var(--transition);
876+
animation: scrollDown 2s ease infinite;
877+
}
878+
879+
.slide-down-btn:is(:hover, :focus) {
880+
color: var(--theme-color);
881+
}
882+
883+
@keyframes scrollDown {
884+
0% {
885+
transform: translateY(0);
886+
}
887+
30% {
888+
transform: translateY(20px);
889+
}
890+
}
891+
892+
/* === Skills === */
893+
.skills .container {
894+
position: relative;
895+
display: grid;
896+
grid-template-columns: 1fr 1fr;
897+
gap: 150px;
898+
}
899+
900+
.skills-banner {
901+
display: block;
902+
position: absolute;
903+
top: 0;
904+
right: 50px;
905+
width: 410px;
906+
height: 620px;
907+
background-image: url('../images/portfolio-2.jpg');
908+
background-repeat: no-repeat;
909+
background-size: contain;
910+
background-position: 105%;
911+
background-attachment: fixed;
912+
overflow: hidden;
913+
}
914+
915+
/* === Timeline === */
916+
.timeline-item {
917+
padding-block: 30px;
918+
}
919+
920+
/* === Pricing === */
921+
.pricing .container {
922+
position: relative;
923+
display: grid;
924+
grid-template-columns: 1fr 1fr;
925+
align-items: flex-start;
926+
gap: 200px;
927+
}
928+
929+
.pricing-content {
930+
position: sticky;
931+
top: 120px;
932+
}
933+
934+
.pricing .section-text {
935+
margin-block-end: 0;
936+
}
937+
938+
/* === Contact === */
939+
.contact .container {
940+
display: grid;
941+
grid-template-columns: 1fr 1fr;
942+
align-items: center;
943+
gap: 200px;
944+
}
945+
946+
.contact-list {
947+
margin-block-end: 0;
948+
}
949+
}
950+
951+
/**
952+
* ────── responsive for larger than 1200px screen
953+
*/
954+
955+
@media (min-width: 1200px) {
956+
/* === Reused Styles === */
957+
.container {
958+
max-width: 1170px;
959+
width: 100%;
960+
margin-inline: auto;
961+
}
962+
963+
.has-scrollbar {
964+
gap: 40px;
965+
}
966+
967+
.scrollbar-item {
968+
min-width: calc(33.33% - 26.66px);
969+
}
970+
971+
:is(.portfolio, .news) .section-title {
972+
margin-block-end: 80px;
973+
}
974+
975+
/* === Header === */
976+
.header .container {
977+
max-width: unset;
978+
}
979+
980+
/* === Hero === */
981+
.hero-banner {
982+
width: 275px;
983+
}
984+
}

0 commit comments

Comments
 (0)