html css project

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        /* Styling the body */
body {
    margin: 0;
    padding: 0;
}

/* Styling section, giving background
    image and dimensions */
section {
    width: 100%;
    height: 100vh;
    background:
        url('minimal_12.png');
    background-size: cover;
}

/* Styling the left floating section */
section .leftBox {
    width: 50%;
    height: 100%;
    float: left;
    padding: 50px;
    box-sizing: border-box;
}

/* Styling the background of 
    left floating section */
section .leftBox .content {
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    padding: 40px;
    transition: .5s;
}

/* Styling the hover effect  
    of left floating section */
section .leftBox .content:hover {
    background: #e91e63;
}

/* Styling the header of left 
    floating section */
section .leftBox .content h1 {
    margin: 0;
    padding: 0;
    font-size: 50px;
    text-transform: uppercase;
}

/* Styling the paragraph of 
    left floating section */
section .leftBox .content p {
    margin: 10px 0 0;
    padding: 0;
}

/* Styling the three events section */
section .events {
    position: relative;
    width: 50%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    float: right;
    box-sizing: border-box;
}

/* Styling the links of 
the events section */
section .events ul {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 40px;
    box-sizing: border-box;
}

/* Styling the lists of the event section */
section .events ul li {
    list-style: none;
    background: #fff;
    box-sizing: border-box;
    height: 200px;
    margin: 15px 0;
}

/* Styling the time class of events section */
section .events ul li .time {
    position: relative;
    padding: 20px;
    background: #262626;
    box-sizing: border-box;
    width: 30%;
    height: 100%;
    float: left;
    text-align: center;
    transition: .5s;
}

/* Styling the hover effect
    of events section */
section .events ul li:hover .time {
    background: #e91e63;
}

/* Styling the header of time 
    class of events section */
section .events ul li .time h2 {
    position: absolute;
    margin: 0;
    padding: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 60px;
    line-height: 30px;
}

/* Styling the texts of time 
class of events section */
section .events ul li .time h2 span {
    font-size: 30px;
}

/* Styling the details 
class of events section */
section .events ul li .details {
    padding: 20px;
    background: #fff;
    box-sizing: border-box;
    width: 70%;
    height: 100%;
    float: left;
}

/* Styling the header of the 
details class of events section */
section .events ul li .details h3 {
    position: relative;
    margin: 0;
    padding: 0;
    font-size: 22px;
}

/* Styling the lists of details 
class of events section */
section .events ul li .details p {
    position: relative;
    margin: 10px 0 0;
    padding: 0;
    font-size: 16px;
}

/* Styling the links of details
class of events section */
section .events ul li .details a {
    display: inline-block;
    text-decoration: none;
    padding: 10px 15px;
    border: 1.5px solid #262626;
    margin-top: 8px;
    font-size: 18px;
    transition: .5s;
}

/* Styling the details class's hover effect */
section .events ul li .details a:hover {
    background: #e91e63;
    color: #fff;
    border-color: #e91e63;
}
    </style>
</head>
<body>
    <section>
        <div class="leftBox">
            <div class="content">
                <h1>Welcome!</h1>
                <p>
                    Welcome to Ryan and Desmond's site!
                </p>
            </div>
        </div>

        <div class="events">
            <ul>
                <li>
                    <div class="time">
                        <h2>15 <br><span>March</span></h2>
                    </div>
                    <div class="details">
                        <h3>Where is the event happening?</h3>
                        <p>
                           The Halloween Party is happening in the soccer field of Shenzhen's award winning International School QSI!
                        </p>
                        <a href="#">View Details</a>
                    </div>
                    <div style="clear: both;"></div>
                </li>

                <li>
                    <div class="time">
                        <h2>27 <br><span>May</span></h2>
                    </div>
                    <div class="details">
                        <h3>Where is the event happening?</h3>
                        <p>
                           Right next door!
                        </p>
                        <a href="#">View Details</a>
                    </div>
                    <div style="clear:both;"></div>
                </li>
                <li>
                    <div class="time">
                        <h2>12 <br><span>August</span></h2>
                    </div>
                    <div class="details">
                        <h3>Where is the event happening?</h3>
                        <p>
                            Hello hello!
                        </p>
                        <a href="#">View Details</a>
                    </div>
                    <div style="clear:both;"></div>
                </li>
            </ul>
        </div>
    </section>
