A Pen by Sergio

undefined

WIP

Thumbnail
This awesome code was written by sergioandrade, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright sergioandrade ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Sergio Andrade</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  	<div class="bg-ui"></div>
	<div class="login">
		<div class="bg-blur">
			<div class="bg-ui"></div>
		</div>
		<div class="login-main">		
			<div class="login-sidebar">
				<img src="https://discordapp.com/assets/9cb691623c7ba013e791aad8845e93cb.svg" alt="Discord" width="168">
				<img src="https://discordapp.com/assets/62223f89a44d14b008682354fd142069.svg" alt="" width="128">
			</div>
			<div class="login-content">
				Lorem ipsum dolor sit amet  <br><br><br>
				Lorem ipsum dolor sit amet  <br><br><br>
				Lorem ipsum dolor sit amet  <br><br><br>
				Lorem ipsum dolor sit amet  <br><br><br>
				Lorem ipsum dolor sit amet  <br><br><br>
				Lorem ipsum dolor sit amet  <br><br><br>
				Lorem ipsum dolor sit amet  <br><br><br>
			</div>
		</div>
	</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/sergioandrade/a-pen-by-sergio-jmgomd */
html {
  height: 100%;
  box-sizing: border-box;
}

*, *:after, *:before {
  box-sizing: inherit;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  position: relative;
  background: #f3f3f3;
  font-family: Arial, sans-serif;
  padding: 0;
  margin: 0;
}

.login {
  height: 400px;
  max-width: 600px;
  width: auto;
  border-radius: 3px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.03);
  position: relative;
  overflow: hidden;
  color: #fff;
}

.bg-ui {
  background: url(https://discordapp.com/assets/fa7ba7a4c3d8665d3343fee590382bb9.jpg) center center no-repeat;
  background-size: cover;
  background-attachment: fixed;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.bg-blur {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  filter: blur(10px);
}

.login-main {
  float: left;
  width: 100%;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: row;
}

.login-sidebar {
  padding: 40px;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.login-content {
  padding: 20px;
  background: rgba(40, 43, 48, 0.75);
  min-width: 320px;
}

Comments