CSS/developer.html at main · Mayank143-git/CSS · 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box
        {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            margin: auto;
        }
        .one
        {
            width: 30%;
            display: flex;
            font-family: Arial, Helvetica, sans-serif;
            box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
            border-radius: 15px;
            margin: 20px;
            cursor: pointer;
            overflow: hidden;
            float: left;
        }
        .icon
        {
            width: 150px;
            height: 145px;
            margin: 10px;
        }
        img{
            width: 100%
        }
        .text
        {
            float: left;
        }
        h3{
            color: #032D60;
            margin-left: 0;
            line-height: 28px;
            font-weight: 600;
            letter-spacing: -0.1px;
            font-size: 24px;
        }
        p{
            color: rgba(24, 24, 24, 1);
            margin-left: 0;
            margin-bottom: 12px;
            margin-top: -15px;
            font-size: 15px;
            line-height: 24px;
            font-weight: 400;
            letter-spacing: 1px;
        }
        .one:hover
        {
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
            transition: 0.5s;
        }
        .text:hover h3
        {
            color:  #0d6efd;
            transition: 0.5s;
        }
        @media only screen and (max-width:600px)
        {
            .box
            {
                width: 100%;
            }
            .one
            {
                width: 100%;
                margin: 1%;

            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="one">
            <div class="icon">
                <img src="https://cdn-icons-png.freepik.com/256/3128/3128313.png?ga=GA1.1.1565935538.1706018255&">
            </div>
            <div class="text">
            <h3>Platform</h3>
            <p>Extend Salesforce to build enterprise-grade apps that deliver amazing customer experiences.</p>
            </div>
        </div>
        <div class="one">
            <div class="icon">
                <img src="https://cdn-icons-png.freepik.com/256/3128/3128313.png?ga=GA1.1.1565935538.1706018255&">
            </div>
            <div class="text">
            <h3>Commerce Cloud</h3>
            <p>Develop personalized commerce experiences on a fast, flexible platform.</p>
            </div>
        </div>
        <div class="one">
            <div class="icon">
                <img src="https://cdn-icons-png.freepik.com/256/3128/3128313.png?ga=GA1.1.1565935538.1706018255&">
            </div>
            <div class="text">
            <h3>Marketing Cloud</h3>
            <p>Deliver new, data-first digital marketing experiences that inspire customer action and loyalty.</p>
            </div>
        </div>
        <div class="one">
            <div class="icon">
                <img src="https://cdn-icons-png.freepik.com/256/3128/3128313.png?ga=GA1.1.1565935538.1706018255&">
            </div>
            <div class="text">
            <h3>Service Cloud</h3>
            <p>Extend service solutions and deliver custom service experiences.</p>
            </div>
        </div>
        <div class="one">
            <div class="icon">
                <img src="https://cdn-icons-png.freepik.com/256/3128/3128313.png?ga=GA1.1.1565935538.1706018255&">
            </div>
            <div class="text">
            <h3>Integration</h3>
            <p>Unlock and integrate data from any system with MuleSoft to deliver critical, time-sensitive projects.</p>
            </div>
        </div>
        <div class="one">
            <div class="icon">
                <img src="https://cdn-icons-png.freepik.com/256/3128/3128313.png?ga=GA1.1.1565935538.1706018255&">
            </div>
            <div class="text">
            <h3>CRM Analytics</h3>
            <p>Empower users with actionable insights and AI-driven analytics right in their workflow.</p>
            </div>
        </div>
        <div class="one">
            <div class="icon">
                <img src="https://cdn-icons-png.freepik.com/256/3128/3128313.png?ga=GA1.1.1565935538.1706018255&">
            </div>
            <div class="text">
            <h3>Tableau</h3>
            <p>Integrate visual analytics into your business applications with Tableau.</p>
            </div>
        </div>
        <div class="one">
            <div class="icon">
                <img src="https://cdn-icons-png.freepik.com/256/3128/3128313.png?ga=GA1.1.1565935538.1706018255&">
            </div>
            <div class="text">
            <h3>Experience Cloud</h3>
            <p>Build connected websites, portals, and apps that allow teams to interact with customers across channels.</p>
            </div>
        </div>
        <div class="one">
            <div class="icon">
                <img src="https://cdn-icons-png.freepik.com/256/3128/3128313.png?ga=GA1.1.1565935538.1706018255&">
            </div>
            <div class="text">
            <h3>Slack</h3>
            <p>Connect, simplify, and automate your work with Slack apps.</p>
            </div>
        </div>
    </div>
</body>
</html>