</body>

</html>

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

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

<!DOCTYPE html>

<head>

<style>

/* Styling the body */

body {

margin: 0;

padding: 0;

}

/* Styling section, giving background

image and dimensions */

section {

width: 100%;

height: 100vh;

background:

url('minimal_12.png');

background-size: cover;

}

/* Styling the left floating section */

section .leftBox {

width: 50%;

height: 100%;

float: left;

padding: 50px;

box-sizing: border-box;

}

/* Styling the background of

left floating section */

section .leftBox .content {

color: #fff;

background: rgba(0, 0, 0, 0.5);

padding: 40px;

transition: .5s;

}

/* Styling the hover effect

of left floating section */

section .leftBox .content:hover {

background: #e91e63;

}

/* Styling the header of left

floating section */

section .leftBox .content h1 {

margin: 0;

padding: 0;

font-size: 50px;

text-transform: uppercase;

}

/* Styling the paragraph of

left floating section */

section .leftBox .content p {

margin: 10px 0 0;

padding: 0;

}

/* Styling the three events section */

section .events {

position: relative;

width: 50%;

height: 100%;

background: rgba(0, 0, 0, 0.5);

float: right;

box-sizing: border-box;

}

/* Styling the links of

the events section */

section .events ul {

position: absolute;

top: 50%;

transform: translateY(-50%);

margin: 0;

padding: 40px;

box-sizing: border-box;

}

/* Styling the lists of the event section */

section .events ul li {

list-style: none;

background: #fff;

box-sizing: border-box;

height: 200px;

margin: 15px 0;

}

/* Styling the time class of events section */

section .events ul li .time {

position: relative;

padding: 20px;

background: #262626;

box-sizing: border-box;

width: 30%;

height: 100%;

float: left;

text-align: center;

transition: .5s;

}

/* Styling the hover effect

of events section */

section .events ul li:hover .time {

background: #e91e63;

}

/* Styling the header of time

class of events section */

section .events ul li .time h2 {

position: absolute;

margin: 0;

padding: 0;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

color: #fff;

font-size: 60px;

line-height: 30px;

}

/* Styling the texts of time

class of events section */

section .events ul li .time h2 span {

font-size: 30px;

}

/* Styling the details

class of events section */

section .events ul li .details {

padding: 20px;

background: #fff;

box-sizing: border-box;

width: 70%;

height: 100%;

float: left;

}

/* Styling the header of the

details class of events section */

section .events ul li .details h3 {

position: relative;

margin: 0;

padding: 0;

font-size: 22px;

}

/* Styling the lists of details

class of events section */

section .events ul li .details p {

position: relative;

margin: 10px 0 0;

padding: 0;

font-size: 16px;

}

/* Styling the links of details

class of events section */

section .events ul li .details a {

display: inline-block;

text-decoration: none;

padding: 10px 15px;

border: 1.5px solid #262626;

margin-top: 8px;

font-size: 18px;

transition: .5s;

}

/* Styling the details class's hover effect */

section .events ul li .details a:hover {

background: #e91e63;

color: #fff;

border-color: #e91e63;

}

</style>

</head>

<body>

<h1>Welcome!</h1>

<p>

Welcome to Ryan and Desmond's site!

</p>

</div>

<ul>

<li>

<h2>15 <br><span>March</span></h2>

</div>

<h3>Where is the event happening?</h3>

<p>

The Halloween Party is happening in the soccer field of Shenzhen's award winning International School QSI!

</p>

<a href="#">View Details</a>

</div>

</li>

<li>

</div>

<h3>Where is the event happening?</h3>

<p>

Right next door!

</p>

<a href="#">View Details</a>

</div>

</li>

<li>

<h2>12 <br><span>August</span></h2>

</div>

<h3>Where is the event happening?</h3>

<p>

Hello hello!

</p>

<a href="#">View Details</a>

</div>

</li>

</ul>

</div>

</section>

</body>

</html>