very-basic-project-portfolio/responsive.css at main · Uzmakh/very-basic-project-portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
/*  Media Query */
/* For the devices below this width */
@media(max-width: 870px){
    html{
        font-size: 50%;
    }
    #contact .container{
        height: 50vh;
    }
   #contact .top-contact{
        /* border: 1px solid blue; */
        max-width: 600px;

    }
}

@media(max-width: 768px){
    html{
        font-size: 40%;
    }
    header{
        /* background: var(--dark-color); */
        padding: 2.5rem;
    }
    .logo{
        font-size: 3rem;
        font-weight: 700;
    }
    nav li{
        font-size: 2.5rem;
    }
    #hero .container{
        height: 80vh;
    }
    .hero-image{
     display: grid;
     place-items: center;
    }
    .hero-image img{

        width: 55%;
        border-radius: 10rem;
    }
    .hero-content{
        /* border: 1px solid green; */
        width: 80%;
        /* margin-right: 15rem; */
        font-size: 0.5rem;
    }
    /* .project-container{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    } */
    #contact .container{
        /* border: 1px solid blue; */
        height: 40vh;
        }
 }


@media(max-width: 500px){
    html{
        font-size: 32%;
    }
    #hero .container{
        flex-direction: column;
        height: 60vh;
    }
    .hero-image{
        display: grid;
        place-items: center;
    }
    .hero-content{
        /* max-width: 70%; */
        margin: 0 auto;
    }

    .grid-item img{
        width: 100%;
        height: 60rem;
    }
    .project-container{
        flex-direction: column;
    }
    .grid-item .card{
        width: 55rem;
    }
    #contact .container{
        height: 30vh;
    }
    .contact-way i{
        font-size: 4rem;
        }

    .contact-way h3{
        font-size: 3rem;
        font-weight: bold;
    }
    #contact .top-contact{
        /* border: 1px solid green; */
        max-width: 300px;
        display: grid;
        margin: 25px auto;
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    }
    .bottom-contact{
        max-width: 300px;
       padding-bottom: 2rem;
    }
}