From 41cfaea78cb1a77c109245c489aa1709f1494280 Mon Sep 17 00:00:00 2001 From: Ajmal Jalal Date: Mon, 5 Feb 2018 14:02:43 -0800 Subject: [PATCH 1/3] challenge1 done, index.css --- project1/css/index.css | 85 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 85 insertions(+) diff --git a/project1/css/index.css b/project1/css/index.css index fa13b5178..b88fa9793 100644 --- a/project1/css/index.css +++ b/project1/css/index.css @@ -62,3 +62,88 @@ h1, h2, h3, h4, h5 { letter-spacing: 1px; margin-bottom: 10px; } + + + + +/* Ajmal Jalal's code starts here */ + +h1{ + clear: both; + font-size: 70px; + display: block; + float: left; + text-align: center; + +} +button{ + clear: both; + display: block; + margin-left: 60px; + background-color: white; + border: 1px solid black; + color: black; + padding: 8px 40px; + text-align: center; + text-decoration: none; + font-size: 16px; + +} +section img { + float: right; + clear:right; +} + +nav { + margin: 50px; + display: block; +} +nav ul { + float: left; + display: block; + padding-left: 50px; +} +nav ul li{ + margin: 20px; + display: block; + float: left; + padding: 0px 20px; +} +nav ul li a { + text-decoration: none; + color: black; +} + +.container{ + display:inline-block; + +} + +.logo{ + float: right; + margin-right: 150px; +} +.cta { + margin-top: 40px; + padding-right: 100px; + padding-left: 100px; + padding-bottom: 40px; + display: inline-block; +} +.cta-text{ + padding-left: 50px; + float: left; + clear:both; + text-align: center; + margin-left: 150px; + margin-top: 60px; + margin-right: 200px; +} +.main-content{ + clear: both; + border-top: 1px solid black; + margin-top: 60px; + display: inline-block; + + +} From 8d72069e5c5649f8a999b5e7276a59d62c72f5e8 Mon Sep 17 00:00:00 2001 From: Ajmal Jalal Date: Mon, 5 Feb 2018 16:06:11 -0800 Subject: [PATCH 2/3] Ajmal Jalal | Project1 homwork completed, files added: index.css index.html --- project1/css/index.css | 79 +++++++++++++++++++++++++++++++++++++++++- project1/index.html | 2 +- 2 files changed, 79 insertions(+), 2 deletions(-) diff --git a/project1/css/index.css b/project1/css/index.css index b88fa9793..c7acd8281 100644 --- a/project1/css/index.css +++ b/project1/css/index.css @@ -67,7 +67,7 @@ h1, h2, h3, h4, h5 { /* Ajmal Jalal's code starts here */ - +/* h1{ clear: both; font-size: 70px; @@ -147,3 +147,80 @@ nav ul li a { } +*/ + + + + +/*second way */ +.container{ + width: 100%; + margin: 0px auto; +} + +header{ + width: 100%; + margin: 20px auto; + padding: 40px; + +} + +header nav{ + display: inline-block; + margin: 0px 100px; +} +header nav ul li { + display: inline; + margin-right: 70px; +} + +header nav ul li a{ + text-decoration: none; + color:grey; +} + +header nav ul li a:hover{ + text-decoration: underline; +} + +.logo{ + margin-left: 40px; +} +.cta{ + widows: 100%; + text-align: center; + margin-bottom: 60px; +} +.cta .cta-text{ + display: inline-block; + margin-right: 100px; + font-size: 85px; + padding-bottom: 60px; +} +.cta .cta-text h1{ + display:block; + padding-bottom:60px; + margin: 0px; +} + +.cta .cta-text button { + background-color: white; + border: 1px solid black; + color: black; + text-align: center; + padding: 5px 30px; + display: block; + margin: 0px auto; +} + +.cta img{ + margin-top: 20px; + display: inline-block; + margin-left: 100px; +} +.main-content{ + width: 90%; + padding: 20px; + border-top: 1px solid black; + margin: 0px auto; +} diff --git a/project1/index.html b/project1/index.html index b951beaf6..5c3172d0f 100644 --- a/project1/index.html +++ b/project1/index.html @@ -4,7 +4,7 @@ - Great Idea! + Great Idea!| Ajmal Jalal From a30799bb48d456f6af7aaf1af4ff7a615a118bb7 Mon Sep 17 00:00:00 2001 From: Ajmal Jalal Date: Tue, 6 Feb 2018 15:49:12 -0800 Subject: [PATCH 3/3] AJMAL JALAL | Solution to Project1 using CSS FLEXBOX model has been submitted. --- project1/css/index.css | 117 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 116 insertions(+), 1 deletion(-) diff --git a/project1/css/index.css b/project1/css/index.css index c7acd8281..055810086 100644 --- a/project1/css/index.css +++ b/project1/css/index.css @@ -152,7 +152,9 @@ nav ul li a { -/*second way */ +/*second way + + .container{ width: 100%; margin: 0px auto; @@ -224,3 +226,116 @@ header nav ul li a:hover{ border-top: 1px solid black; margin: 0px auto; } + +*/ + + + +/* FLEX-BOX solution to the challeng1 */ + + +body { + display: flex; + justify-content: center; +} + +.container{ + width: 70%; +} +.container header{ + width: 100%; + height: 5em; + display: flex; + justify-content: space-around; + align-items: center; + margin-bottom: 3em; + + +} +.container header nav ul { + display: flex; + width: 50em; + justify-content: space-around; +} + +.container header nav ul li a{ + text-decoration: none; + color: black; +} + +.cta{ + display: flex; + justify-content: space-around; + align-items: center; + margin-bottom: 3em; +} + +.cta .cta-text{ + display: flex; + flex-direction: column; + align-items: center; + +} + +.cta .cta-text h1{ + font-size: 85px; + text-align: center; + +} + +.cta .cta-text button{ + border: 1px solid black; + color: black; + background-color: white; + padding: 1em 3em; + display: block; +} + +.main-content{ + align-content: space-around; +} + +.main-content .top-content{ + display: flex; + +} + +.main-content .top-content { + display: flex; + justify-content: space-between; + padding: 2em 0; + +} + +.main-content img{ + width: 100%; +} + +.main-content .bottom-content{ + display: flex; + padding: 2em 0; +} + + + +.contact{ + display: flex; + flex-direction: column; + align-content: space-around; + padding: 2em 0; + +} + +.contact p { + margin: 1em 0; +} + +footer{ + width: 100%; + align-items: flex-start; + display: flex; + justify-content: center; + margin-bottom: 5em; + +} +