From 612a815cd37c0c45e9330c389e48be473ec0352a Mon Sep 17 00:00:00 2001 From: Osman-Hajr <63974847+Osman-Hajr@users.noreply.github.com> Date: Sat, 23 May 2020 23:03:43 +0100 Subject: [PATCH 1/2] Update index.html This is my HTML code to recreate the Karam website. --- week2/2-website/index.html | 116 +++++++++++++++++++++++++++++++++++-- 1 file changed, 111 insertions(+), 5 deletions(-) diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 876b59d6..c4e25c21 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -12,10 +12,116 @@ - - - - - + + + +
+ +
+ +

+ Introducing Karma +

+ +

+ Bring WiFi with you, everywhere you go +

+ + +
+
+ +
+ +
+ +

+ Everyone needs a little Karma +

+ + +
+
+ + From 9e7edc435f1fd60da11ab4d706e2a7e2ceecd21b Mon Sep 17 00:00:00 2001 From: Osman-Hajr <63974847+Osman-Hajr@users.noreply.github.com> Date: Sat, 23 May 2020 23:40:05 +0100 Subject: [PATCH 2/2] Update style.css My CSS code to style my HTML code for the recreating Karma website. --- week2/2-website/css/style.css | 441 +++++++++++++++++++++++++++++++++- 1 file changed, 432 insertions(+), 9 deletions(-) diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index 5cb025ce..0d7bca40 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -5,15 +5,438 @@ body { font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; } + /* The navigation bar part*/ -/** - * Add your custom styles below - * - * Remember: - * - Be organised, use comments and separate your styles into meaningful chunks - * for example: General styles, Navigation styles, Hero styles, Footer etc. - * - * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' - */ +.nav-bar{ + background-color: aqua; + position: fixed; + width: 100%; + border-bottom: 0.001rem solid #000000; + +} +/* The contents of the navigation bar */ +.nav-content{ + display: flex; + justify-content: center; + flex-direction: row; + align-items: center; + padding: 0.5rem; + height: 5rem; + margin: 0.5rem; +} +/* The navigation list*/ +.nav-list{ + display: flex; + justify-content: center; + align-items: center; + list-style-type: none; + font-size: 1.3rem; + font-weight: lighter; + padding: 0.5rem; + margin: 0.5rem; +} +/* The navigation item lists*/ +.nav-list li{ + font-size: 1.2rem; + padding: 0.5rem; + margin: 1rem; +} +/* The anchor tag of the navigation bar*/ +.nav-list li a{ + text-decoration: none; + color: black; +} +/* The forst list item of the navigation bar withclass acctive */ +.active{ + color: black; +} +/* The logo of the navigation bar*/ +#logo{ + height: 2.75rem; + width: 2.75rem; + margin-right: 9rem; +} +/*================== End of navigation part==============*/ + /* The introduction part*/ +.introduction{ + background-image: url(/img/first-background.jpg); + background-position: center bottom; + background-repeat: no-repeat; + background-size: cover; + display: flex; + flex-direction: column; + align-items: center; + overflow: hidden; + height: 50rem; +} +/* The contents of the introduction part*/ +.intro-content{ + display: flex; + flex-direction: column; + align-items: center; +} +/* The Header */ +.intro-content h1{ + color: #ffffff; + font-size: 3rem; + font-weight: lighter; + margin-top: 15rem; +} +/* The text in the introduction part*/ +.intro-content p{ + color: #ffffff; + font-size: 1.5rem; + font-weight: lighter; +} +/* The button in the introduction*/ +button{ + background-color: #f15a29; + color: #ffffff; + text-align: center; + font-size: 1.8rem; + border-radius: 0.2rem; + border: none; + width: 12rem; + padding: 1rem; + margin: 2rem; +} +/* When hovering over the button */ +button:hover{ + background-color: #ca1b1b; +} +/*==========End of the introduction part==========*/ + /* The icons part*/ +.icons{ + display: flex; + justify-content: center; + align-items: center; +} +/* The contents of the icons*/ +.icons-content{ + display: flex; + flex-direction: column; + justify-content: center; +} +/* The header in the icons section*/ +.icons-content h2{ + text-align: center; + font-size: 3rem; + font-weight: lighter; + margin-top: 8rem; +} +/* The list of the icons section*/ +.icons-list{ + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + list-style-type: none; +} +/* The icons list items*/ +.icons-list li{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 1rem; + margin: 1rem; + box-sizing: border-box; + text-align: center; +} +/* Icons images*/ +.img-icon{ + width: 75%; + height: 75%; +} +/* Text below the icons*/ +.icons-h4{ + font-weight: lighter; + margin: 0rem; + padding: 0rem; +} +/*============End of icons section=============*/ + /* Footer section*/ +footer{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +/* Horizontal line of above */ +hr{ + width: 70%; + text-align: center; + margin-top: 5rem; +} +/* Footer's header*/ +h5{ + font-size: 1.2rem; + font-weight: normal; + text-align: center; + box-sizing: border-box; +} +/* The social media icons list */ +.sm-icons{ + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin-bottom: 3rem; + list-style-type: none; +} +/* Social media list items*/ +.sm-icons li{ + display: flex; + justify-content: center; + align-items: center; + padding-right: 1rem; + padding-left: 1rem; + margin-left: 1rem; + margin-right: 1rem; + text-align: center; + box-sizing: border-box; + +} +/* Anchor tag of the social media list*/ +.sm-icons li a{ + text-decoration: none; +} +/* Twitter logo */ +#twitter{ + color: #4ea3b8; + font-size: 1.3rem; + width: 2.5rem; + height: 2.5rem; + border: 0.05rem solid #d0d1d8; + border-radius: 2.5rem; + text-align: center; + box-sizing: border-box; + padding: 0.5rem +} +/* Facebook logo*/ +#facebook{ + color: #285fd6; + font-size: 1.3rem; + width: 2.5rem; + height: 2.5rem; + border: 0.05rem solid #dddfe6; + border-radius: 2.5rem; + text-align: center; + box-sizing: border-box; + padding: 0.5rem + +} +/* Instagram logo*/ +#instagram{ + color: #384172; + font-size: 1.3rem; + width: 2.5rem; + height: 2.5rem; + border: 0.04rem solid #d6dae7; + border-radius: 2.5rem; + text-align: center; + box-sizing: border-box; + padding: 0.5rem +} +/* Text for the copyright*/ +footer p{ + font-size: 1rem; + font-weight: lighter; + text-align: center; +} +/*===========End of footer==========*/ + /* Responsive tablet size */ +@media (max-width: 48rem){ + .nav-content{ + display: flex; + width: 46rem; + height: 4rem; + } + .nav-list{ + font-size: 1rem; + padding: 0.3rem; + margin: 0.3rem; + } + .nav-list li{ + font-size: 0.8rem; + padding: 0.5rem; + margin: 0.5rem; + } + .introduction{ + height: 35rem; + width: 100%; + } + .intro-content button{ + font-size: 1.2rem; + width: 10rem; + } + .icons-content h2{ + font-size: 2rem; + } +} +/*==========End of responsive tablet size==========*/ + /*Responsive phone size of 425px*/ +@media (max-width: 26.5625rem){ + .nav-content{ + display: flex; + width: 26rem; + height: 1.5rem; + } + .nav-list{ + font-size: 0.6rem; + padding: 0.1rem; + margin-right: 1rem; + } + .nav-list li{ + + font-size: 0.6rem; + padding: 0.2rem; + margin: 0.2rem; + } + #logo{ + width: 1rem; + height: 1rem; + margin-right: 4rem; + } + .introduction{ + height: 25rem; + width: 100%; + } + .intro-content button{ + font-size: 0.8rem; + width: 7rem; + } + .intro-content h1{ + margin-top: 10rem; + font-size: 1.8rem; + } + .intro-content p{ + font-size: 1rem; + } + .icons-content h2{ + font-size: 1.2rem; + } + .img-icon{ + width: 50%; + height: 50%; + } + .icons-list li{ + padding: 0rem; + margin: 0rem; + } + .sm-icons li{ + display: flex; + justify-content: center; + align-items: center; + padding-right: 0rem; + padding-left: 0rem; + margin-left: 0rem; + margin-right: 1rem; + text-align: center; + box-sizing: border-box; + } + footer h5{ + text-align: center; + font-size: 0.5rem; + font-weight: lighter; + } + #instagram{ + color: #384172; + font-size: 0.8rem; + width: 1.5rem; + height: 1.5rem; + border: 0.04rem solid #d6dae7; + border-radius: 2.5rem; + text-align: center; + box-sizing: border-box; + padding: 0.3rem + } + #twitter{ + color: #4ea3b8; + font-size: 0.8rem; + width: 1.5rem; + height: 1.5rem; + border: 0.05rem solid #d0d1d8; + border-radius: 2.5rem; + text-align: center; + box-sizing: border-box; + padding: 0.5rem + } + #facebook{ + color: #285fd6; + font-size: 0.8rem; + width: 1.5rem; + height: 1.5rem; + border: 0.05rem solid #dddfe6; + border-radius: 2.5rem; + text-align: center; + box-sizing: border-box; + padding: 0.5rem + + } + footer p{ + font-size: 0.5rem; + font-weight: lighter; + text-align: center; + } +} +/*======End of responsive phone size of 425px=======*/ + /*Responsive phone size of 375px */ +@media (max-width: 23.4375rem){ + .nav-content{ + width: 23rem; + } + .nav-list li{ + font-size: 0.6rem; + padding: 0.1rem; + margin: 0.1rem; + } + .introduction{ + height: 20rem; + width: 100%; + } + .intro-content h1{ + margin-top: 5rem; + font-size: 1.8rem; + } +} +/*=======End of responsive phone size of 375px=======*/ + /*Responsive phone size of 320px */ +@media (max-width:20rem){ + .nav-content{ + width: 19rem; + } + .nav-list li{ + font-size: 0.4rem; + padding: 0.1rem; + margin: 0.1rem; + } + .introduction{ + height: 15rem; + } + .intro-content h1{ + color: #ffffff; + font-size: 1.5rem; + font-weight: lighter; + margin-top: 5rem; + } + .intro-content p{ + color: #ffffff; + font-size: 1rem; + font-weight: lighter; + } + button{ + background-color: #f15a29; + color: #ffffff; + text-align: center; + font-size: 1rem; + border-radius: 0.2rem; + border: none; + width: 8rem; + padding: 0.5rem; + margin: 1rem; + } +} +/*========End of responsive phone size of 320px========*/