From 3a3f03d2af94813e6fb9c3c40fae7b8d96bfaf63 Mon Sep 17 00:00:00 2001 From: mohit Date: Sun, 15 Aug 2021 15:35:12 +0530 Subject: [PATCH 01/13] sticky nav + images --- css/footer.css | 20 +------------------- css/main.css | 46 +++++++++++++++++++++++++++++++++++++++++----- index.html | 24 ++++++++++++++++++------ js/sticnav.js | 16 ++++++++++++++++ 4 files changed, 76 insertions(+), 30 deletions(-) create mode 100644 js/sticnav.js diff --git a/css/footer.css b/css/footer.css index 512dc05..c143239 100644 --- a/css/footer.css +++ b/css/footer.css @@ -64,25 +64,7 @@ footer{ .left .content p{ text-align: justify; } - .left .content .social{ - margin: 20px 0 0 0; - } - .left .content .social a{ - padding: 0 2px; - } - .left .content .social a span{ - height: 40px; - width: 40px; - background: #1a1a1a; - line-height: 40px; - text-align: center; - font-size: 18px; - border-radius: 5px; - transition: 0.3s; - } - .left .content .social a span:hover{ - background: #1a1a1a; - } + .right form .text{ font-size: 1.0625rem; diff --git a/css/main.css b/css/main.css index d63bb6a..4b06325 100644 --- a/css/main.css +++ b/css/main.css @@ -16,7 +16,16 @@ body { .navbar { justify-content: space-around; display: flex; + background-color: #3d3939; } +.sticky { + position: fixed; + top: 0; + width: 100%; + z-index: 1; +} + + .options { margin: 2rem; @@ -41,6 +50,7 @@ body { .options > div:hover { border-bottom: 3px solid var(--primary); + border-top: 3px solid var(--primary); } /* intro */ @@ -115,6 +125,32 @@ body { border-left: 5px solid var(--primary); padding-left:20px; } + + .imgtxt1 img{ + width: 30%; + float: right; + border-radius: 30px; + margin-left: 40px; + margin-bottom: 50px; + box-shadow: 10px 10px var(--primary); + } + .imgtxt2 img{ + width:30%; + border-radius: 30px; + float: left; + margin-right: 40px; + margin-bottom: 50px; + box-shadow: 10px 10px var(--primary); + } + .imgtxt3 img{ + width: 30%; + float: right; + border-radius: 30px; + margin-left: 40px; + margin-bottom: 50px; + box-shadow: 10px 10px var(--primary); + + } @@ -167,7 +203,7 @@ body { } */ -.image1{ +.container .image1{ position: absolute; height: 9rem; width: 11rem; @@ -179,7 +215,7 @@ body { } -.image2{ +.container .image2 { position: absolute; height: 31rem; width: 43rem; @@ -189,7 +225,7 @@ body { clip-path: circle(34%); overflow: hidden; } -.image3{ +.container .image3{ position: absolute; height: 17rem; width: 23rem; @@ -199,7 +235,7 @@ body { transform: rotate(12deg); overflow: hidden; } -.image4{ +.container .image4{ position: absolute; height: 18rem; width: 26rem; @@ -208,7 +244,7 @@ body { clip-path: ellipse(35% 50% at 38% 52%); overflow: hidden; } -.image5{ +.container .image5{ position: absolute; height: 8rem; width: 11rem; diff --git a/index.html b/index.html index fd8784d..85ea31f 100644 --- a/index.html +++ b/index.html @@ -33,11 +33,11 @@ -
+