building-construction/aboutus.html at main · kjyotish/building-construction · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .background {
            height: 100vh;
            background: url('img 10.jpg') no-repeat center center/cover;
            position: relative;
        }
        h1 {
            position: absolute;
            top: 20px;
            left: 20px;
            color: rgb(0, 0, 0);
            font-size: 70px;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        }
        .animated-text {
            padding: 40px 20px;
            font-size: 24px;
            color: black;
            font-weight: bold;
            opacity: 0;
            animation: fadeIn 2s ease-in-out forwards;
        }
        .image-section {
            position: relative;
            text-align: center;
            margin-top: 20px;
        }
        .image-section img {
            width: 80%;
            max-width: 800px;
            height: auto;
        }
        .animated-box {
            position: absolute;
            bottom: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 20px;
            font-size: 18px;
            width: 300px;
            border-radius: 20px;
            opacity: 0;
            animation: slideIn 2s ease-in-out 1s forwards;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes slideIn {
            from { opacity: 0; transform: translateX(20px); }
            to { opacity: 1; transform: translateX(0); }
        }
        h3{
            font-size: 45px;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        }
        .animated-info {
            padding: 40px 20px;
            font-size: 22px;
            color: black;
            font-weight: bold;
            opacity: 0;
            animation: fadeIn 2s ease-in-out 1.5s forwards;
            width: 50%;
        }
        .who-we-are-section {
            position: relative;
            text-align: right;
            margin: 40px 20px;
        }
        .who-we-are-section img {
            width: 70%;
            max-width: 600px;
            height: auto;
        }
        .who-we-are-box {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 20px;
            font-size: 18px;
            width: 500px;
            border-radius: 20px;
            opacity: 0;
            animation: slideIn 2s ease-in-out 1s forwards;
        }
        h2{
            font-size: 50px;
        }
        h5{
            font-size: 25px;
        }
    </style>
</head>
<body>
    <div class="background">
        <h1>ABOUT US</h1>
    </div>
    <div class="animated-text">
        <p>A Premier Construction Firm</p>
        <h3>BLue Print Construction has a people- <br>first way of doing business.</h3>
    </div>
    <div class="image-section">
        <img src="img 11.jpg" alt="Construction Work">
        <div class="animated-box">
            <p><strong>About Us.</strong><br>We bring a high level of involvement, engaged communication and an innovative, problem-solving approach focused on building lasting client partnerships.</p>
        </div>
    </div>
    <div class="animated-info">
        <h2>About Blue Print Construction</h2>
        <p>Blueprint  Construction is an employee-owned construction company in Kansas City,
             with offices in Manhattan, Kansas, Wichita, Kansas, and Dallas-Fort Worth. As a thought
              leader in our industry, we strive to fulfill a role not just as a contractor, but as a
               full partner throughout the project. That same philosophy drives our commitment to
                respect and inclusion for our associates.</p>
    </div>
    <div class="who-we-are-section">
        <img src="img 12.jpg" alt="Who We Are">
        <div class="who-we-are-box">
            <h5><strong>Who we are.</strong></h5><br>We’re the kind of construction company that hires people based on who they are, not what they’ve done. Training someone in our unique processes is easier than training someone to embody our core values—integrity, performance and relationships. Our team is friendly, hardworking and trustworthy.<br><br>Our goal for each project is to deliver the best building experience and enhance the journey for our associates, clients, partners and community. To see more of who we are, learn about our culture.
        </div>
    </div>
</body>
</html>