From 13c965377cab1a163030885e560e0eb0a52a72b5 Mon Sep 17 00:00:00 2001 From: ahmedsaif2002 Date: Wed, 5 Apr 2023 02:59:09 +0100 Subject: [PATCH 1/2] HTML-CSS-Module-Project --- css/style.css | 171 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 67 +++++++++++++++++++- 2 files changed, 237 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..f1c3dc2f9 100755 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,20 @@ /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ +header img { + height: 60px; + margin-left: 40px; + +} + body { font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; + height: 125vh; + background-size: cover; + font-family: sans-serif; + margin-top: 60px; + /* padding: 30px; */ } /** @@ -17,3 +28,163 @@ body { */ + +/* Add your CSS code here */ + + +header { + background-color: white; + position: fixed; + top: 0; + left: 0; + right: 0; + height: 60px; + display: flex; + align-items: center; + box-shadow: 0 0 25px 0 black; +} +header * { + display: inline; +} +header ul { + margin: 20px; + right: 0; +} +header li { + margin: 20px; + right: 0; + +} + +header li a { + color: black; + text-decoration: none; + right: 0; + +} +.hero { + /* Sizing */ + width: 100vw; + height: 100vh; + + /* Flexbox stuff */ + display: flex; + justify-content: center; + align-items: center; + + /* Text styles */ + text-align: center; + color: white; + /* ADD THIS LINE */ + + /* Background styles */ + background-image: url('/../img/first-background.jpg'); + background-size: cover; + background-position: center center; + background-repeat: no-repeat; + background-attachment: fixed; +} + +.hero h1 { + /* Text styles */ + font-size: 4em; + + /* Margins */ + margin-top: 0; + margin-bottom: 0.5em; +} + +.hero .btn { + /* Positioning and sizing */ + display: block; + width: 150px; + + /* Padding and margins */ + padding: 1em; + margin-top: 50px; + margin-left: auto; + margin-right: auto; + + /* Text styles */ + color: white; + /* CHANGE THIS LINE */ + text-decoration: none; + font-size: 1.5em; + + /* Border styles */ + border: 2px solid white; + /* CHANGE THIS LINE */ + border-radius: 20px; +} + +.post-teasers { + display: flex; + flex-wrap: wrap; + padding: 2rem; +} +.post-teasers>* { + flex: 1 1 300px; + align-self: flex-start; + padding: 1rem; +} +.post-teaser img { + position: absolute; + top: 50; + width: 30%; + height: 25%; + +} + +.blog-post-teaser figcaption h1 { + font-size: 22px; +} + +.blog-post-teaser figcaption a { + text-decoration: none; + color: #111010; + font-size: 25px; +} +.social-menu ul { + position: absolute; + bottom: 10; + left: 50%; + padding: 0; + margin: 0; + transform: translate(-50%, -50%); + display: flex; +} +.social-menu ul p { + position: absolute; + bottom: 15; + left: 50%; + padding: 0; + margin: 0; + transform: translate(-50%, -50%); + /* display: flex; */ +} + +.social-menu ul img { + position: relative; + display: block; + width: 60px; + height: 60px; + border-radius: 50%; + background-color: #fff; + text-align: center; + /* transition: .6s; */ + box-shadow: 0 5px 4px rgba(0, 0, 0, .5); +} + +/* Apply some styles to the footer element */ +footer { + position: fixed; + left: 0; + bottom: 0; + width: 100%; + padding: 10px; + border-style: none; + background-color: white; + color: rgb(13, 12, 12); + text-align: center; +} + diff --git a/index.html b/index.html index 3e742ef04..453c7fd66 100755 --- a/index.html +++ b/index.html @@ -10,10 +10,75 @@ - +
+ + + +
+
+
+

Introducing Karma

+

Bring WIFI with you, + everywhere you go!

+ Learn More... +
+
+ +
+ + + +
+ +
+ +
+ + + + From 675a9fa53f9101ab267c81d8fb292dc5255b272f Mon Sep 17 00:00:00 2001 From: ahmedsaif2002 Date: Wed, 5 Apr 2023 03:13:31 +0100 Subject: [PATCH 2/2] HTML-CSS-Module-Project --- css/style.css | 11 +++++++++++ index.html | 11 ++++++++--- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index f1c3dc2f9..fdd77c815 100755 --- a/css/style.css +++ b/css/style.css @@ -116,6 +116,12 @@ header li a { /* CHANGE THIS LINE */ border-radius: 20px; } +.we h1 { + /* Text styles */ + font-size: 2em; + text-align: center; +} + .post-teasers { display: flex; @@ -144,6 +150,11 @@ header li a { color: #111010; font-size: 25px; } +.join h1 { + /* Text styles */ + font-size: 1em; + text-align: center; +} .social-menu ul { position: absolute; bottom: 10; diff --git a/index.html b/index.html index 453c7fd66..287e0ac65 100755 --- a/index.html +++ b/index.html @@ -36,6 +36,10 @@

Bring WIFI with you, +
+

Every one needs a little Karma.

+
+
+
+

Join us on

+