Created
May 9, 2023 02:03
-
-
Save mfrancois3k/15312ec3a726764c46243eabc27b2e7f to your computer and use it in GitHub Desktop.
Responsive moble css Freemote #CSS #moble
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="all-container"> | |
<img id="logo" src="https://assets.codepen.io/6060109/2560px-Adidas_Logo+1.png"> | |
<div id="athlete"> | |
</div> | |
<div class="all-content-container"> | |
<div class="text-content-container"> | |
<h2>We're</h2> | |
<h2>Coming Soon</h2> | |
<p>Hello friends! We are currently building our new sports and comfort clothing store. Add your email address below to stay up-to-date with announcements and our launch proposals.</p> | |
</div> | |
<form> | |
<input type="text" placeholder="Email Address"> | |
<input type="submit" value="Go"> | |
</form> | |
</div> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
fremoote coming soon | |
https://codepen.io/freemote/pen/MWoQapE?editors=1100 | |
@font-face { | |
font-family: 'AdiHaus'; | |
src: URL('https://assets.codepen.io/6060109/adihaus_regular.ttf') format('truetype'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
@font-face { | |
font-family: "AdiHaus"; | |
src: url("https://assets.codepen.io/6060109/adihaus_bold.ttf") format("truetype"); | |
font-weight: bold; | |
font-style: normal; | |
} | |
body, html { | |
min-width: 100%; | |
min-height: 100vh; | |
margin: 0; | |
font-family: AdiHaus; | |
} | |
.all-container { | |
max-width: 450px; | |
margin: 0 auto; | |
} | |
#logo { | |
margin: 15px auto; | |
display: block; | |
} | |
#athlete { | |
background: blue url("https://assets.codepen.io/6060109/athlete-girl.png") no-repeat right top; | |
background-size: cover; | |
height: 250px; | |
width: 100%; | |
} | |
.all-content-container { | |
padding: 20px 30px; | |
} | |
.text-content-container { | |
width: 100%; | |
text-align: center; | |
} | |
h2, p { | |
margin: 0; | |
} | |
h2 { | |
font-size: 48px; | |
letter-spacing: 5px; | |
text-transform: uppercase; | |
} | |
p { | |
line-height: 28px; | |
margin: 20px 0 40px; | |
color: #333333; | |
} | |
h2:nth-of-type(1) { | |
color: #CD3A24; | |
font-weight: 400; | |
margin-bottom: 10px; | |
} | |
h2:nth-of-type(2) { | |
color: #423A3A | |
} | |
form { | |
display: flex; | |
} | |
input[type="text"] { | |
width: 75%; | |
padding: 0 20px; | |
height: 50px; | |
box-sizing: border-box; | |
} | |
input[type="submit"] { | |
width: 20%; | |
height: 50px; | |
box-sizing: border-box; | |
background-color: black; | |
font-weight: 700; | |
font-size: 16px; | |
color: white; | |
border: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment