From e7043c9be696cd42af29268b2e5ed403eb6ee768 Mon Sep 17 00:00:00 2001 From: Tony-devops <111275895+Tony-devops@users.noreply.github.com> Date: Sun, 23 Oct 2022 13:57:35 +0100 Subject: [PATCH 01/12] html css replicate week 1 Replicate the Karma page --- css/style.css | 109 +++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 62 +++++++++++++++++++++++++++- 2 files changed, 169 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..d28e431fb 100755 --- a/css/style.css +++ b/css/style.css @@ -1,11 +1,118 @@ /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ - +#logo{ + padding: 5px 15px; + margin-left: 5vw; + margin-right: 40vw; + +} body { font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; + + +} +.header{ + width: max-content; + height: 6vh; +} +h1{ + text-align: center; + text-emphasis: none; + letter-spacing: 2px; + color: #595959; +} +p{ + text-align: center; + text-emphasis: none; + letter-spacing: 5px; + color: #595959; } +.nav { + list-style-type:none; + margin-left: 20vw; + padding: 0; + float:right; +} +.nav li{ + display: inline-block; + padding: 20px; +} +a:link{ + color: #595959; + text-decoration: none; +} +a:visited{ + color: #7f7f7f; + text-decoration: none; +} +a:hover{ + color: rgb(255, 68, 0); + text-decoration: none ; +} +.hero-image{ + background-image: url(../img/first-background.jpg); + background-repeat: no-repeat; + background-size: cover; + height: 50vh; + background-position: center; + position: relative; +} +.hero-text{ + text-align: center; + position:absolute; + color:white; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + +} +.hero-text h1{ + letter-spacing: 5px; + font-weight: lighter; + color: white; +} +.hero-text p{ + letter-spacing: 5px; + font-weight: lighter; + color: white; +} +.hero-text button{ + border: none; + padding:10px 25px; + background-color: rgb(255, 68, 0); + cursor: pointer; + border-radius: 5px; +} +.container-1{ + display:flex; + justify-content: space-around; + +} +.container-1 div{ + /* + border: 1px #ccc solid; + padding: 20px; + margin-left: 20px; + */ +} +hr{ + width: 70%; +} +.footer{ + display: flex; + align-content: center; + justify-content: center; +} +#socials{ + padding: 10px; + +} +#copyright{ + font-size: 12px; +} /** * Add your custom styles below * diff --git a/index.html b/index.html index 3e742ef04..4c254c8a8 100755 --- a/index.html +++ b/index.html @@ -4,12 +4,72 @@
Bring WiFi with you, everywhere you go.
+ +Internet for all devices
+Boost your productivity
+Pay as You Go
++ Join Us on +
+ +© Karma Mobility Inc.
+ +Bring WiFi with you, everywhere you go.
+ +Internet for all devices
+Boost your productivity
+Pay as You Go
++ Join Us on +
+ +© Karma Mobility Inc.
+ +