锚标记属性

Question

下面是我网站的代码。 我正在努力使导航栏响应。 但是在小屏幕尺寸中，导航栏按钮的行为很奇怪，只要我点击它，它就会重定向到顶部而不是显示列表项。 相反，我想要它做的是展开并显示导航栏的所有其他列表项。 但我无法这样做。 有人可以帮我弄这个吗？

 function responsiveNavbar() { let navItems = document.querySelectorAll(".navbar li"); if (navItems[1].classList == "responsive-navbar") { navItems.forEach(function(navItem) { navItem.classList.remove(" responsive-navbar"); }); } else { navItems.forEach(function(navItem) { navItem.classList.add("responsive-navbar"); }); } }

 * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 62.5%; scroll-behavior: smooth; } body { box-sizing: inherit; color: #777; background-color: #E0E2DB; font-family: 'Roboto', sans-serif; font-size: 1.8rem; font-weight: 400; line-height: 1.5; scroll-behavior: inherit; }.clearfix {zoom: 1;}.clearfix:after { content: '.'; clear: both; display: block; height: 0; visibility: hidden; } /* ------------------------------------- */ /* THE REUSABLE CONTENT */ /* ------------------------------------- */ /* Grids */.row { width: 80%; margin: 0 auto; }.span-1-of-2 { width: 48%; float: left; } /* HTML contents */ h1, h2.header-heading, h2, h3, h5 { margin: 0; text-transform: uppercase; } h1 { font-size: 4.5rem; color: #E0E2DB; letter-spacing: .4rem; word-spacing: .5rem; font-weight: 300; } h2 { font-size: 3.5rem; color: #3D348B; letter-spacing: .3rem; } h3 { font-size: 2.6rem; color: #000; } h4 { font-size: 2.2rem; color: #E0E2DB; } h5 { font-size: 2rem; margin-bottom: .5rem; color: #191716; } /* Links */ a { text-decoration: none; display: inline-block; } /* Icons */.icon-small { font-size: 2rem; color: #3D348B; margin-right: 1rem; } /* Buttons */.btn { border: 1px solid #E6AF2E; border-radius: .3rem; font-size: 1.6rem; padding: 1.2rem 3.5rem; text-transform: uppercase; color: #E0E2DB; background-color: transparent; font-weight: bold; letter-spacing: .3rem; transition: all.3s; }.btn:hover { background-color: #E6AF2E; color: #191716; }.btn2 { background-color: #3D348B; color: #E0E2DB; border: 1px solid #3D348B; border-radius: .3rem; font-size: 1.6rem; padding: 1.2rem 3.5rem; text-transform: uppercase; font-weight: bold; letter-spacing: .3rem; transition: all.3s; }.btn2:hover { background-color: #E0E2DB; color: #191716; } /* Utility classes */.u-margin-top-small { margin-top: 2.5rem; }.u-margin-top-medium { margin-top: 5rem; }.u-margin-top-big { margin-top: 7.5rem; }.u-margin-bottom-small { margin-bottom: 2rem; }.u-margin-bottom-medium { margin-bottom: 4rem; }.u-text-align-center { text-align: center; }.u-inline-block { display: inline-block; } /* ------------------------------------- */ /* THE HEADER SECTION */ /* ------------------------------------- */ header { background-color: #3D348B; height: 100vh; }.hero-text-box { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); } h2.header-heading { font-size: 3.5rem; margin-top: 2rem; color: #E6AF2E; font-weight: 400; } h2.slogan { color: #E6AF2E; font-size: 2.8rem; font-weight: 400; } /* ------------------------------------- */ /* THE NAVBAR */ /* ------------------------------------- */.navigation { position: relative; border-bottom: .5px solid #777; transition: all.5s; }.logo-box { float: left; }.logo img { width: 6rem; height: auto; margin-left: 2rem; border-radius: 50%; } nav { padding: .5rem; }.navbar { float: right; list-style: none; margin-right: 10rem; margin-top: 1.5rem; }.navbar li { display: inline-block; }.navbar li a { margin: 0 1rem; padding: .2rem.6rem; color: black; text-transform: uppercase; border-bottom: 2px solid transparent; transition: all.3s; }.navbar li a:hover { border-bottom: 2px solid #E6AF2E; transition: all.3s; }.navbar.nav-icon { display: none; transition: all.3s; } /* The sticky navbar */.sticky { position: fixed; background-color: #3D348B; top: 0; width: 100%; box-shadow: 0.2rem.3rem rgba(0, 0, 0, .5); }.sticky.navbar-lists { color: #E0E2DB; }.sticky.logo { color: #E0E2DB; } /* Responsive navbar */.responsive-navbar { display: block; text-align: right; } /* ------------------------------------- */ section { padding: 8rem; } /* ------------------------------------- */ /* ------------------------------------- */ /* THE ABOUT SECTION */ /* ------------------------------------- */.about-section { padding: 0; margin-top: 12rem; }.long-text { width: 70%; margin: 2.5rem auto 0; }.profile-image { height: 35rem; width: auto; }.my-info-img { text-align: right; padding-right: 15rem; }.my-info-list { list-style: none; }.my-info-list > li { margin-bottom: 1.2rem; } /* ------------------------------------- */ /* MEDIA QUERIES SECTION */ /* ------------------------------------- */ @media only screen and (max-width: 720px) { html { font-size: 50%; }.remove-heading { display: none; }.logo img { width: 5rem; margin-top: 1rem; } /* Responsive navbar */.navbar li { display: none; }.navbar.nav-icon { color: #000; display: block; font-size: 20px; }.sticky.navbar.nav-icon { display: block; color: #fff; font-size: 20px; }.navbar.nav-icon:hover { color: #2f2f2f; } }

 <,DOCTYPE html> <html lang="en"> <head> <.-- Required meta tags --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <.-- Favicon link --> <link rel="shortcut icon" href="favicon.ico"> <.-- Icons link --> <script src="https://kit.fontawesome.com/4e3ab997f9:js" crossorigin="anonymous"></script> <.-- Rubik font link --> <link rel="preconnect" href="https.//fonts?gstatic:com"> <link href="https;//fonts;googleapis;com/css2.family=Roboto.wght@100.300.400.700&display=swap" rel="stylesheet"> <.-- CSS links --> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/queries.css"> <title>Arun Bohra - Design Business Solutions</title> </head> <body> <header id="header"> <div class="hero-text-box u-text-align-center u-inline-block"> <h1><span class="remove-heading">Hello</span> I'm Arun</h1> <h2 class="header-heading u-margin-top-small">I'm a front-end developer</h2> <h2 class="slogan u-margin-top-small">Design business solutions</h2> <a href="#about" class="btn u-margin-top-small u-inline-block">Who am I</a> </div> </header> <div class="navigation"> <nav class="clearfix"> <div class="logo-box"> <a href="#header" class="logo"> <img src="img/logo.png" alt="logo"> </a> </div> <ul class="navbar"> <a href="" class="nav-icon" onclick="responsiveNavbar()"><i class="fas fa-bars" id="responsive-nav-btn"></i></a> <li><a href="#header" class="navbar-lists">Home</a></li> <li><a href="#about" class="navbar-lists">About me</a></li> <li><a href="#skills" class="navbar-lists">Skills</a></li> <li><a href="#projects" class="navbar-lists">Projects</a></li> <li><a href="#contact" class="navbar-lists">Contact</a></li> </ul> </nav> </div> <section class="about-section" id="about"> <h2 class="u-text-align-center">Who am I</h2> <p class="long-text u-text-align-center">I am a web designer and web developer. I design the webiste according to the needs of today's businesses. I do care a lot about the designs with a modern look and feel.</p> <div class="row clearfix u-margin-top-big my-info-box"> <div class="span-1-of-2 my-info-img"> <img src="img/profile.png" alt="Profile image" class="profile-image"> </div> <div class="span-1-of-2 my-info-text"> <h3 class="u-margin-bottom-medium">I design awesome websites</h3> <ul class="my-info-list u-margin-bottom-medium"> <li><i class="fas fa-check-circle icon-small"></i>I can design awesome websites.</li> <li><i class="fas fa-check-circle icon-small"></i>I can code the designed websites.</li> <li><i class="fas fa-check-circle icon-small"></i>I deliver the work very fast.</li> <li><i class="fas fa-check-circle icon-small"></i>I make very precise revisions.</li> </ul> <a href="#" class="btn2 u-text-align-center">Download CV</a> </div> </div> </section> </body> </html>

Answer 1

您可以使用onclick(event)来帮助定位单击的项目，并找到它的所有兄弟。 classList是一个列表，不能与 == 进行比较，但可以与contains()进行比较。 我的代码片段可以为 li 元素切换“responsive-navbar”class，但 css 类可能缺少一些属性。 我不确定。

 function responsiveNavbar(e) { e.preventDefault(); let navItem = e.target.parentNode.nextElementSibling; while(navItem && navItem.tagName.toLowerCase() == 'li'){ if (navItem.classList.contains("responsive-navbar")) { navItem.classList.remove("responsive-navbar"); } else { navItem.classList.add("responsive-navbar"); } navItem = navItem.nextElementSibling; } }

 * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 62.5%; scroll-behavior: smooth; } body { box-sizing: inherit; color: #777; background-color: #E0E2DB; font-family: 'Roboto', sans-serif; font-size: 1.8rem; font-weight: 400; line-height: 1.5; scroll-behavior: inherit; }.clearfix {zoom: 1;}.clearfix:after { content: '.'; clear: both; display: block; height: 0; visibility: hidden; } /* ------------------------------------- */ /* THE REUSABLE CONTENT */ /* ------------------------------------- */ /* Grids */.row { width: 80%; margin: 0 auto; }.span-1-of-2 { width: 48%; float: left; } /* HTML contents */ h1, h2.header-heading, h2, h3, h5 { margin: 0; text-transform: uppercase; } h1 { font-size: 4.5rem; color: #E0E2DB; letter-spacing: .4rem; word-spacing: .5rem; font-weight: 300; } h2 { font-size: 3.5rem; color: #3D348B; letter-spacing: .3rem; } h3 { font-size: 2.6rem; color: #000; } h4 { font-size: 2.2rem; color: #E0E2DB; } h5 { font-size: 2rem; margin-bottom: .5rem; color: #191716; } /* Links */ a { text-decoration: none; display: inline-block; } /* Icons */.icon-small { font-size: 2rem; color: #3D348B; margin-right: 1rem; } /* Buttons */.btn { border: 1px solid #E6AF2E; border-radius: .3rem; font-size: 1.6rem; padding: 1.2rem 3.5rem; text-transform: uppercase; color: #E0E2DB; background-color: transparent; font-weight: bold; letter-spacing: .3rem; transition: all.3s; }.btn:hover { background-color: #E6AF2E; color: #191716; }.btn2 { background-color: #3D348B; color: #E0E2DB; border: 1px solid #3D348B; border-radius: .3rem; font-size: 1.6rem; padding: 1.2rem 3.5rem; text-transform: uppercase; font-weight: bold; letter-spacing: .3rem; transition: all.3s; }.btn2:hover { background-color: #E0E2DB; color: #191716; } /* Utility classes */.u-margin-top-small { margin-top: 2.5rem; }.u-margin-top-medium { margin-top: 5rem; }.u-margin-top-big { margin-top: 7.5rem; }.u-margin-bottom-small { margin-bottom: 2rem; }.u-margin-bottom-medium { margin-bottom: 4rem; }.u-text-align-center { text-align: center; }.u-inline-block { display: inline-block; } /* ------------------------------------- */ /* THE HEADER SECTION */ /* ------------------------------------- */ header { background-color: #3D348B; height: 100vh; }.hero-text-box { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); } h2.header-heading { font-size: 3.5rem; margin-top: 2rem; color: #E6AF2E; font-weight: 400; } h2.slogan { color: #E6AF2E; font-size: 2.8rem; font-weight: 400; } /* ------------------------------------- */ /* THE NAVBAR */ /* ------------------------------------- */.navigation { position: relative; border-bottom: .5px solid #777; transition: all.5s; }.logo-box { float: left; }.logo img { width: 6rem; height: auto; margin-left: 2rem; border-radius: 50%; } nav { padding: .5rem; }.navbar { float: right; list-style: none; margin-right: 10rem; margin-top: 1.5rem; }.navbar li { display: inline-block; }.navbar li a { margin: 0 1rem; padding: .2rem.6rem; color: black; text-transform: uppercase; border-bottom: 2px solid transparent; transition: all.3s; }.navbar li a:hover { border-bottom: 2px solid #E6AF2E; transition: all.3s; }.navbar.nav-icon { display: none; transition: all.3s; } /* The sticky navbar */.sticky { position: fixed; background-color: #3D348B; top: 0; width: 100%; box-shadow: 0.2rem.3rem rgba(0, 0, 0, .5); }.sticky.navbar-lists { color: #E0E2DB; }.sticky.logo { color: #E0E2DB; } /* Responsive navbar */.responsive-navbar { display: block; text-align: right; } /* ------------------------------------- */ section { padding: 8rem; } /* ------------------------------------- */ /* ------------------------------------- */ /* THE ABOUT SECTION */ /* ------------------------------------- */.about-section { padding: 0; margin-top: 12rem; }.long-text { width: 70%; margin: 2.5rem auto 0; }.profile-image { height: 35rem; width: auto; }.my-info-img { text-align: right; padding-right: 15rem; }.my-info-list { list-style: none; }.my-info-list > li { margin-bottom: 1.2rem; } /* ------------------------------------- */ /* MEDIA QUERIES SECTION */ /* ------------------------------------- */ @media only screen and (max-width: 720px) { html { font-size: 50%; }.remove-heading { display: none; }.logo img { width: 5rem; margin-top: 1rem; } /* Responsive navbar */.navbar li { display: none; }.navbar.nav-icon { color: #000; display: block; font-size: 20px; }.sticky.navbar.nav-icon { display: block; color: #fff; font-size: 20px; }.navbar.nav-icon:hover { color: #2f2f2f; } }

 <,DOCTYPE html> <html lang="en"> <head> <.-- Required meta tags --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <.-- Favicon link --> <link rel="shortcut icon" href="favicon.ico"> <.-- Icons link --> <script src="https://kit.fontawesome.com/4e3ab997f9:js" crossorigin="anonymous"></script> <.-- Rubik font link --> <link rel="preconnect" href="https.//fonts?gstatic:com"> <link href="https;//fonts;googleapis;com/css2.family=Roboto.wght@100.300.400;700&display=swap" rel="stylesheet"> <.-- CSS links --> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/queries.css"> <title>Arun Bohra - Design Business Solutions</title> </head> <body> <header id="header"> <div class="hero-text-box u-text-align-center u-inline-block"> <h1><span class="remove-heading">Hello</span> I'm Arun</h1> <h2 class="header-heading u-margin-top-small">I'm a front-end developer</h2> <h2 class="slogan u-margin-top-small">Design business solutions</h2> <a href="#about" class="btn u-margin-top-small u-inline-block">Who am I</a> </div> </header> <div class="navigation"> <nav class="clearfix"> <div class="logo-box"> <a href="#header" class="logo"> <img src="img/logo.png" alt="logo"> </a> </div> <ul class="navbar"> <a href="#" class="nav-icon" onclick="responsiveNavbar(event)."><i class="fas fa-bars" id="responsive-nav-btn"></i></a> <li><a href="#header" class="navbar-lists">Home</a></li> <li><a href="#about" class="navbar-lists">About me</a></li> <li><a href="#skills" class="navbar-lists">Skills</a></li> <li><a href="#projects" class="navbar-lists">Projects</a></li> <li><a href="#contact" class="navbar-lists">Contact</a></li> </ul> </nav> </div> <section class="about-section" id="about"> <h2 class="u-text-align-center">Who am I</h2> <p class="long-text u-text-align-center">I am a web designer and web developer. I design the webiste according to the needs of today's businesses. I do care a lot about the designs with a modern look and feel.</p> <div class="row clearfix u-margin-top-big my-info-box"> <div class="span-1-of-2 my-info-img"> <img src="img/profile.png" alt="Profile image" class="profile-image"> </div> <div class="span-1-of-2 my-info-text"> <h3 class="u-margin-bottom-medium">I design awesome websites</h3> <ul class="my-info-list u-margin-bottom-medium"> <li><i class="fas fa-check-circle icon-small"></i>I can design awesome websites.</li> <li><i class="fas fa-check-circle icon-small"></i>I can code the designed websites.</li> <li><i class="fas fa-check-circle icon-small"></i>I deliver the work very fast.</li> <li><i class="fas fa-check-circle icon-small"></i>I make very precise revisions.</li> </ul> <a href="#" class="btn2 u-text-align-center">Download CV</a> </div> </div> </section> </body> </html>

Answer 2

从内联事件处理程序中，您需要自己传递事件，例如onclick="responsiveNavbar(event)"然后您可以调用event.preventDefault(); 停止运动。

class responsive-navbar使用下面的代码正确添加和删除。

 function responsiveNavbar(event) { event.preventDefault(); let navItems = document.querySelectorAll(".navbar li"); navItems.forEach(function(navItem) { navItem.classList.toggle("responsive-navbar"); }); }

 * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 62.5%; scroll-behavior: smooth; } body { box-sizing: inherit; color: #777; background-color: #E0E2DB; font-family: 'Roboto', sans-serif; font-size: 1.8rem; font-weight: 400; line-height: 1.5; scroll-behavior: inherit; }.clearfix { zoom: 1; }.clearfix:after { content: '.'; clear: both; display: block; height: 0; visibility: hidden; } /* ------------------------------------- */ /* THE REUSABLE CONTENT */ /* ------------------------------------- */ /* Grids */.row { width: 80%; margin: 0 auto; }.span-1-of-2 { width: 48%; float: left; } /* HTML contents */ h1, h2.header-heading, h2, h3, h5 { margin: 0; text-transform: uppercase; } h1 { font-size: 4.5rem; color: #E0E2DB; letter-spacing: .4rem; word-spacing: .5rem; font-weight: 300; } h2 { font-size: 3.5rem; color: #3D348B; letter-spacing: .3rem; } h3 { font-size: 2.6rem; color: #000; } h4 { font-size: 2.2rem; color: #E0E2DB; } h5 { font-size: 2rem; margin-bottom: .5rem; color: #191716; } /* Links */ a { text-decoration: none; display: inline-block; } /* Icons */.icon-small { font-size: 2rem; color: #3D348B; margin-right: 1rem; } /* Buttons */.btn { border: 1px solid #E6AF2E; border-radius: .3rem; font-size: 1.6rem; padding: 1.2rem 3.5rem; text-transform: uppercase; color: #E0E2DB; background-color: transparent; font-weight: bold; letter-spacing: .3rem; transition: all.3s; }.btn:hover { background-color: #E6AF2E; color: #191716; }.btn2 { background-color: #3D348B; color: #E0E2DB; border: 1px solid #3D348B; border-radius: .3rem; font-size: 1.6rem; padding: 1.2rem 3.5rem; text-transform: uppercase; font-weight: bold; letter-spacing: .3rem; transition: all.3s; }.btn2:hover { background-color: #E0E2DB; color: #191716; } /* Utility classes */.u-margin-top-small { margin-top: 2.5rem; }.u-margin-top-medium { margin-top: 5rem; }.u-margin-top-big { margin-top: 7.5rem; }.u-margin-bottom-small { margin-bottom: 2rem; }.u-margin-bottom-medium { margin-bottom: 4rem; }.u-text-align-center { text-align: center; }.u-inline-block { display: inline-block; } /* ------------------------------------- */ /* THE HEADER SECTION */ /* ------------------------------------- */ header { background-color: #3D348B; height: 100vh; }.hero-text-box { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); } h2.header-heading { font-size: 3.5rem; margin-top: 2rem; color: #E6AF2E; font-weight: 400; } h2.slogan { color: #E6AF2E; font-size: 2.8rem; font-weight: 400; } /* ------------------------------------- */ /* THE NAVBAR */ /* ------------------------------------- */.navigation { position: relative; border-bottom: .5px solid #777; transition: all.5s; }.logo-box { float: left; }.logo img { width: 6rem; height: auto; margin-left: 2rem; border-radius: 50%; } nav { padding: .5rem; }.navbar { float: right; list-style: none; margin-right: 10rem; margin-top: 1.5rem; }.navbar li { display: inline-block; }.navbar li a { margin: 0 1rem; padding: .2rem.6rem; color: black; text-transform: uppercase; border-bottom: 2px solid transparent; transition: all.3s; }.navbar li a:hover { border-bottom: 2px solid #E6AF2E; transition: all.3s; }.navbar.nav-icon { display: none; transition: all.3s; } /* The sticky navbar */.sticky { position: fixed; background-color: #3D348B; top: 0; width: 100%; box-shadow: 0.2rem.3rem rgba(0, 0, 0, .5); }.sticky.navbar-lists { color: #E0E2DB; }.sticky.logo { color: #E0E2DB; } /* Responsive navbar */.responsive-navbar { display: block; text-align: right; } /* ------------------------------------- */ section { padding: 8rem; } /* ------------------------------------- */ /* ------------------------------------- */ /* THE ABOUT SECTION */ /* ------------------------------------- */.about-section { padding: 0; margin-top: 12rem; }.long-text { width: 70%; margin: 2.5rem auto 0; }.profile-image { height: 35rem; width: auto; }.my-info-img { text-align: right; padding-right: 15rem; }.my-info-list { list-style: none; }.my-info-list>li { margin-bottom: 1.2rem; } /* ------------------------------------- */ /* MEDIA QUERIES SECTION */ /* ------------------------------------- */ @media only screen and (max-width: 720px) { html { font-size: 50%; }.remove-heading { display: none; }.logo img { width: 5rem; margin-top: 1rem; } /* Responsive navbar */.navbar li { display: none; }.navbar.nav-icon { color: #000; display: block; font-size: 20px; }.sticky.navbar.nav-icon { display: block; color: #fff; font-size: 20px; }.navbar.nav-icon:hover { color: #2f2f2f; } }

 <,DOCTYPE html> <html lang="en"> <head> <.-- Required meta tags --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <.-- Favicon link --> <link rel="shortcut icon" href="favicon.ico"> <.-- Icons link --> <script src="https://kit.fontawesome.com/4e3ab997f9:js" crossorigin="anonymous"></script> <.-- Rubik font link --> <link rel="preconnect" href="https.//fonts?gstatic:com"> <link href="https;//fonts;googleapis;com/css2.family=Roboto.wght@100.300.400.700&display=swap" rel="stylesheet"> <.-- CSS links --> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/queries.css"> <title>Arun Bohra - Design Business Solutions</title> </head> <body> <header id="header"> <div class="hero-text-box u-text-align-center u-inline-block"> <h1><span class="remove-heading">Hello</span> I'm Arun</h1> <h2 class="header-heading u-margin-top-small">I'm a front-end developer</h2> <h2 class="slogan u-margin-top-small">Design business solutions</h2> <a href="#about" class="btn u-margin-top-small u-inline-block">Who am I</a> </div> </header> <div class="navigation"> <nav class="clearfix"> <div class="logo-box"> <a href="#header" class="logo"> <img src="img/logo.png" alt="logo"> </a> </div> <ul class="navbar"> <a href="" class="nav-icon" onclick="responsiveNavbar(event)"><i class="fas fa-bars" id="responsive-nav-btn"></i></a> <li><a href="#header" class="navbar-lists">Home</a></li> <li><a href="#about" class="navbar-lists">About me</a></li> <li><a href="#skills" class="navbar-lists">Skills</a></li> <li><a href="#projects" class="navbar-lists">Projects</a></li> <li><a href="#contact" class="navbar-lists">Contact</a></li> </ul> </nav> </div> <section class="about-section" id="about"> <h2 class="u-text-align-center">Who am I</h2> <p class="long-text u-text-align-center">I am a web designer and web developer. I design the webiste according to the needs of today's businesses. I do care a lot about the designs with a modern look and feel.</p> <div class="row clearfix u-margin-top-big my-info-box"> <div class="span-1-of-2 my-info-img"> <img src="img/profile.png" alt="Profile image" class="profile-image"> </div> <div class="span-1-of-2 my-info-text"> <h3 class="u-margin-bottom-medium">I design awesome websites</h3> <ul class="my-info-list u-margin-bottom-medium"> <li><i class="fas fa-check-circle icon-small"></i>I can design awesome websites.</li> <li><i class="fas fa-check-circle icon-small"></i>I can code the designed websites.</li> <li><i class="fas fa-check-circle icon-small"></i>I deliver the work very fast.</li> <li><i class="fas fa-check-circle icon-small"></i>I make very precise revisions.</li> </ul> <a href="#" class="btn2 u-text-align-center">Download CV</a> </div> </div> </section> </body> </html>