From c1a4a958188e6694fbea734ef66911b0885f529e Mon Sep 17 00:00:00 2001 From: itsaiub Date: Wed, 2 Oct 2019 02:12:18 +0600 Subject: [PATCH 1/2] fixed the index carousel --- .vscode/settings.json | 3 + assets/css/home.css | 89 +++++++++++++++------------- index.html | 132 +++++++++++++++++++++++++----------------- 3 files changed, 131 insertions(+), 93 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..aef84430 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/assets/css/home.css b/assets/css/home.css index 229e5e5d..6a432dd6 100644 --- a/assets/css/home.css +++ b/assets/css/home.css @@ -6,53 +6,44 @@ section#hero-content { height: auto; } -#carousel { - max-width: 70%; - min-height: 400px; - margin: 0 auto; -} - -#carousel .slide img { - max-width: 100%; -} - -#carousel .slide .container-main-image { +.carousel-item { + height: 80vh; + min-height: 350px; + background: no-repeat center center scroll; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; position: relative; } -#carousel .slide .overlay { +.carousel-caption { position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.3); -} - -.tns-outer { - position: relative; + top: 50%; + transform: translateY(-20%); } -.tns-controls button { - background: none; - border: none; - outline: none; - color: white; - font-weight: 300; +.carousel-caption h3, +.carousel-caption p { + color: #fff; + display: inline-block; + text-shadow: none; + margin-bottom: 20px; +} +.carousel-caption h3 { + background: rgba(0, 0, 0, 0.8); + padding: 35px 43px; font-size: 4rem; -} -.tns-controls .left-arrow { - left: 10px; -} - -.tns-controls .right-arrow { - right: 10px; -} - -.tns-controls .left-arrow, -.tns-controls .right-arrow { - position: absolute; - top: 45%; + font-weight: 500; + text-transform: uppercase; +} +.carousel-caption p { + background: #ccc; + opacity: 0.9; + color: black; + padding: 10px 20px; + font-size: 1.5rem; + font-weight: 300; } .intro-div { @@ -92,3 +83,21 @@ section#hero-content { .centered .display-1{ font-size: 5rem; } +@media (min-width: 320px) and (max-width: 1280px) { +.carousel-item { + height: 60vh; + } +.carousel-caption { + top: 30%; + transform: translateY(-30%); +} +.carousel-caption h3 { + padding: 35px 43px; + font-size: 2rem; + font-weight: 600; +} +.carousel-caption p { + font-size: 1.2rem +} + +} \ No newline at end of file diff --git a/index.html b/index.html index dfe54bee..0db5ad66 100644 --- a/index.html +++ b/index.html @@ -107,59 +107,85 @@ Arrows are pretty thick but that's what we get from font awesome free edition ::: --> - +
+
+ +
+
+
From d026c88199aa6ef438e6fc961c9213cbde5e8701 Mon Sep 17 00:00:00 2001 From: Samir Jouni Date: Tue, 1 Oct 2019 23:36:21 +0200 Subject: [PATCH 2/2] Delete settings.json --- .vscode/settings.json | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index aef84430..00000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "liveServer.settings.port": 5501 -} \ No newline at end of file