HTML-CSS-Pair-Programming-Lab-2/main.css at main · CracknCode/HTML-CSS-Pair-Programming-Lab-2 · 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
113
114
115
.container {
    max-width: 500px;
    margin: auto;

}

#cardOptions {
    margin: 0;
    padding: 0;
}

/*-- Added white border,, still cannot figure out how to get some radius on the green form corners
Also just changed the color a bit --*/

form {
    background-color: rgba(153, 182, 84, 0.993);
    border: 10px solid #ffffff;
    border-width: 20px 20px ;

}

/*-- Added body to get the remainder of the page colored black --*/

body {

    background-color: #000000;
}

fieldset {
    border: none;

}

/*-- Added some padding to all the ul's to streatch the list boxes closer
to the sides and somehow it worked--*/

ul {
    list-style-type: none;
        /* display: flex;
        flex-direction: column;
        */
    padding-right: 10px;
    padding-left: 10px;
}


li {
    border: 1px white solid;
    padding: 10px;
    background-color: rgb(194, 209, 109);
    border-radius: 8px;
}


legend {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: bold;
    padding-left: 10px;

                           /*-- this padding left pulled step 1, 2, and 3 over to the--*/
    /* padding-top: 20px;--- we need to somehow apply padding to top legend only,
                         this is making to much space between all the lists,,
                         font also is looking a bit small.. possibly change to h2,3??
                         kinda like you had it before we changed back to legend ---*/
}

.centerAlign {
    margin: 0 35%;
    display: inline-block;
    width: max-content;
     /* border: solid black 1px; */
}

/*-- I just did some tweaking on the button, the margin is moving the button horizontally,
the padding left and right is stretching the button, height is the thickness,,
also can not figure out how to decrease the padding on the top of the button if you look at
the form-final it has a smaller gap at the top of the button --*/

button {
    color: white;
    text-align: center;
    background-color: rgb(41, 46, 17);
    /* display: inline-block; */
    vertical-align: 15px;
    border-radius: 50px ;
    /* padding: 10px; */
    padding-left: 33px;
    padding-right: 33px;
    height: 30px;
  }

#cardType {
    display: block;
    margin: 5px 0;
}

.creditCards {
    border: none;
    display: inline;
    justify-content: left;
    margin: 0 20px 0 0;
}

::placeholder {
    opacity: 50%;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', Times, serif;

}

.toppad {
    padding-top: 20px;
}