Why isn't the HTML link showing up on my text

Question

I'm new to programming and I'm having a problem. I can't figure out why a link isn't showing up. The link I'm referencing is called "Food Taxi". I put a href tag on it, and it still isn't linking up. I've tried to move around some code, but I can't figure it out/ I'm not sure why. Let me know if you need any more information. Any help would be good. Thanks

 @font-face { font-family: 'futuralight'; src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'tekoregular'; src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'), url('../Fonts/Teko/teko-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'playfair_displayregular'; src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'poppinsmedium'; src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } *{ margin:0px; padding:0px; border:0px; }.topnav { background-color: rgb(84,104,217); overflow: hidden; font-family: 'futuralight'; font-weight:900; }.topnav a { float: left; color: #f2f2f2; text-align: center; padding: 20px 21px; text-decoration: none; font-size: 19px; position: relative; left:2%; }.topnav a:before { content: ""; position: absolute; width: 84%; height: 2px; bottom: 6px; left: 8%; background-color: white; visibility: hidden; transform: scaleX(0); transition: all 0.3s ease-in-out 0s; }.topnav a:hover:before { visibility: visible; transform: scaleX(1); }.topnav a.active-menu:before { content: ""; position: absolute; width: 84%; height: 2px; bottom:6px; left: 8%; background-color: white; visibility: visible; transform: scaleX(1); transition: all 0.3s ease-in-out 0s; }.bigcomser{ text-align:center; font-size: 80px; }.bodycs{ background-color: #EEF0FC; height:8000px; }.comser{ font-family: 'tekoregular'; padding-top:42px; font-family: 'playfair_displayregular'; font-weight:900; }.abtcomser{ padding-top: 48px; padding-bottom: 28px; font-size: 20px; position: relative; left:10%; width:80%; }.s4s{ position: relative; left:10%; margin-top:60px; height:350px; width:80%; background-color: white; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); border-radius: 5px; }.s4simage{ width:38.3%; position: absolute; right:0%; padding-top:10px; padding-right:10px; }.s4stitle{ position: relative; left:4%; padding-top:30px; color:rgb(84,104,217); font-weight:900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; }.s4stitle::before { content: ''; background-color: rgb(84,104,217); width:12px; height: 100%; position:absolute; left: -4%; top: 30px; /* = padding-top of parent */ }.s4slink{ text-decoration:none; color:rgb(84,104,217); }.titles4s{ padding-top:2px; font-size:22px; padding-left:4%; font-family: 'futuralight'; font-weight:300; }.s4sparagraph{ width:55%; position: relative; left:4%; font-size:17px; top:60px; font-family: 'futuralight'; } #s4slink2{ text-decoration:none; color:rgb(84,104,217); position: relative; left:4%; top:90px; font-family: 'futuralight'; font-size:18px; }.adaptennis{ position: relative; left:10%; margin-top:60px; height:350px; width:80%; background-color: white; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); border-radius: 5px; }.adaptenimage{ width:38.3%; position: absolute; left:0%; padding-top:10px; padding-left:10px; }.adapten { position: absolute; right: 0; padding-top: 30px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-right: 4%; }.adapten::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 0; top: 30px; }.titleadap{ position: absolute; right:4%; padding-top:71px; font-size:22px; padding-left:4%; font-family: 'futuralight'; font-weight:300; }.adappar{ width:55%; position: absolute; right:4%; font-size:17px; padding-top:140px; font-family: 'futuralight'; }.bh{ position: relative; left:10%; margin-top:60px; height:350px; width:80%; background-color: white; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); border-radius: 5px; }.bhimg{ width:38.3%; position: absolute; right:0%; padding-top:10px; padding-right:10px; }.bht{ position: relative; left:4%; padding-top:30px; color:rgb(84,104,217); font-weight:900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; }.bht::before { content: ''; background-color: rgb(84,104,217); width:12px; height: 100%; position:absolute; left: -4%; top: 30px; /* = padding-top of parent */ }.bhl{ text-decoration:none; color:rgb(84,104,217); }.tbh{ padding-top:2px; font-size:22px; padding-left:4%; font-family: 'futuralight'; font-weight:300; }.bhp{ width:55%; position: relative; left:4%; font-size:17px; top:60px; font-family: 'futuralight'; } #bhl2{ text-decoration:none; color:rgb(84,104,217); position: relative; left:4%; top:90px; font-family: 'futuralight'; font-size:18px; }.ft{ position: relative; left:10%; margin-top:60px; height:350px; width:80%; background-color: white; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); border-radius: 5px; }.ftimg{ width:38.3%; position: absolute; left:0%; padding-top:10px; padding-left:10px; }.ftas { position: absolute; right: 0; padding-top: 30px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-right: 4%; }.ftas::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 0; top: 30px; }.ftl{ text-decoration:none; color:rgb(84,104,217); }.ftltitle{ position: absolute; right:4%; padding-top:71px; font-size:22px; padding-left:4%; font-family: 'futuralight'; font-weight:300; }.ftp{ width:55%; position: absolute; right:4%; font-size:17px; padding-top:140px; font-family: 'futuralight'; } #ftl2{ text-decoration:none; color:rgb(84,104,217); position: absolute; right:4%; top:288px; font-family: 'futuralight'; font-size:18px; } @media only screen and (max-width: 830px) and (min-width: 760px) {.topnav { background-color: yellow; overflow: hidden; } } @media only screen and (max-width: 759px) and (min-width: 646px) {.topnav { background-color: red; overflow: hidden; } } @media only screen and (max-width: 645px) {.topnav { background-color: black; overflow: hidden; } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="../CSS/stylecomser.css" /> <title>Community Service</title> </head> <body class='bodycs'> <header class="topnav" id="topnav"> <a class="link" href="../index.html">Home</a> <a class="link" href="#Academics">Academics</a> <a class="link" href="#Projects">Projects</a> <a class="active-menu" href="../Pages/communityservice,html">Community Service</a> </header> <div class='bigcomser'> <p class='comser'> Community Service </p> </div> <div class='abtcomser'> <p>Lorem. ipsum dolor sit amet consectetur adipisici ng elit, Dicta. libero, Recusandae provident est quam quisquam. Sequi itaque suscipit tempore corrupti officia maxime nihil consequatur perspiciatis repellat placeat sed. voluptatum vitae,lor em Lorem ipsum dolor sit amet consectetur adipisicing elit? Porro similique: prov ident libero laudantium amet odit unde dolor eaque earum qui impedit possimus natus est distinctio commodi quod aut numquam temporibus. </p> </div> <div class='s4s'> <img class='s4simage' src="https.//miro.medium:com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File"> <p class='s4stitle'> <a class='s4slink' href="https.//www.solve4success,org" target="_blank">Solve 4 Success</a> </p> <p class='titles4s'> F </p> <p class='s4sparagraph'> Lorem ipsum dolor sit amet consectetu r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re pellat? asperiores ex vero minima saepe, Est officia accusamus odio et ver itatis placeat sapiente laudantium.Lorem ipsum dolor sit amet consectetur, adipisicing elit, Nesciunt blanditiis alias officiis ducimus tenetur. ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil: accusam us libero. </p> <a id = 's4slink2' href="https.//www.solve4success:org" target="_blank">solve4success.org</a> </div> <div class='adaptennis'> <img class='adaptenimage' src="https.//miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A,jpeg" alt="Missing File"> <p class='adapten'> Adaptive Tennis </p> <p class='titleadap'> Engineer </p> <p class='adappar'> Lorem ipsum dolor sit amet consectetu r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re pellat? asperiores ex vero minima saepe, Est officia accusamus odio et ver itatis placeat sapiente laudantium.Lorem ipsum dolor sit amet consectetur, adipisicing elit, Nesciunt blanditiis alias officiis ducimus tenetur. ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil, accusam us libero. Lorem ipsum dolor sit amet consectetur, adipisicing elit, Adipisci vitae iste, aut tenetur natu s tempora error voluptates? beatae obcaecati ducimus commodi et a repellat sequi ullam eligendi: expedita modi. Obcaecati. </p> </div> <div class='bh'> <img class='bhimg' src="https.//miro:medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File"> <p class='bht'> <a class='bhl' href="https,//binaryheart.org" target="_blank">Biart</a> </p> <p class='tbh'> Board Member </p> <p class='bhp'> Lorem ipsum dolor sit amet consectetu r adipisicing elit? Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium,Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur: ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil. accusam us libero. </p> <a id = 'bhl2' href="https://binaryheart.org" target="_blank">binaryheart.org</a> </div> <div class='ft'> <img class='ftimg' src="https.//miro:medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File"> <p class='ftas'> <a class='ftl' href="https.//ntfoodtaxi,wordpress.com" target="_blank">Food Taxi</a> </p> <p class='ftltitle'> Leading Member </p> <p class='ftp'> Lorem ipsum dolor sit amet consectetu r adipisicing elit? Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium,Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil. accusam us libero: Lorem ipsum dolor sit amet consectetur. adipisicing elit. Amus commodi et </p> <a id='ftl2' href="https.//ntfoodtaxi.wordpress:com" target="_blank">ntfoodtaxi.wordpress.com</a> </div> <div class='s4s'> <img class='s4simage' src="https.//miro:medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File"> <p class='s4stitle'> <a class='s4slink' href="https,//binaryheart.org" target="_blank">Binary Heart</a> </p> <p class='titles4s'> Greater Chicago Food Packing </p> <p class='s4sparagraph'> Lorem ipsum dolor sit amet consectetu r adipisicing elit? Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium,Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur: ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil. accusam us libero. </p> <a id = 's4slink2' href="https://binaryheart.org" target="_blank">binaryheart.org</a> </div> </body> </html>

Answer 1

Need to set z-index: 1 to .ftas

 @font-face { font-family: 'futuralight'; src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'tekoregular'; src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'), url('../Fonts/Teko/teko-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'playfair_displayregular'; src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'poppinsmedium'; src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } * { margin: 0px; padding: 0px; border: 0px; }.topnav { background-color: rgb(84, 104, 217); overflow: hidden; font-family: 'futuralight'; font-weight: 900; }.topnav a { float: left; color: #f2f2f2; text-align: center; padding: 20px 21px; text-decoration: none; font-size: 19px; position: relative; left: 2%; }.topnav a:before { content: ""; position: absolute; width: 84%; height: 2px; bottom: 6px; left: 8%; background-color: white; visibility: hidden; transform: scaleX(0); transition: all 0.3s ease-in-out 0s; }.topnav a:hover:before { visibility: visible; transform: scaleX(1); }.topnav a.active-menu:before { content: ""; position: absolute; width: 84%; height: 2px; bottom: 6px; left: 8%; background-color: white; visibility: visible; transform: scaleX(1); transition: all 0.3s ease-in-out 0s; }.bigcomser { text-align: center; font-size: 80px; }.bodycs { background-color: #EEF0FC; height: 8000px; }.comser { font-family: 'tekoregular'; padding-top: 42px; font-family: 'playfair_displayregular'; font-weight: 900; }.abtcomser { padding-top: 48px; padding-bottom: 28px; font-size: 20px; position: relative; left: 10%; width: 80%; }.s4s { position: relative; left: 10%; margin-top: 60px; height: 350px; width: 80%; background-color: white; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); border-radius: 5px; }.s4simage { width: 38.3%; position: absolute; right: 0%; padding-top: 10px; padding-right: 10px; }.s4stitle { position: relative; left: 4%; padding-top: 30px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; }.s4stitle::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; left: -4%; top: 30px; /* = padding-top of parent */ }.s4slink { text-decoration: none; color: rgb(84, 104, 217); }.titles4s { padding-top: 2px; font-size: 22px; padding-left: 4%; font-family: 'futuralight'; font-weight: 300; }.s4sparagraph { width: 55%; position: relative; left: 4%; font-size: 17px; top: 60px; font-family: 'futuralight'; } #s4slink2 { text-decoration: none; color: rgb(84, 104, 217); position: relative; left: 4%; top: 90px; font-family: 'futuralight'; font-size: 18px; }.adaptennis { position: relative; left: 10%; margin-top: 60px; height: 350px; width: 80%; background-color: white; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); border-radius: 5px; }.adaptenimage { width: 38.3%; position: absolute; left: 0%; padding-top: 10px; padding-left: 10px; }.adapten { position: absolute; right: 0; padding-top: 30px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-right: 4%; }.adapten::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 0; top: 30px; }.titleadap { position: absolute; right: 4%; padding-top: 71px; font-size: 22px; padding-left: 4%; font-family: 'futuralight'; font-weight: 300; }.adappar { width: 55%; position: absolute; right: 4%; font-size: 17px; padding-top: 140px; font-family: 'futuralight'; }.bh { position: relative; left: 10%; margin-top: 60px; height: 350px; width: 80%; background-color: white; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); border-radius: 5px; }.bhimg { width: 38.3%; position: absolute; right: 0%; padding-top: 10px; padding-right: 10px; }.bht { position: relative; left: 4%; padding-top: 30px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; }.bht::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; left: -4%; top: 30px; /* = padding-top of parent */ }.bhl { text-decoration: none; color: rgb(84, 104, 217); }.tbh { padding-top: 2px; font-size: 22px; padding-left: 4%; font-family: 'futuralight'; font-weight: 300; }.bhp { width: 55%; position: relative; left: 4%; font-size: 17px; top: 60px; font-family: 'futuralight'; } #bhl2 { text-decoration: none; color: rgb(84, 104, 217); position: relative; left: 4%; top: 90px; font-family: 'futuralight'; font-size: 18px; }.ft { position: relative; left: 10%; margin-top: 60px; height: 350px; width: 80%; background-color: white; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); border-radius: 5px; }.ftimg { width: 38.3%; position: absolute; left: 0%; padding-top: 10px; padding-left: 10px; }.ftas { position: absolute; right: 0; padding-top: 30px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-right: 4%; z-index: 1; /* Add z-index to put the element on top of the paragraph */ }.ftas::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 0; top: 30px; }.ftl { text-decoration: none; color: rgb(84, 104, 217); }.ftltitle { position: absolute; right: 4%; padding-top: 71px; font-size: 22px; padding-left: 4%; font-family: 'futuralight'; font-weight: 300; }.ftp { width: 55%; position: absolute; right: 4%; font-size: 17px; padding-top: 140px; font-family: 'futuralight'; } #ftl2 { text-decoration: none; color: rgb(84, 104, 217); position: absolute; right: 4%; top: 288px; font-family: 'futuralight'; font-size: 18px; } @media only screen and (max-width: 830px) and (min-width: 760px) {.topnav { background-color: yellow; overflow: hidden; } } @media only screen and (max-width: 759px) and (min-width: 646px) {.topnav { background-color: red; overflow: hidden; } } @media only screen and (max-width: 645px) {.topnav { background-color: black; overflow: hidden; } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="../CSS/stylecomser.css" /> <title>Community Service</title> </head> <body class='bodycs'> <header class="topnav" id="topnav"> <a class="link" href="../index.html">Home</a> <a class="link" href="#Academics">Academics</a> <a class="link" href="#Projects">Projects</a> <a class="active-menu" href="../Pages/communityservice,html">Community Service</a> </header> <div class='bigcomser'> <p class='comser'> Community Service </p> </div> <div class='abtcomser'> <p>Lorem. ipsum dolor sit amet consectetur adipisici ng elit, Dicta. libero, Recusandae provident est quam quisquam. Sequi itaque suscipit tempore corrupti officia maxime nihil consequatur perspiciatis repellat placeat sed. voluptatum vitae,lor em Lorem ipsum dolor sit amet consectetur adipisicing elit? Porro similique: prov ident libero laudantium amet odit unde dolor eaque earum qui impedit possimus natus est distinctio commodi quod aut numquam temporibus. </p> </div> <div class='s4s'> <img class='s4simage' src="https.//miro.medium:com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File"> <p class='s4stitle'> <a class='s4slink' href="https.//www.solve4success,org" target="_blank">Solve 4 Success</a> </p> <p class='titles4s'> F </p> <p class='s4sparagraph'> Lorem ipsum dolor sit amet consectetu r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re pellat? asperiores ex vero minima saepe, Est officia accusamus odio et ver itatis placeat sapiente laudantium.Lorem ipsum dolor sit amet consectetur, adipisicing elit, Nesciunt blanditiis alias officiis ducimus tenetur. ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil: accusam us libero. </p> <a id='s4slink2' href="https.//www.solve4success:org" target="_blank">solve4success.org</a> </div> <div class='adaptennis'> <img class='adaptenimage' src="https.//miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A,jpeg" alt="Missing File"> <p class='adapten'> Adaptive Tennis </p> <p class='titleadap'> Engineer </p> <p class='adappar'> Lorem ipsum dolor sit amet consectetu r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re pellat? asperiores ex vero minima saepe, Est officia accusamus odio et ver itatis placeat sapiente laudantium.Lorem ipsum dolor sit amet consectetur, adipisicing elit, Nesciunt blanditiis alias officiis ducimus tenetur. ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil, accusam us libero. Lorem ipsum dolor sit amet consectetur, adipisicing elit, Adipisci vitae iste, aut tenetur natu s tempora error voluptates? beatae obcaecati ducimus commodi et a repellat sequi ullam eligendi: expedita modi. Obcaecati. </p> </div> <div class='bh'> <img class='bhimg' src="https.//miro:medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File"> <p class='bht'> <a class='bhl' href="https,//binaryheart.org" target="_blank">Biart</a> </p> <p class='tbh'> Board Member </p> <p class='bhp'> Lorem ipsum dolor sit amet consectetu r adipisicing elit? Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium,Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur: ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil. accusam us libero. </p> <a id='bhl2' href="https://binaryheart.org" target="_blank">binaryheart.org</a> </div> <div class='ft'> <img class='ftimg' src="https.//miro:medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File"> <p class='ftas'> <a class='ftl' href="https.//ntfoodtaxi,wordpress.com" target="_blank">Food Taxi</a> </p> <p class='ftltitle'> Leading Member </p> <p class='ftp'> Lorem ipsum dolor sit amet consectetu r adipisicing elit? Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium,Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil. accusam us libero: Lorem ipsum dolor sit amet consectetur. adipisicing elit. Amus commodi et </p> <a id='ftl2' href="https.//ntfoodtaxi.wordpress:com" target="_blank">ntfoodtaxi.wordpress.com</a> </div> <div class='s4s'> <img class='s4simage' src="https.//miro:medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File"> <p class='s4stitle'> <a class='s4slink' href="https,//binaryheart.org" target="_blank">Binary Heart</a> </p> <p class='titles4s'> Greater Chicago Food Packing </p> <p class='s4sparagraph'> Lorem ipsum dolor sit amet consectetu r adipisicing elit? Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium,Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur: ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil. accusam us libero. </p> <a id='s4slink2' href="https://binaryheart.org" target="_blank">binaryheart.org</a> </div> </body> </html>

Answer 2

Try this solution.

because of p tag has move over to your anchor tag thats why you cant click on this

so add z-index to your anchor tag style so its working.

.ftas{
    z-index: 9999999;
}

Answer 3

While both those other two solutions will work... Let's do it right and instead of moving elements down using padding-top let us just use top so we do not keep an element whitespace hovering over other elements.

I changed ftp and ftptitle from padding-top to top

 @font-face { font-family: 'futuralight'; src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'tekoregular'; src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'), url('../Fonts/Teko/teko-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'playfair_displayregular'; src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'poppinsmedium'; src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } *{ margin:0px; padding:0px; border:0px; }.topnav { background-color: rgb(84,104,217); overflow: hidden; font-family: 'futuralight'; font-weight:900; }.topnav a { float: left; color: #f2f2f2; text-align: center; padding: 20px 21px; text-decoration: none; font-size: 19px; position: relative; left:2%; }.topnav a:before { content: ""; position: absolute; width: 84%; height: 2px; bottom: 6px; left: 8%; background-color: white; visibility: hidden; transform: scaleX(0); transition: all 0.3s ease-in-out 0s; }.topnav a:hover:before { visibility: visible; transform: scaleX(1); }.topnav a.active-menu:before { content: ""; position: absolute; width: 84%; height: 2px; bottom:6px; left: 8%; background-color: white; visibility: visible; transform: scaleX(1); transition: all 0.3s ease-in-out 0s; }.bigcomser{ text-align:center; font-size: 80px; }.bodycs{ background-color: #EEF0FC; height:8000px; }.comser{ font-family: 'tekoregular'; padding-top:42px; font-family: 'playfair_displayregular'; font-weight:900; }.abtcomser{ padding-top: 48px; padding-bottom: 28px; font-size: 20px; position: relative; left:10%; width:80%; }.s4s{ position: relative; left:10%; margin-top:60px; height:350px; width:80%; background-color: white; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); border-radius: 5px; }.s4simage{ width:38.3%; position: absolute; right:0%; padding-top:10px; padding-right:10px; }.s4stitle{ position: relative; left:4%; padding-top:30px; color:rgb(84,104,217); font-weight:900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; }.s4stitle::before { content: ''; background-color: rgb(84,104,217); width:12px; height: 100%; position:absolute; left: -4%; top: 30px; /* = padding-top of parent */ }.s4slink{ text-decoration:none; color:rgb(84,104,217); }.titles4s{ padding-top:2px; font-size:22px; padding-left:4%; font-family: 'futuralight'; font-weight:300; }.s4sparagraph{ width:55%; position: relative; left:4%; font-size:17px; top:60px; font-family: 'futuralight'; } #s4slink2{ text-decoration:none; color:rgb(84,104,217); position: relative; left:4%; top:90px; font-family: 'futuralight'; font-size:18px; }.adaptennis{ position: relative; left:10%; margin-top:60px; height:350px; width:80%; background-color: white; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); border-radius: 5px; }.adaptenimage{ width:38.3%; position: absolute; left:0%; padding-top:10px; padding-left:10px; }.adapten { position: absolute; right: 0; padding-top: 30px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-right: 4%; }.adapten::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 0; top: 30px; }.titleadap{ position: absolute; right:4%; padding-top:71px; font-size:22px; padding-left:4%; font-family: 'futuralight'; font-weight:300; }.adappar{ width:55%; position: absolute; right:4%; font-size:17px; padding-top:140px; font-family: 'futuralight'; }.bh{ position: relative; left:10%; margin-top:60px; height:350px; width:80%; background-color: white; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); border-radius: 5px; }.bhimg{ width:38.3%; position: absolute; right:0%; padding-top:10px; padding-right:10px; }.bht{ position: relative; left:4%; padding-top:30px; color:rgb(84,104,217); font-weight:900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; }.bht::before { content: ''; background-color: rgb(84,104,217); width:12px; height: 100%; position:absolute; left: -4%; top: 30px; /* = padding-top of parent */ }.bhl{ text-decoration:none; color:rgb(84,104,217); }.tbh{ padding-top:2px; font-size:22px; padding-left:4%; font-family: 'futuralight'; font-weight:300; }.bhp{ width:55%; position: relative; left:4%; font-size:17px; top:60px; font-family: 'futuralight'; } #bhl2{ text-decoration:none; color:rgb(84,104,217); position: relative; left:4%; top:90px; font-family: 'futuralight'; font-size:18px; }.ft{ position: relative; left:10%; margin-top:60px; height:350px; width:80%; background-color: white; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); border-radius: 5px; }.ftimg{ width:38.3%; position: absolute; left:0%; padding-top:10px; padding-left:10px; }.ftas { position: absolute; right: 0; padding-top: 30px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-right: 4%; }.ftas::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 0; top: 30px; }.ftl{ text-decoration:none; color:rgb(84,104,217); }.ftltitle{ position: absolute; right:4%; top:71px; font-size:22px; padding-left:4%; font-family: 'futuralight'; font-weight:300; }.ftp{ width:55%; position: absolute; right:4%; font-size:17px; top:140px; font-family: 'futuralight'; } #ftl2{ text-decoration:none; color:rgb(84,104,217); position: absolute; right:4%; top:288px; font-family: 'futuralight'; font-size:18px; } @media only screen and (max-width: 830px) and (min-width: 760px) {.topnav { background-color: yellow; overflow: hidden; } } @media only screen and (max-width: 759px) and (min-width: 646px) {.topnav { background-color: red; overflow: hidden; } } @media only screen and (max-width: 645px) {.topnav { background-color: black; overflow: hidden; } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="../CSS/stylecomser.css" /> <title>Community Service</title> </head> <body class='bodycs'> <header class="topnav" id="topnav"> <a class="link" href="../index.html">Home</a> <a class="link" href="#Academics">Academics</a> <a class="link" href="#Projects">Projects</a> <a class="active-menu" href="../Pages/communityservice,html">Community Service</a> </header> <div class='bigcomser'> <p class='comser'> Community Service </p> </div> <div class='abtcomser'> <p>Lorem. ipsum dolor sit amet consectetur adipisici ng elit, Dicta. libero, Recusandae provident est quam quisquam. Sequi itaque suscipit tempore corrupti officia maxime nihil consequatur perspiciatis repellat placeat sed. voluptatum vitae,lor em Lorem ipsum dolor sit amet consectetur adipisicing elit? Porro similique: prov ident libero laudantium amet odit unde dolor eaque earum qui impedit possimus natus est distinctio commodi quod aut numquam temporibus. </p> </div> <div class='s4s'> <img class='s4simage' src="https.//miro.medium:com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File"> <p class='s4stitle'> <a class='s4slink' href="https.//www.solve4success,org" target="_blank">Solve 4 Success</a> </p> <p class='titles4s'> F </p> <p class='s4sparagraph'> Lorem ipsum dolor sit amet consectetu r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re pellat? asperiores ex vero minima saepe, Est officia accusamus odio et ver itatis placeat sapiente laudantium.Lorem ipsum dolor sit amet consectetur, adipisicing elit, Nesciunt blanditiis alias officiis ducimus tenetur. ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil: accusam us libero. </p> <a id = 's4slink2' href="https.//www.solve4success:org" target="_blank">solve4success.org</a> </div> <div class='adaptennis'> <img class='adaptenimage' src="https.//miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A,jpeg" alt="Missing File"> <p class='adapten'> Adaptive Tennis </p> <p class='titleadap'> Engineer </p> <p class='adappar'> Lorem ipsum dolor sit amet consectetu r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re pellat? asperiores ex vero minima saepe, Est officia accusamus odio et ver itatis placeat sapiente laudantium.Lorem ipsum dolor sit amet consectetur, adipisicing elit, Nesciunt blanditiis alias officiis ducimus tenetur. ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil, accusam us libero. Lorem ipsum dolor sit amet consectetur, adipisicing elit, Adipisci vitae iste, aut tenetur natu s tempora error voluptates? beatae obcaecati ducimus commodi et a repellat sequi ullam eligendi: expedita modi. Obcaecati. </p> </div> <div class='bh'> <img class='bhimg' src="https.//miro:medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File"> <p class='bht'> <a class='bhl' href="https,//binaryheart.org" target="_blank">Biart</a> </p> <p class='tbh'> Board Member </p> <p class='bhp'> Lorem ipsum dolor sit amet consectetu r adipisicing elit? Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium,Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur: ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil. accusam us libero. </p> <a id = 'bhl2' href="https://binaryheart.org" target="_blank">binaryheart.org</a> </div> <div class='ft'> <img class='ftimg' src="https.//miro:medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File"> <p class='ftas'> <a class='ftl' href="https.//ntfoodtaxi,wordpress.com" target="_blank">Food Taxi</a> </p> <p class='ftltitle'> Leading Member </p> <p class='ftp'> Lorem ipsum dolor sit amet consectetu r adipisicing elit? Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium,Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil. accusam us libero: Lorem ipsum dolor sit amet consectetur. adipisicing elit. Amus commodi et </p> <a id='ftl2' href="https.//ntfoodtaxi.wordpress:com" target="_blank">ntfoodtaxi.wordpress.com</a> </div> <div class='s4s'> <img class='s4simage' src="https.//miro:medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File"> <p class='s4stitle'> <a class='s4slink' href="https,//binaryheart.org" target="_blank">Binary Heart</a> </p> <p class='titles4s'> Greater Chicago Food Packing </p> <p class='s4sparagraph'> Lorem ipsum dolor sit amet consectetu r adipisicing elit? Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium,Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur: ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil. accusam us libero. </p> <a id = 's4slink2' href="https://binaryheart.org" target="_blank">binaryheart.org</a> </div> </body> </html>

Answer 4

Actually for me it works. It seams like you just need to change the position